import Link from 'next/link';
import { imageProps } from '@/lib/images';
import { SmartImage } from '@/components/ui/smart-image';
import { glyphForFamily } from '@/lib/image-glyph';
import type { AssetDetail, VariantRow } from '@/lib/queries/assets';
import { getAssetImages, getAssetListings, getAssetObservations, getAssetSalePoints, getAssetSales, getAssetSnapshots, getAssetSources, getComparables, getGradeDistribution, getLatestValuation, getMarketplaceDistribution, getPopulation, getPriceDistribution, getSetSiblings, getSimilarAssets, attachGuidePrices, getValuationHistory } from '@/lib/queries/assets';
import { AssetCardGrid } from '@/components/market/asset-list';
import { fmtDate, fmtMoney, fmtNum, fmtRelative, cn } from '@/lib/format';
import { gradeLabel, humanize, catName } from '@/lib/taxonomy';
import { Card, CardHeader, EmptyState, Table, th, td, tdNum, Badge, Delta } from '@/components/ui/primitives';
import { LineChart } from '@/components/charts/line-chart';
import { PriceChart } from '@/components/charts/price-chart';
import { SalesCards, ListingsCards } from './sales-cards';
import { BarChart } from '@/components/charts/bar-chart';
import { SalesTable, ListingsTable } from '@/components/market/sales-table';
import { SourceLink, Thumb } from '@/components/market/bits';
import { Evidence } from '@/components/ui/evidence';
import { getAssetDepth, getAssetLiquidation } from '@/lib/queries/depth';
import { DepthLiquidationCard } from './depth-card';
import { countVerification } from '@rareindex/valuation';
import { listAssetLots } from '@/lib/queries/market-lists';
import { LotsIntelCards, LotsIntelTable } from '@/components/market/lots-table';

export const ASSET_TABS = ['overview', 'sales', 'listings', 'auctions', 'grades', 'population', 'images', 'history', 'comparables', 'analysis', 'sources'] as const;
export type AssetTab = (typeof ASSET_TABS)[number];

