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

export default function ProjectGrid() {
  const [projects, setProjects] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

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

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

  return (
    <div style={{ background: '#111827', color: '#f3f4f6', minHeight: '100vh', padding: '24px' }}>
      <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '24px' }}>Project 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' }}>Start Date</th>
                <th style={{ padding: '12px', textAlign: 'left' }}>End Date</th>
              </tr>
            </thead>
            <tbody>
              {projects.map((project, idx) => (
                <tr key={project.id} style={{ borderBottom: '1px solid #374151', background: idx % 2 === 0 ? '#1f2937' : '#111827' }}>
                  <td style={{ padding: '12px' }}>{project.title}</td>
                  <td style={{ padding: '12px' }}>{project.project?.status || '-'}</td>
                  <td style={{ padding: '12px' }}>
                    {project.project?.startDate ? new Date(project.project.startDate).toLocaleDateString() : '-'}
                  </td>
                  <td style={{ padding: '12px' }}>
                    {project.project?.endDate ? new Date(project.project.endDate).toLocaleDateString() : '-'}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}
