import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import { isNum } from '@/lib/format';
import type { DNAResponse, DnaDimension } from '@/lib/types';
import { CHART } from './palette';

export const DNA_DIMS: DnaDimension[] = ['income', 'demographics', 'urbanization', 'trade', 'energy', 'emissions', 'innovation', 'education', 'public_spending'];

/**
 * Radial "fingerprint": 9 dimensions, 0–100 percentile rank, drawn as a filled polygon on a 100-radius ring
 * with 25/50/75 guide rings and labelled spokes. Optional dashed `reference` polygon (world = 50, a region's
 * median, another country) for comparison. Server-renderable SVG in a square viewBox.
 */
export function DnaRadial({ dna, name, size = 320, className, compact = false, reference, referenceLabel }: { dna: Pick<DNAResponse, 'dims' | 'year_ref'> | null; name: string; size?: number; className?: string; compact?: boolean; reference?: Record<string, number | null> | null; referenceLabel?: string | null }) {
  const dims = DNA_DIMS.map((d) => ({ key: d, label: t(`country.dna.${d}` as const), value: dna?.dims?.[d] ?? null, ref: reference?.[d] ?? null }));
  const present = dims.filter((d) => isNum(d.value));
  if (!dna || present.length === 0) return <p className="text-sm text-ink-3">{t('country.dna.none')}</p>;

  const R = 100;
  const pad = compact ? 16 : 100;
  const cx = R + pad;
  const cy = R + pad;
  const W = 2 * (R + pad);
  const angle = (i: number) => -Math.PI / 2 + (i / dims.length) * 2 * Math.PI;
  const pt = (i: number, r: number): [number, number] => [cx + r * Math.cos(angle(i)), cy + r * Math.sin(angle(i))];
  const poly = dims.map((d, i) => pt(i, isNum(d.value) ? (d.value / 100) * R : 0));
  const refPoly = reference ? dims.map((d, i) => pt(i, isNum(d.ref) ? (d.ref / 100) * R : 0)) : null;
  const summary = t('chart.summary.dna', { name, dims: present.map((d) => `${d.label} ${Math.round(d.value as number)}`).join(', ') });

  return (
    <figure className={cn('min-w-0', className)}>
      <svg viewBox={`0 0 ${W} ${W}`} width="100%" style={{ maxWidth: size, aspectRatio: '1 / 1', margin: '0 auto', overflow: 'visible' }} role="img" aria-label={summary} className="ca-chart">
        <title>{t('country.dna.title')}</title>
        <desc>{summary}</desc>
        {[25, 50, 75, 100].map((r) => (
          <circle key={r} cx={cx} cy={cy} r={(r / 100) * R} fill="none" stroke={CHART.rule} strokeWidth={r === 100 ? 1 : 0.75} />
        ))}
        {dims.map((_, i) => {
          const [x, y] = pt(i, R);
          return <line key={i} x1={cx} y1={cy} x2={x} y2={y} stroke={CHART.rule} strokeWidth={0.75} />;
        })}
        {refPoly ? <polygon points={refPoly.map((p) => p.join(',')).join(' ')} fill={CHART.ink3} fillOpacity={0.08} stroke={CHART.ink2} strokeWidth={1.5} strokeDasharray="4 3" strokeLinejoin="round" /> : null}
        <polygon points={poly.map((p) => p.join(',')).join(' ')} fill={CHART.accent} fillOpacity={0.16} stroke={CHART.accent} strokeWidth={2} strokeLinejoin="round" />
        {poly.map(([x, y], i) => (
          <circle key={i} cx={x} cy={y} r={isNum(dims[i]!.value) ? 4 : 0} fill={CHART.accent} stroke={CHART.surface} strokeWidth={2} />
        ))}
        {!compact
          ? dims.map((d, i) => {
              const [x, y] = pt(i, R + 16);
              const a = angle(i);
              const anchor = Math.abs(Math.cos(a)) < 0.2 ? 'middle' : Math.cos(a) > 0 ? 'start' : 'end';
              return (
                <text key={d.key} x={x} y={y} textAnchor={anchor} dy="0.32em" className={isNum(d.value) ? 'label' : ''} style={{ fontSize: 11, fill: isNum(d.value) ? CHART.ink2 : CHART.ink3 }}>
                  {d.label}
                  {isNum(d.value) ? ` ${Math.round(d.value)}` : ' —'}
                  {reference && isNum(d.ref) ? <tspan style={{ fill: CHART.ink3 }}>{` · ${Math.round(d.ref)}`}</tspan> : null}
                </text>
              );
            })
          : null}
      </svg>
      <figcaption className={cn('mt-2 text-2xs text-ink-2', compact ? 'grid grid-cols-3 gap-x-3 gap-y-1' : 'flex flex-wrap items-center justify-center gap-x-4 gap-y-1')}>
        {compact ? (
          dims.map((d) => (
            <span key={d.key} className="flex justify-between gap-1">
              <span className="truncate">{d.label}</span>
              <span className="tnum text-ink">{isNum(d.value) ? Math.round(d.value) : '—'}</span>
            </span>
          ))
        ) : (
          <>
            <span className="inline-flex items-center gap-1.5">
              <span aria-hidden className="inline-block h-0.5 w-4 rounded-full" style={{ background: CHART.accent }} /> {name}
            </span>
            {reference && referenceLabel ? (
              <span className="inline-flex items-center gap-1.5">
                <span aria-hidden className="inline-block h-0.5 w-4 rounded-full border-t-2 border-dashed" style={{ borderColor: CHART.ink2 }} /> {referenceLabel}
              </span>
            ) : null}
          </>
        )}
      </figcaption>
    </figure>
  );
}