import type { Metadata } from 'next';
import Link from 'next/link';
import { Suspense } from 'react';
import { PageHeader } from '@/components/ui/page-header';
import { FilterBar } from '@/components/ui/filter-bar';
import { Pagination } from '@/components/ui/pagination';
import { Delta, EmptyState, Skeleton, Table, VsRiv, th, td, tdNum } from '@/components/ui/primitives';
import { Thumb } from '@/components/ui/tile-image';
import { screenAssets, type ScreenerRow } from '@/lib/queries/screener';
import { DEFAULT_SORT, PRESETS, SCREENER_KEYS, isPlausibleChange, parseScreenerParams, type ScreenerSort, type SortDir } from '@/lib/screener';
import { catName } from '@/lib/taxonomy';
import { cn, confidenceLabel, fmtMoney, fmtNum, fmtPct } from '@/lib/format';
import { CATEGORIES, GRADERS } from '@rareindex/taxonomy';
import { pick, sp1, withParams, type SP } from '@/lib/search-params';

export const metadata: Metadata = {
  title: 'Market Screener',
  description: 'Screen every valued collectible by RareIndex Valuation, confidence, momentum, liquidity, rarity, sales velocity, listing depth, ask spread and drawdown. Presets for the most liquid, most traded, largest drawdowns, near all-time-high, rising volume and potentially underpriced assets.',
};

const PCT_TITLE_HELD = 'Implausible move held back (beyond ±500 %): a data or identity artefact, not a market signal.';

interface Col {
  id: ScreenerSort | 'asset';
  label: string;
  title: string;
  numeric?: boolean;
}
const COLUMNS: Col[] = [
  { id: 'asset', label: 'Asset', title: 'Canonical asset (category · year · set)' },
  { id: 'riv', label: 'RIV', title: 'RareIndex Valuation with confidence label and number of transactions used', numeric: true },
  { id: 'change30d', label: '1M', title: 'Change in RIV over 30 days (representative variant)', numeric: true },
  { id: 'change1y', label: '1Y', title: 'Change in RIV over 1 year (representative variant)', numeric: true },
  { id: 'liquidity', label: 'Liq.', title: 'Liquidity Score 0–100: sales frequency, listing depth, sources, days between sales, ask/sold spread', numeric: true },
  { id: 'rarity', label: 'Rarity', title: 'Rarity Score 0–100 from population, production and market appearances (null without a supply signal)', numeric: true },
  { id: 'sales30d', label: 'Sales 30D', title: 'Verified sales in the last 30 days', numeric: true },
  { id: 'listings', label: 'Listings', title: 'Active listings observed', numeric: true },
  { id: 'spread', label: 'Spread', title: 'Lowest ask of the representative variant vs RIV — only for transaction-based valuations (≥ 5 sales, medium+ confidence) within a plausible 0.1×–10× ratio', numeric: true },
  { id: 'drawdown', label: 'Drawdown', title: 'RIV (representative variant) vs the all-time-high verified sale of the asset — the ATH may belong to another variant (e.g. a sealed or top-graded copy), so very deep drawdowns often reflect variant spread rather than a price fall', numeric: true },
  { id: 'volume30d', label: 'Vol. 30D', title: 'USD volume of verified sales in the last 30 days', numeric: true },
];

