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 } from '@/components/ui/primitives';
import { GradeBadge, SourceLink, Thumb } from '@/components/market/bits';
import { heatStyle } from '@/components/charts/heat';

function Row({ href, image, title, sub, right, rightSub }: { href: string; image?: string | null; title: string; sub?: string | null; right: React.ReactNode; rightSub?: React.ReactNode }) {
  return (
    <li>
      <Link href={href} className="flex items-center gap-2.5 px-4 py-2 hover:bg-sunken">
        <Thumb src={image} alt="" size={32} />
        <span className="min-w-0 flex-1">
          <span className="block truncate text-[13px] font-medium text-fg">{title}</span>
          {sub ? <span className="block truncate text-[11px] text-muted">{sub}</span> : null}
        </span>
        <span className="num flex shrink-0 flex-col items-end text-[12px] leading-tight">
          <span className="font-medium text-fg">{right}</span>
          {rightSub ? <span className="text-[11px]">{rightSub}</span> : null}
        </span>
      </Link>
    </li>
  );
}

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

export function AssetRail({ title, subtitle, href, items, metric, empty = EMPTY }: { title: string; subtitle?: string; href: string; items: AssetCardData[]; metric: 'change7d' | 'change1d' | 'change30d' | 'trending' | 'watchers' | 'riv' | 'opportunity' | 'new' | 'guide'; empty?: string }) {
  return (
    <Card>
      <CardHeader title={title} subtitle={subtitle} action={<Link href={href} className="text-muted hover:text-fg">View all →</Link>} />
      {items.length ? (
        <ul className="divide-y divide-border">
          {items.map((a) => (
            <Row
              key={a.id}
              href={`/asset/${a.slug}`}
              image={a.heroImageUrl}
              title={a.title}
              sub={`${catName(a.categorySlug)}${a.year ? ` · ${a.year}` : ''}`}
              right={a.rivUsd === null ? (a.guideUsd != null ? <span className="text-muted" title="Price-guide observation, not a transaction">{fmtMoney(a.guideUsd)}</span> : <span className="text-subtle">—</span>) : fmtMoney(a.rivUsd)}
              rightSub={
                metric === 'guide' ? <span className="text-muted">{a.rivUsd === null && a.guideUsd != null ? `guide · ${a.guideSource ?? ''}` : a.rivUsd !== null ? `RIV · ${a.rivSampleSize} sales` : 'catalogued'}</span>
                : metric === 'trending' ? <span className="text-muted">score {a.trendingScore?.toFixed(1) ?? '—'}</span>
                : metric === 'watchers' ? <span className="text-muted">{fmtNum(a.watchers)} watching</span>
                : metric === 'new' ? <span className="text-muted">added {fmtRelative(a.updatedAt)}</span>
                : metric === 'riv' ? <span className="text-muted">{a.rivSampleSize} sales</span>
                : metric === 'opportunity' ? <Delta value={a.valueOpportunity === null ? null : -a.valueOpportunity} />
                : <Delta value={metric === 'change1d' ? a.change1d : metric === 'change30d' ? a.change30d : a.change7d} />
              }
            />
          ))}
        </ul>
      ) : (
        <EmptyState title="Nothing to show yet" description={empty} className="py-8" />
      )}
    </Card>
  );
}

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 (
    <Card>
      <CardHeader title={title} subtitle={subtitle} action={<Link href={href} className="text-muted hover:text-fg">View all →</Link>} />
      {items.length ? (
        <ul className="divide-y divide-border">
          {items.map((s) => (
            <Row key={s.id} href={s.assetSlug ? `/asset/${s.assetSlug}` : '/sales'} image={s.heroImageUrl ?? s.imageUrls[0]} title={s.assetTitle ?? s.rawTitle} sub={`${s.sourceName} · ${fmtDate(s.saleDate)}`} right={fmtMoney(s.priceUsd)} rightSub={<GradeBadge grader={s.grader} grade={s.grade} />} />
          ))}
        </ul>
      ) : (
        <EmptyState title="No verified sales yet" description="Record sales are drawn from verified transactions only (§154)." className="py-8" />
      )}
    </Card>
  );
}

export function RadarRail({ items, hideWhenEmpty = false }: { items: RadarRow[]; hideWhenEmpty?: boolean }) {
  if (hideWhenEmpty && !items.length) return null;
  return (
    <Card>
      <CardHeader title="Rare Finds" subtitle="Rare Radar: unusual appearances and discrepancies" action={<Link href="/radar" className="text-muted hover:text-fg">Open radar →</Link>} />
      {items.length ? (
        <ul className="divide-y divide-border">
          {items.map((r) => (
            <Row key={r.id} href={`/asset/${r.assetSlug}`} image={r.heroImageUrl} title={r.assetTitle} sub={`${humanize(r.kind)} · ${fmtRelative(r.detectedAt)}`} right={r.rivUsd === null ? <span className="text-subtle">—</span> : fmtMoney(r.rivUsd)} rightSub={<span className="text-muted">signal {r.score.toFixed(0)}</span>} />
          ))}
        </ul>
      ) : (
        <EmptyState title="Radar is quiet" description="Findings appear when the pipeline detects first listings in years, ultra-low populations or price discrepancies." className="py-8" />
      )}
    </Card>
  );
}