export async function OverviewTab({ asset, variant }: { asset: AssetDetail; variant: VariantRow | null }) {
  const vid = variant?.id ?? '';
  const [snaps, points, dist, sales, listings, obs, valuation, siblings, similar, valHist] = await Promise.all([
    getAssetSnapshots(asset.id, vid),
    getAssetSalePoints(asset.id),
    getPriceDistribution(asset.id, variant?.id ?? null),
    getAssetSales(asset.id, { variantId: variant?.id ?? null, limit: 8 }),
    getAssetListings(asset.id, { variantId: variant?.id ?? null, limit: 6 }),
    getAssetObservations(asset.id, 12),
    getLatestValuation(asset.id, variant?.id ?? null),
    getSetSiblings(asset, 8).then(attachGuidePrices),
    getSimilarAssets(asset, 8).then(attachGuidePrices),
    getValuationHistory(asset.id, variant?.id ?? null),
  ]);
  const lots = await listAssetLots(asset.id, 6);
  const [depth, liquidation] = await Promise.all([
    getAssetDepth(asset.id, variant?.id ?? null),
    getAssetLiquidation({ id: asset.id, categorySlug: asset.categorySlug, rivUsd: variant ? variant.rivUsd : asset.rivUsd, rivLowUsd: variant ? variant.rivLowUsd : asset.rivLowUsd, rivHighUsd: variant ? variant.rivHighUsd : asset.rivHighUsd }),
  ]);
  const verification = countVerification(sales.items.map((s) => s.verification));
  const bandByDate = new Map(valHist.map((h) => [h.date, h]));
  const similarOnly = similar.filter((x) => !siblings.some((y) => y.id === x.id));
  const scatter = variant ? points.filter((p) => p.variantId === variant.id) : points;
  const rivSeries = snaps.filter((p) => p.rivUsd != null).map((p) => ({ x: p.date, y: p.rivUsd! }));
  const askSeries = snaps.filter((p) => p.minAskUsd != null).map((p) => ({ x: p.date, y: p.minAskUsd! }));
  const obsSeries = snaps.filter((p) => p.observationUsd != null).map((p) => ({ x: p.date, y: p.observationUsd! }));
  const riv = variant ? variant.rivUsd : asset.rivUsd;
  return (
    <div className="grid gap-4">
      <Card className="p-4">
        <div className="flex flex-wrap items-baseline justify-between gap-2">
          <div>
            <h2 className="text-sm font-semibold">Price history</h2>
            <p className="text-xs text-muted">Verified sales (dots) with the daily RareIndex Valuation, lowest ask and guide observations when available. USD at historical FX.</p>
          </div>
          <Link href={`/price-history?asset=${asset.slug}`} className="text-xs text-muted hover:text-fg">
            Full history →
          </Link>
        </div>
        <PriceChart
          ariaLabel={`Price history for ${asset.title}`}
          height={320}
          className="mt-3"
          defaultPeriod={scatter.length > 30 || rivSeries.length > 400 ? '1Y' : 'ALL'}
          reference={riv !== null ? { value: riv, label: `RIV ${fmtMoney(riv)}` } : null}
          sales={scatter.map((p) => ({ date: p.date, usd: p.usd, label: `${gradeLabel(p.grader, p.grade) ?? 'raw'} · ${p.sourceName}`, variantId: p.variantId }))}
          riv={rivSeries.map((p) => { const b = bandByDate.get(p.x); return { x: p.x, y: p.y, low: b?.lowUsd ?? null, high: b?.highUsd ?? null }; })}
          ask={askSeries}
          guide={obsSeries}
          emptyLabel="No priced observations yet for this asset"
        />
      </Card>
      <div className="grid gap-4 lg:grid-cols-3">
        <Card>
          <CardHeader title="Valuation breakdown" subtitle={valuation ? `${valuation.method} · window ${valuation.windowDays}d` : 'No valuation computed'} />
          {valuation ? (
            <div className="p-4">
              <Evidence confidence={valuation.confidence} sampleSize={valuation.sampleSize} updatedAt={valuation.computedAt} />
              {sales.items.length ? (
                <p className="mt-1 text-[11px] text-subtle" title="Heuristic labels on the recent sales shown below: source type, sale type, match confidence, source trust (§39)">
                  Recent sales: {verification.verified} verified · {verification.likely} likely · {verification.unverified} unverified{verification.excluded ? ` · ${verification.excluded} excluded` : ''}
                </p>
              ) : null}
              <Table className="mt-3">
                <tbody>
                  {Object.entries(valuation.methods).map(([k, v]) => (
                    <tr key={k}>
                      <td className={cn(td, 'text-muted')}>{humanize(k)}</td>
                      <td className={tdNum}>{v === null ? <span className="text-subtle">—</span> : fmtMoney(v)}</td>
                    </tr>
                  ))}
                  <tr>
                    <td className={cn(td, 'font-medium')}>RIV</td>
                    <td className={cn(tdNum, 'font-semibold')}>{fmtMoney(valuation.rivUsd)}</td>
                  </tr>
                  <tr>
                    <td className={cn(td, 'text-muted')}>Low – high</td>
                    <td className={tdNum}>
                      {fmtMoney(valuation.lowUsd)} – {fmtMoney(valuation.highUsd)}
                    </td>
                  </tr>
                </tbody>
              </Table>
              {valuation.notes.length ? <ul className="mt-2 list-disc pl-4 text-[11px] text-muted">{valuation.notes.map((n, i) => <li key={i}>{n}</li>)}</ul> : null}
              {valuation.observationsUsed ? <p className="mt-2 text-[11px] text-subtle">{valuation.observationsUsed} guide observations were used as a weak prior (weighted below transactions).</p> : null}
            </div>
          ) : (
            <EmptyState title="Data unavailable" description="RIV is published only once enough verified sales exist (§115, §192)." className="py-8" />
          )}
        </Card>
        <Card>
          <CardHeader title="Price distribution · 1Y" subtitle="Dispersion of verified sale prices, USD (§135)" />
          {dist ? (
            <dl className="grid grid-cols-3 gap-3 p-4 text-[12px]">
              {[
                ['Sales', fmtNum(dist.n)],
                ['Min', fmtMoney(dist.min)],
                ['P25', fmtMoney(dist.p25)],
                ['Median', fmtMoney(dist.median)],
                ['P75', fmtMoney(dist.p75)],
                ['Max', fmtMoney(dist.max)],
                ['Trimmed mean', fmtMoney(dist.trimmedMean)],
              ].map(([k, v]) => (
                <div key={k}>
                  <dt className="text-[10px] uppercase tracking-wider text-subtle">{k}</dt>
                  <dd className="num font-medium text-fg">{v}</dd>
                </div>
              ))}
            </dl>
          ) : (
            <EmptyState title="No sales in the last year" className="py-8" />
          )}
        </Card>
        <Card>
          <CardHeader title="Guide prices" subtitle="Price-guide observations — informative, not transactions" />
          {obs.length ? (
            <ul className="divide-y divide-border text-[12px]">
              {obs.slice(0, 8).map((o) => (
                <li key={o.id} className="flex items-center justify-between gap-2 px-4 py-1.5">
                  <span className="text-muted">
                    <SourceLink name={o.sourceName} url={o.sourceUrl} /> · {humanize(o.priceKind)}
                  </span>
                  <span className="num">
                    <span className="font-medium">{fmtMoney(o.priceUsd)}</span>
                    <span className="ml-1 text-[10px] text-subtle">{o.observationDate}</span>
                  </span>
                </li>
              ))}
            </ul>
          ) : (
            <EmptyState title="No guide observations" className="py-8" />
          )}
        </Card>
      </div>
      <DepthLiquidationCard depth={depth} liquidation={liquidation} riv={riv} variantLabel={variant?.label ?? null} />
      {lots.length ? (
        <Card className="overflow-hidden">
          <CardHeader title="Live auctions" subtitle="All-in = hammer + buyer's premium (house schedule); bid vs RIV gated like listings — model analytics, not advice" action={<Link href="?tab=auctions" className="text-muted hover:text-fg">All →</Link>} />
          <div className="md:hidden"><LotsIntelCards items={lots} /></div>
          <div className="hidden md:block"><LotsIntelTable items={lots} /></div>
        </Card>
      ) : null}
      <div className="grid gap-4 lg:grid-cols-2">
        <Card className="overflow-hidden">
          <CardHeader title="Recent sales" action={<Link href={`?tab=sales${variant ? `&v=${variant.id}` : ''}`} className="text-muted hover:text-fg">All {sales.total} →</Link>} />
          <div className="md:hidden"><SalesCards items={sales.items} /></div>
          <div className="hidden md:block"><SalesTable items={sales.items} showAsset={false} /></div>
        </Card>
        <Card className="overflow-hidden">
          <CardHeader title="Live listings" subtitle="Asking prices, not market value" action={<Link href={`?tab=listings${variant ? `&v=${variant.id}` : ''}`} className="text-muted hover:text-fg">All →</Link>} />
          <div className="md:hidden"><ListingsCards items={listings} /></div>
          <div className="hidden md:block"><ListingsTable items={listings} showAsset={false} /></div>
        </Card>
      </div>
      {asset.description ? (
        <Card className="p-4">
          <h2 className="text-sm font-semibold">About</h2>
          <p className="mt-1 whitespace-pre-line text-[13px] leading-relaxed text-muted">{asset.description}</p>
        </Card>
      ) : null}
      {siblings.length ? (
        <section>
          <div className="mb-2 flex items-baseline justify-between">
            <h2 className="text-sm font-semibold">Other assets in {asset.setName ?? 'this set'}</h2>
            {asset.setSlug ? (
              <Link href={`/set/${asset.setSlug}`} className="text-xs text-muted hover:text-fg">
                Whole set →
              </Link>
            ) : null}
          </div>
          <AssetCardGrid items={siblings} metric="latestSale" />
        </section>
      ) : null}
      {similarOnly.length ? (
        <section>
          <div className="mb-2 flex items-baseline justify-between">
            <h2 className="text-sm font-semibold">Similar assets</h2>
            <Link href={`/search?q=${encodeURIComponent(asset.name)}`} className="text-xs text-muted hover:text-fg">
              Search “{asset.name}” →
            </Link>
          </div>
          <AssetCardGrid items={similarOnly} metric="latestSale" />
        </section>
      ) : null}
    </div>
  );
}

