import { api, canEdit, me } from '@/lib/api';
import { PUBLIC_SITE } from '@/lib/format';
import { Card, Empty, Flash, PageHeader, Pill, Tabs, type SP } from '@/components/ui';
import { SubmitButton } from '@/components/Actions';
import { BuildingIcon, ExternalLinkIcon, MapPinIcon, MergeIcon, RefreshIcon, StarIcon, XIcon } from '@/components/Icons';
import { dismissDuplicate, mergeDuplicate, scanDuplicates } from '../../actions';

type Dup = {
  id: number;
  similarity: string;
  reasons: string[] | null;
  status: string;
  primary_slug: string;
  primary_name: string;
  primary_verification: string;
  primary_city: string | null;
  primary_firm: string | null;
  primary_reviews: number;
  duplicate_slug: string;
  duplicate_name: string;
  duplicate_verification: string;
  duplicate_city: string | null;
  duplicate_firm: string | null;
  duplicate_reviews: number;
};

const STATUSES = ['open', 'merged', 'dismissed'];

function Side({ label, name, slug, verification, city, firm, reviews }: { label: string; name: string; slug: string; verification: string; city: string | null; firm: string | null; reviews: number }) {
  return (
    <div className="rounded-lg border border-rule bg-paper p-3.5 text-sm">
      <div className="flex items-center justify-between gap-2">
        <span className="rounded bg-surface px-1.5 py-0.5 text-[11px] font-bold uppercase tracking-wide text-muted">{label}</span>
        <Pill value={verification} />
      </div>
      <a href={`${PUBLIC_SITE}/lawyers/${slug}/`} target="_blank" rel="noopener" className="mt-2 inline-flex items-center gap-1.5 font-semibold hover:text-ledger hover:underline">
        {name} <ExternalLinkIcon className="h-3 w-3 text-muted" />
      </a>
      <ul className="mt-2 space-y-1 text-xs text-ink-2">
        <li className="flex items-center gap-1.5">
          <MapPinIcon className="h-3.5 w-3.5 text-muted" /> {city ?? 'No city'}
        </li>
        <li className="flex items-center gap-1.5">
          <BuildingIcon className="h-3.5 w-3.5 text-muted" /> {firm ?? 'No firm'}
        </li>
        <li className="flex items-center gap-1.5">
          <StarIcon className="h-3.5 w-3.5 text-muted" /> {reviews} reviews
        </li>
      </ul>
      <p className="num mt-2 truncate text-[11px] text-muted">/lawyers/{slug}/</p>
    </div>
  );
}

export default async function Duplicates({ searchParams }: { searchParams: SP }) {
  const sp = await searchParams;
  const status = STATUSES.includes(sp.status ?? '') ? sp.status! : 'open';
  const [rows, user] = await Promise.all([api<Dup[]>(`/admin/duplicates?status=${status}`), me()]);
  const editable = canEdit(user.role);
  return (
    <>
      <PageHeader
        title="Duplicate resolution"
        icon={<MergeIcon className="h-5 w-5" />}
        description="Merging moves licences, reviews, awards, matters, locations and enquiries to the kept profile; the other profile becomes a permanent redirect."
        actions={
          editable && (
            <form action={scanDuplicates}>
              <SubmitButton className="btn btn-quiet btn-sm" pendingLabel="Scanning…">
                <RefreshIcon className="h-4 w-4" /> Scan for duplicates
              </SubmitButton>
            </form>
          )
        }
      />
      <Flash ok={sp.ok} err={sp.err} />
      <div className="mb-4">
        <Tabs current={status} items={STATUSES.map((s) => ({ value: s, label: s, href: `?status=${s}` }))} />
      </div>
      <Card>
        {rows.length ? (
          <ul className="divide-y divide-rule">
            {rows.map((d) => {
              const sim = Math.round(Number(d.similarity) * 100);
              return (
                <li key={d.id} className="space-y-3 p-4">
                  <div className="flex flex-wrap items-center gap-3 text-sm">
                    <span className={`num rounded-full px-2.5 py-0.5 text-xs font-bold ${sim >= 90 ? 'bg-danger-soft text-danger' : sim >= 75 ? 'bg-brass-soft text-brass' : 'bg-sunken text-muted'}`}>{sim}% similar</span>
                    <span className="text-muted">{(d.reasons ?? []).join(' · ')}</span>
                  </div>
                  <div className="grid gap-3 md:grid-cols-2">
                    <Side label="Record A" name={d.primary_name} slug={d.primary_slug} verification={d.primary_verification} city={d.primary_city} firm={d.primary_firm} reviews={d.primary_reviews} />
                    <Side label="Record B" name={d.duplicate_name} slug={d.duplicate_slug} verification={d.duplicate_verification} city={d.duplicate_city} firm={d.duplicate_firm} reviews={d.duplicate_reviews} />
                  </div>
                  {d.status === 'open' && editable && (
                    <form className="flex flex-wrap gap-2">
                      <input type="hidden" name="id" value={d.id} />
                      <SubmitButton formAction={mergeDuplicate.bind(null, 'primary')} confirm={`Keep ${d.primary_name} (A) and merge B into it? B becomes a permanent redirect.`} className="btn btn-primary btn-sm">
                        <MergeIcon className="h-4 w-4" /> Keep A, merge B
                      </SubmitButton>
                      <SubmitButton formAction={mergeDuplicate.bind(null, 'duplicate')} confirm={`Keep ${d.duplicate_name} (B) and merge A into it? A becomes a permanent redirect.`} className="btn btn-quiet btn-sm">
                        <MergeIcon className="h-4 w-4" /> Keep B, merge A
                      </SubmitButton>
                      <SubmitButton formAction={dismissDuplicate} className="btn btn-ghost btn-sm">
                        <XIcon className="h-4 w-4" /> Not the same person
                      </SubmitButton>
                    </form>
                  )}
                </li>
              );
            })}
          </ul>
        ) : (
          <Empty icon={<MergeIcon className="h-6 w-6" />}>No {status} duplicate candidates.</Empty>
        )}
      </Card>
    </>
  );
}