import type { Metadata } from 'next';
import Link from 'next/link';
import { PageHeader } from '@/components/ui/page-header';
import { Card, CardHeader, EmptyState, Stat } from '@/components/ui/primitives';
import { Segmented } from '@/components/ui/tabs';
import { LineChart } from '@/components/charts/line-chart';
import { HistoryTab } from '@/components/asset/asset-tabs';
import { getAssetBySlug, getAssetSalePoints, getAssetVariants, rankedAssets } from '@/lib/queries/assets';
import { searchAssets } from '@rareindex/search';
import { fmtMoney, fmtNum, confidenceLabel } from '@/lib/format';
import { catName, gradeLabel } from '@/lib/taxonomy';
import { sp1, spEnum, type SP } from '@/lib/search-params';
import { AssetList } from '@/components/market/asset-list';

export const metadata: Metadata = { title: 'Price history', description: 'Search any tracked collectible and view its full price history: sales, RareIndex Valuation, lowest ask and volume.' };

const PERIODS = ['1y', '2y', '5y', 'all'] as const;

/** ISO day string N days ago ('' for no cutoff); kept outside components so render stays pure. */
function windowCutoffIso(days: number | null): string {
  if (!days) return '';
  return new Date(Date.now() - days * 86_400_000).toISOString().slice(0, 10);
}

export default async function PriceHistoryPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const slug = sp1(sp, 'asset') ?? null;
  const q = sp1(sp, 'q') ?? '';
  const period = spEnum(sp, 'p', PERIODS, '2y');
  const vId = sp1(sp, 'v') ?? null;
  const asset = slug ? await getAssetBySlug(slug) : null;
  return (
    <div>
      <PageHeader kicker="Series" title="Price history" description="Historical series for any asset: verified sales as points, daily RIV, lowest ask and volume. Never interpolated; gaps are gaps." compact />
      <form action="/price-history" className="mb-4 flex max-w-xl gap-2">
        <input name="q" defaultValue={q} placeholder="Find an asset… e.g. Charizard 1st edition PSA 10" className="h-10 flex-1 rounded-md border border-border bg-elevated px-3 text-[14px] text-fg placeholder:text-subtle focus:border-border-strong focus:outline-none" aria-label="Find an asset" />
        <button type="submit" className="h-10 rounded-md bg-accent px-4 text-sm font-medium text-accent-fg">
          Find
        </button>
      </form>
      {asset ? (
        <Selected asset={asset} period={period} vId={vId} />
      ) : q ? (
        <Results q={q} />
      ) : (
        <Popular />
      )}
    </div>
  );
}

async function Selected({ asset, period, vId }: { asset: NonNullable<Awaited<ReturnType<typeof getAssetBySlug>>>; period: (typeof PERIODS)[number]; vId: string | null }) {
  const variants = await getAssetVariants(asset.id);
  const variant = vId ? variants.find((v) => v.id === vId) ?? null : null;
  const points = await getAssetSalePoints(asset.id, 5000);
  const days = period === '1y' ? 365 : period === '2y' ? 730 : period === '5y' ? 1826 : null;
  const cutoff = windowCutoffIso(days);
  const scatter = points.filter((p) => (!variant || p.variantId === variant.id) && p.date >= cutoff);
  const href = (p: string, v: string | null) => `/price-history?asset=${asset.slug}&p=${p}${v ? `&v=${v}` : ''}`;
  return (
    <div className="grid gap-4">
      <Card className="p-4">
        <div className="flex flex-wrap items-start justify-between gap-3">
          <div>
            <Link href={`/asset/${asset.slug}`} className="text-base font-semibold text-fg hover:underline">
              {asset.title}
            </Link>
            <p className="text-xs text-muted">
              {catName(asset.categorySlug)}
              {variant ? ` · ${variant.label}` : ' · all variants'}
            </p>
          </div>
          <div className="flex flex-wrap gap-2">
            <Segmented active={period} options={PERIODS.map((p) => ({ id: p, label: p.toUpperCase(), href: href(p, variant?.id ?? null) }))} />
            {variants.length ? <Segmented active={variant?.id ?? 'all'} options={[{ id: 'all', label: 'All', href: href(period, null) }, ...variants.slice(0, 6).map((v) => ({ id: v.id, label: v.label, href: href(period, v.id) }))]} /> : null}
          </div>
        </div>
        <dl className="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-4">
          <Stat label="RIV" value={asset.rivUsd === null ? '—' : fmtMoney(asset.rivUsd)} sub={`${confidenceLabel(asset.rivConfidence)} · n=${asset.rivSampleSize}`} />
          <Stat label="Sales in window" value={fmtNum(scatter.length)} />
          <Stat label="Window high" value={scatter.length ? fmtMoney(Math.max(...scatter.map((p) => p.usd))) : '—'} />
          <Stat label="Window low" value={scatter.length ? fmtMoney(Math.min(...scatter.map((p) => p.usd))) : '—'} />
        </dl>
        <LineChart ariaLabel="Sales scatter" height={320} currency className="mt-3" reference={asset.rivUsd !== null ? { value: asset.rivUsd, label: 'RIV' } : null} series={[{ id: 'sales', label: 'Verified sales', kind: 'dots', points: scatter.map((p) => ({ x: p.date, y: p.usd, meta: `${gradeLabel(p.grader, p.grade) ?? 'raw'} · ${p.sourceName}` })) }]} emptyLabel="No verified sales in this window" />
      </Card>
      <HistoryTab asset={asset} variant={variant} />
    </div>
  );
}

async function Results({ q }: { q: string }) {
  const res = await searchAssets(q, { limit: 20 });
  return (
    <Card className="overflow-hidden">
      <CardHeader title={`Matches for “${q}”`} subtitle="Pick an asset to open its history" />
      {res.hits.length ? (
        <ul className="divide-y divide-border text-[13px]">
          {res.hits.map((h) => (
            <li key={h.id}>
              <Link href={`/price-history?asset=${h.slug}`} className="flex items-center justify-between gap-3 px-4 py-2 hover:bg-sunken">
                <span className="min-w-0">
                  <span className="block truncate font-medium text-fg">{h.title}</span>
                  <span className="text-[11px] text-muted">
                    {catName(h.categorySlug)} · {h.salesCount} sales
                  </span>
                </span>
                <span className="num text-muted">{h.rivUsd === null ? '—' : fmtMoney(h.rivUsd)}</span>
              </Link>
            </li>
          ))}
        </ul>
      ) : (
        <EmptyState title="No matches" />
      )}
    </Card>
  );
}

async function Popular() {
  const items = await rankedAssets('volume', { limit: 20 });
  return (
    <Card className="overflow-hidden">
      <CardHeader title="Most traded · 30 days" subtitle="Start with the assets that have the richest history" />
      <AssetList items={items} columns={['riv', 'sales30d', 'change30d', 'liquidity']} emptyTitle="No traded assets yet" />
    </Card>
  );
}