"use client";

import Link from "next/link";
import { useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
import type { FacilityStatus } from "@dci/core";
import { fmtCompact, fmtInt } from "@/lib/format";
import { STATUS_ORDER, STATUS_SHORT, statusVar } from "@/lib/labels";
import { cn } from "./cn";
import { StatusDot } from "./status-dot";

/* ------------------------------------------------------------------------------------------
   SVG charts — thin marks, one axis, recessive grid, labels in text tokens, ResizeObserver
   for width, tooltips via hover layer. No chart library.
   ------------------------------------------------------------------------------------------ */

function useWidth<T extends HTMLElement>(initial = 320): [React.RefObject<T | null>, number] {
  const ref = useRef<T | null>(null);
  const [w, setW] = useState(initial);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const ro = new ResizeObserver((entries) => {
      const cw = entries[0]?.contentRect.width;
      if (cw && cw > 0) setW(cw);
    });
    ro.observe(el);
    setW(el.clientWidth || initial);
    return () => ro.disconnect();
  }, [initial]);
  return [ref, w];
}

const niceTicks = (max: number, n = 4): number[] => {
  if (max <= 0) return [0];
  const raw = max / n;
  const mag = 10 ** Math.floor(Math.log10(raw));
  const step = [1, 2, 2.5, 5, 10].map((m) => m * mag).find((s) => s >= raw) ?? raw;
  const out: number[] = [];
  for (let v = 0; v <= max + 1e-9; v += step) out.push(Number(v.toFixed(6)));
  return out;
};

/* ---------------------------------------------------------------- Sparkline */
export function Sparkline({ values, width = 96, height = 24, className, stroke = "var(--ink-2)", fill, title }: { values: Array<number | null>; width?: number; height?: number; className?: string; stroke?: string; fill?: boolean; title?: string }) {
  const pts = values.map((v, i) => ({ i, v })).filter((p): p is { i: number; v: number } => typeof p.v === "number" && Number.isFinite(p.v));
  if (pts.length < 2) return <span className={cn("inline-block", className)} style={{ width, height }} aria-hidden />;
  const max = Math.max(...pts.map((p) => p.v));
  const min = Math.min(...pts.map((p) => p.v));
  const span = max - min || 1;
  const x = (i: number) => (i / (values.length - 1)) * (width - 2) + 1;
  const y = (v: number) => height - 2 - ((v - min) / span) * (height - 4);
  const d = pts.map((p, k) => `${k === 0 ? "M" : "L"}${x(p.i).toFixed(1)},${y(p.v).toFixed(1)}`).join(" ");
  const last = pts[pts.length - 1]!;
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} className={cn("inline-block overflow-visible", className)} role="img" aria-label={title ?? "trend"}>
      {fill && <path d={`${d} L${x(last.i).toFixed(1)},${height} L${x(pts[0]!.i).toFixed(1)},${height} Z`} fill={stroke} opacity={0.08} />}
      <path d={d} fill="none" stroke={stroke} strokeWidth={1.5} strokeLinejoin="round" strokeLinecap="round" />
      <circle cx={x(last.i)} cy={y(last.v)} r={2} fill={stroke} />
    </svg>
  );
}

/* ---------------------------------------------------------------- BarList */
export interface BarListItem {
  label: ReactNode;
  value: number | null;
  href?: string;
  secondary?: ReactNode;
  /** 0..1 coverage → hatch hint when low */
  coverage?: number | null;
  rank?: number;
  /** preformatted value (lets server components avoid passing formatter functions) */
  display?: string;
}