export async function SalesTab({ asset, variant, page }: { asset: AssetDetail; variant: VariantRow | null; page: number }) {
  const pageSize = 50;
  const res = await getAssetSales(asset.id, { variantId: variant?.id ?? null, limit: pageSize, offset: (page - 1) * pageSize, includeFlagged: true });
  return (
    <Card className="overflow-hidden">
      <CardHeader title={`Sales${variant ? ` · ${variant.label}` : ''}`} subtitle={`${res.total.toLocaleString('en-US')} observed transactions · flagged rows are kept for audit (§116) and excluded from valuation`} />
      <div className="md:hidden"><SalesCards items={res.items} /></div>
      <div className="hidden md:block"><SalesTable items={res.items} showAsset={false} /></div>
      {res.total > pageSize ? (
        <div className="flex items-center justify-between px-4 py-3 text-xs text-muted">
          <span className="num">
            page {page} / {Math.ceil(res.total / pageSize)}
          </span>
          <span className="flex gap-2">
            {page > 1 ? (
              <Link href={`?tab=sales&page=${page - 1}${variant ? `&v=${variant.id}` : ''}`} className="inline-flex h-9 items-center rounded-md border border-border px-3 font-medium text-fg hover:bg-inset">
                ← Newer
              </Link>
            ) : null}
            {page * pageSize < res.total ? (
              <Link href={`?tab=sales&page=${page + 1}${variant ? `&v=${variant.id}` : ''}`} className="inline-flex h-9 items-center rounded-md border border-border px-3 font-medium text-fg hover:bg-inset">
                Older →
              </Link>
            ) : null}
          </span>
        </div>
      ) : null}
    </Card>
  );
}

