import { useEffect, useMemo, useState } from 'react';
import { Search, Plus } from 'lucide-react';
import { Link } from 'react-router-dom';
import PageHeader from '@/components/workshop/PageHeader';
import StatusPill from '@/components/workshop/StatusPill';
import HideFictionalToggle from '@/components/workshop/HideFictionalToggle';
import LoadingPanel from '@/components/workshop/LoadingPanel';
import { quoteService } from '@/services/quoteService';
import { customerService } from '@/services/customerService';
import { projectService } from '@/services/projectService';
import { workshopService } from '@/services/workshopService';
const FILTERS = ['All', 'Draft', 'Sent', 'Awaiting approval', 'Approved', 'Declined', 'Expired', 'Archived'];
export default function Quotes() {
  const [quotes, setQuotes] = useState(null);
  const [customers, setCustomers] = useState([]);
  const [projects, setProjects] = useState([]);
  const [filter, setFilter] = useState('All');
  const [hideFictional, setHideFictional] = useState(true);
  const [search, setSearch] = useState('');
  useEffect(() => { Promise.all([quoteService.list(), customerService.list(), projectService.list()]).then(([q, c, p]) => { setQuotes(q); setCustomers(c); setProjects(p); }); }, []);
  const cust = (uuid) => customers.find((c) => c.uuid === uuid);
  const proj = (uuid) => projects.find((p) => p.uuid === uuid);
  const shown = useMemo(() => {
    if (!quotes) return [];
    let list = hideFictional ? workshopService.hideFictional(quotes) : quotes;
    if (filter === 'Archived') list = list.filter((q) => q.record_state === 'archived');
    else if (filter !== 'All') list = list.filter((q) => q.approval_status === filter);
    if (search.trim()) { const t = search.toLowerCase(); list = list.filter((q) => (q.quote_number || '').toLowerCase().includes(t) || (cust(q.customer_uuid)?.full_name || '').toLowerCase().includes(t) || (proj(q.project_uuid)?.project_id || '').toLowerCase().includes(t)); }
    return list;
  }, [quotes, filter, hideFictional, search, customers, projects]);
  if (!quotes) return <LoadingPanel />;
  return <><PageHeader eyebrow="Pricing register" title="Quotes" description="Quotes linked to cover projects. Open a quote from its project record." /><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 quotes…" value={search} onChange={(e) => setSearch(e.target.value)} /></label><select className="workshop-input mt-0 max-w-xs" value={filter} onChange={(e) => setFilter(e.target.value)}>{FILTERS.map((f) => <option key={f}>{f}</option>)}</select><HideFictionalToggle value={hideFictional} onChange={setHideFictional} /></div><div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">{shown.map((q) => <Link key={q.uuid} to={`/projects/${q.project_uuid}`} className="panel block p-5 transition hover:border-shire-purple/40"><div className="flex items-start justify-between gap-3"><div><p className="text-xs font-semibold text-violet-400">{q.quote_number}</p><h2 className="mt-1 font-semibold text-white">{cust(q.customer_uuid)?.full_name || 'Unknown'}</h2><p className="text-xs text-slate-500">{proj(q.project_uuid)?.project_id}</p></div><StatusPill tone={q.approval_status === 'Approved' ? 'green' : q.approval_status === 'Declined' || q.approval_status === 'Expired' ? 'red' : 'amber'}>{q.approval_status}</StatusPill></div><dl className="mt-3 grid grid-cols-2 gap-x-4 gap-y-1 text-sm text-slate-400"><dt className="text-slate-500">Amount</dt><dd>{q.amount != null ? `$${q.amount}` : '—'}</dd><dt className="text-slate-500">Funding</dt><dd>{q.funding_type || '—'}</dd><dt className="text-slate-500">Sent</dt><dd>{q.sent_date || '—'}</dd><dt className="text-slate-500">Expiry</dt><dd>{q.expiry_date || '—'}</dd></dl><span className="mt-4 inline-block btn-secondary text-sm">Open project</span></Link>)}</div>{shown.length === 0 && <p className="mt-8 text-center text-sm text-slate-500">No quotes match the current filter.</p>}</>;
}