'use client';
import { bisector, extent } from 'd3-array';
import { scaleLinear, scaleTime } from 'd3-scale';
import { area as d3area, curveMonotoneX, line as d3line } from 'd3-shape';
import { useId, useMemo, useRef, useState } from 'react';
import { cn } from '@/lib/cn';
import { fmt1, fmtDate, fmtDateShort } from '@/lib/format';

export type LineSeries = { id: string; label: string; points: { day: string; value: number | null }[]; color?: string };

/**
 * Responsive multi-series time chart (SVG). Hover/touch crosshair with a value readout; y from data (optionally 0-based);
 * `baseline` dashed reference (index 100). Colours cycle through `--series-n`. Width follows the container (viewBox).
 */
export function LineChart({ series, height = 180, baseline, yZero = false, className, unit = '', showLegend = true, yFormat = fmt1, ariaLabel }: { series: LineSeries[]; height?: number; baseline?: number; yZero?: boolean; className?: string; unit?: string; showLegend?: boolean; yFormat?: (v: number) => string; ariaLabel?: string }) {
  const W = 800;
  const H = height;
  const m = { t: 10, r: 12, b: 22, l: 40 };
  const uid = useId();
  const ref = useRef<SVGSVGElement>(null);
  const [hover, setHover] = useState<number | null>(null);

  const { x, y, dates, parsed } = useMemo(() => {
    const parsed = series.map((s) => ({ ...s, pts: s.points.map((p) => ({ t: new Date(p.day.length === 10 ? `${p.day}T00:00:00Z` : p.day).getTime(), v: p.value })).filter((p) => Number.isFinite(p.t)) }));
    const allT = parsed.flatMap((s) => s.pts.map((p) => p.t));
    const allV = parsed.flatMap((s) => s.pts.map((p) => p.v)).filter((v): v is number => v !== null && Number.isFinite(v));
    const [t0, t1] = allT.length ? (extent(allT) as [number, number]) : [Date.now() - 86400000, Date.now()];
    let [v0, v1] = allV.length ? (extent([...allV, ...(baseline !== undefined ? [baseline] : [])]) as [number, number]) : [0, 1];
    if (yZero) v0 = Math.min(0, v0);
    if (v0 === v1) {
      v0 -= 1;
      v1 += 1;
    }
    const pad = (v1 - v0) * 0.08;
    const x = scaleTime()
      .domain([new Date(t0), new Date(t1)])
      .range([m.l, W - m.r]);
    const y = scaleLinear()
      .domain([v0 - (yZero && v0 === 0 ? 0 : pad), v1 + pad])
      .range([H - m.b, m.t])
      .nice(4);
    const dates = [...new Set(allT)].sort((a, b) => a - b);
    return { x, y, dates, parsed };
  }, [series, baseline, yZero, H, m.b, m.l, m.r, m.t]);

  if (!parsed.some((s) => s.pts.some((p) => p.v !== null))) {
    return (
      <div className={cn('flex items-center justify-center border border-dashed border-rule-strong text-xs text-ink-3', className)} style={{ height }} role="status">
        No series available yet.
      </div>
    );
  }

  const ticksY = y.ticks(4);
  const ticksX = x.ticks(Math.min(6, Math.max(2, dates.length)));
  const bis = bisector<number, number>((d) => d).center;
  const onMove = (clientX: number) => {
    const svg = ref.current;
    if (!svg) return;
    const r = svg.getBoundingClientRect();
    const px = ((clientX - r.left) / r.width) * W;
    const t = x.invert(px).getTime();
    setHover(dates[bis(dates, t)] ?? null);
  };
  const line = d3line<{ t: number; v: number | null }>()
    .defined((d) => d.v !== null)
    .x((d) => x(d.t))
    .y((d) => y(d.v as number))
    .curve(curveMonotoneX);
  const area = d3area<{ t: number; v: number | null }>()
    .defined((d) => d.v !== null)
    .x((d) => x(d.t))
    .y0(y.range()[0] as number)
    .y1((d) => y(d.v as number))
    .curve(curveMonotoneX);
  const colorOf = (i: number, c?: string) => c ?? `var(--series-${(i % 6) + 1})`;

  return (
    <div className={cn('w-full', className)}>
      <svg
        ref={ref}
        viewBox={`0 0 ${W} ${H}`}
        className="block h-auto w-full touch-pan-y select-none"
        role="img"
        aria-label={ariaLabel ?? `${series.map((s) => s.label).join(', ')} over time`}
        onMouseMove={(e) => onMove(e.clientX)}
        onMouseLeave={() => setHover(null)}
        onTouchStart={(e) => e.touches[0] && onMove(e.touches[0].clientX)}
        onTouchMove={(e) => e.touches[0] && onMove(e.touches[0].clientX)}
        onTouchEnd={() => setHover(null)}
      >
        <defs>
          <clipPath id={`${uid}-clip`}>
            <rect x={m.l} y={0} width={W - m.l - m.r} height={H} />
          </clipPath>
        </defs>
        {ticksY.map((t) => (
          <g key={t}>
            <line x1={m.l} x2={W - m.r} y1={y(t)} y2={y(t)} stroke="var(--rule)" />
            <text x={m.l - 6} y={y(t)} dy="0.32em" textAnchor="end" fontSize={10} fill="var(--ink-3)" className="tnum">
              {yFormat(t)}
            </text>
          </g>
        ))}
        {ticksX.map((t) => (
          <text key={+t} x={x(t)} y={H - 6} textAnchor="middle" fontSize={10} fill="var(--ink-3)">
            {fmtDateShort(t.toISOString())}
          </text>
        ))}
        {baseline !== undefined && <line x1={m.l} x2={W - m.r} y1={y(baseline)} y2={y(baseline)} stroke="var(--rule-strong)" strokeDasharray="3 4" />}
        <g clipPath={`url(#${uid}-clip)`}>
          {parsed.map((s, i) => (
            <g key={s.id}>
              {parsed.length === 1 && <path d={area(s.pts) ?? ''} fill={colorOf(i, s.color)} opacity={0.08} />}
              <path d={line(s.pts) ?? ''} fill="none" stroke={colorOf(i, s.color)} strokeWidth={1.6} strokeLinejoin="round" strokeLinecap="round" />
            </g>
          ))}
        </g>
        {hover !== null && (
          <g>
            <line x1={x(hover)} x2={x(hover)} y1={m.t} y2={H - m.b} stroke="var(--ink-3)" strokeDasharray="2 3" />
            {parsed.map((s, i) => {
              const p = s.pts.find((q) => q.t === hover);
              if (!p || p.v === null) return null;
              return <circle key={s.id} cx={x(p.t)} cy={y(p.v)} r={3} fill={colorOf(i, s.color)} stroke="var(--canvas)" strokeWidth={1.5} />;
            })}
          </g>
        )}
      </svg>
      <div className="mt-1 flex min-h-5 flex-wrap items-center gap-x-4 gap-y-1 text-xs text-ink-3">
        {hover !== null ? (
          <>
            <span className="tnum text-ink-2">{fmtDate(new Date(hover).toISOString())}</span>
            {parsed.map((s, i) => {
              const p = s.pts.find((q) => q.t === hover);
              return (
                <span key={s.id} className="inline-flex items-center gap-1.5">
                  <span className="inline-block size-2 rounded-full" style={{ background: colorOf(i, s.color) }} />
                  {s.label} <span className="tnum font-medium text-ink">{p && p.v !== null ? `${yFormat(p.v)}${unit}` : '—'}</span>
                </span>
              );
            })}
          </>
        ) : (
          showLegend &&
          parsed.map((s, i) => (
            <span key={s.id} className="inline-flex items-center gap-1.5">
              <span className="inline-block size-2 rounded-full" style={{ background: colorOf(i, s.color) }} />
              {s.label}
            </span>
          ))
        )}
      </div>
    </div>
  );
}