import Link from 'next/link';
import type { AssetCard as AssetCardData } from '@/lib/queries/assets';
import { fmtMoney, fmtNum, fmtRelative, confidenceLabel, cn } from '@/lib/format';
import { catName } from '@/lib/taxonomy';
import { Delta, Table, th, td, tdNum, EmptyState, VsRiv } from '@/components/ui/primitives';
import { Thumb } from './bits';
import { PriceLine, TileImage } from './asset-tile';

export type AssetColumn = 'riv' | 'change1d' | 'change7d' | 'change30d' | 'change1y' | 'latestSale' | 'sales' | 'sales30d' | 'listings' | 'minAsk' | 'liquidity' | 'rarity' | 'trending' | 'opportunity' | 'watchers' | 'updated';

const DEFAULT_COLUMNS: AssetColumn[] = ['riv', 'change7d', 'change30d', 'latestSale', 'sales', 'listings', 'liquidity'];

const HEAD: Record<AssetColumn, string> = {
  riv: 'RIV (USD)',
  change1d: '1D',
  change7d: '7D',
  change30d: '30D',
  change1y: '1Y',
  latestSale: 'Last sale',
  sales: 'Sales',
  sales30d: 'Sales 30D',
  listings: 'Listings',
  minAsk: 'Low ask',
  liquidity: 'Liquidity',
  rarity: 'Rarity',
  trending: 'Trending',
  opportunity: 'Value opp.',
  watchers: 'Watchers',
  updated: 'Updated',
};

function cell(a: AssetCardData, c: AssetColumn) {
  switch (c) {
    case 'riv':
      return a.rivUsd === null ? (
        a.guideUsd != null ? (
          <span className="inline-flex flex-col items-end leading-tight" title={`Price-guide observation (${a.guideSource ?? 'guide'} · ${a.guideKind ?? ''} · ${a.guideDate ?? ''}) — not a transaction and not a RareIndex valuation`}>
            <span className="text-muted">{fmtMoney(a.guideUsd)}</span>
            <span className="text-[10px] text-subtle">guide · {a.guideSource ?? a.guideKind ?? 'observed'}</span>
          </span>
        ) : (
          <span className="text-subtle" title="Insufficient evidence for a valuation">—</span>
        )
      ) : (
        <span className="inline-flex flex-col items-end leading-tight">
          <span className="font-medium">{fmtMoney(a.rivUsd)}</span>
          <span className="text-[10px] text-subtle">
            {confidenceLabel(a.rivConfidence)} · n={a.rivSampleSize}
          </span>
        </span>
      );
    case 'change1d':
      return <Delta value={a.change1d} />;
    case 'change7d':
      return <Delta value={a.change7d} />;
    case 'change30d':
      return <Delta value={a.change30d} />;
    case 'change1y':
      return <Delta value={a.change1y} />;
    case 'latestSale':
      return a.latestSaleUsd === null ? (
        <span className="text-subtle">—</span>
      ) : (
        <span className="inline-flex flex-col items-end leading-tight">
          <span>{fmtMoney(a.latestSaleUsd)}</span>
          <span className="text-[10px] text-subtle">{fmtRelative(a.latestSaleAt)}</span>
        </span>
      );
    case 'sales':
      return fmtNum(a.salesCount);
    case 'sales30d':
      return fmtNum(a.sales30d);
    case 'listings':
      return fmtNum(a.activeListings);
    case 'minAsk':
      return fmtMoney(a.minAskUsd);
    case 'liquidity':
      return a.liquidityScore === null ? <span className="text-subtle">—</span> : Math.round(a.liquidityScore);
    case 'rarity':
      return a.rarityScore === null ? <span className="text-subtle">—</span> : Math.round(a.rarityScore);
    case 'trending':
      return a.trendingScore === null ? <span className="text-subtle">—</span> : a.trendingScore.toFixed(1);
    case 'opportunity':
      return <VsRiv discount={a.valueOpportunity} showLabel={false} />;
    case 'watchers':
      return fmtNum(a.watchers);
    case 'updated':
      return <span className="text-muted">{fmtRelative(a.updatedAt)}</span>;
  }
}

