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

export default function TaskGrid() {
  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);
    }
  };

  return (
    <div style={{ background: '#111827', color: '#f3f4f6', minHeight: '100vh', padding: '24px' }}>
      <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '24px' }}>Task Grid</h1>
      
      {loading ? (
        <div>Loading...</div>
      ) : (
        <div style={{ overflowX: 'auto' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ background: '#1f2937', borderBottom: '2px solid #374151' }}>
                <th style={{ padding: '12px', textAlign: 'left' }}>Title</th>
                <th style={{ padding: '12px', textAlign: 'left' }}>Status</th>
                <th style={{ padding: '12px', textAlign: 'left' }}>Importance</th>
                <th style={{ padding: '12px', textAlign: 'left' }}>Due Date</th>
              </tr>
            </thead>
            <tbody>
              {tasks.map((task, idx) => (
                <tr key={task.id} style={{ borderBottom: '1px solid #374151', background: idx % 2 === 0 ? '#1f2937' : '#111827' }}>
                  <td style={{ padding: '12px' }}>{task.title}</td>
                  <td style={{ padding: '12px' }}>{task.status}</td>
                  <td style={{ padding: '12px' }}>{task.importance}</td>
                  <td style={{ padding: '12px' }}>
                    {task.dates?.due ? new Date(task.dates.due).toLocaleDateString() : '-'}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}
