import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader } from '@/components/ui/page-header';
import { Card, CardHeader, Delta, EmptyState, Table, th, td, tdNum, Badge } from '@/components/ui/primitives';
import { LineChart } from '@/components/charts/line-chart';
import { getAssetsBySlugs, getAssetSnapshots } from '@/lib/queries/assets';
import { getIndex, getIndexSeries } from '@/lib/queries/indices';
import { fmtMoney, fmtNum, fmtRelative, confidenceLabel, cn } from '@/lib/format';
import { catName } from '@/lib/taxonomy';
import type { SP } from '@/lib/search-params';
import { Thumb } from '@/components/market/bits';
import { CompareForm, ShareButton } from './compare-form';

export const metadata: Metadata = { title: 'Compare', description: 'Compare up to four collectible assets or RareIndex indices side by side: indexed performance and key metrics.' };

const SLOTS = ['a', 'b', 'c', 'd'] as const;
const SERIES = ['var(--ri-series-1, #2f5bd6)', 'var(--ri-series-2, #c2410c)', 'var(--ri-series-3, #0e9384)', 'var(--ri-series-4, #7c3aed)'];
const WINDOWS: Array<{ id: string; days: number; label: string }> = [
  { id: '3m', days: 92, label: '3M' },
  { id: '1y', days: 366, label: '1Y' },
  { id: '2y', days: 731, label: '2Y' },
  { id: '5y', days: 1827, label: '5Y' },
];

type Column = { key: string; label: string; short: string; href: string; color: string; kind: 'asset' | 'index'; image?: string | null; rows: Array<[string, React.ReactNode]> };

