import { useEffect, useMemo, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { Search } from 'lucide-react';
import PageHeader from '@/components/workshop/PageHeader';
import ProjectCard from '@/components/projects/ProjectCard';
import HideFictionalToggle from '@/components/workshop/HideFictionalToggle';
import { projectService } from '@/services/projectService';
import { customerService } from '@/services/customerService';
import { workshopService } from '@/services/workshopService';
export default function Projects() {
  const [params] = useSearchParams();
  const [projects, setProjects] = useState([]);
  const [customers, setCustomers] = useState([]);
  const [search, setSearch] = useState('');
  const [hideFictional, setHideFictional] = useState(true);
  const [status, setStatus] = useState('All');
  const load = () => { Promise.all([projectService.list(), customerService.list()]).then(([p, c]) => { setProjects(p); setCustomers(c); }); };
  useEffect(() => { load(); }, []);
  const cust = (uuid) => customers.find((c) => c.uuid === uuid);
  const statuses = useMemo(() => ['All', ...new Set((projects || []).map((p) => p.status).filter(Boolean))], [projects]);
  const shown = useMemo(() => {
    let list = hideFictional ? workshopService.hideFictional(projects) : projects;
    if (status !== 'All') list = list.filter((p) => p.status === status);
    if (params.get('status')) list = list.filter((p) => p.status === params.get('status'));
    if (params.get('active') === 'true') list = list.filter((p) => p.record_state !== 'archived' && p.status !== 'Complete');
    if (params.get('project')) list = list.filter((p) => p.uuid === params.get('project'));
    if (search.trim()) { const t = search.toLowerCase(); list = list.filter((p) => (p.project_id || '').toLowerCase().includes(t) || (cust(p.customer_uuid)?.full_name || '').toLowerCase().includes(t) || (p.prosthesis_configuration || '').toLowerCase().includes(t)); }
    return list;
  }, [projects, hideFictional, status, search, params, customers]);
  const toggle = async (p) => { p.record_state === 'archived' ? await projectService.restore(p) : await projectService.archive(p); load(); };
  return <><PageHeader eyebrow="Cover project register" title="Cover Projects" description="Every project keeps a stable portable identifier, revision and logical SHiREVault destination. Click any project to open the Designer workspace." /><div className="mb-5 flex flex-wrap items-center gap-2"><label className="relative block"><Search className="absolute left-3 top-3 h-4 w-4 text-slate-500" /><input className="workshop-input mt-0 pl-10" placeholder="Search project reference or customer" value={search} onChange={(e) => setSearch(e.target.value)} /></label><select className="workshop-input mt-0 max-w-xs" value={status} onChange={(e) => setStatus(e.target.value)}>{statuses.map((s) => <option key={s}>{s}</option>)}</select><HideFictionalToggle value={hideFictional} onChange={setHideFictional} /></div><div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">{shown.map((p) => <ProjectCard key={p.uuid} project={p} customer={cust(p.customer_uuid)} onToggle={toggle} />)}</div>{shown.length === 0 && <p className="mt-8 text-center text-sm text-slate-500">No projects match the current filter.</p>}</>;
}