import Link from 'next/link';
import type { AssetDetail, VariantRow, GuidePrice } from '@/lib/queries/assets';
import { fmtMoney, fmtNum, fmtRelative, fmtDate, cn, confidenceLabel } from '@/lib/format';
import { catName, categoryCrumbs } from '@/lib/taxonomy';
import { Breadcrumbs } from '@/components/ui/page-header';
import { Badge, Delta } from '@/components/ui/primitives';
import { ScoreMeter } from '@/components/ui/evidence';
import { AskVsRivExplainer, ConfidenceExplainer, LiquidityExplainer, RarityExplainer } from './score-explainers';
import { AssetGallery, type GalleryImage } from './asset-gallery';
import { imageProps } from '@/lib/images';
import { glyphForFamily } from '@/lib/image-glyph';
import { AssetActions } from './asset-actions';
import { VariantTable } from './variant-table';

/**
 * Asset page header (§126): gallery + identity on the left, the valuation panel on the right.
 * Mobile-first: gallery → title → variant chips → valuation → metrics; desktop: two columns.
 */
export function AssetHeader({ asset, variants, activeVariant, tabHref, guide = null, images, watched = false, population = null }: { asset: AssetDetail; variants: VariantRow[]; activeVariant: VariantRow | null; tabHref: (v: string | null) => string; guide?: GuidePrice | null; images: GalleryImage[]; watched?: boolean; /** latest published graded population total, when a report exists */ population?: number | null }) {
  const v = activeVariant;
  const riv = v ? v.rivUsd : asset.rivUsd;
  const low = v ? v.rivLowUsd : asset.rivLowUsd;
  const high = v ? v.rivHighUsd : asset.rivHighUsd;
  const conf = v ? v.rivConfidence : asset.rivConfidence;
  const n = v ? v.rivSampleSize : asset.rivSampleSize;
  const latest = v ? v.latestSaleUsd : asset.latestSaleUsd;
  const latestAt = v ? v.latestSaleAt : asset.latestSaleAt;
  const confLabel = confidenceLabel(conf);
  const confTone = confLabel === 'High' ? 'gain' : confLabel === 'Medium' ? 'index' : confLabel === 'Low' ? 'alert' : 'neutral';

  const facts: Array<[string, React.ReactNode]> = (
    [
      ['Set', asset.setName ? <Link key="s" href={asset.setSlug ? `/set/${asset.setSlug}` : '#'} className="hover:underline">{asset.setName}{asset.setCode ? ` (${asset.setCode})` : ''}</Link> : null],
      ['Number', asset.number],
      ['Brand', asset.brand ? <Link key="b" href={`/brand/${encodeURIComponent(asset.brand)}`} className="hover:underline">{asset.brand}</Link> : null],
      ['Franchise', asset.franchise],
      ['Reference', asset.reference],
      ['Model', asset.model],
      ['Release', asset.releaseDate],
      ['Production', asset.productionQuantity != null ? fmtNum(asset.productionQuantity) : null],
      ['Original MSRP', asset.originalMsrp != null ? fmtMoney(asset.originalMsrp, asset.originalMsrpCurrency ?? 'USD') : null],
    ] as Array<[string, React.ReactNode]>
  ).filter(([, val]) => val);

  return (
    <header>
      <Breadcrumbs items={[{ label: 'Markets', href: '/markets' }, ...categoryCrumbs(asset.categorySlug), ...(asset.setSlug && asset.setName ? [{ label: asset.setName, href: `/set/${asset.setSlug}` }] : []), { label: asset.name }]} />
      <div className="grid gap-5 lg:grid-cols-[minmax(0,1fr)_340px] lg:items-start">
        {/* identity */}
        <div className="grid gap-4 sm:grid-cols-[200px_minmax(0,1fr)] md:grid-cols-[240px_minmax(0,1fr)]">
          <AssetGallery images={images.map((im) => ({ ...im, ...(imageProps(im.url, { maxWidth: 768 }) ?? {}), full: imageProps(im.url, { maxWidth: 1200 })?.src ?? null }))} alt={asset.title} glyph={glyphForFamily(asset.familySlug)} className="aspect-[4/3] w-full sm:aspect-square" />
          <div className="min-w-0">
            <h1 className="text-[22px] font-semibold leading-tight tracking-tight text-fg sm:text-2xl lg:text-[26px]">{asset.title}</h1>
            <div className="mt-2 flex flex-wrap items-center gap-1.5 text-[11px]">
              <Link href={`/markets/${asset.categorySlug}`}>
                <Badge tone="index">{catName(asset.categorySlug)}</Badge>
              </Link>
              {asset.year ? <Badge>{asset.year}</Badge> : null}
              {asset.edition ? <Badge>{asset.edition}</Badge> : null}
              {asset.variant ? <Badge>{asset.variant}</Badge> : null}
              {asset.language && asset.language !== 'en' ? <Badge>{asset.language.toUpperCase()}</Badge> : null}
              {asset.rarity ? <Badge tone="rarity">{asset.rarity}</Badge> : null}
              {asset.verified ? <Badge tone="gain">Verified record</Badge> : null}
            </div>
            {facts.length ? (
              <dl className="mt-3 grid grid-cols-2 gap-x-4 gap-y-1.5 text-[12px] sm:grid-cols-3">
                {facts.slice(0, 9).map(([k, val]) => (
                  <div key={k} className="min-w-0">
                    <dt className="text-[10px] uppercase tracking-wider text-subtle">{k}</dt>
                    <dd className="truncate text-fg">{val}</dd>
                  </div>
                ))}
              </dl>
            ) : null}
            {variants.length ? (
              <div className="mt-4">
                <p className="mb-1.5 text-[10px] font-medium uppercase tracking-wider text-subtle">Variant / grade</p>
                <div className="scrollbar-none -mx-4 flex gap-1.5 overflow-x-auto px-4 pb-1 sm:mx-0 sm:flex-wrap sm:px-0">
                  <Chip href={tabHref(null)} active={!v}>
                    All variants
                  </Chip>
                  {variants.slice(0, 16).map((x) => (
                    <Chip key={x.id} href={tabHref(x.id)} active={v?.id === x.id} title={`${x.salesCount} sales`}>
                      {x.label}
                      {x.salesCount ? <span className={cn('num ml-1.5 rounded-sm px-1 text-[10px]', v?.id === x.id ? 'bg-white/20' : 'bg-inset text-subtle')}>{x.salesCount}</span> : null}
                    </Chip>
                  ))}
                </div>
              </div>
            ) : null}
            <div className="mt-4 hidden md:block">
              <AssetActions assetId={asset.id} slug={asset.slug} watched={watched} />
            </div>
          </div>
          <div className="hidden sm:col-span-2 lg:block">
            <VariantTable variants={variants} href={tabHref} activeId={v?.id ?? null} />
          </div>
        </div>

        {/* valuation panel */}
        <aside className="card p-4">
          <div className="flex items-baseline justify-between">
            <span className="text-[10px] font-semibold uppercase tracking-wider text-subtle">RareIndex Valuation{v ? ` · ${v.label}` : ''}</span>
            <Badge tone={confTone}>{confLabel === 'Insufficient' ? 'No RIV' : `${confLabel} confidence`}</Badge>
          </div>
          {riv !== null ? (
            <>
              <div className="mt-1 text-[34px] font-semibold leading-none tracking-tight text-fg">{fmtMoney(riv)}</div>
              <div className="num mt-1.5 text-[12px] text-muted">
                Range {fmtMoney(low)} – {fmtMoney(high)} · <span className="text-fg">{fmtNum(n)}</span> sales used · updated {fmtRelative(asset.updatedAt)}
              </div>
              <RangeBar low={low} high={high} value={riv} latest={latest} />
              <div className="mt-2 flex flex-col gap-1">
                <ConfidenceExplainer asset={asset} variant={v} />
                <AskVsRivExplainer asset={asset} variant={v} />
              </div>
            </>
          ) : guide ? (
            <div className="mt-1">
              <div className="text-[10px] font-medium uppercase tracking-wider text-subtle">Latest guide price</div>
              <div className="mt-0.5 text-[34px] font-semibold leading-none tracking-tight text-fg">{fmtMoney(guide.priceUsd)}</div>
              <p className="num mt-1.5 text-[11px] text-muted">
                {guide.sourceName} · {guide.priceKind.replace(/_/g, ' ')}
                {guide.currency !== 'USD' ? ` · ${fmtMoney(guide.price, guide.currency)}` : ''}
                {guide.variantLabel ? ` · ${guide.variantLabel}` : ''} · observed {fmtDate(guide.observationDate)}
              </p>
              <p className="mt-1.5 text-[11px] leading-snug text-subtle">A price-guide observation, not a transaction and not a RareIndex valuation. RIV publishes once enough verified sales exist.</p>
            </div>
          ) : asset.minAskUsd !== null ? (
            <div className="mt-1">
              <div className="text-[10px] font-medium uppercase tracking-wider text-subtle">Lowest current ask</div>
              <div className="mt-0.5 text-[34px] font-semibold leading-none tracking-tight text-fg">{fmtMoney(asset.minAskUsd)}</div>
              <p className="mt-1.5 text-[11px] leading-snug text-subtle">An asking price across {fmtNum(asset.activeListings)} live listing{asset.activeListings === 1 ? '' : 's'} — not a confirmed transaction.</p>
            </div>
          ) : (
            <div className="mt-1">
              <div className="text-xl font-semibold text-subtle">Data unavailable</div>
              <p className="mt-1 text-[11px] leading-snug text-muted">Catalogued, but no verified sale, guide price or listing has been observed yet. Watch this asset to be notified when evidence arrives.</p>
            </div>
          )}

          <dl className="mt-4 grid grid-cols-2 gap-x-3 gap-y-3 border-t border-border pt-3 sm:grid-cols-4 lg:grid-cols-2">
            <Metric label="Latest sale" value={latest !== null ? fmtMoney(latest) : null} sub={latestAt ? fmtRelative(latestAt) : undefined} />
            <Metric label="1D · 30D · 1Y" value={<span className="flex flex-wrap gap-x-1.5"><Delta value={asset.change1d} digits={1} /><Delta value={v ? v.change30d : asset.change30d} digits={1} /><Delta value={v ? v.change1y : asset.change1y} digits={1} /></span>} />
            <Metric label="All-time high" value={asset.athUsd !== null ? fmtMoney(asset.athUsd) : null} sub={asset.athAt ? fmtDate(asset.athAt) : undefined} />
            <Metric label="All-time low" value={asset.atlUsd !== null ? fmtMoney(asset.atlUsd) : null} sub={asset.atlAt ? fmtDate(asset.atlAt) : undefined} />
            <Metric label="Active listings" value={fmtNum(v ? v.activeListings : asset.activeListings)} sub={(v ? v.minAskUsd : asset.minAskUsd) !== null ? `low ask ${fmtMoney(v ? v.minAskUsd : asset.minAskUsd)}` : undefined} />
            <Metric label="Sales 30D" value={fmtNum(v ? v.sales30d : asset.sales30d)} sub={`${fmtNum(v ? v.salesCount : asset.salesCount)} all time`} />
          </dl>
          <div className="mt-3 grid grid-cols-1 gap-2.5 border-t border-border pt-3 sm:grid-cols-3 lg:grid-cols-1">
            <div>
              <ScoreMeter label="Liquidity" value={v ? v.liquidityScore : asset.liquidityScore} />
              <LiquidityExplainer asset={asset} variant={v} className="mt-1" />
            </div>
            <div>
              <ScoreMeter label="Rarity" value={asset.rarityScore} tone="rarity" />
              <RarityExplainer asset={asset} population={population} className="mt-1" />
            </div>
            <ScoreMeter label="Data quality" value={asset.dataQuality} tone="gain" />
          </div>
          <p className="mt-3 text-[10px] leading-relaxed text-subtle">Estimate from observed public sales, not an offer or appraisal. RareIndex does not authenticate items.</p>
        </aside>
      </div>
      <AssetActions assetId={asset.id} slug={asset.slug} watched={watched} variant="bar" />
    </header>
  );
}

