import { Link } from 'react-router-dom';
import Layout from '../../components/Layout';
import StatusBadge from '../../components/StatusBadge';
import { mockProjects, mockTasks } from '../../data/mockData';

export default function Projects() {
  return (
    <Layout>
      <div className="page-header">
        <div>
          <div className="page-title">Projects</div>
          <div className="page-subtitle">All client engagements and their tasks.</div>
        </div>
      </div>

      <div className="table-wrapper">
        <table>
          <thead>
            <tr>
              <th>Project</th>
              <th>Client</th>
              <th>Company</th>
              <th>Jobs</th>
              <th>Status</th>
              <th>Created</th>
            </tr>
          </thead>
          <tbody>
            {mockProjects.map(project => {
              const tasks = mockTasks.filter(t => t.projectId === project.id);
              const activeTasks = tasks.filter(t => t.status !== 'approved');
              return (
                <tr key={project.id}>
                  <td>
                    <Link to={`/projects/${project.id}`} className="table-link">{project.name}</Link>
                  </td>
                  <td>
                    {project.clientName}
                    {!project.clientId && (
                      <span className="badge badge-not_started" style={{ marginLeft: 6, fontSize: 10 }}>Guest</span>
                    )}
                  </td>
                  <td style={{ color: 'var(--text-secondary)' }}>{project.company || '—'}</td>
                  <td>
                    <span style={{ fontWeight: 600 }}>{activeTasks.length}</span>
                    <span style={{ color: 'var(--text-muted)', fontSize: 12 }}> / {tasks.length} active jobs</span>
                  </td>
                  <td><StatusBadge status={project.status} /></td>
                  <td style={{ color: 'var(--text-secondary)' }}>{project.createdAt}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </Layout>
  );
}