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

export default function SprintBoard() {
  const [tasks, setTasks] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [sprintFilter, setSprintFilter] = useState('current');

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

  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 groupByImportance = () => {
    const groups: Record<string, any[]> = {
      High: [],
      Normal: [],
      Low: [],
    };
    tasks.forEach(task => {
      if (groups[task.importance]) {
        groups[task.importance].push(task);
      }
    });
    return groups;
  };

  const grouped = groupByImportance();

  return (
    <div style={{ background: '#111827', color: '#f3f4f6', minHeight: '100vh', padding: '24px' }}>
      <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '24px' }}>Sprint Board</h1>
      
      <div style={{ display: 'flex', gap: '12px', marginBottom: '24px' }}>
        <button
          onClick={loadTasks}
          style={{
            background: '#3b82f6',
            color: 'white',
            padding: '8px 16px',
            borderRadius: '6px',
            border: 'none',
            cursor: 'pointer',
          }}
        >
          Refresh
        </button>
        <select
          value={sprintFilter}
          onChange={(e) => setSprintFilter(e.target.value)}
          style={{
            background: '#1f2937',
            color: '#f3f4f6',
            padding: '8px 12px',
            borderRadius: '6px',
            border: '1px solid #374151',
          }}
        >
          <option value="current">Current Sprint</option>
          <option value="next">Next Sprint</option>
          <option value="backlog">Backlog</option>
        </select>
      </div>

      {loading ? (
        <div>Loading...</div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
          {Object.entries(grouped).map(([importance, tasks]) => (
            <div key={importance}>
              <div style={{
                background: '#1f2937',
                padding: '12px',
                borderRadius: '8px 8px 0 0',
                fontWeight: 'bold',
                borderBottom: '2px solid #374151',
              }}>
                {importance} Priority ({tasks.length})
              </div>
              <div style={{ display: 'grid', gap: '8px', marginTop: '8px' }}>
                {tasks.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.status}
                    </div>
                    {task.dates?.due && (
                      <div style={{ fontSize: '11px', color: '#9ca3af', marginTop: '4px' }}>
                        Due: {new Date(task.dates.due).toLocaleDateString()}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
