import Link from 'next/link';
import type { AssetCard as AssetCardData, SaleRow } from '@/lib/queries/assets';
import type { RadarRow, LotRow } from '@/lib/queries/market-lists';
import type { LatestSale } from '@/lib/queries/site';
import type { MarketRow } from '@/lib/queries/markets';
import { fmtMoney, fmtRelative, fmtNum, cn, fmtDate } from '@/lib/format';
import { catName, humanize } from '@/lib/taxonomy';
import { Card, CardHeader, Delta, EmptyState, Table, th, td, tdNum, Badge, VsRiv } from '@/components/ui/primitives';
import { GradeBadge, SourceLink, Thumb } from '@/components/market/bits';
import { AssetTile, Rail, RailHeader, type TileMetric } from '@/components/market/asset-tile';
import { heatStyle } from '@/components/charts/heat';

const EMPTY = 'Populates as the pipeline ingests data.';

/** Editorial rail of poster tiles (snap-scroll on mobile, grid from lg). */
export function AssetRail({ title, subtitle, href, items, metric, empty = EMPTY, priority = false }: { title: string; subtitle?: string; href: string; items: AssetCardData[]; metric: TileMetric; empty?: string; priority?: boolean }) {
  return (
    <section>
      <RailHeader title={title} subtitle={subtitle} href={href} />
      {items.length ? (
        <Rail>
          {items.slice(0, 8).map((a, i) => (
            <AssetTile key={a.id} a={a} metric={metric} priority={priority && i < 4} />
          ))}
        </Rail>
      ) : (
        <Card>
          <EmptyState title="Nothing to show yet" description={empty} compact />
        </Card>
      )}
    </section>
  );
}

function SaleTile({ s }: { s: SaleRow }) {
  return (
    <Link href={s.assetSlug ? `/asset/${s.assetSlug}` : '/sales'} className="card card-hover group flex w-[220px] flex-col gap-2 p-2 sm:w-[240px]">
      <span className="flex items-start gap-2.5">
        <Thumb src={s.heroImageUrl ?? s.imageUrls[0]} alt="" size={56} rounded="rounded-[5px]" />
        <span className="min-w-0 flex-1">
          <span className="line-clamp-2 text-[13px] font-medium leading-[1.3] text-fg" title={s.assetTitle ?? s.rawTitle}>
            {s.assetTitle ?? s.rawTitle}
          </span>
          <span className="mt-0.5 block truncate text-[11px] text-muted">{catName(s.categorySlug)}</span>
        </span>
      </span>
      <span className="flex items-end justify-between gap-2 border-t border-border pt-2">
        <span className="flex flex-col leading-tight">
          <span className="num text-[15px] font-semibold text-fg">{fmtMoney(s.priceUsd)}</span>
          <span className="t-caption">
            {fmtDate(s.saleDate)} · {s.sourceName}
          </span>
        </span>
        <GradeBadge grader={s.grader} grade={s.grade} />
      </span>
    </Link>
  );
}

export function SalesRail({ title, subtitle, href, items, hideWhenEmpty = false }: { title: string; subtitle?: string; href: string; items: SaleRow[]; hideWhenEmpty?: boolean }) {
  if (hideWhenEmpty && !items.length) return null;
  return (
    <section>
      <RailHeader title={title} subtitle={subtitle} href={href} />
      {items.length ? (
        <Rail cols="lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6">
          {items.slice(0, 8).map((s) => (
            <SaleTile key={s.id} s={s} />
          ))}
        </Rail>
      ) : (
        <Card>
          <EmptyState title="No verified sales yet" description="Record sales are drawn from verified transactions only (§154)." compact />
        </Card>
      )}
    </section>
  );
}

export function RadarRail({ items, hideWhenEmpty = false }: { items: RadarRow[]; hideWhenEmpty?: boolean }) {
  if (hideWhenEmpty && !items.length) return null;
  return (
    <section>
      <RailHeader title="Rare Finds" subtitle="Rare Radar: unusual appearances and discrepancies" href="/radar" hrefLabel="Open radar" />
      {items.length ? (
        <Rail cols="lg:grid-cols-3 xl:grid-cols-4">
          {items.slice(0, 8).map((r) => (
            <Link key={r.id} href={`/asset/${r.assetSlug}`} className="card card-hover flex w-[240px] gap-2.5 p-2.5 sm:w-[260px]">
              <Thumb src={r.heroImageUrl} alt="" size={52} rounded="rounded-[5px]" />
              <span className="min-w-0 flex-1">
                <Badge tone={r.kind === 'record_sale' ? 'gold' : r.kind === 'price_discrepancy' ? 'alert' : 'rarity'}>{humanize(r.kind)}</Badge>
                <span className="mt-1 line-clamp-2 text-[13px] font-medium leading-[1.3] text-fg">{r.assetTitle}</span>
                <span className="num block text-[11px] text-muted">
                  {r.rivUsd === null ? 'RIV —' : `RIV ${fmtMoney(r.rivUsd)}`} · signal {r.score.toFixed(0)} · {fmtRelative(r.detectedAt)}
                </span>
              </span>
            </Link>
          ))}
        </Rail>
      ) : (
        <Card>
          <EmptyState title="Radar is quiet" description="Findings appear when the pipeline detects first listings in years, ultra-low populations or price discrepancies." compact />
        </Card>
      )}
    </section>
  );
}