export function AssetTable({ items, columns = DEFAULT_COLUMNS, rank = false, startRank = 1, className, emptyTitle = 'No assets yet', emptyDescription = 'Assets appear here as connectors ingest catalogues, sales and listings.' }: { items: AssetCardData[]; columns?: AssetColumn[]; rank?: boolean; startRank?: number; className?: string; emptyTitle?: string; emptyDescription?: string }) {
  if (!items.length) return <EmptyState title={emptyTitle} description={emptyDescription} />;
  return (
    <Table className={className}>
      <thead>
        <tr>
          {rank ? <th className={cn(th, 'w-8 text-right')}>#</th> : null}
          <th className={th}>Asset</th>
          {columns.map((c) => (
            <th key={c} className={cn(th, 'text-right')}>
              {HEAD[c]}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {items.map((a, i) => (
          <tr key={a.id} className="hover:bg-sunken">
            {rank ? <td className={cn(tdNum, 'text-subtle')}>{startRank + i}</td> : null}
            <td className={cn(td, 'max-w-[320px]')}>
              <span className="flex min-w-0 items-center gap-2.5">
                <Thumb src={a.heroImageUrl} alt="" size={32} />
                <span className="min-w-0">
                  <Link href={`/asset/${a.slug}`} className="block truncate font-medium text-fg hover:underline" title={a.title}>
                    {a.title}
                  </Link>
                  <span className="block truncate text-[11px] text-muted">
                    {catName(a.categorySlug)}
                    {a.setName ? ` · ${a.setName}` : ''}
                    {a.year ? ` · ${a.year}` : ''}
                  </span>
                </span>
              </span>
            </td>
            {columns.map((c) => (
              <td key={c} className={tdNum}>
                {cell(a, c)}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </Table>
  );
}

/** Compact horizontal card for mobile lists and grids: image, title, set/year, honest price line, one metric. */
export function AssetCard({ a, className, metric = 'change30d' }: { a: AssetCardData; className?: string; metric?: 'change30d' | 'change7d' | 'change1d' | 'latestSale' | 'opportunity' | 'trending' }) {
  const value = metric === 'change1d' ? a.change1d : metric === 'change7d' ? a.change7d : metric === 'change30d' ? a.change30d : null;
  const metricNode =
    metric === 'latestSale' ? (
      a.latestSaleUsd !== null && a.rivUsd !== null ? <span className="num text-[11px] text-muted">last {fmtMoney(a.latestSaleUsd)}</span> : a.number ? <span className="num text-[11px] text-subtle">#{a.number}</span> : null
    ) : metric === 'opportunity' ? (
      a.valueOpportunity !== null ? <VsRiv discount={a.valueOpportunity} className="text-[11px]" /> : null
    ) : metric === 'trending' ? (
      a.trendingScore !== null ? <span className="num text-[11px] text-muted">trend {a.trendingScore.toFixed(1)}</span> : null
    ) : value !== null ? (
      <span className="text-[11px] text-muted">
        {metric === 'change1d' ? '1D' : metric === 'change7d' ? '7D' : '30D'} <Delta value={value} arrow className="text-[11px]" />
      </span>
    ) : a.salesCount ? (
      <span className="num text-[11px] text-subtle">{fmtNum(a.salesCount)} sales</span>
    ) : null;
  return (
    <Link href={`/asset/${a.slug}`} className={cn('card card-hover group flex min-h-[88px] gap-3 p-2.5', className)}>
      <span className="w-16 shrink-0">
        <TileImage src={a.heroImageUrl} alt="" familySlug={a.familySlug} sizes="64px" />
      </span>
      <span className="flex min-w-0 flex-1 flex-col">
        <span className="line-clamp-2 text-[13px] font-medium leading-[1.3] text-fg" title={a.title}>
          {a.title}
        </span>
        <span className="mt-0.5 truncate text-[11px] text-muted">
          {catName(a.categorySlug)}
          {a.setName ? ` · ${a.setName}` : ''}
          {a.year ? ` · ${a.year}` : ''}
        </span>
        <span className="mt-auto flex items-end justify-between gap-2 pt-1.5">
          <PriceLine a={a} size="sm" />
          <span className="shrink-0 text-right">{metricNode}</span>
        </span>
      </span>
    </Link>
  );
}

export function AssetCardGrid({ items, metric, className }: { items: AssetCardData[]; metric?: Parameters<typeof AssetCard>[0]['metric']; className?: string }) {
  if (!items.length) return null;
  return (
    <div className={cn('grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4', className)}>
      {items.map((a) => (
        <AssetCard key={a.id} a={a} metric={metric} />
      ))}
    </div>
  );
}

/** Responsive list: cards on small screens, table from md up. */
export function AssetList(props: Parameters<typeof AssetTable>[0] & { metric?: Parameters<typeof AssetCard>[0]['metric']; forceCards?: boolean }) {
  if (!props.items.length) return <AssetTable {...props} />;
  if (props.forceCards) return <AssetCardGrid items={props.items} metric={props.metric} />;
  return (
    <>
      <div className="md:hidden">
        <AssetCardGrid items={props.items} metric={props.metric} />
      </div>
      <div className="hidden md:block">
        <AssetTable {...props} />
      </div>
    </>
  );
}