export function LotsRail({ items, hideWhenEmpty = false }: { items: LotRow[]; hideWhenEmpty?: boolean }) {
  if (hideWhenEmpty && !items.length) return null;
  return (
    <Card>
      <CardHeader title="Auctions Ending Soon" subtitle="Next 72 hours" action={<Link href="/auctions" className="text-muted hover:text-fg">All auctions →</Link>} />
      {items.length ? (
        <ul className="divide-y divide-border">
          {items.map((l) => (
            <li key={l.id}>
              <a href={l.url} target="_blank" rel="noopener nofollow" className="flex items-center gap-2.5 px-4 py-2 hover:bg-sunken">
                <Thumb src={l.imageUrls[0]} alt="" size={32} />
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-[13px] font-medium text-fg">{l.title}</span>
                  <span className="block truncate text-[11px] text-muted">
                    {l.auctionHouse} · ends {fmtRelative(l.endsAt)}
                  </span>
                </span>
                <span className="num text-[12px] font-medium text-fg">{l.currentBid !== null ? fmtMoney(l.currentBid, l.currency ?? 'USD') : l.estimateHigh !== null ? `est. ${fmtMoney(l.estimateHigh, l.currency ?? 'USD')}` : '—'}</span>
              </a>
            </li>
          ))}
        </ul>
      ) : (
        <EmptyState title="No lots ending soon" description="Auction lots appear once auction-house connectors are live." className="py-8" />
      )}
    </Card>
  );
}

export function MarketInsights({ rows }: { rows: MarketRow[] }) {
  const withData = rows.filter((r) => r.counts.assets > 0);
  return (
    <Card>
      <CardHeader title="Market Insights" subtitle="Category performance and activity" action={<Link href="/markets" className="text-muted hover:text-fg">Markets →</Link>} />
      {withData.length ? (
        <ul className="divide-y divide-border">
          {withData.slice(0, 10).map((r) => (
            <li key={r.node.slug}>
              <Link href={`/markets/${r.node.slug}`} className="grid grid-cols-[1fr_auto_auto] items-center gap-3 px-4 py-2 text-[12px] hover:bg-sunken">
                <span className="truncate font-medium text-fg">{r.node.name}</span>
                <span className="num text-muted">{fmtNum(r.counts.assets)} assets · {fmtNum(r.counts.sales)} sales</span>
                <span className="num rounded-sm px-1.5 py-0.5" style={heatStyle(r.snapshot?.change30d)}>
                  <Delta value={r.snapshot?.change30d} />
                </span>
              </Link>
            </li>
          ))}
        </ul>
      ) : (
        <EmptyState title="No category data yet" description={EMPTY} className="py-8" />
      )}
    </Card>
  );
}

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

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 — these are price-guide observations (not transactions), shown with their source and date" action={<Link href="/explore?has=observations" className="text-muted hover:text-fg">Browse →</Link>} />
        <ul className="grid grid-cols-1 divide-y divide-border md:grid-cols-2 md:divide-y-0 lg:grid-cols-3">
          {observations.map((o) => (
            <li key={o.id} className="border-b border-border md:[&:nth-child(2n)]:border-l lg:[&:nth-child(2n)]:border-l-0 lg:[&:nth-child(3n+2)]:border-l lg:[&:nth-child(3n)]:border-l">
              <Link href={`/asset/${o.assetSlug}`} className="flex items-center gap-2.5 px-4 py-2.5 hover:bg-sunken">
                <Thumb src={o.heroImageUrl} alt="" size={36} />
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-[13px] font-medium text-fg">{o.assetTitle}</span>
                  <span className="block truncate text-[11px] text-muted">
                    {catName(o.categorySlug)} · {o.sourceName} · {humanize(o.priceKind)} · {fmtDate(o.observationDate)}
                  </span>
                </span>
                <span className="num text-[13px] font-semibold text-muted">{fmtMoney(o.priceUsd)}</span>
              </Link>
            </li>
          ))}
        </ul>
      </Card>
    );
  }
  return (
    <Card>
      <CardHeader title="Latest transactions" subtitle="Most recent verified sales across sources" action={<Link href="/sales" className="text-muted hover:text-fg">All sales →</Link>} />
      {items.length ? (
        <ul className="grid grid-cols-1 divide-y divide-border md:grid-cols-2 md:divide-y-0 lg:grid-cols-3">
          {items.map((s) => (
            <li key={s.id} className="border-b border-border md:[&:nth-child(2n)]:border-l lg:[&:nth-child(2n)]:border-l-0 lg:[&:nth-child(3n+2)]:border-l lg:[&:nth-child(3n)]:border-l">
              <Link href={`/asset/${s.assetSlug}`} className="flex items-center gap-2.5 px-4 py-2.5 hover:bg-sunken">
                <Thumb src={s.heroImageUrl} alt="" size={36} />
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-[13px] font-medium text-fg">{s.assetTitle}</span>
                  <span className="flex items-center gap-1.5 text-[11px] text-muted">
                    <GradeBadge grader={s.grader} grade={s.grade} />
                    <span className="truncate">
                      {fmtDate(s.saleDate)} · <SourceLink name={s.sourceName} url={null} />
                    </span>
                  </span>
                </span>
                <span className="num text-[13px] font-semibold text-fg">{fmtMoney(s.priceUsd)}</span>
              </Link>
            </li>
          ))}
        </ul>
      ) : (
        <EmptyState title="No transactions yet" description="Verified sales stream in here as connectors run." className="py-8" />
      )}
    </Card>
  );
}

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