export default async function ScreenerPage({ searchParams }: { searchParams: Promise<SP> }) {
  const sp = await searchParams;
  const filters = parseScreenerParams(sp);
  const params = pick(sp, SCREENER_KEYS);
  const preset = sp1(sp, 'preset') ?? null;
  const activePreset = PRESETS.find((p) => p.id === preset) ?? null;
  const categoryOptions = CATEGORIES.map((c) => ({ value: c.slug, label: `${'  '.repeat(c.level)}${c.level ? '↳ ' : ''}${c.name}` }));
  const exportHref = withParams('/screener/export', { ...params, page: null, size: null });
  return (
    <div>
      <PageHeader
        kicker="Terminal"
        title="Market Screener"
        description="Every valued collectible (≥ 3 verified sales) filtered and ranked like a securities screen: valuation, confidence, momentum, liquidity, rarity, sales velocity, listing depth, ask spread and drawdown. Filters live in the URL, so any screen is shareable. Analytical data, not investment advice."
        compact
        actions={
          <>
            <a href={exportHref} className="btn btn-sm h-8 text-[12px]" rel="nofollow" title="Download the current screen (max 5 000 rows)">
              Export CSV
            </a>
            <a href={withParams('/screener/export', { ...params, page: null, size: null, format: 'json' })} className="btn btn-sm h-8 text-[12px]" rel="nofollow">
              JSON
            </a>
          </>
        }
      />
      <div className="mb-3 flex flex-col gap-2">
        <div className="rail sm:mx-0 sm:flex-wrap sm:px-0 sm:[&>*]:flex-initial" role="list" aria-label="Screener presets">
          <a href="/screener" className={cn('chip', !preset && 'chip-active')} role="listitem">
            All valued
          </a>
          {PRESETS.map((p) => (
            <a key={p.id} href={withParams('/screener', { preset: p.id, category: params.category ?? null })} className={cn('chip', preset === p.id && 'chip-active')} title={p.description} role="listitem">
              {p.label}
            </a>
          ))}
        </div>
        {activePreset ? <p className="text-[12px] text-muted">{activePreset.description}</p> : null}
        <Suspense>
          <FilterBar
            resetKeys={['preset', 'sort', 'dir']}
            fields={[
              { name: 'q', label: 'Search', type: 'text', placeholder: 'title contains…', width: 'w-40' },
              { name: 'category', label: 'Category', type: 'select', options: categoryOptions, width: 'w-48' },
              { name: 'grader', label: 'Grader', type: 'select', options: GRADERS.filter((g) => g.slug !== 'raw').map((g) => ({ value: g.slug, label: g.name })), width: 'w-28' },
              { name: 'grade', label: 'Grade', type: 'text', placeholder: '10', width: 'w-16' },
              { name: 'min', label: 'RIV ≥ $', type: 'number', placeholder: '0', width: 'w-24' },
              { name: 'max', label: 'RIV ≤ $', type: 'number', placeholder: '∞', width: 'w-24' },
              { name: 'conf', label: 'Confidence', type: 'select', options: [{ value: '0.5', label: 'Medium or better' }, { value: '0.75', label: 'High only' }], placeholder: 'Any', width: 'w-36' },
              { name: 'liq', label: 'Liquidity ≥', type: 'number', placeholder: '0–100', width: 'w-20' },
              { name: 'rar', label: 'Rarity ≥', type: 'number', placeholder: '0–100', width: 'w-20' },
              { name: 'c30min', label: '1M ≥ %', type: 'number', placeholder: '-100…', width: 'w-20' },
              { name: 'c1ymin', label: '1Y ≥ %', type: 'number', placeholder: '-100…', width: 'w-20' },
              { name: 's30', label: 'Sales 30D ≥', type: 'number', placeholder: '0', width: 'w-20' },
              { name: 's1y', label: 'Sales 1Y ≥', type: 'number', placeholder: '0', width: 'w-20' },
              { name: 'lst', label: 'Listings ≥', type: 'number', placeholder: '0', width: 'w-20' },
              { name: 'spmax', label: 'Spread ≤ %', type: 'number', placeholder: 'e.g. -10', width: 'w-24' },
              { name: 'ddmax', label: 'Drawdown ≤ %', type: 'number', placeholder: 'e.g. -30', width: 'w-24' },
              { name: 'from', label: 'Year ≥', type: 'number', placeholder: '1900', width: 'w-20' },
              { name: 'to', label: 'Year ≤', type: 'number', placeholder: '2026', width: 'w-20' },
            ]}
          />
        </Suspense>
      </div>
      <Suspense fallback={<Skeleton className="h-96" />}>
        <Results filters={filters} params={params} />
      </Suspense>
      <p className="mt-3 max-w-4xl text-[11px] leading-relaxed text-subtle">
        Percent moves beyond ±500 % and asks outside 0.1×–10× of the valuation are held back as data/identity anomalies (never shown as signals). Spread and “Potentially Underpriced” use only transaction-based valuations with ≥ 5 sales and medium or better confidence. Scores are explained in the{' '}
        <Link href="/methodology" className="underline-offset-4 hover:text-fg hover:underline">
          Methodology Center
        </Link>{' '}
        and coverage in{' '}
        <Link href="/data" className="underline-offset-4 hover:text-fg hover:underline">
          Data
        </Link>
        .
      </p>
    </div>
  );
}

