'use client';
import { scaleTime } from 'd3-scale';
import Link from 'next/link';
import { useMemo, useRef, useState } from 'react';
import { cn } from '@/lib/cn';

export type Lane = { key: string; label: string; color?: string };
export type LaneEvent = { id: string; lane: string; at: string | number | Date; importance?: number; label: string; href?: string; sub?: string };

const toT = (v: string | number | Date) => (v instanceof Date ? v.getTime() : typeof v === 'number' ? v : new Date(v).getTime());

/**
 * Lanes × time: one row per lane, dots sized by importance (0–3), month ticks, hover tooltip, optional brushable range
 * (drag on the chart; `onRange(from, to)` fires on release; double-click clears). Reduced-motion safe (no animation).
 * Server renders nothing interactive — the SVG is static markup until hydration.
 */
export function TimelineLanes({
  lanes,
  events,
  from,
  to,
  height,
  brushable = false,
  onRange,
  className,
  laneWidth = 96,
  title = 'Timeline',
}: {
  lanes: Lane[];
  events: LaneEvent[];
  from?: string | number | Date;
  to?: string | number | Date;
  height?: number;
  brushable?: boolean;
  onRange?: (from: Date, to: Date) => void;
  className?: string;
  /** Width reserved for lane labels (viewBox units). */
  laneWidth?: number;
  title?: string;
}) {
  const w = 760;
  const rowH = 26;
  const pad = { l: laneWidth, r: 12, t: 8, b: 22 };
  const H = height ?? pad.t + pad.b + rowH * Math.max(1, lanes.length);
  const evs = useMemo(() => events.map((e) => ({ ...e, t: toT(e.at) })).filter((e) => Number.isFinite(e.t) && lanes.some((l) => l.key === e.lane)), [events, lanes]);
  const [t0, t1] = useMemo(() => {
    const ts = evs.map((e) => e.t);
    const lo = from !== undefined ? toT(from) : Math.min(...ts);
    const hi = to !== undefined ? toT(to) : Math.max(...ts);
    return lo === hi || !Number.isFinite(lo) || !Number.isFinite(hi) ? [Date.now() - 365 * 86400000, Date.now()] : [lo, hi];
  }, [evs, from, to]);
  const x = useMemo(() => scaleTime().domain([new Date(t0), new Date(t1)]).range([pad.l, w - pad.r]), [t0, t1, pad.l]);
  const ticks = x.ticks(Math.min(12, Math.max(3, Math.round((t1 - t0) / (30 * 86400000)))));
  const [hover, setHover] = useState<string | null>(null);
  const [brush, setBrush] = useState<{ a: number; b: number } | null>(null);
  const dragging = useRef<number | null>(null);
  const svgRef = useRef<SVGSVGElement>(null);

  const vx = (clientX: number) => {
    const rect = svgRef.current?.getBoundingClientRect();
    if (!rect) return 0;
    return Math.max(pad.l, Math.min(w - pad.r, ((clientX - rect.left) / rect.width) * w));
  };
  const onDown = (e: React.PointerEvent) => {
    if (!brushable) return;
    dragging.current = vx(e.clientX);
    setBrush({ a: dragging.current, b: dragging.current });
  };
  const onMove = (e: React.PointerEvent) => {
    if (!brushable || dragging.current === null) return;
    setBrush({ a: dragging.current, b: vx(e.clientX) });
  };
  const onUp = () => {
    if (!brushable || dragging.current === null) return;
    dragging.current = null;
    if (brush && Math.abs(brush.a - brush.b) > 4) onRange?.(x.invert(Math.min(brush.a, brush.b)), x.invert(Math.max(brush.a, brush.b)));
    else setBrush(null);
  };
  if (!lanes.length) return <p className={cn('text-xs text-ink-3', className)}>No lanes</p>;
  const active = hover ? evs.find((e) => e.id === hover) : null;
  const laneY = (key: string) => pad.t + rowH * lanes.findIndex((l) => l.key === key) + rowH / 2;
  const rad = (imp: number | undefined) => 2 + Math.max(0, Math.min(3, imp ?? 1)) * 1.1;

  return (
    <div className={cn('relative', className)} data-timeline-lanes>
      <svg ref={svgRef} viewBox={`0 0 ${w} ${H}`} className={cn('block w-full select-none', brushable && 'cursor-crosshair touch-pan-y')} role="img" aria-label={title} onPointerDown={onDown} onPointerMove={onMove} onPointerUp={onUp} onPointerLeave={() => { onUp(); setHover(null); }} onDoubleClick={() => setBrush(null)}>
        <title>{title}</title>
        {lanes.map((l, i) => (
          <g key={l.key}>
            <rect x={pad.l} y={pad.t + i * rowH} width={w - pad.l - pad.r} height={rowH} fill={i % 2 ? 'var(--surface-2)' : 'transparent'} opacity={0.6} />
            <line x1={pad.l} x2={w - pad.r} y1={pad.t + (i + 1) * rowH} y2={pad.t + (i + 1) * rowH} stroke="var(--rule)" />
            <text x={pad.l - 8} y={pad.t + i * rowH + rowH / 2 + 3.5} textAnchor="end" fontSize={10.5} fill="var(--ink-2)">
              {l.label.length > 14 ? `${l.label.slice(0, 13)}…` : l.label}
            </text>
          </g>
        ))}
        {ticks.map((t, i) => (
          <g key={i}>
            <line x1={x(t)} x2={x(t)} y1={pad.t} y2={H - pad.b} stroke="var(--rule)" strokeDasharray="2 3" />
            <text x={x(t)} y={H - 7} textAnchor="middle" fontSize={9.5} fill="var(--ink-3)">
              {t.toLocaleDateString('en-GB', { month: 'short', year: '2-digit', timeZone: 'UTC' })}
            </text>
          </g>
        ))}
        {brush && <rect x={Math.min(brush.a, brush.b)} y={pad.t} width={Math.abs(brush.b - brush.a)} height={H - pad.t - pad.b} fill="var(--accent-soft)" stroke="var(--accent)" strokeWidth={0.75} />}
        {evs.map((e) => {
          const lane = lanes.find((l) => l.key === e.lane);
          const c = lane?.color ?? 'var(--series-1)';
          const isH = hover === e.id;
          return (
            <circle key={e.id} cx={x(new Date(e.t))} cy={laneY(e.lane)} r={rad(e.importance) + (isH ? 1.5 : 0)} fill={c} fillOpacity={(e.importance ?? 1) >= 3 ? 0.95 : 0.65} stroke={isH ? 'var(--ink)' : 'none'} onPointerEnter={() => setHover(e.id)} onClick={(ev) => { ev.stopPropagation(); setHover(e.id); }}>
              <title>{`${e.label} — ${new Date(e.t).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' })}`}</title>
            </circle>
          );
        })}
      </svg>
      {active && (
        <div role="status" className="panel pointer-events-none absolute z-10 max-w-[16rem] px-2.5 py-1.5 text-xs shadow-lg" style={{ left: `min(${(x(new Date(active.t)) / w) * 100 + 1}%, calc(100% - 16rem))`, top: `${(laneY(active.lane) / H) * 100}%`, transform: 'translateY(-115%)' }}>
          <p className="tnum text-ink-3">{new Date(active.t).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' })}</p>
          <p className="truncate font-medium text-ink">{active.label}</p>
          {active.sub && <p className="truncate text-ink-3">{active.sub}</p>}
        </div>
      )}
      {brushable && brush && Math.abs(brush.a - brush.b) > 4 && (
        <p className="tnum mt-1 text-[11px] text-ink-3">
          Range: {x.invert(Math.min(brush.a, brush.b)).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' })} → {x.invert(Math.max(brush.a, brush.b)).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' })} · double-click to clear
        </p>
      )}
      <ul className="sr-only">
        {evs.map((e) => (
          <li key={e.id}>{e.href ? <Link href={e.href}>{e.label}</Link> : e.label}</li>
        ))}
      </ul>
    </div>
  );
}