import Link from 'next/link';
import type { VariantRow } from '@/lib/queries/assets';
import { fmtMoney, fmtNum, fmtRelative, cn, confidenceLabel } from '@/lib/format';
import { Table, th, td, tdNum, Badge } from '@/components/ui/primitives';

/**
 * Dense variant/grade matrix for md+ screens (phones use the chip selector): RIV with its band and
 * confidence, latest sale, sales and listings per variant. Rows link to the variant view.
 */
export function VariantTable({ variants, href, activeId, className }: { variants: VariantRow[]; href: (id: string | null) => string; activeId: string | null; className?: string }) {
  const rows = variants.slice(0, 8);
  if (rows.length < 2) return null;
  return (
    <div className={cn('card overflow-hidden', className)}>
      <div className="flex items-baseline justify-between border-b border-border px-3 py-2">
        <h2 className="text-[12px] font-semibold text-fg">By variant / grade</h2>
        <span className="text-[10px] text-subtle">{variants.length} tracked · click a row to focus</span>
      </div>
      <Table>
        <thead>
          <tr>
            <th className={th}>Variant</th>
            <th className={cn(th, 'text-right')}>RIV</th>
            <th className={cn(th, 'text-right')}>Range</th>
            <th className={th}>Confidence</th>
            <th className={cn(th, 'text-right')}>Latest sale</th>
            <th className={cn(th, 'text-right')}>Sales</th>
            <th className={cn(th, 'text-right')}>Listings</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((v) => {
            const label = confidenceLabel(v.rivConfidence);
            return (
              <tr key={v.id} className={cn('hover:bg-sunken', activeId === v.id && 'bg-inset')}>
                <td className={cn(td, 'font-medium')}>
                  <Link href={href(v.id)} scroll={false} className="hover:underline">
                    {v.label}
                  </Link>
                </td>
                <td className={cn(tdNum, 'font-semibold')}>{v.rivUsd === null ? <span className="text-subtle">—</span> : fmtMoney(v.rivUsd)}</td>
                <td className={cn(tdNum, 'text-muted')}>{v.rivLowUsd !== null && v.rivHighUsd !== null ? `${fmtMoney(v.rivLowUsd)} – ${fmtMoney(v.rivHighUsd)}` : <span className="text-subtle">—</span>}</td>
                <td className={td}>{v.rivUsd === null ? <span className="text-subtle">—</span> : <Badge tone={label === 'High' ? 'gain' : label === 'Medium' ? 'index' : label === 'Low' ? 'alert' : 'neutral'}>{label} · n={v.rivSampleSize}</Badge>}</td>
                <td className={tdNum}>
                  {v.latestSaleUsd === null ? <span className="text-subtle">—</span> : fmtMoney(v.latestSaleUsd)}
                  {v.latestSaleAt ? <span className="block text-[10px] text-subtle">{fmtRelative(v.latestSaleAt)}</span> : null}
                </td>
                <td className={tdNum}>{fmtNum(v.salesCount)}</td>
                <td className={tdNum}>{fmtNum(v.activeListings)}</td>
              </tr>
            );
          })}
        </tbody>
      </Table>
    </div>
  );
}