import React, { useState, useEffect } from 'react';

const columns = ['Active', 'Completed', 'Deferred', 'Cancelled'];

export default function TaskBoard() {
  const [tasks, setTasks] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadTasks();
  }, []);

  const loadTasks = async () => {
    setLoading(true);
    try {
      const result = await window.mcp.callTool('wrike_list_tasks', {});
      setTasks(result.tasks || []);
    } catch (error) {
      console.error('Failed to load tasks:', error);
    } finally {
      setLoading(false);
    }
  };

  const tasksByStatus = columns.reduce((acc, status) => {
    acc[status] = tasks.filter(t => t.status === status);
    return acc;
  }, {} as Record<string, any[]>);

  return (
    <div style={{ background: '#111827', color: '#f3f4f6', minHeight: '100vh', padding: '24px' }}>
      <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '24px' }}>Task Board</h1>
      
      {loading ? (
        <div>Loading...</div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px' }}>
          {columns.map(column => (
            <div key={column}>
              <div style={{ 
                background: '#1f2937', 
                padding: '12px', 
                borderRadius: '8px 8px 0 0', 
                fontWeight: 'bold',
                borderBottom: '2px solid #374151'
              }}>
                {column} ({tasksByStatus[column]?.length || 0})
              </div>
              <div style={{ display: 'grid', gap: '8px', marginTop: '8px' }}>
                {tasksByStatus[column]?.map(task => (
                  <div
                    key={task.id}
                    style={{
                      background: '#1f2937',
                      padding: '12px',
                      borderRadius: '6px',
                      border: '1px solid #374151',
                    }}
                  >
                    <div style={{ fontWeight: '600', marginBottom: '4px' }}>{task.title}</div>
                    <div style={{ fontSize: '12px', color: '#9ca3af' }}>{task.importance} Priority</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
