'use client';
import { useMemo, useState } from 'react';
import { t } from '@/i18n';
import { formatTick, formatValue } from '@/lib/format';
import type { FormatSpec as Spec } from '@/lib/types';
import { ChartFrame, type TableData } from './chart-frame';
import { CHART, MARK } from './palette';
import { DEFAULT_MARGIN, extent } from './scales';
import { ChartTooltip, TooltipRow } from './tooltip';
import { useMeasure } from './use-measure';
import { scaleLinear, scaleLog } from 'd3-scale';

export interface HistogramMarker {
  id: string;
  label: string;
  value: number;
  /** 'accent' for the selected country, 'ink' for medians. */
  tone?: 'accent' | 'ink' | 'muted';
}

/**
 * Country distribution histogram: equal-width bins (log-x when `edges` come from a log histogram), one
 * neutral colour, vertical markers (world median, region median, selected country) with labels above the
 * plot, hover tooltip per bin, accessible table. Bins are given by the API (`edges` = n+1 boundaries).
 */
export function Histogram({ edges, counts, log = false, markers = [], spec, height = 220, title, subtitle, className, defaultWidth = 640, unitLabel }: { edges: number[]; counts: number[]; log?: boolean; markers?: HistogramMarker[]; spec: Spec; height?: number; title?: React.ReactNode; subtitle?: React.ReactNode; className?: string; defaultWidth?: number; unitLabel?: string }) {
  const { ref, width } = useMeasure<HTMLDivElement>(defaultWidth);
  const [hover, setHover] = useState<number | null>(null);
  const m = { ...DEFAULT_MARGIN, top: markers.length ? (markers.length > 2 ? 46 : 34) : 12, bottom: 28, left: 36 };
  const model = useMemo(() => {
    const innerW = Math.max(10, width - m.left - m.right);
    const innerH = Math.max(10, height - m.top - m.bottom);
    const lo = edges[0] ?? 0;
    const hi = edges[edges.length - 1] ?? 1;
    const x = log && lo > 0 ? scaleLog().domain([lo, hi]).range([0, innerW]) : scaleLinear().domain([lo, hi]).range([0, innerW]);
    const maxC = Math.max(1, ...counts);
    const y = scaleLinear().domain([0, maxC]).range([innerH, 0]).nice(4);
    const bars = counts.map((c, i) => {
      const x0 = x(edges[i]!);
      const x1 = x(edges[i + 1]!);
      return { i, x: x0, w: Math.max(1, x1 - x0 - 1), y: y(c), h: innerH - y(c), c, lo: edges[i]!, hi: edges[i + 1]! };
    });
    const xTicks = (log ? (x as ReturnType<typeof scaleLog>).ticks(4) : (x as ReturnType<typeof scaleLinear>).ticks(Math.max(3, Math.floor(innerW / 90)))).filter((v) => v >= lo && v <= hi);
    // Marker label placement: stagger vertically when two labels would collide.
    const placed = markers
      .map((mk) => ({ ...mk, px: Math.min(innerW, Math.max(0, x(mk.value))) }))
      .sort((a, b) => a.px - b.px)
      .map((mk, i, arr) => ({ ...mk, row: Math.min(2, arr.slice(0, i).filter((o) => mk.px - o.px < 90).length) }));
    return { innerW, innerH, x, y, bars, xTicks, yTicks: y.ticks(3), placed, dom: extent(edges) ?? [lo, hi] };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [edges, counts, log, markers, width, height]);

  const total = counts.reduce((a, b) => a + b, 0);
  const summary = t('chart.summary.histogram', { n: total, min: formatValue(model.dom[0], spec), max: formatValue(model.dom[1], spec) });
  const table: TableData = useMemo(
    () => ({
      columns: [{ key: 'range', label: spec.name ?? t('common.value') }, { key: 'n', label: t('chart.histogram.countries'), numeric: true }],
      rows: model.bars.map((b) => ({ range: `${formatValue(b.lo, spec)} – ${formatValue(b.hi, spec)}`, n: String(b.c) })),
    }),
    [model.bars, spec],
  );
  const hb = hover != null ? model.bars[hover] : null;

  return (
    <ChartFrame title={title} subtitle={subtitle} summary={summary} table={total ? table : undefined} className={className} minHeight={height}>
      <div ref={ref} className="relative w-full" style={{ height }}>
        {total === 0 ? (
          <div className="grid h-full place-items-center text-sm text-ink-3">{t('chart.noData')}</div>
        ) : (
          <svg className="ca-chart" width={width} height={height} viewBox={`0 0 ${width} ${height}`} role="img" aria-label={summary}>
            <title>{typeof title === 'string' ? title : spec.name ?? ''}</title>
            <desc>{summary}</desc>
            <g transform={`translate(${m.left},${m.top})`}>
              <g className="grid">
                {model.yTicks.map((tk) => (
                  <line key={tk} x1={0} x2={model.innerW} y1={model.y(tk)} y2={model.y(tk)} />
                ))}
              </g>
              {model.bars.map((b) => (
                <rect key={b.i} x={b.x} y={b.y} width={b.w} height={b.h} fill="var(--series-1)" fillOpacity={hover === b.i ? 1 : 0.75} rx={1} onPointerEnter={() => setHover(b.i)} onPointerLeave={() => setHover(null)} onPointerDown={() => setHover(b.i)} />
              ))}
              {model.placed.map((mk) => (
                <g key={mk.id} transform={`translate(${mk.px},0)`}>
                  <line y1={-4} y2={model.innerH} stroke={mk.tone === 'accent' ? CHART.accent : mk.tone === 'muted' ? CHART.ruleStrong : CHART.ink} strokeWidth={mk.tone === 'accent' ? 2 : 1.25} strokeDasharray={mk.tone === 'muted' ? '3 3' : undefined} />
                  <text y={-8 - mk.row * 12} textAnchor={mk.px > model.innerW * 0.8 ? 'end' : mk.px < model.innerW * 0.2 ? 'start' : 'middle'} className={mk.tone === 'accent' ? 'label label-strong' : 'label'} style={{ fill: mk.tone === 'accent' ? CHART.accent : undefined, paintOrder: 'stroke', stroke: 'var(--surface)', strokeWidth: 3 }}>
                    {mk.label} · {formatValue(mk.value, spec)}
                  </text>
                </g>
              ))}
              <g className="axis">
                <line className="baseline" x1={0} x2={model.innerW} y1={model.innerH} y2={model.innerH} />
                {model.xTicks.map((tk) => (
                  <text key={tk} x={model.x(tk)} y={model.innerH + 16} textAnchor="middle">
                    {formatTick(tk, spec)}
                  </text>
                ))}
                {model.yTicks.map((tk) => (
                  <text key={tk} x={-6} y={model.y(tk)} dy="0.32em" textAnchor="end">
                    {tk}
                  </text>
                ))}
                {unitLabel ? (
                  <text x={model.innerW} y={model.innerH + 27} textAnchor="end" className="label">
                    {unitLabel}
                  </text>
                ) : null}
              </g>
            </g>
          </svg>
        )}
        {hb ? (
          <ChartTooltip x={m.left + hb.x + hb.w / 2} y={m.top + hb.y} width={width}>
            <div className="mb-0.5 text-2xs text-ink-3">
              {formatValue(hb.lo, spec)} – {formatValue(hb.hi, spec)}
            </div>
            <TooltipRow label={t('chart.histogram.countries')} value={String(hb.c)} />
          </ChartTooltip>
        ) : null}
      </div>
      <span className="sr-only">{MARK.line}</span>
    </ChartFrame>
  );
}