export async function ListingsTab({ asset, variant }: { asset: AssetDetail; variant: VariantRow | null }) {
  const [live, all] = await Promise.all([getAssetListings(asset.id, { variantId: variant?.id ?? null, limit: 100 }), getAssetListings(asset.id, { variantId: variant?.id ?? null, availability: 'all', limit: 100 })]);
  const ended = all.filter((l) => l.availability !== 'available');
  return (
    <div className="grid gap-4">
      <Card className="overflow-hidden">
        <CardHeader title="Active listings" subtitle="Sorted by asking price (USD). Cross-listings of the same physical item are grouped when detected." />
        <div className="md:hidden"><ListingsCards items={live} /></div>
        <div className="hidden md:block"><ListingsTable items={live} showAsset={false} /></div>
      </Card>
      {ended.length ? (
        <Card className="overflow-hidden">
          <CardHeader title="Ended / removed listings" subtitle="Listing lifecycle is retained (new → price changed → sold/removed)" />
          <div className="md:hidden"><ListingsCards items={ended} /></div>
          <div className="hidden md:block"><ListingsTable items={ended} showAsset={false} /></div>
        </Card>
      ) : null}
    </div>
  );
}

export async function AuctionsTab({ asset }: { asset: AssetDetail }) {
  const lots = await listAssetLots(asset.id, 100);
  return (
    <Card className="overflow-hidden">
      <CardHeader title="Live and upcoming auction lots" subtitle="The house's estimate and current bid in native currency; the all-in column adds the buyer's premium from the house's published or estimated schedule (VAT/duties/shipping excluded). Bid vs RIV uses the same gates as listings. Model analytics, not advice." />
      <div className="md:hidden">
        <LotsIntelCards items={lots} />
        {!lots.length ? <EmptyState title="No open auction lot" description="Lots matched to this asset appear when auction-house connectors publish catalogues." /> : null}
      </div>
      <div className="hidden md:block">
        <LotsIntelTable items={lots} emptyTitle="No open auction lot" emptyDescription="Lots matched to this asset appear when auction-house connectors publish catalogues." />
      </div>
    </Card>
  );
}

