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

interface Task {
  id: string;
  title: string;
  status: string;
  importance: string;
  responsibleIds: string[];
  dates?: { start?: string; due?: string };
}

export default function TaskDashboard() {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState({ status: '', importance: '' });

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

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

  const getStatusColor = (status: string) => {
    const colors: Record<string, string> = {
      Active: '#3b82f6',
      Completed: '#10b981',
      Deferred: '#f59e0b',
      Cancelled: '#ef4444',
    };
    return colors[status] || '#6b7280';
  };

  return (
    <div style={{ 
      background: '#111827', 
      color: '#f3f4f6', 
      minHeight: '100vh', 
      padding: '24px',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
    }}>
      <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '24px' }}>
        Task Dashboard
      </h1>

      <div style={{ 
        display: 'flex', 
        gap: '16px', 
        marginBottom: '24px',
        flexWrap: 'wrap'
      }}>
        <select
          value={filter.status}
          onChange={(e) => setFilter({ ...filter, status: e.target.value })}
          style={{
            background: '#1f2937',
            color: '#f3f4f6',
            padding: '8px 12px',
            borderRadius: '6px',
            border: '1px solid #374151',
          }}
        >
          <option value="">All Status</option>
          <option value="Active">Active</option>
          <option value="Completed">Completed</option>
          <option value="Deferred">Deferred</option>
          <option value="Cancelled">Cancelled</option>
        </select>

        <select
          value={filter.importance}
          onChange={(e) => setFilter({ ...filter, importance: e.target.value })}
          style={{
            background: '#1f2937',
            color: '#f3f4f6',
            padding: '8px 12px',
            borderRadius: '6px',
            border: '1px solid #374151',
          }}
        >
          <option value="">All Importance</option>
          <option value="High">High</option>
          <option value="Normal">Normal</option>
          <option value="Low">Low</option>
        </select>

        <button
          onClick={loadTasks}
          style={{
            background: '#3b82f6',
            color: 'white',
            padding: '8px 16px',
            borderRadius: '6px',
            border: 'none',
            cursor: 'pointer',
          }}
        >
          Refresh
        </button>
      </div>

      {loading ? (
        <div style={{ textAlign: 'center', padding: '48px' }}>Loading tasks...</div>
      ) : (
        <div style={{ display: 'grid', gap: '16px' }}>
          {tasks.map((task) => (
            <div
              key={task.id}
              style={{
                background: '#1f2937',
                padding: '16px',
                borderRadius: '8px',
                border: '1px solid #374151',
              }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                <div>
                  <h3 style={{ fontSize: '18px', fontWeight: '600', marginBottom: '8px' }}>
                    {task.title}
                  </h3>
                  <div style={{ display: 'flex', gap: '12px', fontSize: '14px' }}>
                    <span
                      style={{
                        padding: '4px 8px',
                        borderRadius: '4px',
                        background: getStatusColor(task.status) + '20',
                        color: getStatusColor(task.status),
                      }}
                    >
                      {task.status}
                    </span>
                    <span style={{ color: '#9ca3af' }}>
                      {task.importance} Priority
                    </span>
                  </div>
                </div>
                {task.dates?.due && (
                  <div style={{ fontSize: '14px', color: '#9ca3af' }}>
                    Due: {new Date(task.dates.due).toLocaleDateString()}
                  </div>
                )}
              </div>
            </div>
          ))}
          {tasks.length === 0 && (
            <div style={{ textAlign: 'center', padding: '48px', color: '#6b7280' }}>
              No tasks found
            </div>
          )}
        </div>
      )}
    </div>
  );
}
