/**
 * Project Dashboard App - Overview of all projects
 */

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

interface Project {
  id: number;
  name: string;
  description: string;
  status: string;
  updated_at: string;
}

export function ProjectDashboard() {
  const [projects, setProjects] = useState<Project[]>([]);
  const [filter, setFilter] = useState<'active' | 'archived' | 'trashed'>('active');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulated data fetch - in production, call basecamp_projects_list
    setLoading(false);
    setProjects([
      { id: 1, name: 'Website Redesign', description: 'Q1 2024 redesign project', status: 'active', updated_at: '2024-01-15' },
      { id: 2, name: 'Mobile App', description: 'iOS and Android app development', status: 'active', updated_at: '2024-01-14' },
    ]);
  }, [filter]);

  return (
    <div style={{ padding: '20px', fontFamily: 'system-ui, sans-serif' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '20px' }}>Projects Dashboard</h1>
      
      <div style={{ marginBottom: '20px' }}>
        <button onClick={() => setFilter('active')} style={{ marginRight: '10px', padding: '8px 16px', background: filter === 'active' ? '#1d8cf8' : '#ccc', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          Active
        </button>
        <button onClick={() => setFilter('archived')} style={{ marginRight: '10px', padding: '8px 16px', background: filter === 'archived' ? '#1d8cf8' : '#ccc', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          Archived
        </button>
        <button onClick={() => setFilter('trashed')} style={{ padding: '8px 16px', background: filter === 'trashed' ? '#1d8cf8' : '#ccc', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
          Trashed
        </button>
      </div>

      {loading ? (
        <p>Loading projects...</p>
      ) : (
        <div style={{ display: 'grid', gap: '16px' }}>
          {projects.map((project) => (
            <div key={project.id} style={{ border: '1px solid #ddd', borderRadius: '8px', padding: '16px', background: 'white' }}>
              <h3 style={{ fontSize: '18px', marginBottom: '8px' }}>{project.name}</h3>
              <p style={{ color: '#666', marginBottom: '8px' }}>{project.description}</p>
              <p style={{ fontSize: '12px', color: '#999' }}>Updated: {project.updated_at}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
