'use client';

import { useEffect, useId, useMemo, useRef, useState } from 'react';
import { SERIES_COLORS, compactNumber, fmtDay, fmtDayFull, fullNumber, niceTicks, parseDay } from './scale';

export interface SeriesPoint {
  x: string; // ISO date (YYYY-MM-DD) or ISO datetime
  y: number;
  meta?: string;
}

export interface Series {
  id: string;
  label: string;
  points: SeriesPoint[];
  color?: string;
  kind?: 'line' | 'area' | 'dots' | 'step';
  /** dashed style for benchmarks/references */
  dashed?: boolean;
}

export interface LineChartProps {
  series: Series[];
  height?: number;
  currency?: boolean;
  /** show values as % change from first point of each series (indexed comparison) */
  indexed?: boolean;
  yLabel?: string;
  className?: string;
  ariaLabel: string;
  /** optional horizontal reference line (e.g. RIV) */
  reference?: { value: number; label: string } | null;
  emptyLabel?: string;
}

/**
 * Responsive SVG line/area/dot chart following the dataviz spec: 2px lines, hairline solid grid,
 * ≥8px end markers with a surface ring, crosshair + tooltip on hover, legend for ≥2 series,
 * selective end labels. Fixed categorical colour order; text uses text tokens only.
 */
