'use client';
import { scaleSqrt } from 'd3-scale';
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 } from './chart-frame';
import { CHART, MARK } from './palette';
import { DEFAULT_MARGIN, extent, yScale } from './scales';
import { ChartTooltip, TooltipRow } from './tooltip';
import { useMeasure } from './use-measure';

export interface ScatterPoint {
  id: string;
  label: string;
  x: number | null;
  y: number | null;
  size?: number | null;
  href?: string;
  highlight?: boolean;
}

/**
 * Scatter / bubble. One colour for all points (nominal, no series), highlighted points in the accent;
 * labels only for highlighted points and the extremes (never every point). Nearest-point hover with a
 * 24 px hit radius.
 */
export function Scatter({ points, xSpec, ySpec, logX, logY, height = 300, title, className, labelCount = 4 }: { points: ScatterPoint[]; xSpec: Spec; ySpec: Spec; logX?: boolean; logY?: boolean; height?: number; title?: React.ReactNode; className?: string; labelCount?: number }) {
  const { ref, width } = useMeasure<HTMLDivElement>(560);
  const [hover, setHover] = useState<string | null>(null);
  const m = { ...DEFAULT_MARGIN, left: 52, bottom: 32 };
  const model = useMemo(() => {
    const clean = points.filter((p) => p.x != null && p.y != null) as Array<ScatterPoint & { x: number; y: number }>;
    const innerW = Math.max(10, width - m.left - m.right);
    const innerH = Math.max(10, height - m.top - m.bottom);
    const xd = extent(clean.map((p) => p.x)) ?? [0, 1];
    const yd = extent(clean.map((p) => p.y)) ?? [0, 1];
    const x = yScale(xd, [0, innerW], { log: logX, includeZero: !logX });
    const y = yScale(yd, [innerH, 0], { log: logY, includeZero: !logY });
    const sizes = clean.map((p) => p.size ?? null).filter((v): v is number => v != null);
    const r = sizes.length ? scaleSqrt().domain([0, Math.max(...sizes)]).range([3, 18]) : null;
    const labelled = new Set<string>();
    for (const p of clean) if (p.highlight) labelled.add(p.id);
    const byY = [...clean].sort((a, b) => b.y - a.y);
    const byX = [...clean].sort((a, b) => b.x - a.x);
    for (const p of [byY[0], byY[byY.length - 1], byX[0], byX[byX.length - 1]]) if (p && labelled.size < labelCount + 2) labelled.add(p.id);
    return { clean, x, y, r, innerW, innerH, labelled };
  }, [points, width, height, logX, logY, labelCount, m.left, m.right, m.top, m.bottom]);

  const summary = t('chart.summary.scatter', { x: xSpec.name ?? 'x', y: ySpec.name ?? 'y', n: model.clean.length });
  const hp = hover ? model.clean.find((p) => p.id === hover) : null;
  const onMove = (e: React.PointerEvent<SVGRectElement>) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const px = e.clientX - rect.left;
    const py = e.clientY - rect.top;
    let best: string | null = null;
    let bd = 24 * 24;
    for (const p of model.clean) {
      const dx = model.x(p.x) - px;
      const dy = model.y(p.y) - py;
      const d = dx * dx + dy * dy;
      if (d < bd) {
        bd = d;
        best = p.id;
      }
    }
    setHover(best);
  };
  return (
    <ChartFrame title={title} summary={summary} className={className} minHeight={height} table={{ columns: [{ key: 'label', label: '' }, { key: 'x', label: xSpec.name ?? 'x', numeric: true }, { key: 'y', label: ySpec.name ?? 'y', numeric: true }], rows: model.clean.map((p) => ({ label: p.label, x: formatValue(p.x, xSpec), y: formatValue(p.y, ySpec) })) }}>
      <div ref={ref} className="relative" style={{ height }}>
        <svg className="ca-chart" width={width} height={height} viewBox={`0 0 ${width} ${height}`} role="img" aria-label={summary}>
          <g transform={`translate(${m.left},${m.top})`}>
            <g className="grid">
              {model.y.ticks(4).map((tk) => (
                <line key={tk} x1={0} x2={model.innerW} y1={model.y(tk)} y2={model.y(tk)} />
              ))}
            </g>
            <g className="axis">
              <line className="baseline" x1={0} x2={model.innerW} y1={model.innerH} y2={model.innerH} />
              {model.x.ticks(5).map((tk) => (
                <text key={tk} x={model.x(tk)} y={model.innerH + 16} textAnchor="middle">
                  {formatTick(tk, xSpec)}
                </text>
              ))}
              {model.y.ticks(4).map((tk) => (
                <text key={tk} x={-6} y={model.y(tk)} dy="0.32em" textAnchor="end">
                  {formatTick(tk, ySpec)}
                </text>
              ))}
              <text x={model.innerW} y={model.innerH + 28} textAnchor="end" className="label">
                {xSpec.name}
              </text>
            </g>
            {model.clean.map((p) => (
              <circle key={p.id} className="ring" cx={model.x(p.x)} cy={model.y(p.y)} r={model.r ? model.r(p.size ?? 0) : MARK.dotR} fill={p.highlight ? CHART.accent : 'var(--series-1)'} fillOpacity={p.highlight ? 1 : 0.7} />
            ))}
            {model.clean
              .filter((p) => model.labelled.has(p.id))
              .map((p) => (
                <text key={`l-${p.id}`} className={`label${p.highlight ? ' label-strong' : ''}`} x={model.x(p.x) + 7} y={model.y(p.y)} dy="0.32em">
                  {p.label}
                </text>
              ))}
            <rect x={0} y={0} width={model.innerW} height={model.innerH} fill="transparent" onPointerMove={onMove} onPointerDown={onMove} onPointerLeave={() => setHover(null)} style={{ touchAction: 'pan-y' }} />
          </g>
        </svg>
        {hp ? (
          <ChartTooltip x={m.left + model.x(hp.x)} y={m.top + model.y(hp.y)} width={width}>
            <div className="mb-0.5 font-medium text-ink">{hp.label}</div>
            <TooltipRow label={xSpec.name ?? 'x'} value={formatValue(hp.x, xSpec)} />
            <TooltipRow label={ySpec.name ?? 'y'} value={formatValue(hp.y, ySpec)} />
          </ChartTooltip>
        ) : null}
      </div>
    </ChartFrame>
  );
}