export function LotsRail({ items, hideWhenEmpty = false }: { items: LotRow[]; hideWhenEmpty?: boolean }) {
  if (hideWhenEmpty && !items.length) return null;
  return (
    <section>
      <RailHeader title="Auctions Ending Soon" subtitle="Next 72 hours · all-in adds the buyer’s premium; bid vs RIV where assessed" href="/auctions?tab=ending" hrefLabel="All auctions" />
      {items.length ? (
        <Rail cols="lg:grid-cols-3 xl:grid-cols-4">
          {items.slice(0, 8).map((l) => (
            <a key={l.id} href={l.url} target="_blank" rel="noopener nofollow" className="card card-hover flex w-[240px] gap-2.5 p-2.5 sm:w-[260px]">
              <Thumb src={l.imageUrls[0]} alt="" size={52} rounded="rounded-[5px]" />
              <span className="min-w-0 flex-1">
                <span className="line-clamp-2 text-[13px] font-medium leading-[1.3] text-fg">{l.title}</span>
                <span className="block truncate text-[11px] text-muted">
                  {l.auctionHouse} · ends {fmtRelative(l.endsAt)}
                </span>
                <span className="num mt-1 flex items-baseline justify-between gap-2 text-[13px] font-semibold text-fg">
                  <span>{l.allInBidUsd !== null || l.allInEstimateLowUsd !== null ? `${l.feeBasis === 'added_approximate' || l.feeBasis === 'added_default' ? '≈ ' : ''}${fmtMoney(l.allInBidUsd ?? l.allInEstimateLowUsd)}` : l.currentBid !== null ? fmtMoney(l.currentBid, l.currency ?? 'USD') : l.estimateHigh !== null ? `est. ${fmtMoney(l.estimateHigh, l.currency ?? 'USD')}` : '—'}</span>
                  {l.bidVsRiv !== null || l.estimateVsRiv !== null ? <VsRiv discount={l.bidVsRiv ?? l.estimateVsRiv} className="text-[11px]" showLabel={false} /> : <span className="text-[10px] font-normal text-subtle">{l.allInBidUsd !== null || l.allInEstimateLowUsd !== null ? 'all-in' : ''}</span>}
                </span>
              </span>
            </a>
          ))}
        </Rail>
      ) : (
        <Card>
          <EmptyState title="No lots ending soon" description="Auction lots appear once auction-house connectors are live." compact />
        </Card>
      )}
    </section>
  );
}

export function MarketInsights({ rows }: { rows: MarketRow[] }) {
  const withData = rows.filter((r) => r.counts.assets > 0).sort((a, b) => b.counts.sales - a.counts.sales || b.counts.assets - a.counts.assets);
  return (
    <Card>
      <CardHeader title="Market Insights" subtitle="Category activity · 30-day change of the category index when published" action={<Link href="/markets" className="text-muted hover:text-fg">Markets →</Link>} />
      {withData.length ? (
        <Table sticky={false}>
          <thead>
            <tr>
              <th className={th}>Category</th>
              <th className={cn(th, 'text-right')}>Assets</th>
              <th className={cn(th, 'text-right')}>Sales</th>
              <th className={cn(th, 'text-right')}>Listings</th>
              <th className={cn(th, 'text-right')}>30D</th>
            </tr>
          </thead>
          <tbody>
            {withData.slice(0, 10).map((r) => (
              <tr key={r.node.slug} className="hover:bg-sunken">
                <td className={td}>
                  <Link href={`/markets/${r.node.slug}`} className="font-medium text-fg hover:underline">
                    {r.node.name}
                  </Link>
                </td>
                <td className={tdNum}>{fmtNum(r.counts.assets)}</td>
                <td className={tdNum}>{fmtNum(r.counts.sales)}</td>
                <td className={tdNum}>{fmtNum(r.counts.listings)}</td>
                <td className={tdNum} style={heatStyle(r.snapshot?.change30d)}>
                  <Delta value={r.snapshot?.change30d} />
                </td>
              </tr>
            ))}
          </tbody>
        </Table>
      ) : (
        <EmptyState title="No category data yet" description={EMPTY} compact />
      )}
    </Card>
  );
}

