import { imageProps } from '@/lib/images';
import { SmartImage } from '@/components/ui/smart-image';
import { glyphForFamily } from '@/lib/image-glyph';
import Link from 'next/link';
import type { MarketRow } from '@/lib/queries/markets';
import { fmtNum, cn } from '@/lib/format';
import { Delta } from '@/components/ui/primitives';
import { Sparkline } from '@/components/charts/sparkline';

/** Browse-by-category tiles: representative image, live counts, 30-day change and an optional sparkline. */
export function CategoryGrid({ rows, thumbs, className, limit, sparklines, mobileLimit }: { rows: MarketRow[]; thumbs: Map<string, string>; className?: string; limit?: number; sparklines?: Map<string, number[]>; /** hide tiles beyond this index below the sm breakpoint */ mobileLimit?: number }) {
  const sorted = [...rows].sort((a, b) => b.counts.sales - a.counts.sales || 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 }, idx) => {
        const hiddenOnMobile = mobileLimit !== undefined && idx >= mobileLimit;
        const empty = counts.assets === 0;
        const src = thumbs.get(node.slug);
        const spark = sparklines?.get(node.slug);
        return (
          <Link key={node.slug} href={`/markets/${node.slug}`} className={cn('card card-hover group flex flex-col overflow-hidden', empty && 'opacity-60', hiddenOnMobile && 'hidden sm:flex')}>
            <span className="relative block aspect-[5/3] w-full overflow-hidden bg-sunken">
              {(() => {
                const ip = imageProps(src, { maxWidth: 384 });
                return <SmartImage src={ip?.src ?? null} srcSet={ip?.srcSet ?? null} sizes="(min-width: 1280px) 220px, (min-width: 640px) 33vw, 50vw" alt="" imgClassName="p-3 transition-transform duration-300 ease-out group-hover:scale-[1.04]" placeholder={{ label: empty ? 'No data yet' : node.short ?? node.name, glyph: glyphForFamily(node.familySlug) }} />;
              })()}
              {spark && spark.length > 2 ? (
                <span className="absolute bottom-1.5 right-1.5 rounded-sm bg-elevated/80 px-1 backdrop-blur-sm">
                  <Sparkline values={spark} width={64} height={18} />
                </span>
              ) : null}
            </span>
            <span className="flex flex-col gap-0.5 px-2.5 py-2">
              <span className="flex items-center justify-between gap-2">
                <span className="truncate text-[13px] font-semibold text-fg">{node.name}</span>
                {snapshot?.change30d != null ? <Delta value={snapshot.change30d} className="text-[11px]" /> : null}
              </span>
              <span className="num truncate text-[11px] text-muted">{empty ? 'catalogue pending' : `${fmtNum(counts.assets, { compact: true })} assets${counts.sales ? ` · ${fmtNum(counts.sales, { compact: true })} sales` : counts.priced ? ` · ${fmtNum(counts.priced, { compact: true })} priced` : ''}`}</span>
            </span>
          </Link>
        );
      })}
    </div>
  );
}