function Chip({ href, active, children, title }: { href: string; active: boolean; children: React.ReactNode; title?: string }) {
  return (
    <Link href={href} scroll={false} title={title} className={cn('inline-flex h-8 shrink-0 items-center whitespace-nowrap rounded-full border px-3 text-[12px] font-medium', active ? 'border-fg bg-accent text-accent-fg' : 'border-border bg-elevated text-muted hover:border-border-strong hover:text-fg')} aria-current={active ? 'true' : undefined}>
      {children}
    </Link>
  );
}

function Metric({ label, value, sub }: { label: string; value: React.ReactNode | null; sub?: string }) {
  return (
    <div className="min-w-0">
      <dt className="text-[10px] font-medium uppercase tracking-wider text-subtle">{label}</dt>
      <dd className="num mt-0.5 truncate text-[15px] font-semibold leading-tight text-fg">{value ?? <span className="text-subtle" title="Data unavailable">—</span>}</dd>
      {sub ? <dd className="truncate text-[11px] text-muted">{sub}</dd> : null}
    </div>
  );
}

/** Low–high band with RIV and latest sale markers (a meter, not a chart: shows where the estimate sits). */
function RangeBar({ low, high, value, latest }: { low: number | null; high: number | null; value: number; latest: number | null }) {
  if (low === null || high === null || high <= low) return null;
  const pos = (x: number) => `${Math.max(2, Math.min(98, ((x - low) / (high - low)) * 100))}%`;
  return (
    <div className="mt-3" aria-hidden>
      <div className="relative h-1.5 w-full rounded-full bg-inset">
        <div className="absolute inset-y-0 rounded-full" style={{ left: '0%', right: '0%', background: 'var(--ri-index-bg)' }} />
        <span className="absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-elevated" style={{ left: pos(value), background: 'var(--ri-index)' }} title="RIV" />
        {latest !== null && latest >= low && latest <= high ? <span className="absolute top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-elevated" style={{ left: pos(latest), background: 'var(--ri-series-2, #c2410c)' }} title="Latest sale" /> : null}
      </div>
      <div className="num mt-1 flex justify-between text-[10px] text-subtle">
        <span>low {fmtMoney(low)}</span>
        <span>high {fmtMoney(high)}</span>
      </div>
    </div>
  );
}