import Link from 'next/link';
import type { MarketRow } from '@/lib/queries/markets';
import { fmtMoney, fmtNum, fmtRelative, cn } from '@/lib/format';
import { Table, th, td, tdNum, Delta, Badge } from '@/components/ui/primitives';
import { heatStyle } from '@/components/charts/heat';

/** Heat table of categories (markets overview and child categories). */
export function MarketTable({ rows, showPhase = true, className }: { rows: MarketRow[]; showPhase?: boolean; className?: string }) {
  const sorted = [...rows].sort((a, b) => b.counts.sales - a.counts.sales || b.counts.assets - a.counts.assets || a.node.sortOrder - b.node.sortOrder);
  return (
    <Table className={className}>
      <thead>
        <tr>
          <th className={th}>Category</th>
          <th className={cn(th, 'text-right')}>Index</th>
          <th className={cn(th, 'text-right')}>1D</th>
          <th className={cn(th, 'text-right')}>7D</th>
          <th className={cn(th, 'text-right')}>30D</th>
          <th className={cn(th, 'text-right')}>1Y</th>
          <th className={cn(th, 'text-right')}>Assets</th>
          <th className={cn(th, 'text-right')}>Priced</th>
          <th className={cn(th, 'text-right')}>Sales</th>
          <th className={cn(th, 'text-right')}>Sales 30D</th>
          <th className={cn(th, 'text-right')}>Volume 30D</th>
          <th className={cn(th, 'text-right')}>Listings</th>
          <th className={cn(th, 'text-right')}>Liquidity</th>
          <th className={cn(th, 'text-right')} title="Estimated population × representative value; shown only with a methodology confidence label">
            Market cap est.
          </th>
          <th className={th}>Last sale</th>
        </tr>
      </thead>
      <tbody>
        {sorted.map(({ node, snapshot, counts }) => {
          const inactive = counts.assets === 0;
          return (
            <tr key={node.slug} className={cn('hover:bg-sunken', inactive && 'text-subtle')}>
              <td className={td}>
                <Link href={`/markets/${node.slug}`} className={cn('font-medium hover:underline', inactive ? 'text-muted' : 'text-fg')}>
                  {node.name}
                </Link>
                {showPhase ? (
                  <Badge tone={node.phase === 1 ? 'index' : 'neutral'} className="ml-2">
                    Phase {node.phase}
                  </Badge>
                ) : null}
                {node.children.length ? <span className="ml-2 text-[10px] text-subtle">{node.children.length} sub</span> : null}
              </td>
              <td className={tdNum}>{snapshot?.indexValue != null ? snapshot.indexValue.toFixed(1) : <span className="text-subtle">—</span>}</td>
              {(['change1d', 'change7d', 'change30d', 'change1y'] as const).map((k) => (
                <td key={k} className={tdNum} style={heatStyle(snapshot?.[k])}>
                  <Delta value={snapshot?.[k]} />
                </td>
              ))}
              <td className={tdNum}>{fmtNum(counts.assets)}</td>
              <td className={tdNum}>{fmtNum(counts.priced)}</td>
              <td className={tdNum}>{fmtNum(counts.sales)}</td>
              <td className={tdNum}>{fmtNum(counts.sales30d)}</td>
              <td className={tdNum}>{fmtMoney(counts.volume30dUsd, 'USD', { compact: true })}</td>
              <td className={tdNum}>{fmtNum(counts.listings)}</td>
              <td className={tdNum}>{snapshot?.liquidityScore != null ? Math.round(snapshot.liquidityScore) : <span className="text-subtle">—</span>}</td>
              <td className={tdNum}>{snapshot?.marketCapEstUsd != null ? fmtMoney(snapshot.marketCapEstUsd, 'USD', { compact: true }) : <span className="text-subtle">—</span>}</td>
              <td className={cn(td, 'text-muted')}>{counts.lastSaleAt ? fmtRelative(counts.lastSaleAt) : '—'}</td>
            </tr>
          );
        })}
      </tbody>
    </Table>
  );
}