'use client';
import { useMemo } from 'react';
import { t } from '@/i18n';
import { formatValue } from '@/lib/format';
import type { FormatSpec as Spec } from '@/lib/types';
import { ChartFrame } from './chart-frame';
import { CHART, MARK, seriesVar } from './palette';
import { yScale } from './scales';
import { useMeasure } from './use-measure';

export interface SlopeRow {
  id: string;
  label: string;
  a: number | null;
  b: number | null;
  colorIndex?: number;
  highlight?: boolean;
}

/** Two-period slope chart; labels on both ends, highlighted row in the accent, others in muted ink. */
export function SlopeChart({ rows, spec, yearA, yearB, height = 260, title, className }: { rows: SlopeRow[]; spec: Spec; yearA: number; yearB: number; height?: number; title?: React.ReactNode; className?: string }) {
  const { ref, width } = useMeasure<HTMLDivElement>(480);
  const model = useMemo(() => {
    const clean = rows.filter((r) => r.a != null && r.b != null) as Array<SlopeRow & { a: number; b: number }>;
    const vals = clean.flatMap((r) => [r.a, r.b]);
    const lo = Math.min(...vals);
    const hi = Math.max(...vals);
    const m = { top: 20, bottom: 24, left: 110, right: 110 };
    const innerH = height - m.top - m.bottom;
    const y = yScale([lo, hi], [innerH, 0], { includeZero: false });
    const x0 = m.left;
    const x1 = width - m.right;
    return { clean, y, m, x0, x1, innerH };
  }, [rows, width, height]);
  const summary = t('chart.summary.slope', { y0: yearA, y1: yearB, n: model.clean.length });
  return (
    <ChartFrame title={title} summary={summary} className={className} minHeight={height} table={{ columns: [{ key: 'label', label: '' }, { key: 'a', label: String(yearA), numeric: true }, { key: 'b', label: String(yearB), numeric: true }], rows: model.clean.map((r) => ({ label: r.label, a: formatValue(r.a, spec), b: formatValue(r.b, spec) })) }}>
      <div ref={ref} style={{ height }}>
        <svg className="ca-chart" width={width} height={height} viewBox={`0 0 ${width} ${height}`} role="img" aria-label={summary}>
          <g transform={`translate(0,${model.m.top})`}>
            <line x1={model.x0} x2={model.x0} y1={0} y2={model.innerH} stroke={CHART.rule} />
            <line x1={model.x1} x2={model.x1} y1={0} y2={model.innerH} stroke={CHART.rule} />
            <text x={model.x0} y={model.innerH + 16} textAnchor="middle">
              {yearA}
            </text>
            <text x={model.x1} y={model.innerH + 16} textAnchor="middle">
              {yearB}
            </text>
            {model.clean.map((r, i) => {
              const color = r.highlight ? CHART.accent : rows.length > 8 ? CHART.ruleStrong : seriesVar(r.colorIndex ?? i);
              return (
                <g key={r.id}>
                  <line x1={model.x0} x2={model.x1} y1={model.y(r.a)} y2={model.y(r.b)} stroke={color} strokeWidth={MARK.line} strokeLinecap="round" opacity={r.highlight || rows.length <= 8 ? 1 : 0.6} />
                  <circle className="ring" cx={model.x0} cy={model.y(r.a)} r={MARK.dotR} fill={color} />
                  <circle className="ring" cx={model.x1} cy={model.y(r.b)} r={MARK.dotR} fill={color} />
                  <text className={`label${r.highlight ? ' label-strong' : ''}`} x={model.x0 - 8} y={model.y(r.a)} dy="0.32em" textAnchor="end">
                    {r.label} {formatValue(r.a, spec)}
                  </text>
                  <text className={`label${r.highlight ? ' label-strong' : ''}`} x={model.x1 + 8} y={model.y(r.b)} dy="0.32em">
                    {formatValue(r.b, spec)}
                  </text>
                </g>
              );
            })}
          </g>
        </svg>
      </div>
    </ChartFrame>
  );
}