import * as ActionIcons from '@/components/Icons';
import Link from 'next/link';
import { api } from '@/lib/api';
import { date, n, PUBLIC_SITE } from '@/lib/format';
import { Card, Empty, Flash, PageHeader, Pager, SearchField, Toolbar, type SP } from '@/components/ui';
import { SubmitButton } from '@/components/Actions';
import { BuildingIcon, ExternalLinkIcon, XIcon } from '@/components/Icons';
import { updateFirm } from '../../actions';

type Row = { id: number; name: string; slug: string; city: string | null; verificationStatus: string; profileStatus: string; lawyers: number; updatedAt: string };

export default async function Firms({ 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: Row[]; total: number; page: number; pageCount: number }>(`/admin/firms?${qs}`);
  // After saving a row, come back to the same search and page
  const here = qs.toString() ? `/firms?${qs}` : '/firms';
  return (
    <>
      <PageHeader title="Law firms" icon={<BuildingIcon className="h-5 w-5" />} description={`${n(d.total)} firms. Change verification or publication status inline.`} />
      <Flash ok={sp.ok} err={sp.err} />
      <Toolbar>
        <SearchField name="q" defaultValue={sp.q} placeholder="Firm name" />
        <button className="btn btn-quiet"><ActionIcons.SearchIcon />Search</button>
        {sp.q && (
          <Link href="/firms" className="btn btn-ghost">
            <XIcon className="h-4 w-4" /> Clear
          </Link>
        )}
      </Toolbar>
      <Card>
        {d.items.length ? (
          <div className="overflow-x-auto">
            <table className="tbl">
              <thead>
                <tr>
                  <th>Firm</th>
                  <th>City</th>
                  <th className="text-right">Lawyers</th>
                  <th>Verification · status</th>
                  <th>Updated</th>
                </tr>
              </thead>
              <tbody>
                {d.items.map((f) => (
                  <tr key={f.id}>
                    <td>
                      <a href={`${PUBLIC_SITE}/firms/${f.slug}/`} target="_blank" rel="noopener" className="group inline-flex items-center gap-1.5 font-semibold hover:text-ledger">
                        {f.name}
                        <ExternalLinkIcon className="h-3 w-3 text-muted opacity-0 transition-opacity group-hover:opacity-100" />
                      </a>
                    </td>
                    <td>{f.city ?? '—'}</td>
                    <td className="num text-right">{f.lawyers}</td>
                    <td>
                      <form action={updateFirm} className="flex items-center gap-1.5">
                        <input type="hidden" name="id" value={f.id} />
                        <input type="hidden" name="back" value={here} />
                        <select name="verificationStatus" defaultValue={f.verificationStatus} aria-label={`Verification for ${f.name}`} className="field !min-h-8 w-auto !py-1 text-xs">
                          {['unverified', 'pending', 'verified', 'rejected', 'expired'].map((s) => (
                            <option key={s} value={s}>
                              {s}
                            </option>
                          ))}
                        </select>
                        <select name="profileStatus" defaultValue={f.profileStatus} aria-label={`Status for ${f.name}`} className="field !min-h-8 w-auto !py-1 text-xs">
                          {['draft', 'published', 'suspended', 'archived'].map((s) => (
                            <option key={s} value={s}>
                              {s}
                            </option>
                          ))}
                        </select>
                        <SubmitButton className="btn btn-quiet btn-xs"><ActionIcons.SaveIcon />Save</SubmitButton>
                      </form>
                    </td>
                    <td className="whitespace-nowrap text-muted">{date(f.updatedAt)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <Empty icon={<BuildingIcon className="h-6 w-6" />}>No firms match “{sp.q}”.</Empty>
        )}
        <Pager page={d.page} pageCount={d.pageCount} total={d.total} href={(p) => `/firms?${new URLSearchParams({ ...Object.fromEntries(qs), page: String(p) })}`} />
      </Card>
    </>
  );
}