export default async function ComparePage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const keys = SLOTS.map((k) => (Array.isArray(sp[k]) ? sp[k]![0] : sp[k])).filter((v): v is string => Boolean(v));
  const win = WINDOWS.find((w) => w.id === (Array.isArray(sp.w) ? sp.w[0] : sp.w)) ?? WINDOWS[2]!;
  const assetSlugs = keys.filter((k) => !k.toUpperCase().startsWith('RARE'));
  const tickers = keys.filter((k) => k.toUpperCase().startsWith('RARE'));
  const [assets, indicesRaw] = await Promise.all([getAssetsBySlugs(assetSlugs), Promise.all(tickers.map((t) => getIndex(t)))]);
  const indices = indicesRaw.filter((i): i is NonNullable<typeof i> => Boolean(i));
  // keep the URL order so colours follow the entity, never the rank
  const ordered = keys.map((k) => assets.find((a) => a.slug === k) ?? indices.find((i) => i.ticker.toUpperCase() === k.toUpperCase()) ?? null).filter((x): x is NonNullable<typeof x> => Boolean(x));

  const series = await Promise.all(
    ordered.map(async (item, i) => {
      if ('slug' in item) {
        const pts = (await getAssetSnapshots(item.id, '', win.days)).filter((p) => p.rivUsd != null).map((p) => ({ x: p.date, y: p.rivUsd! }));
        return { id: item.slug, label: item.title.length > 34 ? `${item.title.slice(0, 33)}…` : item.title, color: SERIES[i % 4], points: pts };
      }
      const pts = (await getIndexSeries(item.id, win.days)).map((p) => ({ x: p.date, y: p.value }));
      return { id: item.ticker, label: item.ticker, dashed: true, color: SERIES[i % 4], points: pts };
    }),
  );

  const columns: Column[] = ordered.map((item, i) => {
    if ('slug' in item) {
      const a = item;
      return {
        key: a.slug,
        label: a.title,
        short: a.title.length > 28 ? `${a.title.slice(0, 27)}…` : a.title,
        href: `/asset/${a.slug}`,
        color: SERIES[i % 4]!,
        kind: 'asset',
        image: a.heroImageUrl,
        rows: [
          ['Category', catName(a.categorySlug)],
          ['RIV', a.rivUsd === null ? <span className="text-subtle">—</span> : <span className="font-semibold">{fmtMoney(a.rivUsd)}</span>],
          ['Confidence', a.rivSampleSize ? `${confidenceLabel(a.rivConfidence)} · n=${a.rivSampleSize}` : <span className="text-subtle">—</span>],
          ['1D', <Delta key="d1" value={a.change1d} />],
          ['7D', <Delta key="d7" value={a.change7d} />],
          ['30D', <Delta key="d30" value={a.change30d} />],
          ['1Y', <Delta key="d1y" value={a.change1y} />],
          ['Latest sale', a.latestSaleUsd === null ? <span className="text-subtle">—</span> : `${fmtMoney(a.latestSaleUsd)} · ${fmtRelative(a.latestSaleAt)}`],
          ['Sales 30D / all', `${fmtNum(a.sales30d)} / ${fmtNum(a.salesCount)}`],
          ['Active listings', fmtNum(a.activeListings)],
          ['Liquidity', a.liquidityScore == null ? <span className="text-subtle">—</span> : `${Math.round(a.liquidityScore)}/100`],
          ['Rarity', a.rarityScore == null ? <span className="text-subtle">—</span> : `${Math.round(a.rarityScore)}/100`],
          ['Trending', a.trendingScore == null ? <span className="text-subtle">—</span> : a.trendingScore.toFixed(1)],
        ],
      };
    }
    const ix = item;
    return {
      key: ix.ticker,
      label: ix.name,
      short: ix.ticker,
      href: `/rareindex/${ix.ticker}`,
      color: SERIES[i % 4]!,
      kind: 'index',
      rows: [
        ['Category', 'Index'],
        ['Value', ix.latest ? <span className="font-semibold">{ix.latest.value.toFixed(2)}</span> : <Badge>building</Badge>],
        ['Coverage', ix.latest?.coverage != null ? `${Math.round(ix.latest.coverage * 100)}%` : <span className="text-subtle">—</span>],
        ['1D', <Delta key="d1" value={ix.change1d} />],
        ['7D', <Delta key="d7" value={ix.change7d} />],
        ['30D', <Delta key="d30" value={ix.change30d} />],
        ['1Y', <Delta key="d1y" value={ix.change1y} />],
        ['Median sale', ix.latest?.medianSaleUsd != null ? fmtMoney(ix.latest.medianSaleUsd) : <span className="text-subtle">—</span>],
        ['Transactions', ix.latest ? fmtNum(ix.latest.transactions) : <span className="text-subtle">—</span>],
        ['Constituents', ix.latest ? fmtNum(ix.latest.constituentsCount) : <span className="text-subtle">—</span>],
        ['Liquidity', ix.latest?.liquidityScore != null ? `${Math.round(ix.latest.liquidityScore)}/100` : <span className="text-subtle">—</span>],
        ['Rarity', <span key="r" className="text-subtle">—</span>],
        ['Momentum', ix.latest?.momentum != null ? ix.latest.momentum.toFixed(2) : <span className="text-subtle">—</span>],
      ],
    };
  });

  const qs = (w: string) => {
    const p = new URLSearchParams();
    keys.forEach((k, i) => p.set(SLOTS[i]!, k));
    p.set('w', w);
    return `/compare?${p.toString()}`;
  };
  const metricLabels = columns[0]?.rows.map((r) => r[0]) ?? [];

  return (
    <div>
      <PageHeader title="Compare" description="Up to four assets or indices. Performance is rebased to 0% at the start of the window using each item's daily RIV or index value; metrics sit side by side with their evidence." compact actions={keys.length ? <ShareButton /> : null} />
      <CompareForm initial={keys} />
      {columns.length ? (
        <div className="mt-4 grid gap-4">
          <Card className="p-3 sm:p-4">
            <div className="flex flex-wrap items-center justify-between gap-2">
              <h2 className="text-sm font-semibold">Indexed performance</h2>
              <div className="inline-flex rounded-md border border-border bg-sunken p-0.5 text-[11px] font-medium" role="group" aria-label="Window">
                {WINDOWS.map((w) => (
                  <Link key={w.id} href={qs(w.id)} scroll={false} className={cn('num h-7 rounded-[4px] px-2.5 leading-7', w.id === win.id ? 'bg-elevated text-fg shadow-card' : 'text-muted hover:text-fg')} aria-current={w.id === win.id ? 'true' : undefined}>
                    {w.label}
                  </Link>
                ))}
              </div>
            </div>
            <LineChart ariaLabel="Indexed performance comparison" height={300} indexed className="mt-2" series={series} emptyLabel="No daily history yet for the selected items in this window" />
          </Card>

          {/* desktop: matrix */}
          <Card className="hidden overflow-hidden md:block">
            <CardHeader title="Key metrics" subtitle="Every estimate carries its evidence; “—” means data unavailable, never zero." />
            <Table>
              <thead>
                <tr>
                  <th className={th}>Metric</th>
                  {columns.map((c) => (
                    <th key={c.key} className={cn(th, 'text-right')}>
                      <span className="inline-flex items-center gap-1.5">
                        <span className="inline-block h-2 w-2 rounded-full" style={{ background: c.color }} />
                        <Link href={c.href} className="hover:underline">
                          {c.short}
                        </Link>
                      </span>
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {metricLabels.map((label, ri) => (
                  <tr key={label} className="hover:bg-sunken">
                    <td className={cn(td, 'text-muted')}>{label}</td>
                    {columns.map((c) => (
                      <td key={c.key} className={tdNum}>
                        {c.rows[ri]?.[1] ?? <span className="text-subtle">—</span>}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </Table>
          </Card>

          {/* phone: one card per item, swipeable */}
          <div className="md:hidden">
            <h2 className="mb-2 text-sm font-semibold">Key metrics</h2>
            <div className="scrollbar-none -mx-4 flex snap-x snap-mandatory gap-3 overflow-x-auto px-4 pb-1">
              {columns.map((c) => (
                <article key={c.key} className="card w-[86vw] max-w-sm shrink-0 snap-center overflow-hidden">
                  <header className="flex items-center gap-2.5 border-b border-border px-3 py-2.5" style={{ boxShadow: `inset 3px 0 0 ${c.color}` }}>
                    {c.image !== undefined ? <Thumb src={c.image} alt="" size={36} rounded="rounded-md" /> : null}
                    <Link href={c.href} className="min-w-0 flex-1 truncate text-[13px] font-semibold text-fg">
                      {c.label}
                    </Link>
                  </header>
                  <dl className="divide-y divide-border text-[12px]">
                    {c.rows.map(([k, v]) => (
                      <div key={k} className="flex items-center justify-between gap-3 px-3 py-1.5">
                        <dt className="text-muted">{k}</dt>
                        <dd className="num text-right text-fg">{v}</dd>
                      </div>
                    ))}
                  </dl>
                </article>
              ))}
            </div>
            <p className="mt-1 text-center text-[10px] text-subtle">Swipe to compare</p>
          </div>
        </div>
      ) : (
        <Card className="mt-4">
          <EmptyState title="Pick items to compare" description="Search an asset name or use index tickers such as RARE, RARE-TCG, RARE-WATCH. Up to four items; the URL is shareable." />
        </Card>
      )}
    </div>
  );
}