import Link from 'next/link';
import { CompanyTable } from '@/components/company/company-table';
import { cn } from '@/lib/cn';
import { fmtInt, fmtPctSigned, fmtScore, fmtSigned } from '@/lib/format';
import { RANKING_KINDS, RANKING_WINDOWS, routes } from '@/lib/site';
import type { Rankings } from '@/lib/types';

export function RankingTabs({ kind, window, country, industry }: { kind: string; window: string; country?: string; industry?: string }) {
  const href = (k: string, w: string) => `${routes.rankings(k, w)}${country ? `&country=${country}` : ''}${industry ? `&industry=${industry}` : ''}`;
  return (
    <div className="space-y-2">
      <div className="no-scrollbar -mx-4 flex gap-1.5 overflow-x-auto px-4 md:mx-0 md:flex-wrap md:px-0" role="tablist" aria-label="Ranking">
        {RANKING_KINDS.map((k) => (
          <Link key={k.id} href={href(k.id, window)} className="chip-btn" data-on={k.id === kind} role="tab" aria-selected={k.id === kind}>
            {k.label}
          </Link>
        ))}
      </div>
      <div className="flex flex-wrap items-center gap-1" role="radiogroup" aria-label="Window">
        {RANKING_WINDOWS.map((w) => (
          <Link key={w} href={href(kind, w)} className={cn('mono flex h-8 items-center px-2.5 text-xs', w === window ? 'bg-ink text-canvas' : 'border border-rule text-ink-2 hover:text-ink')} role="radio" aria-checked={w === window}>
            {w}
          </Link>
        ))}
      </div>
    </div>
  );
}

export function RankingsTable({ data }: { data: Rankings }) {
  const k = RANKING_KINDS.find((x) => x.id === data.kind) ?? RANKING_KINDS[0]!;
  const formatValue = (c: { value?: number }) => (k.unit === 'pct' ? fmtPctSigned(c.value) : k.unit === 'count' ? fmtInt(c.value) : fmtScore(c.value));
  const formatDelta = (c: { delta?: number | null }) => (c.delta === null || c.delta === undefined ? null : k.unit === 'pct' ? fmtSigned(c.delta, 1) + ' pt' : fmtSigned(c.delta, 1));
  return <CompanyTable items={data.items} rank valueLabel={k.short} formatValue={formatValue} formatDelta={formatDelta} />;
}