import Link from 'next/link';
import type { MarketRow } from '@/lib/queries/markets';
import { fmtNum, cn } from '@/lib/format';
import { Thumb } from '@/components/market/bits';
import { Badge } from '@/components/ui/primitives';

/** Browse-by-category grid: thumbnail of a representative asset, live counts, coverage state. */
export function CategoryGrid({ rows, thumbs, className, limit }: { rows: MarketRow[]; thumbs: Map<string, string>; className?: string; limit?: number }) {
  const sorted = [...rows].sort((a, b) => b.counts.assets - a.counts.assets || a.node.sortOrder - b.node.sortOrder);
  const shown = limit ? sorted.slice(0, limit) : sorted;
  return (
    <div className={cn('grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6', className)}>
      {shown.map(({ node, counts, snapshot }) => {
        const empty = counts.assets === 0;
        return (
          <Link key={node.slug} href={`/markets/${node.slug}`} className={cn('card flex items-center gap-2.5 p-2.5 transition-colors hover:border-border-strong', empty && 'opacity-60')}>
            <Thumb src={thumbs.get(node.slug)} alt="" size={44} rounded="rounded-md" />
            <span className="min-w-0 flex-1">
              <span className="block truncate text-[13px] font-medium text-fg">{node.name}</span>
              <span className="num block truncate text-[11px] text-muted">{empty ? 'no data yet' : `${fmtNum(counts.assets, { compact: true })} assets${counts.sales ? ` · ${fmtNum(counts.sales, { compact: true })} sales` : ''}`}</span>
              <span className="mt-0.5 flex items-center gap-1 text-[10px]">
                {counts.priced ? <Badge tone="gain">{fmtNum(counts.priced, { compact: true })} priced</Badge> : !empty ? <Badge>catalog</Badge> : null}
                {snapshot?.indexValue != null ? <Badge tone="index">index</Badge> : null}
              </span>
            </span>
          </Link>
        );
      })}
    </div>
  );
}