import { api, isReviewer, me } from '@/lib/api';
import { date, PUBLIC_SITE } from '@/lib/format';
import { Card, Empty, Flash, Forbidden, PageHeader, Pager, Pill, Tabs, type SP } from '@/components/ui';
import { SubmitButton } from '@/components/Actions';
import { AwardIcon, CheckIcon, ExternalLinkIcon, FileTextIcon, XIcon } from '@/components/Icons';
import { changeRequestDecision } from '../../actions';

type R = {
  id: number;
  kind: string;
  payload: Record<string, string | number>;
  status: string;
  decisionNote: string | null;
  createdAt: string;
  decidedAt: string | null;
  evidenceFileId: number | null;
  evidenceName: string | null;
  lawyer: string;
  slug: string;
  lawyerId: number;
  requester: string | null;
};

const LABELS: Record<string, string> = {
  jurisdiction: 'Jurisdiction',
  issuingBody: 'Issuing body',
  licenseNumber: 'Licence number',
  admittedYear: 'Admitted',
  institution: 'Institution',
  degree: 'Degree',
  graduationYear: 'Graduated',
  name: 'Award',
  issuer: 'Issuer',
  year: 'Year',
  title: 'Matter',
  forum: 'Court / forum',
  sourceUrl: 'Public source',
};

export default async function ChangeRequests({ searchParams }: { searchParams: SP }) {
  const sp = await searchParams;
  const viewer = await me();
  if (!isReviewer(viewer.role)) return <Forbidden what="credential requests" />;
  const status = ['approved', 'rejected'].includes(sp.status ?? '') ? sp.status! : 'pending';
  const d = await api<{ items: R[]; total: number; page: number; pageCount: number }>(`/admin/change-requests?status=${status}&page=${sp.page ?? 1}`);
  const here = `/change-requests${status === 'pending' ? '' : `?status=${status}`}`;
  return (
    <>
      <PageHeader
        title="Credential requests"
        icon={<AwardIcon className="h-5 w-5" />}
        description="Licences, education, awards and court matters that lawyers asked to add. Approving records them as verified; they count in the ranking from the next ranking run. Check the proof against the issuing body before approving."
        actions={
          <Tabs
            current={status}
            items={[
              { value: 'pending', label: 'Waiting', href: '/change-requests' },
              { value: 'approved', label: 'Approved', href: '?status=approved' },
              { value: 'rejected', label: 'Rejected', href: '?status=rejected' },
            ]}
          />
        }
      />
      <Flash ok={sp.ok} err={sp.err} />
      <Card>
        {d.items.length ? (
          <ul className="divide-y divide-rule">
            {d.items.map((r) => (
              <li key={r.id} className="grid gap-4 p-4 lg:grid-cols-[1fr_24rem] lg:items-start">
                <div className="min-w-0 text-sm">
                  <p className="flex flex-wrap items-center gap-2">
                    <Pill value={r.kind.replace('_', ' ')} tone="info" />
                    <a href={`${PUBLIC_SITE}/lawyers/${r.slug}/`} target="_blank" rel="noopener" className="inline-flex items-center gap-1 font-semibold hover:text-ledger hover:underline">
                      {r.lawyer} <ExternalLinkIcon className="h-3 w-3 text-muted" />
                    </a>
                    <span className="text-xs text-muted">
                      requested by {r.requester ?? 'unknown'} · {date(r.createdAt, true)}
                    </span>
                  </p>
                  <dl className="mt-2 grid gap-x-6 gap-y-1 sm:grid-cols-2">
                    {Object.entries(r.payload).map(([k, v]) => (
                      <div key={k} className="flex gap-2">
                        <dt className="text-muted">{LABELS[k] ?? k}:</dt>
                        <dd className="font-medium break-all">{k === 'sourceUrl' ? <a className="link" href={String(v)} target="_blank" rel="noopener noreferrer">{String(v)}</a> : String(v)}</dd>
                      </div>
                    ))}
                  </dl>
                  <p className="mt-2 text-xs">
                    {r.evidenceFileId ? (
                      <a href={`/files/${r.evidenceFileId}`} className="inline-flex items-center gap-1 text-ledger hover:underline">
                        <FileTextIcon className="h-3.5 w-3.5" /> {r.evidenceName ?? 'Evidence'}
                      </a>
                    ) : (
                      <span className="text-muted">No proof uploaded — check the public register directly.</span>
                    )}
                  </p>
                  {r.decisionNote && <p className="mt-2 rounded-md bg-paper px-3 py-2 text-xs text-ink-2">Note: {r.decisionNote}</p>}
                </div>
                {r.status === 'pending' ? (
                  <form className="flex flex-col gap-2">
                    <input type="hidden" name="id" value={r.id} />
                    <input type="hidden" name="back" value={here} />
                    <input name="note" maxLength={2000} placeholder="Note (required to reject)" aria-label="Note" className="field text-xs" />
                    <div className="flex flex-wrap gap-2">
                      <SubmitButton formAction={changeRequestDecision.bind(null, 'approve')} confirm="Record this credential as verified?">
                        <CheckIcon className="h-4 w-4" /> Verify &amp; add
                      </SubmitButton>
                      <SubmitButton formAction={changeRequestDecision.bind(null, 'reject')} className="btn btn-danger-quiet btn-sm">
                        <XIcon className="h-4 w-4" /> Reject
                      </SubmitButton>
                    </div>
                  </form>
                ) : (
                  <p className="text-xs text-muted">
                    <Pill value={r.status} /> {date(r.decidedAt, true)}
                  </p>
                )}
              </li>
            ))}
          </ul>
        ) : (
          <Empty icon={<AwardIcon className="h-6 w-6" />}>No requests here.</Empty>
        )}
        <Pager page={d.page} pageCount={d.pageCount} total={d.total} href={(p) => `/change-requests?status=${status}&page=${p}`} />
      </Card>
    </>
  );
}