import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader } from '@/components/ui/page-header';
import { Tabs } from '@/components/ui/tabs';
import { Card, EmptyState, Badge } from '@/components/ui/primitives';
import { Thumb } from '@/components/market/bits';
import { listRadar } from '@/lib/queries/market-lists';
import { fmtMoney, fmtRelative } from '@/lib/format';
import { catName, humanize } from '@/lib/taxonomy';
import { sp1, type SP } from '@/lib/search-params';

export const metadata: Metadata = { title: 'Rare Radar', description: 'Newly detected rare items: first listings in years, ultra-low populations, rare auction appearances, price discrepancies and undocumented variations.' };

const KINDS = ['first_listing_in_years', 'ultra_low_population', 'rare_auction_appearance', 'price_discrepancy', 'undocumented_variation', 'record_sale'];

export default async function RadarPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const kind = sp1(sp, 'kind') ?? null;
  const items = await listRadar({ kind, limit: 100 });
  return (
    <div>
      <PageHeader kicker="Signals" title="Rare Radar" description="Signals detected by the pipeline (§155): each finding cites its evidence (listing, sale, population report). Findings expire; nothing here is a recommendation." compact />
      <Tabs active={kind ?? 'all'} tabs={[{ id: 'all', label: 'All', href: '/radar' }, ...KINDS.map((k) => ({ id: k, label: humanize(k), href: `/radar?kind=${k}` }))]} className="mb-4" />
      {items.length ? (
        <ul className="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3">
          {items.map((r) => (
            <li key={r.id} className="card flex gap-3 p-3">
              <Thumb src={r.heroImageUrl} alt="" size={56} rounded="rounded-md" />
              <div className="min-w-0 flex-1">
                <div className="flex items-center justify-between gap-2">
                  <Badge tone={r.kind === 'record_sale' ? 'gold' : r.kind === 'price_discrepancy' ? 'alert' : 'rarity'}>{humanize(r.kind)}</Badge>
                  <span className="num text-[11px] text-subtle">signal {r.score.toFixed(0)} · {fmtRelative(r.detectedAt)}</span>
                </div>
                <Link href={`/asset/${r.assetSlug}`} className="mt-1 block truncate text-[13px] font-medium text-fg hover:underline">
                  {r.assetTitle}
                </Link>
                <div className="text-[11px] text-muted">
                  {catName(r.categorySlug)} · RIV {r.rivUsd === null ? '—' : fmtMoney(r.rivUsd)}
                </div>
                {Object.keys(r.evidence).length ? (
                  <dl className="mt-1.5 grid grid-cols-2 gap-x-3 gap-y-0.5 text-[11px]">
                    {Object.entries(r.evidence)
                      .slice(0, 6)
                      .map(([k, v]) => (
                        <div key={k} className="contents">
                          <dt className="truncate text-subtle">{humanize(k)}</dt>
                          <dd className="num truncate text-muted">{typeof v === 'number' ? v.toLocaleString('en-US', { maximumFractionDigits: 2 }) : String(v)}</dd>
                        </div>
                      ))}
                  </dl>
                ) : null}
              </div>
            </li>
          ))}
        </ul>
      ) : (
        <Card>
          <EmptyState title="Radar is quiet" description="Findings appear when the pipeline has enough history to detect unusual events." />
        </Card>
      )}
    </div>
  );
}