import { t } from '@/i18n';
import { fixed, isNum } from '@/lib/format';
import { seriesVar } from './palette';

/**
 * Age structure as a single stacked bar (0–14 / 15–64 / 65+ shares, % of population). Ordinal colouring
 * (one hue, three lightness steps via the sequential ramp) because the categories are ordered.
 * A 2 px surface gap separates segments; labels inside only when the segment is wide enough.
 */
export function PopulationPyramid({
  shares,
  name,
  year,
  className,
}: {
  shares: { young: number | null; working: number | null; old: number | null };
  name: string;
  year?: number | null;
  className?: string;
}) {
  const parts = [
    { key: 'young', label: '0–14', value: shares.young, color: 'var(--seq-2)' },
    { key: 'working', label: '15–64', value: shares.working, color: 'var(--seq-4)' },
    { key: 'old', label: '65+', value: shares.old, color: 'var(--seq-6)' },
  ];
  const valid = parts.filter((p) => isNum(p.value));
  if (valid.length === 0) return <p className="text-sm text-ink-3">{t('chart.noData')}</p>;
  const total = valid.reduce((a, p) => a + (p.value as number), 0) || 100;
  const summary = t('chart.summary.pyramid', { name, parts: valid.map((p) => `${p.label}: ${fixed(p.value as number, 1)} %`).join(', ') });
  return (
    <figure className={className}>
      <div className="flex h-6 w-full overflow-hidden rounded-xs" role="img" aria-label={summary} style={{ gap: 2 }}>
        {valid.map((p) => {
          const pct = ((p.value as number) / total) * 100;
          return (
            <div key={p.key} className="relative h-full" style={{ width: `${pct}%`, background: p.color }} title={`${p.label}: ${fixed(p.value as number, 1)} %`}>
              {pct > 14 ? (
                <span className="tnum absolute inset-0 grid place-items-center text-2xs font-medium" style={{ color: p.key === 'young' ? 'var(--ink)' : '#fff' }}>
                  {fixed(p.value as number, 0)} %
                </span>
              ) : null}
            </div>
          );
        })}
      </div>
      <figcaption className="mt-1.5 flex flex-wrap gap-x-4 gap-y-1 text-xs text-ink-2">
        {valid.map((p) => (
          <span key={p.key} className="inline-flex items-center gap-1.5">
            <span aria-hidden className="inline-block h-2.5 w-2.5 rounded-xs" style={{ background: p.color }} />
            {p.label} <span className="tnum text-ink">{fixed(p.value as number, 1)} %</span>
          </span>
        ))}
        {year ? <span className="text-ink-3">{year}</span> : null}
      </figcaption>
      {seriesVar(0) ? null : null}
    </figure>
  );
}