export async function GradesTab({ asset }: { asset: AssetDetail }) {
  const rows = await getGradeDistribution(asset.id);
  const graded = rows.filter((r) => r.grader !== 'raw');
  return (
    <div className="grid gap-4 lg:grid-cols-[3fr_2fr]">
      <Card className="overflow-hidden">
        <CardHeader title="Sales by grade" subtitle="Median and last sale per grader/grade — premiums are observed, never assumed across graders (§118)" />
        {rows.length ? (
          <Table>
            <thead>
              <tr>
                <th className={th}>Grade</th>
                <th className={cn(th, 'text-right')}>Sales</th>
                <th className={cn(th, 'text-right')}>Median</th>
                <th className={cn(th, 'text-right')}>Min</th>
                <th className={cn(th, 'text-right')}>Max</th>
                <th className={cn(th, 'text-right')}>Last sale</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr key={`${r.grader}-${r.grade}`} className="hover:bg-sunken">
                  <td className={td}>
                    <Badge tone={r.grader === 'raw' ? 'neutral' : 'index'}>{gradeLabel(r.grader, r.grade) ?? 'Raw'}</Badge>
                  </td>
                  <td className={tdNum}>{fmtNum(r.sales)}</td>
                  <td className={cn(tdNum, 'font-medium')}>{fmtMoney(r.medianUsd)}</td>
                  <td className={tdNum}>{fmtMoney(r.minUsd)}</td>
                  <td className={tdNum}>{fmtMoney(r.maxUsd)}</td>
                  <td className={tdNum}>
                    {fmtMoney(r.lastSaleUsd)}
                    <span className="block text-[10px] text-subtle">{r.lastSaleAt ? fmtRelative(r.lastSaleAt) : ''}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </Table>
        ) : (
          <EmptyState title="No graded sales" description="Grade distribution appears once sales with grader and grade are ingested." />
        )}
      </Card>
      <Card>
        <CardHeader title="Median price by grade" />
        <div className="p-4">
          <BarChart ariaLabel="Median price by grade" currency data={graded.filter((g) => g.medianUsd != null).map((g) => ({ label: gradeLabel(g.grader, g.grade) ?? g.grade, value: g.medianUsd!, sublabel: `n=${g.sales}` }))} />
        </div>
      </Card>
    </div>
  );
}

