import Link from 'next/link';
import { Section } from '@/components/ui/section';
import { Badge, MatchBadge, StatusBadge } from '@/components/ui/badge';
import { EmptyState } from '@/components/ui/empty-state';
import { Pagination } from '@/components/ui/pagination';
import { JsonView } from '@/components/ui/json-view';
import { listUnresolved } from '@/lib/queries/admin';
import { resolveAction, rejectAction } from '@/lib/admin/actions';
import { fmtInt, fmtDateTime } from '@/lib/format';
import { str, int, withParams, type SP } from '@/lib/search-params';

const PAGE_SIZE = 50;

export default async function UnresolvedPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const entityKind = str(sp, 'kind');
  const status = str(sp, 'status', 'open');
  const page = int(sp, 'page', 1, 1, 10_000);
  const msg = str(sp, 'msg');
  const ok = str(sp, 'ok');
  const { rows, total, kinds } = await listUnresolved({ entityKind, status, page, pageSize: PAGE_SIZE });
  const href = (o: Record<string, string | number | null | undefined>) => `/admin/unresolved${withParams({ kind: entityKind, status }, o)}`;

  return (
    <div className="space-y-6">
      <header className="pt-4">
        <h1 className="text-3xl">Unresolved labels</h1>
        <p className="mt-1 text-[13.5px] text-ink-2">Source labels that no identifier, alias or normalized string could map. Resolving adds an alias to the target entity, marks the label mapped and writes the audit log.</p>
      </header>
      {msg ? (
        <p role="status" className={`border-l-2 pl-3 text-[13px] ${ok === '1' ? 'border-ok text-ok' : 'border-danger text-danger'}`}>
          {msg}
        </p>
      ) : null}
      <div className="flex flex-wrap gap-4 text-[12.5px]">
        <div className="flex flex-wrap items-center gap-1.5">
          <span className="ci-kicker mr-1">Kind</span>
          <Link href={href({ kind: '', page: '' })} className={`border px-2 py-0.5 no-underline ${!entityKind ? 'border-accent bg-accent-soft' : 'border-rule'}`}>
            All
          </Link>
          {kinds.map((k) => (
            <Link key={k.k} href={href({ kind: k.k, page: '' })} className={`border px-2 py-0.5 no-underline ${entityKind === k.k ? 'border-accent bg-accent-soft' : 'border-rule'}`}>
              {k.k} <span className="ci-num text-ink-3">{fmtInt(k.n)}</span>
            </Link>
          ))}
        </div>
        <div className="flex flex-wrap items-center gap-1.5">
          <span className="ci-kicker mr-1">Status</span>
          {['open', 'mapped', 'rejected', 'ignored', ''].map((s) => (
            <Link key={s || 'all'} href={href({ status: s, page: '' })} className={`border px-2 py-0.5 no-underline ${status === s ? 'border-accent bg-accent-soft' : 'border-rule'}`}>
              {s || 'all'}
            </Link>
          ))}
        </div>
      </div>
      <Section id="queue" title={`${fmtInt(total)} labels`} kicker="Queue · sorted by occurrence count">
        {rows.length === 0 ? (
          <EmptyState compact title="Queue empty">No unresolved label matches these filters. Labels are enqueued by connectors when reconciliation fails.</EmptyState>
        ) : (
          <>
            <div className="ci-table-wrap">
              <table className="ci-table">
                <thead>
                  <tr>
                    <th className="num">Count</th>
                    <th>Label</th>
                    <th>Kind · source</th>
                    <th>Suggestion</th>
                    <th>Status</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.map((u) => (
                    <tr key={u.id}>
                      <td className="num font-medium">{fmtInt(u.count)}</td>
                      <td className="min-w-[220px]">
                        <span className="font-medium">{u.source_text}</span>
                        <span className="ci-mono block text-[11px] text-ink-3">{u.normalized}</span>
                        {Object.keys(u.context ?? {}).length ? (
                          <details className="text-[11.5px]">
                            <summary className="ci-link">context</summary>
                            <JsonView data={u.context} />
                          </details>
                        ) : null}
                        <span className="block text-[11px] text-ink-4">#{u.id} · {fmtDateTime(u.updated_at)}</span>
                      </td>
                      <td>
                        <Badge>{u.entity_kind}</Badge> <span className="ci-mono text-[11.5px]">{u.source_slug}</span>
                      </td>
                      <td className="min-w-[200px] text-[12.5px]">
                        {u.suggested_id ? (
                          <>
                            <span className="ci-mono">{u.suggested_id}</span> {u.suggested_name ? <span>— {u.suggested_name}</span> : null}
                            <span className="mt-0.5 flex items-center gap-1">
                              <MatchBadge matchType={u.suggested_match_type} />
                              {u.suggested_score != null ? <span className="ci-num text-[11px] text-ink-3">score {u.suggested_score.toFixed(2)}</span> : null}
                            </span>
                          </>
                        ) : (
                          <span className="text-ink-4">no suggestion</span>
                        )}
                      </td>
                      <td>
                        <StatusBadge status={u.status} />
                        {u.resolved_id ? <span className="ci-mono block text-[11px]">{u.resolved_id}</span> : null}
                      </td>
                      <td className="min-w-[280px]">
                        {u.status === 'open' ? (
                          <div className="space-y-1.5 text-[12.5px]">
                            <form action={resolveAction} className="flex flex-wrap gap-1">
                              <input type="hidden" name="id" value={u.id} />
                              <input name="targetId" defaultValue={u.suggested_id ?? ''} placeholder="CI-CAN-00000000" className="ci-mono w-40 border border-rule-strong bg-white px-1.5 py-0.5 text-[12px]" aria-label="Target entity id" required />
                              <input name="reason" placeholder="reason (optional)" className="w-36 border border-rule-strong bg-white px-1.5 py-0.5 text-[12px]" aria-label="Reason" />
                              <button type="submit" className="border border-accent bg-accent-soft px-2 py-0.5 text-accent-2 hover:bg-accent hover:text-white">
                                Resolve
                              </button>
                            </form>
                            <form action={rejectAction} className="flex flex-wrap gap-1">
                              <input type="hidden" name="id" value={u.id} />
                              <select name="status" className="border border-rule-strong bg-white px-1 py-0.5 text-[12px]" aria-label="Rejection status">
                                <option value="rejected">rejected (not a {u.entity_kind})</option>
                                <option value="ignored">ignored</option>
                              </select>
                              <input name="reason" placeholder="reason (optional)" className="w-36 border border-rule-strong bg-white px-1.5 py-0.5 text-[12px]" aria-label="Reason" />
                              <button type="submit" className="border border-rule px-2 py-0.5 text-ink-2 hover:border-danger hover:text-danger">
                                Reject
                              </button>
                            </form>
                          </div>
                        ) : (
                          <span className="text-[12px] text-ink-3">by {u.resolved_by ?? '—'}</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <Pagination page={page} pageSize={PAGE_SIZE} total={total} hrefFor={(p) => href({ page: p === 1 ? '' : p })} />
          </>
        )}
      </Section>
    </div>
  );
}