import type { Metadata } from 'next';
import Link from 'next/link';
import { ActionButton, AdminFilters, AdminTitle, JsonPre, KindChip, Mono, Notice, StatusChip, Trunc } from '@/components/admin/ui';
import { EntityBadge, TierBadge } from '@/components/ui/badges';
import { LiveAgo } from '@/components/ui/live';
import { Pagination, withParams } from '@/components/ui/pagination';
import { EmptyState, Unavailable } from '@/components/ui/unavailable';
import { keepConflictSideAction, reviewAction } from '@/lib/admin/actions';
import { adminApi, load, requireAdmin } from '@/lib/admin/admin-api';
import type { ReviewItem } from '@/lib/admin/types';
import { fmtDateTime, fmtInt, fmtValue, num } from '@/lib/format';
import { propertyLabel, routes } from '@/lib/site';

export const metadata: Metadata = { title: 'Review queue', robots: { index: false, follow: false } };
export const dynamic = 'force-dynamic';

const LIMIT = 25;
const STATUSES = ['pending', 'approved', 'rejected', 'edited', 'all'];
const KINDS = ['conflict', 'merge_candidate', 'parser_breakage', 'blocked_source'];

function host(url: unknown): string {
  if (typeof url !== 'string') return '—';
  try {
    return new URL(url).hostname.replace(/^www\./, '');
  } catch {
    return url;
  }
}

/** Conflict payload `{ property, current, claimed, current_source, claimed_source, tier }` rendered as two columns, each with a "Keep" button. */
function ConflictView({ item, ret }: { item: ReviewItem; ret: string }) {
  const p = item.payload ?? {};
  const property = typeof p.property === 'string' ? p.property : null;
  const entity = item.entities?.[0];
  const sides = [
    { key: 'current', title: 'Current value', value: p.current, source: p.current_source, tier: p.current_tier ?? null },
    { key: 'claimed', title: 'Claimed by new source', value: p.claimed, source: p.claimed_source, tier: p.tier ?? p.claimed_tier ?? null },
  ];
  return (
    <div className="mt-2 grid gap-3 md:grid-cols-2">
      {sides.map((s) => (
        <div key={s.key} className="border border-rule p-3">
          <p className="eyebrow">{s.title}</p>
          <p className="tnum mt-1 break-words text-sm font-medium text-ink">{fmtValue(s.value, property ?? undefined)}</p>
          <p className="mt-1 flex flex-wrap items-center gap-1.5 text-[11px] text-ink-3">
            {typeof s.source === 'string' ? (
              <a href={s.source} target="_blank" rel="noopener noreferrer" className="text-ink-2 hover:text-accent" title={s.source}>
                {host(s.source)}
              </a>
            ) : (
              <span>source unknown</span>
            )}
            {num(s.tier) !== null && <TierBadge tier={num(s.tier)} />}
          </p>
          {item.status === 'pending' && property && entity && (
            <form action={keepConflictSideAction} className="mt-2">
              <input type="hidden" name="id" value={item.id} />
              <input type="hidden" name="slug" value={entity.slug} />
              <input type="hidden" name="property" value={property} />
              <input type="hidden" name="value" value={JSON.stringify(s.value ?? null)} />
              <input type="hidden" name="source_url" value={typeof s.source === 'string' ? s.source : ''} />
              <input type="hidden" name="return" value={ret} />
              <ActionButton tone="positive" title="Promote this claim to current and supersede the other">Keep this</ActionButton>
            </form>
          )}
        </div>
      ))}
    </div>
  );
}