function SortHeader({ col, filters, params }: { col: Col; filters: ReturnType<typeof parseScreenerParams>; params: Record<string, string | undefined> }) {
  if (col.id === 'asset') {
    const active = filters.sort === 'name';
    return (
      <th className={th} title={col.title} aria-sort={active ? (filters.dir === 'asc' ? 'ascending' : 'descending') : undefined}>
        <a href={withParams('/screener', { ...params, sort: 'name', dir: active && filters.dir === 'asc' ? 'desc' : 'asc', page: null })} className={cn('hover:text-fg', active && 'text-fg')}>
          {col.label}
          {active ? <span aria-hidden> {filters.dir === 'asc' ? '↑' : '↓'}</span> : null}
        </a>
      </th>
    );
  }
  const id = col.id as ScreenerSort;
  const active = filters.sort === id;
  const nextDir: SortDir = active ? (filters.dir === 'asc' ? 'desc' : 'asc') : DEFAULT_SORT[id];
  return (
    <th className={cn(th, col.numeric && 'text-right')} title={col.title} aria-sort={active ? (filters.dir === 'asc' ? 'ascending' : 'descending') : undefined}>
      <a href={withParams('/screener', { ...params, sort: id, dir: nextDir, page: null })} className={cn('hover:text-fg', active && 'text-fg')}>
        {col.label}
        {active ? <span aria-hidden> {filters.dir === 'asc' ? '↑' : '↓'}</span> : null}
      </a>
    </th>
  );
}

function Pct({ value, digits = 1 }: { value: number | null; digits?: number }) {
  if (value === null || value === undefined) return <span className="text-subtle">—</span>;
  if (!isPlausibleChange(value)) return <span className="text-subtle" title={PCT_TITLE_HELD}>—</span>;
  return <Delta value={value} digits={digits} />;
}

function Score({ value }: { value: number | null }) {
  if (value === null) return <span className="text-subtle">—</span>;
  const v = Math.round(value);
  return (
    <span className="inline-flex items-center justify-end gap-1.5">
      <span className="h-1 w-8 overflow-hidden rounded-full bg-inset" aria-hidden>
        <span className="block h-full bg-fg/60" style={{ width: `${Math.max(2, Math.min(100, v))}%` }} />
      </span>
      <span>{v}</span>
    </span>
  );
}

async function Results({ filters, params }: { filters: ReturnType<typeof parseScreenerParams>; params: Record<string, string | undefined> }) {
  const res = await screenAssets(filters);
  if (!res.items.length) {
    return <EmptyState title="No asset matches this screen" description="Loosen a threshold or clear the preset. Only assets with a RareIndex Valuation resting on at least three verified sales are screenable; catalogued-only assets never appear here." action={<a href="/screener" className="btn btn-sm">Reset screen</a>} />;
  }
  const startRank = (res.page - 1) * res.pageSize;
  return (
    <>
      <p className="mb-2 num text-[11px] text-subtle">
        {res.total.toLocaleString('en-US')} assets match · sorted by {filters.sort} {filters.dir === 'asc' ? '↑' : '↓'} · page {res.page}
      </p>
      <div className="card overflow-hidden">
        <Table>
          <thead>
            <tr>
              <th className={cn(th, 'w-8 text-right')}>#</th>
              {COLUMNS.map((c) => (
                <SortHeader key={c.id} col={c} filters={filters} params={params} />
              ))}
            </tr>
          </thead>
          <tbody>
            {res.items.map((a, i) => (
              <Row key={a.id} a={a} rank={startRank + i + 1} />
            ))}
          </tbody>
        </Table>
      </div>
      <Pagination page={res.page} pageSize={res.pageSize} total={res.total} basePath="/screener" params={params} />
    </>
  );
}