export async function PopulationTab({ asset }: { asset: AssetDetail }) {
  const pops = await getPopulation(asset.id);
  const byGrader = new Map<string, typeof pops>();
  for (const p of pops) (byGrader.get(p.grader) ?? byGrader.set(p.grader, []).get(p.grader)!).push(p);
  if (!pops.length) return <Card><EmptyState title="Population data unavailable" description="Population reports appear when grading-company connectors publish a census for this asset. Counts are never estimated (§119, §192)." /></Card>;
  return (
    <div className="grid gap-4 lg:grid-cols-2">
      {[...byGrader.entries()].map(([grader, reports]) => {
        const latest = reports[reports.length - 1]!;
        const first = reports[0]!;
        const grades = Object.entries(latest.byGrade).sort((a, b) => Number(b[0]) - Number(a[0]));
        const top = grades[0];
        const gemRate = top && latest.total ? (top[1] / latest.total) : null;
        const growth = reports.length > 1 && first.total ? latest.total / first.total - 1 : null;
        return (
          <Card key={grader}>
            <CardHeader title={`${grader.toUpperCase()} population`} subtitle={`Report ${latest.reportDate}${latest.sourceUrl ? ' · ' : ''}`} action={latest.sourceUrl ? <SourceLink name="source" url={latest.sourceUrl} /> : null} />
            <dl className="grid grid-cols-4 gap-3 border-b border-border px-4 py-3 text-[12px]">
              <div><dt className="text-[10px] uppercase tracking-wider text-subtle">Total graded</dt><dd className="num font-semibold">{fmtNum(latest.total)}</dd></div>
              <div><dt className="text-[10px] uppercase tracking-wider text-subtle">Highest grade</dt><dd className="num font-semibold">{top ? `${top[0]} (${fmtNum(top[1])})` : '—'}</dd></div>
              <div><dt className="text-[10px] uppercase tracking-wider text-subtle">Top-grade rate</dt><dd className="num font-semibold">{gemRate === null ? '—' : `${(gemRate * 100).toFixed(1)}%`}</dd></div>
              <div><dt className="text-[10px] uppercase tracking-wider text-subtle">Population momentum</dt><dd className="num font-semibold"><Delta value={growth} /></dd></div>
            </dl>
            <div className="p-4">
              <BarChart ariaLabel={`${grader} population by grade`} data={grades.map(([g, n]) => ({ label: `Grade ${g}`, value: n }))} maxBars={20} />
              {reports.length > 1 ? <LineChart ariaLabel="Population over time" height={160} className="mt-4" series={[{ id: 'pop', label: 'Total population', points: reports.map((r) => ({ x: r.reportDate, y: r.total })) }]} /> : null}
            </div>
          </Card>
        );
      })}
    </div>
  );
}

export async function ImagesTab({ asset }: { asset: AssetDetail }) {
  const imgs = await getAssetImages(asset.id, 48);
  if (!imgs.length) return <Card><EmptyState title="No images stored" description="Images are referenced from their source with attribution; none have been captured for this asset yet." /></Card>;
  return (
    <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6">
      {imgs.map((im) => (
        <figure key={im.id} className="card overflow-hidden">
          <div className="relative aspect-square bg-inset">
            {(() => {
              const ip = imageProps(im.url, { maxWidth: 384 });
              return <SmartImage src={ip?.src ?? null} srcSet={ip?.srcSet ?? null} sizes="(max-width: 640px) 50vw, 200px" alt={asset.title} placeholder={{ glyph: glyphForFamily(asset.familySlug) }} />;
            })()}
          </div>
          <figcaption className="truncate px-2 py-1 text-[10px] text-subtle">
            {im.role}
            {im.attribution ? ` · ${im.attribution}` : im.sourceId ? ` · ${im.sourceId}` : ''}
          </figcaption>
        </figure>
      ))}
    </div>
  );
}