export default async function AdminReviewPage({ searchParams }: { searchParams: Promise<Record<string, string | undefined>> }) {
  await requireAdmin();
  const sp = await searchParams;
  const current: Record<string, string | undefined> = { status: sp.status ?? 'pending' };
  if (sp.kind) current.kind = sp.kind;
  if (sp.offset) current.offset = sp.offset;
  const offset = Math.max(0, Number(current.offset) || 0);
  const href = (patch: Record<string, string | number | undefined | null>) => withParams('/admin/review', current, patch);
  const ret = href({});
  const res = await load(adminApi.review({ status: current.status, kind: current.kind, limit: LIMIT, offset }));
  const byKind = res.ok ? (res.data.by_kind ?? []).filter((k) => k.status === (current.status === 'all' ? k.status : current.status)) : [];
  return (
    <>
      <AdminTitle title="Review queue" count={res.ok ? fmtInt(res.data.total) : undefined} lede="Conflicts keep both claims until an operator picks one; merges move aliases, identifiers, claims, relations and events into the target." />
      <Notice notice={sp.notice} level={sp.level} />
      {byKind.length > 0 && (
        <ul className="mb-4 flex flex-wrap gap-1.5 text-xs">
          {byKind.map((k) => (
            <li key={`${k.kind}-${k.status}`}>
              <Link href={href({ kind: current.kind === k.kind ? undefined : k.kind, offset: undefined })} className={`inline-flex h-7 items-center gap-1.5 border px-2 ${current.kind === k.kind ? 'border-accent text-accent' : 'border-rule text-ink-2 hover:border-rule-strong'}`}>
                <span className="mono">{k.kind}</span> <span className="tnum">{fmtInt(k.n)}</span> {current.status === 'all' && <StatusChip value={k.status} />}
              </Link>
            </li>
          ))}
        </ul>
      )}
      <AdminFilters
        action="/admin/review"
        className="mb-4"
        fields={[
          { kind: 'select', name: 'status', label: 'Status', value: current.status, any: 'pending', options: STATUSES.map((s) => ({ value: s, label: s })) },
          { kind: 'select', name: 'kind', label: 'Kind', value: current.kind, options: KINDS.map((k) => ({ value: k, label: k })) },
        ]}
      />
      {!res.ok ? (
        <Unavailable what="Review queue" reason={res.error} />
      ) : res.data.items.length === 0 ? (
        <EmptyState title="Nothing to review" />
      ) : (
        <>
          <ul className="divide-y divide-rule border-y border-rule">
            {res.data.items.map((item) => {
              const p = item.payload ?? {};
              const property = typeof p.property === 'string' ? p.property : null;
              return (
                <li key={item.id} className="py-3">
                  <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
                    <div className="min-w-0 flex-1">
                      <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
                        <KindChip value={item.kind} />
                        <StatusChip value={item.status} />
                        {property && <span className="text-xs text-ink-2">{propertyLabel(property)}</span>}
                        <span className="text-xs text-ink-3" title={fmtDateTime(item.created_at)}>
                          <LiveAgo at={item.created_at} />
                        </span>
                        <Mono>{item.id}</Mono>
                      </div>
                      {item.reason && <p className="mt-1 text-sm text-ink"><Trunc text={item.reason} max={200} /></p>}
                      {item.entities && item.entities.length > 0 && (
                        <ul className="mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-sm">
                          {item.entities.map((e) => (
                            <li key={e.id} className="flex items-center gap-1.5">
                              <EntityBadge type={e.entity_type} small />
                              <Link href={routes.entity(e)} className="text-ink hover:text-accent hover:underline">{e.name}</Link>
                              <Mono title={e.id}>{e.slug}</Mono>
                              {e.status !== 'active' && <StatusChip value={e.status} />}
                            </li>
                          ))}
                        </ul>
                      )}
                      {item.kind === 'conflict' && <ConflictView item={item} ret={ret} />}
                      {item.kind === 'merge_candidate' && item.entities && item.entities.length > 1 && item.status === 'pending' && (
                        <p className="mt-1.5 text-xs text-ink-3">
                          Approve merges <Mono>{item.entity_ids[0]}</Mono> into <Mono>{item.entity_ids[1]}</Mono> (first two ids); pick directions explicitly under <Link href={`/admin/entities/duplicates?type=${encodeURIComponent(item.entities[0]?.entity_type ?? '')}`} className="link">Duplicates</Link> when the order is wrong.
                        </p>
                      )}
                      <details className="mt-2">
                        <summary className="cursor-pointer text-xs text-ink-3 hover:text-ink">Payload{item.resolution ? ' · resolution' : ''}</summary>
                        <div className="mt-1 grid gap-2 md:grid-cols-2">
                          <JsonPre value={item.payload} maxHeight="16rem" />
                          {item.resolution && <JsonPre value={item.resolution} maxHeight="16rem" />}
                        </div>
                      </details>
                    </div>
                    {item.status === 'pending' && (
                      <div className="flex shrink-0 items-center gap-1.5">
                        <form action={reviewAction}>
                          <input type="hidden" name="id" value={item.id} />
                          <input type="hidden" name="action" value="approve" />
                          <input type="hidden" name="return" value={ret} />
                          <ActionButton tone="positive" title={item.kind === 'conflict' ? 'Mark approved without promoting a claim (use "Keep this" to pick a side)' : 'Approve'}>Approve</ActionButton>
                        </form>
                        <form action={reviewAction}>
                          <input type="hidden" name="id" value={item.id} />
                          <input type="hidden" name="action" value="reject" />
                          <input type="hidden" name="return" value={ret} />
                          <ActionButton tone="danger">Reject</ActionButton>
                        </form>
                      </div>
                    )}
                  </div>
                </li>
              );
            })}
          </ul>
          <Pagination total={res.data.total} limit={LIMIT} offset={offset} makeHref={(o) => href({ offset: o || undefined })} className="mt-4" />
        </>
      )}
    </>
  );
}