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

const SPECIAL_ORDER = ['MEO', 'GEO', 'HEO', 'OTHER', 'UNKNOWN'];

/** 0-200 … 1000-2000 by lower bound, then MEO, GEO, HEO, other/unknown. */
export function orderBuckets(buckets: BucketStat[]): BucketStat[] {
  const rank = (b: string) => {
    const m = /^(\d+)-/.exec(b);
    if (m) return Number(m[1]);
    const i = SPECIAL_ORDER.indexOf(b.toUpperCase());
    return 1_000_000 + (i < 0 ? SPECIAL_ORDER.length : i);
  };
  return [...buckets].sort((a, b) => rank(a.bucket) - rank(b.bucket));
}

function label(b: string): string {
  return /^\d+-\d+$/.test(b) ? `${b} km` : b === 'UNKNOWN' ? 'Unknown' : b === 'OTHER' ? 'Other' : b;
}

const SEGMENTS: { key: keyof BucketStat; label: string; color: string }[] = [
  { key: 'active_payloads', label: 'Active payloads', color: 'var(--series-1)' },
  { key: 'payloads', label: 'Inactive payloads', color: 'var(--series-7)' },
  { key: 'rocket_bodies', label: 'Rocket bodies', color: 'var(--series-4)' },
  { key: 'debris', label: 'Debris', color: 'var(--series-8)' },
];

/** Orbital density as a horizontal bar profile (one row per altitude shell), stacked by object category. */
export function OrbitalDensity({ buckets }: { buckets: BucketStat[] }) {
  const rows = orderBuckets(buckets);
  const max = Math.max(1, ...rows.map((b) => num(b.objects) ?? 0));
  return (
    <Section eyebrow="Orbital density" title="Where the objects are" action={{ href: routes.stats(), label: 'Full statistics' }} className="py-0">
      <p className="mb-4 max-w-2xl text-xs text-ink-3">
        Objects on orbit by altitude shell (perigee) and orbit regime. Derived from the latest element sets — see the <Link href={routes.methodology()} className="link">methodology</Link>. Not a collision-risk metric.
      </p>
      {rows.length === 0 ? (
        <Unavailable what="Orbital density" />
      ) : (
        <>
          <ol className="space-y-1.5">
            {rows.map((b) => {
              const total = num(b.objects) ?? 0;
              const active = num(b.active_payloads) ?? 0;
              const payloads = Math.max(0, (num(b.payloads) ?? 0) - active);
              const parts = [active, payloads, num(b.rocket_bodies) ?? 0, num(b.debris) ?? 0];
              return (
                <li key={b.bucket} className="grid grid-cols-[5.5rem_minmax(0,1fr)_4rem] items-center gap-3 sm:grid-cols-[7rem_minmax(0,1fr)_5rem]">
                  <span className="mono truncate text-xs text-ink-2">{label(b.bucket)}</span>
                  <span className="flex h-[14px] w-full overflow-hidden rounded-sm bg-plane-2" role="img" aria-label={`${label(b.bucket)}: ${fmtInt(total)} objects`}>
                    {parts.map((v, i) => (
                      <span key={SEGMENTS[i]!.key} className="h-full" style={{ width: `${(v / max) * 100}%`, background: SEGMENTS[i]!.color, opacity: i === 1 ? 0.5 : 0.9 }} />
                    ))}
                  </span>
                  <span className="tnum text-right text-xs text-ink">{fmtInt(total)}</span>
                </li>
              );
            })}
          </ol>
          <ul className="mt-4 flex flex-wrap gap-x-4 gap-y-1 text-2xs text-ink-2">
            {SEGMENTS.map((s, i) => (
              <li key={s.key} className="inline-flex items-center gap-1.5">
                <span className="inline-block size-2.5 rounded-sm" style={{ background: s.color, opacity: i === 1 ? 0.5 : 0.9 }} /> {s.label}
              </li>
            ))}
          </ul>
        </>
      )}
    </Section>
  );
}