function Row({ a, rank }: { a: ScreenerRow; rank: number }) {
  return (
    <tr className="hover:bg-sunken">
      <td className={cn(tdNum, 'text-subtle')}>{rank}</td>
      <td className={cn(td, 'max-w-[320px]')}>
        <Link href={`/asset/${a.slug}`} className="flex items-center gap-2.5">
          <Thumb src={a.heroImageUrl} alt="" size={32} familySlug={a.familySlug} />
          <span className="min-w-0">
            <span className="block truncate text-[13px] font-medium text-fg">{a.title}</span>
            <span className="block truncate text-[11px] text-muted">
              {catName(a.categorySlug)}
              {a.year ? ` · ${a.year}` : ''}
              {a.setName ? ` · ${a.setName}` : ''}
            </span>
          </span>
        </Link>
      </td>
      <td className={tdNum}>
        <span className="block font-semibold text-fg">{fmtMoney(a.rivUsd)}</span>
        <span className="block text-[10px] text-subtle" title={a.rivLowUsd !== null && a.rivHighUsd !== null ? `Range ${fmtMoney(a.rivLowUsd)} – ${fmtMoney(a.rivHighUsd)}` : undefined}>
          {confidenceLabel(a.rivConfidence)} · n={a.rivSampleSize}
        </span>
      </td>
      <td className={tdNum}>
        <Pct value={a.change30d} />
      </td>
      <td className={tdNum}>
        <Pct value={a.change1y} />
      </td>
      <td className={tdNum}>
        <Score value={a.liquidityScore} />
      </td>
      <td className={tdNum}>
        <Score value={a.rarityScore} />
      </td>
      <td className={tdNum}>
        {fmtNum(a.sales30d)}
        <span className="block text-[10px] text-subtle">{fmtNum(a.sales1y)} / 1Y</span>
      </td>
      <td className={tdNum}>{fmtNum(a.activeListings)}</td>
      <td className={tdNum}>
        {a.spread === null ? (
          <span className="text-subtle" title={a.minAskUsd === null ? 'No active ask for the representative variant' : 'Ask not compared: valuation below the transaction gate (≥ 5 sales, medium+ confidence) or implausible ratio'}>
            —
          </span>
        ) : (
          <span className="inline-flex flex-col items-end leading-tight">
            <VsRiv discount={a.spread} showLabel={false} />
            {a.minAskUsd !== null ? <span className="text-[10px] text-subtle">ask {fmtMoney(a.minAskUsd)}</span> : null}
          </span>
        )}
      </td>
      <td className={tdNum}>
        {a.drawdown === null ? (
          <span className="text-subtle">—</span>
        ) : (
          <span className="inline-flex flex-col items-end leading-tight">
            <span className={a.drawdown <= -0.0005 ? 'text-loss' : 'text-flat'}>{fmtPct(a.drawdown, 1, false)}</span>
            {a.athUsd !== null ? <span className="text-[10px] text-subtle">ATH {fmtMoney(a.athUsd)}</span> : null}
          </span>
        )}
      </td>
      <td className={tdNum}>{a.volume30dUsd !== null && a.volume30dUsd > 0 ? fmtMoney(a.volume30dUsd, 'USD', { compact: true }) : <span className="text-subtle">—</span>}</td>
    </tr>
  );
}