'use client';
import { cn } from '@/lib/cn';
import { fmtInt } from '@/lib/format';
import { ORBIT_CLASS_COLORS } from '@/lib/site';
import { ORBIT_CLASSES, type GlobeFilters } from './filters';
import type { GlobeData } from './use-positions';

/** Orbit-class legend with live counts; each entry is a toggle (tap target ≥ 44 px on touch via padding). */
export function GlobeLegend({ data, filters, onToggle, className, dense = false }: { data: GlobeData | null; filters: GlobeFilters; onToggle: (cls: string) => void; className?: string; dense?: boolean }) {
  return (
    <ul className={cn('flex flex-wrap items-center gap-1', className)} aria-label="Orbit classes">
      {ORBIT_CLASSES.map((c) => {
        const idx = data?.legend.cls.indexOf(c) ?? -1;
        const count = idx >= 0 ? data?.counts.cls[idx] ?? null : null;
        const on = filters.cls.size === 0 || filters.cls.has(c);
        const color = ORBIT_CLASS_COLORS[c] ?? 'var(--other)';
        return (
          <li key={c}>
            <button
              type="button"
              onClick={() => onToggle(c)}
              aria-pressed={filters.cls.has(c)}
              className={cn('mono inline-flex min-h-[36px] items-center gap-1.5 rounded-md border px-2 text-[11px] transition-colors', on ? 'border-rule bg-plane/70 text-ink' : 'border-transparent text-ink-3 opacity-60', dense ? 'min-h-[32px]' : '')}
              title={`${c}: ${count === null ? 'count unavailable' : `${fmtInt(count)} objects`} — click to isolate`}
            >
              <span className="inline-block size-2 rounded-full" style={{ background: color, boxShadow: on ? `0 0 8px ${color}` : 'none' }} aria-hidden />
              {c}
              <span className="tnum text-ink-3">{count === null ? '—' : fmtInt(count)}</span>
            </button>
          </li>
        );
      })}
    </ul>
  );
}