/** Horizontal ranked bars (rankings module). Value formatted by `format`. */
export function BarList({ items, format = fmtCompact, max, className, showRank = true, barColor = "var(--ink-2)" }: { items: BarListItem[]; format?: (v: number | null) => string; max?: number; className?: string; showRank?: boolean; barColor?: string }) {
  const m = max ?? Math.max(1, ...items.map((i) => i.value ?? 0));
  return (
    <ol className={cn("flex flex-col", className)}>
      {items.map((it, i) => {
        const pct = it.value === null || it.value === undefined ? 0 : Math.max(1.5, (it.value / m) * 100);
        const row = (
          <div className="grid min-h-10 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2 py-[5px] sm:min-h-0">
            {showRank ? <span className="figure w-5 text-right text-[11px] text-ink-4">{it.rank ?? i + 1}</span> : <span />}
            <div className="min-w-0">
              <div className="flex items-baseline justify-between gap-2">
                <span className="truncate text-[13px] text-ink group-hover:text-accent">{it.label}</span>
                {it.secondary && <span className="hidden shrink-0 text-[11px] text-ink-3 sm:inline">{it.secondary}</span>}
              </div>
              <div className="mt-1 h-[3px] w-full bg-surface-3">
                <div className="h-full" style={{ width: `${pct}%`, background: barColor, opacity: it.coverage !== undefined && it.coverage !== null && it.coverage < 0.5 ? 0.55 : 1 }} />
              </div>
            </div>
            <span className="figure w-[64px] text-right text-[12.5px] text-ink-2">{it.display ?? format(it.value)}</span>
          </div>
        );
        return (
          <li key={i} className="group border-b border-hair last:border-b-0">
            {it.href ? (
              <Link href={it.href} className="block">
                {row}
              </Link>
            ) : (
              row
            )}
          </li>
        );
      })}
    </ol>
  );
}

