import type { Metadata } from 'next';
import Link from 'next/link';
import { ReviewDecisionButtons } from '@/components/admin/actions';
import type { ReviewItem } from '@/components/admin/types';
import { AdminError, AdminHeader, JsonInline } from '@/components/admin/ui';
import { StatusBadge } from '@/components/ui/badges';
import { Pagination } from '@/components/ui/pagination';
import { adminApi, safeAdmin } from '@/lib/admin-api';
import { fmtAgo, fmtDateTime, fmtInt } from '@/lib/format';

export const metadata: Metadata = { title: 'Entity resolution' };

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

function Entity({ label, slug, name, norad, cospar, status }: { label: string; slug: string | null; name: string | null; norad: number | null; cospar: string | null; status: string | null }) {
  return (
    <div className="min-w-0 rounded-md border border-rule px-3 py-2.5">
      <p className="eyebrow">{label}</p>
      {slug ? (
        <Link href={`/satellite/${slug}`} className="mt-1 block truncate text-sm font-medium text-ink hover:text-accent">
          {name ?? slug}
        </Link>
      ) : (
        <p className="mt-1 text-sm text-ink-3">— (entity no longer exists)</p>
      )}
      <dl className="mono mt-1.5 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-xs text-ink-2">
        <dt className="text-ink-3">NORAD</dt>
        <dd>{norad ?? '—'}</dd>
        <dt className="text-ink-3">COSPAR</dt>
        <dd>{cospar ?? '—'}</dd>
      </dl>
      <div className="mt-2">
        <StatusBadge status={status} />
      </div>
    </div>
  );
}

function ReviewCard({ item, now }: { item: ReviewItem; now: number }) {
  return (
    <li className="border-t border-rule py-5">
      <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-ink-3">
        <span className="mono text-ink-2">#{item.id}</span>
        <span className="rounded border border-rule px-1.5 py-0.5">{item.kind.replace(/_/g, ' ')}</span>
        <span>
          confidence <span className="tnum text-ink">{item.confidence === null ? '—' : item.confidence.toFixed(2)}</span>
        </span>
        <span title={fmtDateTime(item.created_at)}>raised {fmtAgo(item.created_at, now)}</span>
        {item.resolved_at && (
          <span>
            resolved {fmtAgo(item.resolved_at, now)} by {item.resolved_by ?? '?'}
          </span>
        )}
      </div>
      <div className="mt-3 grid gap-3 sm:grid-cols-2">
        <Entity label="A (kept on merge)" slug={item.a_slug} name={item.a_name} norad={item.a_norad} cospar={item.a_cospar} status={item.a_status} />
        <Entity label="B (merged into A)" slug={item.b_slug} name={item.b_name} norad={item.b_norad} cospar={item.b_cospar} status={item.b_status} />
      </div>
      {item.detail && (
        <div className="mt-2">
          <JsonInline value={item.detail} />
        </div>
      )}
      {item.status === 'open' && <ReviewDecisionButtons id={item.id} canMerge={!!item.entity_b_id && !!item.b_slug} className="mt-3" />}
    </li>
  );
}

export default async function AdminEntityResolutionPage({ searchParams }: { searchParams: Promise<{ page?: string; status?: string }> }) {
  const sp = await searchParams;
  const page = Math.max(1, Number(sp.page) || 1);
  const status = (STATUSES as readonly string[]).includes(sp.status ?? '') ? (sp.status as (typeof STATUSES)[number]) : 'open';
  const res = await safeAdmin(adminApi.review(page, status, 25));
  const now = Date.now();
  const href = (p: number, s: string = status) => `/admin/entity-resolution?${new URLSearchParams({ ...(s !== 'open' ? { status: s } : {}), ...(p > 1 ? { page: String(p) } : {}) }).toString()}`;
  return (
    <>
      <AdminHeader title="Entity resolution" lede="Ambiguous matches from the resolver (NORAD → COSPAR → exact normalized name) are never merged automatically. Decide here; merges move aliases, identifiers and element history from B to A and are recorded in entity_merges with a snapshot of B." />
      <div className="no-scrollbar -mx-4 flex gap-1.5 overflow-x-auto px-4 md:mx-0 md:px-0">
        {STATUSES.map((s) => (
          <Link key={s} href={href(1, s)} className={`inline-flex min-h-9 shrink-0 items-center rounded-md border px-3 text-xs ${status === s ? 'border-accent/40 bg-accent-soft text-accent' : 'border-rule text-ink-2 hover:bg-plane-2'}`}>
            {s.replace('_', ' ')}
          </Link>
        ))}
      </div>
      {res.error !== null ? (
        <div className="mt-6">
          <AdminError message={res.error} />
        </div>
      ) : (
        <>
          <p className="mt-5 text-xs text-ink-3">
            {fmtInt(res.data.pagination.total)} {status.replace('_', ' ')} item{res.data.pagination.total === 1 ? '' : 's'}
          </p>
          {res.data.data.length === 0 ? (
            <p className="mt-3 rounded-md border border-dashed border-rule-strong px-4 py-8 text-center text-sm text-ink-3">Queue is empty</p>
          ) : (
            <ul className="mt-2 border-b border-rule">
              {res.data.data.map((item) => (
                <ReviewCard key={item.id} item={item} now={now} />
              ))}
            </ul>
          )}
          <Pagination className="mt-4" page={res.data.pagination.page} pages={res.data.pagination.pages} total={res.data.pagination.total} pageSize={res.data.pagination.page_size} makeHref={(p) => href(p)} />
        </>
      )}
    </>
  );
}