import Link from 'next/link';
import { api } from '@/lib/api';
import { date, n } from '@/lib/format';
import { Card, Empty, PageHeader, Pager, SearchField, Toolbar, type SP } from '@/components/ui';
import { ArrowRightIcon, InboxIcon, SearchIcon, UsersIcon, XIcon } from '@/components/Icons';

type Lawyer = { id: number; name: string; enquiries: number; accepted: number; awaiting: number; latest: string };
export default async function LawyerEnquiries({ searchParams }: { searchParams: SP }) {
  const sp = await searchParams;
  const qs = new URLSearchParams(Object.entries(sp).filter(([k,v]) => v && ['q','page'].includes(k)) as [string,string][]);
  const d = await api<{items: Lawyer[]; total: number; page: number; pageCount: number}>(`/admin/leads/lawyers?${qs}`);
  return <><PageHeader title="Enquiries by lawyer" icon={<UsersIcon className="h-5 w-5" />} description={`${n(d.total)} lawyers with direct or routed enquiries. Open a lawyer to view every stored enquiry and its delivery history.`} actions={<Link href="/leads" className="btn btn-quiet btn-sm"><InboxIcon />All enquiries</Link>} />
    <Toolbar><SearchField name="q" defaultValue={sp.q} placeholder="Search lawyer name" /><button className="btn btn-quiet"><SearchIcon />Search</button>{sp.q && <Link href="/leads/lawyers" className="btn btn-ghost"><XIcon />Clear</Link>}</Toolbar>
    <Card title="Lawyer enquiry records" icon={<InboxIcon />}>
      {d.items.length ? <div className="overflow-x-auto"><table className="tbl"><thead><tr><th>Lawyer</th><th>Total enquiries</th><th>Awaiting response</th><th>Accepted</th><th>Latest enquiry</th><th>Actions</th></tr></thead><tbody>{d.items.map(l => <tr key={l.id}><td><Link href={`/leads?lawyerId=${l.id}`} className="font-semibold hover:text-ledger">{l.name}</Link><span className="block text-xs text-muted">Lawyer #{l.id}</span></td><td className="num">{n(l.enquiries)}</td><td className="num">{n(l.awaiting)}</td><td className="num">{n(l.accepted)}</td><td>{date(l.latest,true)}</td><td><Link href={`/leads?lawyerId=${l.id}`} className="btn btn-quiet btn-xs">View enquiries<ArrowRightIcon /></Link></td></tr>)}</tbody></table></div> : <Empty icon={<InboxIcon className="h-6 w-6" />}>No lawyers with enquiries match this search.</Empty>}
      <Pager page={d.page} pageCount={d.pageCount} total={d.total} href={p=>`/leads/lawyers?${new URLSearchParams({...Object.fromEntries(qs),page:String(p)})}`} />
    </Card></>;
}