'use client';
import { t, tOpt } from '@/i18n';
import type { FormatSpec } from '@/lib/types';
import type { RegionCompareResponse } from '@/lib/types-analytics';
import { LineChart, type LineSeries } from '@/components/charts/line-chart';

/** Historical aggregates of one or two groups from `/regions/compare` (history block): one small chart per indicator. */
export function GroupHistory({ data, ids, names }: { data: RegionCompareResponse; ids: string[]; names: Record<string, string> }) {
  const entries = Object.entries(data.history);
  if (!entries.length) return <p className="text-sm text-ink-3">{t('common.noDataLong')}</p>;
  return (
    <div className="grid gap-x-8 gap-y-6 sm:grid-cols-2 lg:grid-cols-4">
      {entries.map(([slug, h]) => {
        const row = data.rows.find((r) => r.indicator.slug === slug);
        const ind = row?.indicator;
        const spec: FormatSpec = { format: ind?.format ?? 'number', unit: ind?.unit, unit_short: ind?.unit_short, precision: ind?.precision, name: ind?.short_name ?? ind?.name ?? slug };
        const years = h.years;
        const series: LineSeries[] = [];
        ids.forEach((id, i) => {
          const arr = (h as Record<string, unknown>)[id];
          if (!Array.isArray(arr)) return;
          const points = years.map((y, k) => ({ period: `${y}-01-01`, year: y, value: (arr[k] as number | null) ?? null })).filter((p) => p.value != null);
          if (points.length) series.push({ id, name: names[id] ?? id, colorIndex: i, points });
        });
        const kind = (h as { kind?: string }).kind;
        return (
          <LineChart key={slug} series={series} spec={spec} height={200} title={spec.name} subtitle={kind ? tOpt(`regions.${kind}`, kind) : undefined} endLabels={false} defaultWidth={320} margin={{ right: 14 }} />
        );
      })}
    </div>
  );
}