/* ---------------------------------------------------------------- StackedBar (status distribution) */
export function StackedBar({ data, className, height = 10, legend = true, total, format = fmtInt }: { data: Partial<Record<FacilityStatus, number>>; className?: string; height?: number; legend?: boolean; total?: number; format?: (v: number | null) => string }) {
  const rows = STATUS_ORDER.map((s) => ({ s, v: data[s] ?? 0 })).filter((r) => r.v > 0);
  const sum = total ?? rows.reduce((a, r) => a + r.v, 0);
  if (!sum) return <div className={cn("h-[10px] w-full bg-surface-3", className)} aria-hidden />;
  return (
    <div className={className}>
      <div className="flex w-full gap-[2px]" style={{ height }} role="img" aria-label={rows.map((r) => `${STATUS_SHORT[r.s]} ${format(r.v)}`).join(", ")}>
        {rows.map((r) => (
          <div key={r.s} title={`${STATUS_SHORT[r.s]}: ${format(r.v)}`} style={{ width: `${(r.v / sum) * 100}%`, background: statusVar(r.s), minWidth: 2 }} className={cn(r.s === "rumored" && "opacity-60")} />
        ))}
      </div>
      {legend && (
        <ul className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-[11.5px] text-ink-2">
          {rows.map((r) => (
            <li key={r.s} className="inline-flex items-center gap-1.5">
              <StatusDot status={r.s} size={7} />
              <span>{STATUS_SHORT[r.s]}</span>
              <span className="figure text-ink-3">{format(r.v)}</span>
              <span className="figure text-ink-4">{Math.round((r.v / sum) * 100)}%</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

/* ---------------------------------------------------------------- Column bars (pipeline by year) */
export interface ColumnDatum {
  label: string;
  value: number | null;
  secondary?: number | null;
}

export function ColumnChart({ data, height = 140, className, format = fmtCompact, color = "var(--accent)", unit, ariaLabel }: { data: ColumnDatum[]; height?: number; className?: string; format?: (v: number | null) => string; color?: string; unit?: string; ariaLabel?: string }) {
  const [ref, width] = useWidth<HTMLDivElement>();
  const [hover, setHover] = useState<number | null>(null);
  const pad = { l: 34, r: 4, t: 8, b: 20 };
  const max = Math.max(1, ...data.map((d) => d.value ?? 0));
  const ticks = niceTicks(max);
  const top = ticks[ticks.length - 1] ?? max;
  const iw = Math.max(10, width - pad.l - pad.r);
  const ih = height - pad.t - pad.b;
  const bw = data.length ? iw / data.length : iw;
  const y = (v: number) => pad.t + ih - (v / top) * ih;
  const desc = data.map((d) => `${d.label} ${format(d.value)}`).join(", ");
  return (
    <div ref={ref} className={cn("relative w-full", className)}>
      <svg width={width} height={height} role="img" aria-label={ariaLabel ?? desc} className="block overflow-visible">
        {ticks.map((t) => (
          <g key={t}>
            <line x1={pad.l} x2={width - pad.r} y1={y(t)} y2={y(t)} stroke="var(--hair)" strokeWidth={1} />
            <text x={pad.l - 6} y={y(t) + 3} textAnchor="end" fontSize={10} fill="var(--ink-4)" className="figure">
              {fmtCompact(t, 0)}
            </text>
          </g>
        ))}
        {data.map((d, i) => {
          const v = d.value ?? 0;
          const x = pad.l + i * bw + bw * 0.18;
          const w = Math.max(2, bw * 0.64);
          const h = Math.max(v > 0 ? 2 : 0, y(0) - y(v));
          const active = hover === i;
          return (
            <g key={i} onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)} onTouchStart={() => setHover(i)}>
              <rect x={pad.l + i * bw} y={pad.t} width={bw} height={ih} fill="transparent" />
              <rect x={x} y={y(0) - h} width={w} height={h} fill={color} opacity={hover === null || active ? 1 : 0.5} rx={1} />
              {(data.length <= 8 || i % Math.ceil(data.length / 8) === 0) && (
                <text x={pad.l + i * bw + bw / 2} y={height - 6} textAnchor="middle" fontSize={10.5} fill="var(--ink-3)" className="figure">
                  {d.label}
                </text>
              )}
            </g>
          );
        })}
        <line x1={pad.l} x2={width - pad.r} y1={y(0)} y2={y(0)} stroke="var(--hair-2)" />
      </svg>
      {hover !== null && data[hover] && (
        <div className="pointer-events-none absolute -top-1 left-1/2 -translate-x-1/2 -translate-y-full rounded-xs border border-hair-2 bg-surface px-2 py-1 text-[11.5px]">
          <span className="text-ink-3">{data[hover].label}</span> <span className="figure font-medium">{format(data[hover].value)}</span>
          {unit && <span className="text-ink-3"> {unit}</span>}
        </div>
      )}
    </div>
  );
}

/* ---------------------------------------------------------------- Line / Area chart */
export interface SeriesPoint {
  x: number | string;
  y: number | null;
}
export interface Series {
  name: string;
  data: SeriesPoint[];
  color?: string;
  area?: boolean;
  dashed?: boolean;
  /** step (horizontal-then-vertical) segments — for observed values that hold until the next observation */
  step?: boolean;
}

/**
 * Single-axis line/area chart. ≥ 2 series → legend rendered. Crosshair + tooltip on hover.
 * `x` values are treated as ordinal categories (years).
 */
export function LineChart({ series, height = 180, className, format = fmtCompact, unit, ariaLabel, yLabel }: { series: Series[]; height?: number; className?: string; format?: (v: number | null) => string; unit?: string; ariaLabel?: string; yLabel?: string }) {
  const [ref, width] = useWidth<HTMLDivElement>();
  const [hover, setHover] = useState<number | null>(null);
  const id = useId();
  const xs = useMemo(() => Array.from(new Set(series.flatMap((s) => s.data.map((p) => String(p.x))))), [series]);
  const pad = { l: 38, r: 8, t: 10, b: 22 };
  const max = Math.max(1, ...series.flatMap((s) => s.data.map((p) => p.y ?? 0)));
  const ticks = niceTicks(max);
  const top = ticks[ticks.length - 1] ?? max;
  const iw = Math.max(10, width - pad.l - pad.r);
  const ih = height - pad.t - pad.b;
  const xAt = (i: number) => pad.l + (xs.length > 1 ? (i / (xs.length - 1)) * iw : iw / 2);
  const yAt = (v: number) => pad.t + ih - (v / top) * ih;
  const colors = ["var(--ink)", "var(--accent)", "var(--st-planned)", "var(--st-permitting)"];

  const onMove = (e: React.MouseEvent<SVGSVGElement> | React.TouchEvent<SVGSVGElement>) => {
    const rect = (e.currentTarget as SVGSVGElement).getBoundingClientRect();
    const cx = ("touches" in e ? e.touches[0]?.clientX ?? 0 : e.clientX) - rect.left;
    if (xs.length < 2) return setHover(0);
    const i = Math.round(((cx - pad.l) / iw) * (xs.length - 1));
    setHover(Math.max(0, Math.min(xs.length - 1, i)));
  };

  const everyN = Math.max(1, Math.ceil(xs.length / Math.max(2, Math.floor(iw / 56))));

  return (
    <div ref={ref} className={cn("relative w-full", className)}>
      <svg width={width} height={height} role="img" aria-label={ariaLabel ?? `${series.map((s) => s.name).join(", ")} over ${xs[0]}–${xs[xs.length - 1]}`} className="block touch-pan-y overflow-visible" onMouseMove={onMove} onMouseLeave={() => setHover(null)} onTouchStart={onMove} onTouchMove={onMove} onTouchEnd={() => setHover(null)}>
        <defs>
          {series.map((s, si) => (
            <linearGradient key={si} id={`${id}-g${si}`} x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor={s.color ?? colors[si % colors.length]} stopOpacity={0.18} />
              <stop offset="100%" stopColor={s.color ?? colors[si % colors.length]} stopOpacity={0} />
            </linearGradient>
          ))}
        </defs>
        {ticks.map((t) => (
          <g key={t}>
            <line x1={pad.l} x2={width - pad.r} y1={yAt(t)} y2={yAt(t)} stroke="var(--hair)" />
            <text x={pad.l - 6} y={yAt(t) + 3} textAnchor="end" fontSize={10} fill="var(--ink-4)" className="figure">
              {fmtCompact(t, 0)}
            </text>
          </g>
        ))}
        {xs.map((x, i) => (i % everyN === 0 || i === xs.length - 1) && (
          <text key={x} x={xAt(i)} y={height - 6} textAnchor={i === 0 ? "start" : i === xs.length - 1 ? "end" : "middle"} fontSize={10.5} fill="var(--ink-3)" className="figure">
            {x}
          </text>
        ))}
        {series.map((s, si) => {
          const color = s.color ?? colors[si % colors.length]!;
          const pts = xs.map((x, i) => ({ i, y: s.data.find((p) => String(p.x) === x)?.y ?? null })).filter((p): p is { i: number; y: number } => p.y !== null);
          if (!pts.length) return null;
          const d = pts
            .map((p, k) => {
              if (k === 0) return `M${xAt(p.i).toFixed(1)},${yAt(p.y).toFixed(1)}`;
              if (s.step) return `H${xAt(p.i).toFixed(1)} V${yAt(p.y).toFixed(1)}`;
              return `L${xAt(p.i).toFixed(1)},${yAt(p.y).toFixed(1)}`;
            })
            .join(" ");
          const area = `${d} L${xAt(pts[pts.length - 1]!.i).toFixed(1)},${yAt(0)} L${xAt(pts[0]!.i).toFixed(1)},${yAt(0)} Z`;
          return (
            <g key={si}>
              {s.area && <path d={area} fill={`url(#${id}-g${si})`} />}
              <path d={d} fill="none" stroke={color} strokeWidth={1.75} strokeDasharray={s.dashed ? "4 3" : undefined} strokeLinejoin="round" strokeLinecap="round" />
              {hover !== null && pts.find((p) => p.i === hover) && <circle cx={xAt(hover)} cy={yAt(pts.find((p) => p.i === hover)!.y)} r={3.5} fill={color} stroke="var(--surface)" strokeWidth={2} />}
            </g>
          );
        })}
        {hover !== null && <line x1={xAt(hover)} x2={xAt(hover)} y1={pad.t} y2={pad.t + ih} stroke="var(--ink-3)" strokeDasharray="2 3" />}
        <line x1={pad.l} x2={width - pad.r} y1={yAt(0)} y2={yAt(0)} stroke="var(--hair-2)" />
      </svg>
      {yLabel && <div className="label-caps absolute left-0 top-0 -translate-y-1/2">{yLabel}</div>}
      {hover !== null && (
        <div className="pointer-events-none absolute top-0 rounded-xs border border-hair-2 bg-surface px-2 py-1.5 text-[11.5px]" style={{ left: Math.min(Math.max(0, xAt(hover) - 60), Math.max(0, width - 140)) }}>
          <div className="figure text-ink-3">{xs[hover]}</div>
          {series.map((s, si) => {
            const v = s.data.find((p) => String(p.x) === xs[hover])?.y ?? null;
            return (
              <div key={si} className="flex items-center gap-1.5">
                <span className="inline-block size-2 rounded-full" style={{ background: s.color ?? colors[si % colors.length] }} />
                <span className="text-ink-2">{s.name}</span>
                <span className="figure ml-auto pl-3 font-medium">{format(v)}</span>
                {unit && <span className="text-ink-3">{unit}</span>}
              </div>
            );
          })}
        </div>
      )}
      {series.length >= 2 && (
        <ul className="mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11.5px] text-ink-2">
          {series.map((s, si) => (
            <li key={si} className="inline-flex items-center gap-1.5">
              <span className="inline-block h-[2px] w-3" style={{ background: s.color ?? colors[si % colors.length], borderTop: s.dashed ? "2px dashed" : undefined }} />
              {s.name}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export function AreaChart(props: Parameters<typeof LineChart>[0]) {
  return <LineChart {...props} series={props.series.map((s) => ({ ...s, area: s.area ?? true }))} />;
}

/* ---------------------------------------------------------------- Donut (small) */
export function Donut({ segments, size = 64, thickness = 8, className, label, ariaLabel }: { segments: Array<{ value: number; color: string; label: string }>; size?: number; thickness?: number; className?: string; label?: ReactNode; ariaLabel?: string }) {
  const total = segments.reduce((a, s) => a + s.value, 0) || 1;
  const r = (size - thickness) / 2;
  const c = 2 * Math.PI * r;
  const offsets = segments.reduce<number[]>((acc, s, i) => {
    acc.push(i === 0 ? 0 : acc[i - 1]! + (segments[i - 1]!.value / total) * c);
    return acc;
  }, []);
  return (
    <div className={cn("inline-flex items-center gap-3", className)}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} role="img" aria-label={ariaLabel ?? segments.map((s) => `${s.label} ${Math.round((s.value / total) * 100)}%`).join(", ")}>
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--surface-3)" strokeWidth={thickness} />
        {segments.map((s, i) => {
          const len = (s.value / total) * c;
          return <circle key={i} cx={size / 2} cy={size / 2} r={r} fill="none" stroke={s.color} strokeWidth={thickness} strokeDasharray={`${Math.max(0, len - 2)} ${c - Math.max(0, len - 2)}`} strokeDashoffset={-(offsets[i] ?? 0)} transform={`rotate(-90 ${size / 2} ${size / 2})`} />;
        })}
        {label && (
          <text x="50%" y="50%" textAnchor="middle" dominantBaseline="central" fontSize={size / 5} fill="var(--ink)" className="figure">
            {label}
          </text>
        )}
      </svg>
      <ul className="flex flex-col gap-0.5 text-[11.5px] text-ink-2">
        {segments.map((s, i) => (
          <li key={i} className="inline-flex items-center gap-1.5">
            <span className="inline-block size-2 rounded-full" style={{ background: s.color }} />
            {s.label}
            <span className="figure text-ink-3">{Math.round((s.value / total) * 100)}%</span>
          </li>
        ))}
      </ul>
    </div>
  );
}