export interface LatestObservation {
  id: string;
  assetSlug: string;
  assetTitle: string;
  categorySlug: string;
  heroImageUrl: string | null;
  priceUsd: number;
  priceKind: string;
  observationDate: string;
  sourceName: string;
}

/** Latest transactions as a dense, attributed table; falls back to guide-price observations when no sale exists yet. */
export function LatestTransactions({ items, observations = [] }: { items: LatestSale[]; observations?: LatestObservation[] }) {
  if (!items.length && observations.length) {
    return (
      <Card>
        <CardHeader title="Latest guide price observations" subtitle="No verified sales indexed yet — price-guide observations (not transactions), with source and date" action={<Link href="/explore?has=observations" className="text-muted hover:text-fg">Browse →</Link>} />
        <Table>
          <thead>
            <tr>
              <th className={th}>Asset</th>
              <th className={th}>Kind</th>
              <th className={th}>Source</th>
              <th className={th}>Date</th>
              <th className={cn(th, 'text-right')}>Price</th>
            </tr>
          </thead>
          <tbody>
            {observations.map((o) => (
              <tr key={o.id} className="hover:bg-sunken">
                <td className={cn(td, 'max-w-[320px]')}>
                  <span className="flex items-center gap-2.5">
                    <Thumb src={o.heroImageUrl} alt="" size={32} />
                    <span className="min-w-0">
                      <Link href={`/asset/${o.assetSlug}`} className="block truncate font-medium text-fg hover:underline">
                        {o.assetTitle}
                      </Link>
                      <span className="block truncate text-[11px] text-muted">{catName(o.categorySlug)}</span>
                    </span>
                  </span>
                </td>
                <td className={cn(td, 'text-muted')}>{humanize(o.priceKind)}</td>
                <td className={cn(td, 'text-muted')}>{o.sourceName}</td>
                <td className={cn(td, 'text-muted')}>{fmtDate(o.observationDate)}</td>
                <td className={cn(tdNum, 'font-semibold text-muted')}>{fmtMoney(o.priceUsd)}</td>
              </tr>
            ))}
          </tbody>
        </Table>
      </Card>
    );
  }
  return (
    <Card>
      <CardHeader title="Latest transactions" subtitle="Most recent verified sales across sources · USD at the sale-date exchange rate" action={<Link href="/sales" className="text-muted hover:text-fg">All sales →</Link>} />
      {items.length ? (
        <Table>
          <thead>
            <tr>
              <th className={th}>Asset</th>
              <th className={th}>Grade</th>
              <th className={th}>Type</th>
              <th className={th}>Source</th>
              <th className={th}>Date</th>
              <th className={cn(th, 'text-right')}>Price</th>
            </tr>
          </thead>
          <tbody>
            {items.map((s) => (
              <tr key={s.id} className="hover:bg-sunken">
                <td className={cn(td, 'max-w-[320px]')}>
                  <span className="flex items-center gap-2.5">
                    <Thumb src={s.heroImageUrl} alt="" size={32} />
                    <span className="min-w-0">
                      <Link href={`/asset/${s.assetSlug}`} className="block truncate font-medium text-fg hover:underline">
                        {s.assetTitle}
                      </Link>
                      <span className="block truncate text-[11px] text-muted">{catName(s.categorySlug)}</span>
                    </span>
                  </span>
                </td>
                <td className={td}>
                  <GradeBadge grader={s.grader} grade={s.grade} />
                </td>
                <td className={cn(td, 'text-muted')}>{humanize(s.saleType)}</td>
                <td className={td}>
                  <SourceLink name={s.sourceName} url={s.sourceUrl} />
                </td>
                <td className={cn(td, 'text-muted')}>{fmtDate(s.saleDate)}</td>
                <td className={tdNum}>
                  <span className="flex flex-col items-end leading-tight">
                    <span className="font-semibold text-fg">{fmtMoney(s.priceUsd)}</span>
                    {s.currency !== 'USD' ? <span className="text-[10px] text-subtle">{fmtMoney(s.price, s.currency)}</span> : null}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </Table>
      ) : (
        <EmptyState title="No transactions yet" description="Verified sales stream in here as connectors run." compact />
      )}
    </Card>
  );
}

export function cls(...c: Array<string | false | undefined>): string {
  return cn(...c);
}