import { ClaimBadge, Badge } from '@/components/ui/badge';
import { SourceBadge, type ProvenanceInfo } from '@/components/ui/source-badge';
import { ExplorerChart, MAX_PALETTE_SLOTS } from '@/components/charts/explorer-chart';
import { EPI_METRIC_LABEL } from '@/lib/queries/epidemiology';
import { fmtDate, fmtInt, fmtValue, humanize, unitLabel } from '@/lib/format';
import { splitIntoMultiples, shouldUseMultiples, type ComparableGroup, type ExplorerSeries } from '@/lib/explorer-series';
import type { ExplorerView } from '@/lib/explorer-params';

/**
 * Colour slots follow the entity, never the rank: one slot per (cancer × sex) identity in order of first
 * appearance across every group of the page. Beyond the palette size the panels are per cancer and the
 * slot follows the sex inside each panel (the panel title carries the cancer).
 */
export function assignSlots(groups: readonly ComparableGroup[]): { bySeries: Map<string, number> | null; bySex: Map<string, number> } {
  const ids: string[] = [];
  const sexes: string[] = [];
  for (const g of groups)
    for (const s of g.series) {
      const id = `${s.cancer_slug}|${s.sex}`;
      if (!ids.includes(id)) ids.push(id);
      if (!sexes.includes(s.sex)) sexes.push(s.sex);
    }
  const bySex = new Map(sexes.map((s, i) => [s, i % MAX_PALETTE_SLOTS]));
  if (ids.length > MAX_PALETTE_SLOTS) return { bySeries: null, bySex };
  return { bySeries: new Map(ids.map((id, i) => [id, i])), bySex };
}

function slotFor(s: ExplorerSeries, slots: ReturnType<typeof assignSlots>): number {
  return slots.bySeries?.get(`${s.cancer_slug}|${s.sex}`) ?? slots.bySex.get(s.sex) ?? 0;
}

export function groupProvenance(g: ComparableGroup, prov: { dataset?: string | null; dataset_version?: string | null; retrieved_at?: Date | string | null; source_url?: string | null; license?: string | null } | undefined): ProvenanceInfo {
  return {
    sourceSlug: g.source_slug,
    sourceName: g.source_name,
    dataset: prov?.dataset ?? null,
    datasetVersion: prov?.dataset_version ?? null,
    retrievedAt: prov?.retrieved_at ?? null,
    sourceUrl: prov?.source_url ?? null,
    license: prov?.license ?? null,
    layer: 'normalized',
    evidenceType: 'observed_data',
  };
}

/**
 * One comparable group → one chart (or small multiples with a shared axis). The caption states every
 * dimension that defines the group: metric, unit, geography, sex, age group, years, standard population,
 * source and retrieval date — nothing on the axis is left to be inferred.
 */
export function ChartGroup({
  group,
  view,
  slots,
  provenance,
  index,
  total,
}: {
  group: ComparableGroup;
  view: ExplorerView;
  slots: ReturnType<typeof assignSlots>;
  provenance: ProvenanceInfo;
  index: number;
  total: number;
}) {
  const g = group;
  const metricLabel = EPI_METRIC_LABEL[g.metric] ?? humanize(g.metric);
  const multiples = shouldUseMultiples(g, view);
  const panels = multiples ? splitIntoMultiples(g) : [g];
  const sexes = [...new Set(g.series.map((s) => s.sex))];
  const hasEstimates = g.series.some((s) => s.dashed);
  const hasCi = g.series.some((s) => s.points.some((p) => p.lo != null && p.hi != null));
  const years = g.year_min === g.year_max ? String(g.year_min) : `${g.year_min}–${g.year_max}`;
  const toChart = (s: ExplorerSeries) => ({ name: s.name, points: s.points, dashed: s.dashed, slot: slotFor(s, slots) });
  return (
    <section aria-label={`${metricLabel}, ${g.geography_name}, source ${g.source_slug}${total > 1 ? ` (chart ${index + 1} of ${total})` : ''}`} className="min-w-0">
      <div className="mb-1.5 flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
        <h3 className="text-base">
          {total > 1 ? <span className="ci-kicker mr-2">Chart {index + 1} of {total}</span> : null}
          {metricLabel} · {g.geography_name}
        </h3>
        <span className="text-[12px] text-ink-3">
          {unitLabel(g.unit)} · {sexes.length === 1 ? (sexes[0] === 'all' ? 'both sexes' : humanize(sexes[0]!).toLowerCase()) : 'by sex'} · {g.age_group === 'all' ? 'all ages' : `ages ${g.age_group}`} · {years}
          {g.standard_population ? ` · standard population: ${g.standard_population}` : ''}
        </span>
      </div>
      {multiples ? (
        <>
          <p className="mb-2 text-[12px] text-ink-3">
            Small multiples: one panel per cancer, <strong className="font-medium text-ink-2">shared y-axis 0–{fmtValue(g.y_max * 1.08, g.unit)} {unitLabel(g.unit)}</strong> across the {panels.length} panels so heights are comparable.
          </p>
          <div className="grid gap-x-6 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
            {panels.map((p) => (
              <div key={p.key} className="min-w-0">
                <p className="mb-0.5 truncate text-[13px] font-medium text-ink" title={p.series[0]?.cancer_name}>
                  {p.series[0]?.cancer_name}
                </p>
                <ExplorerChart series={p.series.map(toChart)} unit={p.unit} yMax={g.y_max} height={170} compact ariaLabel={`${metricLabel}, ${p.series[0]?.cancer_name ?? ''}, ${g.geography_name}, ${years}, source ${g.source_slug}`} />
              </div>
            ))}
          </div>
        </>
      ) : (
        <ExplorerChart series={g.series.map(toChart)} unit={g.unit} ariaLabel={`${metricLabel} in ${g.geography_name}, ${years}, ${g.series.length} series, source ${g.source_slug}`} />
      )}
      {/* div, not p: the SourceBadge popover contains a <dl>. */}
      <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[12px] text-ink-3">
        <SourceBadge p={provenance} />
        <ClaimBadge kind="observed" />
        <span>
          {g.source_name ?? g.source_slug}
          {provenance.retrievedAt ? ` (retrieved ${fmtDate(provenance.retrievedAt)})` : ''} · {fmtInt(g.n_obs)} observations · {g.series.length} series
        </span>
        {hasCi ? <span>· shaded band = 95% CI as published</span> : null}
        {hasEstimates ? <Badge tone="warn">dashed = estimated by the source</Badge> : null}
        {g.unit === 'count' ? <span>· counts are per site group, not summed</span> : null}
      </div>
    </section>
  );
}