export function LineChart({ series, height = 260, currency = false, indexed = false, yLabel, className, ariaLabel, reference = null, emptyLabel = 'Not enough data to chart' }: LineChartProps) {
  const ref = useRef<HTMLDivElement>(null);
  const [width, setWidth] = useState(640);
  const [hover, setHover] = useState<number | null>(null);
  const uid = useId();

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const ro = new ResizeObserver((entries) => {
      for (const e of entries) setWidth(Math.max(240, Math.floor(e.contentRect.width)));
    });
    ro.observe(el);
    return () => ro.disconnect();
  }, []);

  const prepared = useMemo(() => {
    const s = series
      .map((ser, i) => {
        const pts = ser.points
          .map((p) => ({ x: parseDay(p.x), y: p.y, meta: p.meta }))
          .filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y))
          .sort((a, b) => a.x - b.x);
        let out = pts;
        if (indexed && pts.length && pts[0]!.y !== 0) {
          const base = pts[0]!.y;
          out = pts.map((p) => ({ ...p, y: (p.y / base - 1) * 100 }));
        }
        return { ...ser, color: ser.color ?? SERIES_COLORS[i % SERIES_COLORS.length]!, pts: out };
      })
      .filter((s) => s.pts.length > 0);
    return s;
  }, [series, indexed]);

  const allPts = prepared.flatMap((s) => s.pts);
  const hasLine = prepared.some((s) => (s.kind ?? 'line') !== 'dots' && s.pts.length >= 2);
  if (allPts.length === 0 || (!hasLine && allPts.length < 1)) {
    return (
      <div ref={ref} className={className} style={{ height }}>
        <div className="flex h-full items-center justify-center text-xs text-subtle">{emptyLabel}</div>
      </div>
    );
  }

  const pad = { top: 12, right: 56, bottom: 26, left: 8 };
  const W = width;
  const H = height;
  const iw = W - pad.left - pad.right;
  const ih = H - pad.top - pad.bottom;
  const xs = allPts.map((p) => p.x);
  const ys = allPts.map((p) => p.y).concat(reference ? [indexed ? 0 : reference.value] : []);
  let xMin = Math.min(...xs);
  let xMax = Math.max(...xs);
  if (xMax - xMin < 7 * 86_400_000) {
    // pad a degenerate/short time range so single points and short runs stay readable
    xMin -= 15 * 86_400_000;
    xMax += 15 * 86_400_000;
  }
  let yMin = Math.min(...ys);
  let yMax = Math.max(...ys);
  if (yMin === yMax) {
    yMin -= Math.abs(yMin) * 0.05 || 1;
    yMax += Math.abs(yMax) * 0.05 || 1;
  }
  const yPad = (yMax - yMin) * 0.08;
  yMin -= yPad;
  yMax += yPad;
  const ticks = niceTicks(yMin, yMax, W < 480 ? 3 : 4);
  const sx = (x: number) => Math.round((pad.left + (xMax === xMin ? iw / 2 : ((x - xMin) / (xMax - xMin)) * iw)) * 100) / 100;
  const sy = (y: number) => Math.round((pad.top + ih - ((y - yMin) / (yMax - yMin)) * ih) * 100) / 100;
  const span = xMax - xMin;
  const xTicks = niceTimeTicks(xMin, xMax, Math.max(2, Math.min(5, Math.floor(iw / 100))));
  const fmtY = (v: number) => (indexed ? `${v > 0 ? '+' : ''}${v.toFixed(Math.abs(v) < 10 ? 1 : 0)}%` : compactNumber(v, { currency }));
  const fmtYFull = (v: number) => (indexed ? `${v > 0 ? '+' : ''}${v.toFixed(2)}%` : fullNumber(v, { currency }));

  // hover: nearest x across all series
  const hoverX = hover === null ? null : xMin + ((hover - pad.left) / iw) * (xMax - xMin);
  const hoverRows = hoverX === null
    ? []
    : prepared.map((s) => {
        let best = s.pts[0]!;
        let bd = Infinity;
        for (const p of s.pts) {
          const d = Math.abs(p.x - hoverX);
          if (d < bd) {
            bd = d;
            best = p;
          }
        }
        return { s, p: best };
      });
  const hoverDate = hoverRows.length ? hoverRows.reduce((a, r) => (Math.abs(r.p.x - hoverX!) < Math.abs(a - hoverX!) ? r.p.x : a), hoverRows[0]!.p.x) : null;

  const linePath = (pts: Array<{ x: number; y: number }>, step = false) =>
    pts.map((p, i) => (i === 0 ? `M${sx(p.x).toFixed(1)},${sy(p.y).toFixed(1)}` : step ? `H${sx(p.x).toFixed(1)}V${sy(p.y).toFixed(1)}` : `L${sx(p.x).toFixed(1)},${sy(p.y).toFixed(1)}`)).join(' ');

  const narrow = W < 560;
  const tooltipLeft = hover !== null ? (narrow ? pad.left : Math.min(Math.max(hover + 12, pad.left), W - 200)) : 0;

  return (
    <div ref={ref} className={`relative min-w-0 max-w-full overflow-hidden ${className ?? ''}`}>
      {prepared.length > 1 ? (
        <ul className="mb-1 flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-muted" aria-label="Legend">
          {prepared.map((s) => (
            <li key={s.id} className="flex items-center gap-1.5">
              <span className="inline-block h-0.5 w-4 rounded-full" style={{ background: s.color, ...(s.dashed ? { backgroundImage: `repeating-linear-gradient(90deg, ${s.color} 0 4px, transparent 4px 7px)` } : {}) }} />
              {s.label}
            </li>
          ))}
        </ul>
      ) : null}
      <svg
        width="100%"
        height={H}
        viewBox={`0 0 ${W} ${H}`}
        preserveAspectRatio="none"
        role="img"
        aria-label={ariaLabel}
        className="block max-w-full select-none"
        style={{ touchAction: 'pan-y' }}
        onPointerDown={(e) => {
          const rect = e.currentTarget.getBoundingClientRect();
          const x = ((e.clientX - rect.left) / Math.max(1, rect.width)) * W;
          setHover(x >= pad.left && x <= pad.left + iw ? x : null);
        }}
        onPointerMove={(e) => {
          if (e.pointerType !== 'mouse' && e.buttons === 0) return;
          const rect = e.currentTarget.getBoundingClientRect();
          const x = ((e.clientX - rect.left) / Math.max(1, rect.width)) * W;
          setHover(x >= pad.left && x <= pad.left + iw ? x : null);
        }}
        onPointerLeave={(e) => {
          if (e.pointerType === 'mouse') setHover(null);
        }}
      >
        <defs>
          {prepared.map((s) => (
            <linearGradient key={s.id} id={`${uid}-g-${s.id}`} x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor={s.color} stopOpacity={0.14} />
              <stop offset="100%" stopColor={s.color} stopOpacity={0.02} />
            </linearGradient>
          ))}
        </defs>
        {ticks.map((t) => (
          <g key={t}>
            <line x1={pad.left} x2={pad.left + iw} y1={sy(t)} y2={sy(t)} stroke="var(--ri-border)" strokeWidth={1} shapeRendering="crispEdges" />
            <text x={W - pad.right + 6} y={sy(t)} dy="0.32em" fontSize={10} fill="var(--ri-fg-subtle)" className="num">
              {fmtY(t)}
            </text>
          </g>
        ))}
        {xTicks.map((t) => (
          <text key={t} x={sx(t)} y={H - 8} fontSize={10} textAnchor="middle" fill="var(--ri-fg-subtle)">
            {fmtDay(t, span)}
          </text>
        ))}
        {reference ? (
          <g>
            <line x1={pad.left} x2={pad.left + iw} y1={sy(indexed ? 0 : reference.value)} y2={sy(indexed ? 0 : reference.value)} stroke="var(--ri-fg-subtle)" strokeWidth={1} strokeDasharray="3 3" />
            <text x={pad.left + 4} y={sy(indexed ? 0 : reference.value) - 4} fontSize={10} fill="var(--ri-fg-muted)">
              {reference.label}
            </text>
          </g>
        ) : null}
        {prepared.map((s) => {
          const kind = s.kind ?? 'line';
          if (kind === 'dots') {
            return (
              <g key={s.id}>
                {s.pts.map((p, i) => (
                  <circle key={i} cx={sx(p.x)} cy={sy(p.y)} r={3.5} fill={s.color} stroke="var(--ri-bg-elevated)" strokeWidth={1.5} opacity={0.85} />
                ))}
              </g>
            );
          }
          const d = linePath(s.pts, kind === 'step');
          const last = s.pts[s.pts.length - 1]!;
          return (
            <g key={s.id}>
              {kind === 'area' ? <path d={`${d} L${sx(last.x).toFixed(1)},${(pad.top + ih).toFixed(1)} L${sx(s.pts[0]!.x).toFixed(1)},${(pad.top + ih).toFixed(1)} Z`} fill={`url(#${uid}-g-${s.id})`} /> : null}
              <path d={d} fill="none" stroke={s.color} strokeWidth={2} strokeLinejoin="round" strokeLinecap="round" strokeDasharray={s.dashed ? '4 4' : undefined} />
              <circle cx={sx(last.x)} cy={sy(last.y)} r={4} fill={s.color} stroke="var(--ri-bg-elevated)" strokeWidth={2} />
            </g>
          );
        })}
        {hover !== null && hoverDate !== null ? (
          <g>
            <line x1={sx(hoverDate)} x2={sx(hoverDate)} y1={pad.top} y2={pad.top + ih} stroke="var(--ri-border-strong)" strokeWidth={1} />
            {hoverRows.map(({ s, p }) => (
              <circle key={s.id} cx={sx(p.x)} cy={sy(p.y)} r={5} fill={s.color} stroke="var(--ri-bg-elevated)" strokeWidth={2} />
            ))}
          </g>
        ) : null}
      </svg>
      {hover !== null && hoverDate !== null ? (
        <div className="pointer-events-none absolute top-1 z-10 min-w-[160px] rounded-md border border-border bg-elevated px-2.5 py-2 text-[11px] shadow-pop" style={{ left: tooltipLeft }}>
          <div className="mb-1 font-medium text-fg">{fmtDayFull(hoverDate)}</div>
          {hoverRows.map(({ s, p }) => (
            <div key={s.id} className="flex items-center justify-between gap-3">
              <span className="flex items-center gap-1.5 text-muted">
                <span className="inline-block h-2 w-2 rounded-full" style={{ background: s.color }} />
                {s.label}
              </span>
              <span className="num font-medium text-fg">{fmtYFull(p.y)}</span>
            </div>
          ))}
          {hoverRows[0]?.p.meta ? <div className="mt-1 text-subtle">{hoverRows[0].p.meta}</div> : null}
        </div>
      ) : null}
      {yLabel ? <div className="mt-1 text-[10px] uppercase tracking-wider text-subtle">{yLabel}</div> : null}
      <table className="sr-only">
        <caption>{ariaLabel}</caption>
        <thead>
          <tr>
            <th>Series</th>
            <th>Date</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          {prepared.flatMap((s) => s.pts.slice(-120).map((p, i) => (
            <tr key={`${s.id}-${i}`}>
              <td>{s.label}</td>
              <td>{fmtDayFull(p.x)}</td>
              <td>{fmtYFull(p.y)}</td>
            </tr>
          )))}
        </tbody>
      </table>
    </div>
  );
}

function niceTimeTicks(min: number, max: number, count: number): number[] {
  if (max <= min) return [min];
  const span = max - min;
  const day = 86_400_000;
  const candidates = [day, 2 * day, 7 * day, 14 * day, 30 * day, 61 * day, 91 * day, 182 * day, 365 * day, 730 * day, 1826 * day];
  const step = candidates.find((c) => span / c <= count) ?? candidates[candidates.length - 1]!;
  const out: number[] = [];
  const start = Math.ceil(min / step) * step;
  for (let t = start; t <= max; t += step) out.push(t);
  if (!out.length) out.push(min, max);
  return out;
}