import { t } from '@/i18n';
import type { CompareState } from '@/lib/compare-state';
import type { CompareSeries, CompareSnapshotRow, CountryLite } from '@/lib/types-compare';
import { subtopicAnchor } from '@/lib/anchors';
import { CollapsibleGroup, SubtopicJumpNav } from '@/components/data/collapsible-group';
import { CompareChart } from './compare-chart';
import { SnapshotCompact } from './snapshot-table';

/** Above this many charts a topic tab is split into collapsible subtopic blocks (first one expanded). */
const SECTION_THRESHOLD = 8;

export function ChartGrid({ rows, countries, state, eager, maxYear }: { rows: CompareSnapshotRow[]; countries: CountryLite[]; state: CompareState; eager: Map<string, CompareSeries[]>; maxYear: number }) {
  return (
    <div className="grid gap-x-10 gap-y-8 lg:grid-cols-2">
      {rows.map((row) => (
        <CompareChart key={row.indicator.slug} indicator={row.indicator} countries={countries} state={state} initial={eager.get(row.indicator.slug)} snapshot={row.values} maxYear={maxYear} />
      ))}
    </div>
  );
}

/** Group rows by `indicator.subtopic`, preserving first-seen order. */
export function groupBySubtopic<T extends { indicator: { subtopic: string | null } }>(rows: T[]): Array<{ subtopic: string; rows: T[] }> {
  const m = new Map<string, T[]>();
  for (const r of rows) {
    const k = r.indicator.subtopic ?? t('common.other');
    const cur = m.get(k);
    if (cur) cur.push(r);
    else m.set(k, [r]);
  }
  return Array.from(m, ([subtopic, rs]) => ({ subtopic, rows: rs }));
}

/**
 * Charts of a compare topic tab. Short tabs → plain grid. Long tabs (> 8 charts, ≥ 2 subtopics) → a jump nav +
 * one CollapsibleGroup per subtopic: the first expanded (charts), the others collapsed showing the latest
 * values inline (SnapshotCompact) so nothing is hidden, just deferred. Charts still lazy-mount on scroll.
 */
export function ChartSections({ rows, countries, slugs, state, eager, maxYear, anchorPrefix }: { rows: CompareSnapshotRow[]; countries: CountryLite[]; slugs: string[]; state: CompareState; eager: Map<string, CompareSeries[]>; maxYear: number; anchorPrefix: string }) {
  const groups = groupBySubtopic(rows);
  if (rows.length <= SECTION_THRESHOLD || groups.length < 2) return <ChartGrid rows={rows} countries={countries} state={state} eager={eager} maxYear={maxYear} />;
  const items = groups.map((g) => ({ id: subtopicAnchor(anchorPrefix, g.subtopic), label: g.subtopic, count: g.rows.length }));
  return (
    <div className="min-w-0">
      <SubtopicJumpNav items={items} label={t('topic.jump')} className="mb-2" />
      {groups.map((g, i) => (
        <CollapsibleGroup key={g.subtopic} id={items[i]!.id} title={g.subtopic} count={g.rows.length} defaultOpen={i === 0} summary={<SnapshotCompact rows={g.rows} countries={countries} slugs={slugs} state={state} />}>
          <ChartGrid rows={g.rows} countries={countries} state={state} eager={eager} maxYear={maxYear} />
        </CollapsibleGroup>
      ))}
    </div>
  );
}