export async function HistoryTab({ asset, variant }: { asset: AssetDetail; variant: VariantRow | null }) {
  const snaps = await getAssetSnapshots(asset.id, variant?.id ?? '');
  return (
    <div className="grid gap-4">
      <Card className="p-4">
        <h2 className="text-sm font-semibold">Daily series</h2>
        <p className="text-xs text-muted">RIV, median sale, lowest ask and volume from daily snapshots{variant ? ` · ${variant.label}` : ''}</p>
        <LineChart ariaLabel="RIV and median history" height={260} currency className="mt-3" series={[{ id: 'riv', label: 'RIV', points: snaps.filter((s) => s.rivUsd != null).map((s) => ({ x: s.date, y: s.rivUsd! })) }, { id: 'median', label: 'Median sale', dashed: true, points: snaps.filter((s) => s.medianUsd != null).map((s) => ({ x: s.date, y: s.medianUsd! })) }, { id: 'ask', label: 'Lowest ask', dashed: true, points: snaps.filter((s) => s.minAskUsd != null).map((s) => ({ x: s.date, y: s.minAskUsd! })) }]} emptyLabel="No snapshot history yet" />
        <div className="mt-4 grid gap-4 md:grid-cols-2">
          <LineChart ariaLabel="Transaction volume" height={160} currency series={[{ id: 'vol', label: 'Volume (USD)', kind: 'step', points: snaps.map((s) => ({ x: s.date, y: s.volumeUsd ?? 0 })) }]} emptyLabel="No volume history" />
          <LineChart ariaLabel="Active listings" height={160} series={[{ id: 'lst', label: 'Active listings', kind: 'step', points: snaps.map((s) => ({ x: s.date, y: s.listingsCount })) }]} emptyLabel="No listings history" />
        </div>
      </Card>
      <Card className="overflow-hidden">
        <CardHeader title="Snapshot table" subtitle={`${snaps.length} days`} />
        {snaps.length ? (
          <Table>
            <thead>
              <tr>
                <th className={th}>Date</th>
                <th className={cn(th, 'text-right')}>RIV</th>
                <th className={cn(th, 'text-right')}>Median</th>
                <th className={cn(th, 'text-right')}>Last sale</th>
                <th className={cn(th, 'text-right')}>Sales</th>
                <th className={cn(th, 'text-right')}>Volume</th>
                <th className={cn(th, 'text-right')}>Listings</th>
                <th className={cn(th, 'text-right')}>Low ask</th>
              </tr>
            </thead>
            <tbody>
              {[...snaps].reverse().slice(0, 120).map((s) => (
                <tr key={s.date}>
                  <td className={cn(td, 'text-muted')}>{s.date}</td>
                  <td className={tdNum}>{fmtMoney(s.rivUsd)}</td>
                  <td className={tdNum}>{fmtMoney(s.medianUsd)}</td>
                  <td className={tdNum}>{fmtMoney(s.latestSaleUsd)}</td>
                  <td className={tdNum}>{s.salesCount}</td>
                  <td className={tdNum}>{fmtMoney(s.volumeUsd)}</td>
                  <td className={tdNum}>{s.listingsCount}</td>
                  <td className={tdNum}>{fmtMoney(s.minAskUsd)}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        ) : (
          <EmptyState title="No snapshots yet" description="Daily snapshots begin once the valuation worker has run for this asset." />
        )}
      </Card>
    </div>
  );
}

export async function ComparablesTab({ asset }: { asset: AssetDetail }) {
  const comps = await getComparables(asset, 12);
  return (
    <Card className="overflow-hidden">
      <CardHeader title="Comparable assets" subtitle="Same set/category, close valuation; similarity is a transparent attribute score (§134)" />
      {comps.length ? (
        <Table>
          <thead>
            <tr>
              <th className={th}>Asset</th>
              <th className={cn(th, 'text-right')}>Similarity</th>
              <th className={cn(th, 'text-right')}>RIV</th>
              <th className={cn(th, 'text-right')}>Last sale</th>
              <th className={cn(th, 'text-right')}>30D</th>
              <th className={cn(th, 'text-right')}>Sales</th>
              <th className={cn(th, 'text-right')}>Liquidity</th>
            </tr>
          </thead>
          <tbody>
            {comps.map((c) => (
              <tr key={c.id} className="hover:bg-sunken">
                <td className={cn(td, 'max-w-[360px]')}>
                  <span className="flex items-center gap-2">
                    <Thumb src={c.heroImageUrl} alt="" size={32} />
                    <span className="min-w-0">
                      <Link href={`/asset/${c.slug}`} className="block truncate font-medium text-fg hover:underline">
                        {c.title}
                      </Link>
                      <span className="text-[11px] text-muted">{catName(c.categorySlug)}</span>
                    </span>
                  </span>
                </td>
                <td className={tdNum}>{Math.round(c.similarity * 100)}%</td>
                <td className={tdNum}>{fmtMoney(c.rivUsd)}</td>
                <td className={tdNum}>{fmtMoney(c.latestSaleUsd)}</td>
                <td className={tdNum}><Delta value={c.change30d} /></td>
                <td className={tdNum}>{fmtNum(c.salesCount)}</td>
                <td className={tdNum}>{c.liquidityScore != null ? Math.round(c.liquidityScore) : '—'}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      ) : (
        <EmptyState title="No comparables yet" description="Comparables need other catalogued assets in the same set or category." />
      )}
    </Card>
  );
}

export function AnalysisTab({ asset }: { asset: AssetDetail }) {
  return (
    <Card>
      <EmptyState
        title="AI analysis"
        description="Ask the RareIndex research assistant about this asset. Answers are generated from RareIndex's structured data (sales, listings, valuations, indices) with citations — never from model memory."
        action={
          <Link href={`/research?asset=${asset.slug}`} className="rounded-md bg-accent px-3 py-1.5 text-xs font-medium text-accent-fg hover:opacity-90">
            Open in AI Research →
          </Link>
        }
      />
    </Card>
  );
}

export async function SourcesTab({ asset }: { asset: AssetDetail }) {
  const [sources, mkt] = await Promise.all([getAssetSources(asset.id), getMarketplaceDistribution(asset.id)]);
  return (
    <div className="grid gap-4 lg:grid-cols-[3fr_2fr]">
      <Card className="overflow-hidden">
        <CardHeader title="Data provenance" subtitle="Every datapoint on this page traces back to one of these sources (§142, §178)" />
        {sources.length ? (
          <Table>
            <thead>
              <tr>
                <th className={th}>Source</th>
                <th className={th}>Type</th>
                <th className={cn(th, 'text-right')}>Trust</th>
                <th className={cn(th, 'text-right')}>Sales</th>
                <th className={cn(th, 'text-right')}>Listings</th>
                <th className={cn(th, 'text-right')}>Observations</th>
                <th className={th}>Last seen</th>
              </tr>
            </thead>
            <tbody>
              {sources.map((s) => (
                <tr key={s.sourceId} className="hover:bg-sunken">
                  <td className={cn(td, 'font-medium')}>
                    <SourceLink name={s.name} url={s.url} />
                  </td>
                  <td className={cn(td, 'text-muted')}>{humanize(s.sourceType)}</td>
                  <td className={tdNum}>{Math.round(s.trustScore * 100)}%</td>
                  <td className={tdNum}>{fmtNum(s.sales)}</td>
                  <td className={tdNum}>{fmtNum(s.listings)}</td>
                  <td className={tdNum}>{fmtNum(s.observations)}</td>
                  <td className={cn(td, 'text-muted')}>{s.lastSeen ? fmtRelative(s.lastSeen) : '—'}</td>
                </tr>
              ))}
            </tbody>
          </Table>
        ) : (
          <EmptyState title="No source records yet" />
        )}
        <div className="border-t border-border px-4 py-2 text-[11px] text-subtle">
          Canonical key <code className="rounded-sm bg-inset px-1">{asset.canonicalKey}</code> · identifiers:{' '}
          {Object.keys(asset.identifiers).length ? Object.entries(asset.identifiers).map(([k, v]) => <code key={k} className="mr-1 rounded-sm bg-inset px-1">{k}={v}</code>) : 'none'} · created {fmtDate(asset.createdAt)}
        </div>
      </Card>
      <Card>
        <CardHeader title="Marketplace distribution" subtitle="Share of verified sales by source" />
        <div className="p-4">
          <BarChart ariaLabel="Sales by marketplace" data={mkt.map((m) => ({ label: m.sourceName, value: m.sales, sublabel: `volume ${fmtMoney(m.volumeUsd)}` }))} />
        </div>
      </Card>
    </div>
  );
}