import Link from 'next/link';
import { Section } from '@/components/ui/section';
import { Unavailable } from '@/components/ui/unavailable';
import { fmtInt, num, titleCase } from '@/lib/format';
import { ORBIT_CLASS_COLORS, routes } from '@/lib/site';
import type { HomePayload } from '@/lib/types';

interface RankRow {
  key: string;
  href: string;
  label: string;
  sub?: string | null;
  value: number;
  color?: string;
}

/** Ranked list with proportional bars where every label is a link (the shared HBars is not linkable). */
export function RankedBars({ rows, valueLabel }: { rows: RankRow[]; valueLabel: string }) {
  if (!rows.length) return <Unavailable what="Ranking" />;
  const max = Math.max(1, ...rows.map((r) => r.value));
  return (
    <ol className="divide-y divide-rule border-t border-rule">
      {rows.map((r, i) => (
        <li key={r.key}>
          <Link href={r.href} className="group grid min-h-[48px] grid-cols-[1.6rem_minmax(0,1fr)_auto] items-center gap-x-3 py-2">
            <span className="mono text-2xs text-ink-3">{String(i + 1).padStart(2, '0')}</span>
            <span className="min-w-0">
              <span className="flex items-baseline gap-2">
                <span className="truncate text-sm text-ink group-hover:text-accent">{r.label}</span>
                {r.sub && <span className="hidden truncate text-2xs text-ink-3 sm:inline">{r.sub}</span>}
              </span>
              <span className="mt-1 block h-[4px] w-full overflow-hidden rounded-full bg-plane-2">
                <span className="block h-full rounded-full" style={{ width: `${Math.max(1.5, (r.value / max) * 100)}%`, background: r.color ?? 'var(--series-1)' }} />
              </span>
            </span>
            <span className="tnum text-right text-sm text-ink">
              {fmtInt(r.value)} <span className="sr-only">{valueLabel}</span>
            </span>
          </Link>
        </li>
      ))}
    </ol>
  );
}

export function TopConstellations({ items }: { items: HomePayload['top_constellations'] }) {
  const rows: RankRow[] = items.map((c) => ({
    key: c.id,
    href: routes.constellation(c.slug),
    label: c.name,
    sub: [c.service_type ? titleCase(c.service_type) : null, c.orbit_class].filter(Boolean).join(' · '),
    value: num(c.active) ?? 0,
    color: ORBIT_CLASS_COLORS[c.orbit_class ?? 'OTHER'] ?? 'var(--series-1)',
  }));
  return (
    <Section eyebrow="Constellations" title="Largest constellations" action={{ href: routes.constellations(), label: 'All constellations' }} className="py-0">
      <p className="mb-3 text-xs text-ink-3">Active satellites · membership is derived (see <Link href={routes.methodology()} className="link">methodology</Link>)</p>
      <RankedBars rows={rows} valueLabel="active satellites" />
    </Section>
  );
}

export function TopCountries({ items }: { items: HomePayload['top_countries'] }) {
  const rows: RankRow[] = items.slice(0, 10).map((c) => ({
    key: c.code,
    href: routes.country(c.slug),
    label: c.name,
    sub: `${fmtInt(c.objects_on_orbit)} objects on orbit`,
    value: num(c.active_payloads) ?? 0,
    color: 'var(--series-6)',
  }));
  return (
    <Section eyebrow="Countries" title="Active payloads by country" action={{ href: routes.countries(), label: 'All countries' }} className="py-0">
      <RankedBars rows={rows} valueLabel="active payloads" />
    </Section>
  );
}

export function TopOperators({ items }: { items: HomePayload['top_operators'] }) {
  const rows: RankRow[] = items.slice(0, 10).map((o) => ({
    key: o.id,
    href: routes.operator(o.slug),
    label: o.name,
    sub: [o.country_code, num(o.payloads_last_365d) ? `${fmtInt(o.payloads_last_365d)} launched in 365 d` : null].filter(Boolean).join(' · '),
    value: num(o.active_payloads) ?? 0,
    color: 'var(--series-2)',
  }));
  return (
    <Section eyebrow="Operators" title="Largest operators" action={{ href: routes.operators(), label: 'All operators' }} className="py-0">
      <RankedBars rows={rows} valueLabel="active payloads" />
    </Section>
  );
}