// AI-MONITOR · Reusable SVG chart primitives.
// All charts render from a numeric array (rolling history buffer).

const { useEffect, useMemo, useRef, useState, useLayoutEffect } = React;

// ── useElementSize ─────────────────────────────────────────────────────
function useElementSize() {
  const ref = useRef(null);
  const [size, setSize] = useState({ w: 0, h: 0 });
  useLayoutEffect(() => {
    if (!ref.current) return;
    const ro = new ResizeObserver((entries) => {
      const e = entries[0];
      if (e) setSize({ w: e.contentRect.width, h: e.contentRect.height });
    });
    ro.observe(ref.current);
    setSize({ w: ref.current.clientWidth, h: ref.current.clientHeight });
    return () => ro.disconnect();
  }, []);
  return [ref, size];
}

// ── Sparkline (no axis, no labels — pure shape) ────────────────────────
function Sparkline({ data, height = 32, color = "var(--accent)", fill = true, area = true, smooth = true, style }) {
  const [ref, { w, h }] = useElementSize();
  const gradId = useMemo(() => "g" + Math.random().toString(36).slice(2, 9), []);
  const H = h || height;
  if (!data || data.length < 2 || !w) {
    return <div ref={ref} style={{ width: "100%", height: H, ...style }} />;
  }
  const min = Math.min(...data);
  const max = Math.max(...data);
  const span = max - min || 1;
  const stepX = w / (data.length - 1);
  const yOf = (v) => H - 6 - ((v - min) / span) * (H - 12);

  // Build smooth path with catmull-rom-to-bezier
  let d = "";
  if (smooth) {
    const pts = data.map((v, i) => [i * stepX, yOf(v)]);
    d = `M ${pts[0][0]} ${pts[0][1]}`;
    for (let i = 0; i < pts.length - 1; i++) {
      const p0 = pts[i - 1] || pts[i];
      const p1 = pts[i];
      const p2 = pts[i + 1];
      const p3 = pts[i + 2] || p2;
      const c1x = p1[0] + (p2[0] - p0[0]) / 6;
      const c1y = p1[1] + (p2[1] - p0[1]) / 6;
      const c2x = p2[0] - (p3[0] - p1[0]) / 6;
      const c2y = p2[1] - (p3[1] - p1[1]) / 6;
      d += ` C ${c1x} ${c1y}, ${c2x} ${c2y}, ${p2[0]} ${p2[1]}`;
    }
  } else {
    d = data.map((v, i) => `${i ? "L" : "M"} ${i * stepX} ${yOf(v)}`).join(" ");
  }
  const last = data[data.length - 1];
  const fillD = area ? `${d} L ${w} ${H} L 0 ${H} Z` : null;

  return (
    <div ref={ref} style={{ width: "100%", height: H, position: "relative", ...style }}>
      <svg width="100%" height={H} viewBox={`0 0 ${w} ${H}`} preserveAspectRatio="none">
        <defs>
          <linearGradient id={gradId} x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor={color} stopOpacity={0.32} />
            <stop offset="100%" stopColor={color} stopOpacity={0} />
          </linearGradient>
        </defs>
        {area && fill && <path d={fillD} fill={`url(#${gradId})`} />}
        <path d={d} fill="none" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
        {/* leading dot */}
        <circle cx={w} cy={yOf(last)} r="2.2" fill={color}>
          <animate attributeName="r" values="2.2;3.6;2.2" dur="1.6s" repeatCount="indefinite" />
        </circle>
      </svg>
    </div>
  );
}

// ── Ring gauge ─────────────────────────────────────────────────────────
function Ring({ value = 0, max = 100, size = 70, stroke = 6, color, label, sub }) {
  const v = Math.max(0, Math.min(max, value));
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const off = c * (1 - v / max);
  const auto = color || (v / max > 0.85 ? "var(--bad)" : v / max > 0.7 ? "var(--hot)" : v / max > 0.4 ? "var(--accent)" : "var(--ok)");
  return (
    <div>
      <svg width={size} height={size}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="rgba(255,255,255,.08)" strokeWidth={stroke} />
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={auto} strokeWidth={stroke}
                strokeLinecap="round"
                strokeDasharray={c}
                strokeDashoffset={off}
                transform={`rotate(-90 ${size/2} ${size/2})`}
                style={{ transition: "stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1), stroke .3s" }} />
        <text x="50%" y="48%" textAnchor="middle" dominantBaseline="central"
              style={{ font: "500 14px/1 var(--display)", fill: "var(--ink)", fontVariantNumeric: "tabular-nums", letterSpacing: "-.02em" }}>
          {Math.round(v)}{max === 100 ? "%" : ""}
        </text>
        {sub && (
          <text x="50%" y="68%" textAnchor="middle" dominantBaseline="central"
                style={{ font: "500 8.5px/1 var(--mono)", fill: "var(--ink-3)", letterSpacing: ".08em", textTransform: "uppercase" }}>
            {sub}
          </text>
        )}
      </svg>
      {label && <div className="rl">{label}</div>}
    </div>
  );
}

// ── Area chart (axes optional) ─────────────────────────────────────────
function AreaChart({ series, height = 160, colors = ["var(--accent)"], yMax, padding = { l: 36, r: 10, t: 14, b: 22 }, ticks = 4, unit = "" }) {
  const [ref, { w }] = useElementSize();
  const gradIds = useMemo(
    () => (series || [0]).map((_, i) => "ag" + Math.random().toString(36).slice(2, 8) + i),
    [series ? series.length : 0]
  );
  const H = height;
  if (!series || !series.length || !series[0].length || !w) {
    return <div ref={ref} style={{ width: "100%", height: H }} />;
  }
  const flat = series.flat();
  const min = 0;
  const max = yMax || Math.max(1, Math.max(...flat) * 1.15);
  // 左 padding 自动撑大以容下最宽 y 轴标签 (整数位 + unit)：9px mono ~ 6px/digit,
  // unit 字符 ~5.5px/字, 标签尾端距 P.l 偏左 8px → 留 12px 余量。
  // 避免"l:36 + 数字 1234 t/s"那种被 viewBox 左缘截断只剩个位的窗口。
  const _labelW = String(Math.round(max)).length * 6 + (unit || "").length * 5.5 + 12;
  const P = { ...padding, l: Math.max(padding.l || 0, Math.ceil(_labelW)) };
  const innerW = w - P.l - P.r;
  const innerH = H - P.t - P.b;
  const span = max - min || 1;
  const stepX = (i, len) => P.l + (i / (len - 1)) * innerW;
  const yOf = (v) => P.t + innerH - ((v - min) / span) * innerH;

  function path(data) {
    const pts = data.map((v, i) => [stepX(i, data.length), yOf(v)]);
    let d = `M ${pts[0][0]} ${pts[0][1]}`;
    for (let i = 0; i < pts.length - 1; i++) {
      const p0 = pts[i - 1] || pts[i];
      const p1 = pts[i];
      const p2 = pts[i + 1];
      const p3 = pts[i + 2] || p2;
      const c1x = p1[0] + (p2[0] - p0[0]) / 6;
      const c1y = p1[1] + (p2[1] - p0[1]) / 6;
      const c2x = p2[0] - (p3[0] - p1[0]) / 6;
      const c2y = p2[1] - (p3[1] - p1[1]) / 6;
      d += ` C ${c1x} ${c1y}, ${c2x} ${c2y}, ${p2[0]} ${p2[1]}`;
    }
    return d;
  }

  const yTicks = Array.from({ length: ticks + 1 }, (_, i) => (max / ticks) * i);

  return (
    <div ref={ref} style={{ width: "100%", height: H }}>
      <svg width="100%" height={H} viewBox={`0 0 ${w} ${H}`}>
        <defs>
          {colors.map((c, i) => (
            <linearGradient key={i} id={gradIds[i]} x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor={c} stopOpacity={0.35} />
              <stop offset="100%" stopColor={c} stopOpacity={0} />
            </linearGradient>
          ))}
        </defs>
        {/* grid */}
        {yTicks.map((t, i) => (
          <g key={i}>
            <line x1={P.l} x2={w - P.r} y1={yOf(t)} y2={yOf(t)} stroke="var(--line)" strokeWidth="0.5" />
            <text x={P.l - 8} y={yOf(t)} textAnchor="end" dominantBaseline="central"
                  style={{ font: "500 9px/1 var(--mono)", fill: "var(--ink-4)", letterSpacing: ".06em" }}>
              {Math.round(t)}{unit}
            </text>
          </g>
        ))}
        {series.map((s, i) => (
          <g key={i}>
            <path d={`${path(s)} L ${w - P.r} ${H - P.b} L ${P.l} ${H - P.b} Z`} fill={`url(#${gradIds[i]})`} />
            <path d={path(s)} fill="none" stroke={colors[i] || colors[0]} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
            <circle cx={w - P.r} cy={yOf(s[s.length - 1])} r="2.8" fill={colors[i] || colors[0]}>
              <animate attributeName="r" values="2.8;4.5;2.8" dur="1.8s" repeatCount="indefinite" />
            </circle>
          </g>
        ))}
      </svg>
    </div>
  );
}

// ── Stacked bar (horizontal) ───────────────────────────────────────────
function StackedBar({ segments, height = 6, total }) {
  const sum = total || segments.reduce((a, s) => a + s.value, 0);
  return (
    <div style={{ display: "flex", height, borderRadius: 3, overflow: "hidden", background: "rgba(255,255,255,.06)" }}>
      {segments.map((s, i) => (
        <div key={i} title={`${s.label}: ${s.value.toFixed(1)}`}
             style={{ width: `${(s.value / sum) * 100}%`, background: s.color, transition: "width .6s cubic-bezier(.2,.7,.2,1)" }} />
      ))}
    </div>
  );
}

// ── Heatmap (per-node × time) ──────────────────────────────────────────
function Heatmap({ rows, columns = 30, accessor }) {
  // rows: [{ label, data: number[] }], values 0–100
  const cellW = 100 / columns;
  return (
    <div style={{ display: "grid", gap: 6 }}>
      {rows.map((r, ri) => (
        <div key={ri} style={{ display: "grid", gridTemplateColumns: "84px 1fr 36px", gap: 10, alignItems: "center" }}>
          <div style={{ fontFamily: "var(--mono)", fontSize: 10.5, color: "var(--ink-3)" }}>{r.label}</div>
          <div style={{ display: "flex", gap: 1.5 }}>
            {r.data.slice(-columns).map((v, i) => {
              const a = Math.min(1, Math.max(0.05, v / 100));
              const hue = v > 85 ? 5 : v > 65 ? 28 : v > 35 ? 210 : 145;
              return <div key={i} style={{
                flex: 1, height: 14, borderRadius: 2,
                background: `oklch(0.62 0.18 ${hue} / ${a})`,
                transition: "background .25s",
              }} />;
            })}
          </div>
          <div className="num" style={{ fontSize: 11, color: "var(--ink-2)", textAlign: "right" }}>
            {Math.round(r.data[r.data.length - 1])}%
          </div>
        </div>
      ))}
    </div>
  );
}

// ── Animated counter on view ───────────────────────────────────────────
function useCountUp(target, duration = 1400, decimals = 0) {
  const [val, setVal] = useState(0);
  const startedRef = useRef(false);
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !startedRef.current) {
          startedRef.current = true;
          const t0 = performance.now();
          const tween = () => {
            const t = Math.min(1, (performance.now() - t0) / duration);
            // ease-out-quint
            const e2 = 1 - Math.pow(1 - t, 5);
            setVal(target * e2);
            if (t < 1) requestAnimationFrame(tween);
          };
          requestAnimationFrame(tween);
        }
      });
    }, { threshold: 0.2 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [target, duration]);
  return [ref, val];
}

function CountUp({ value, decimals = 0, suffix = "" }) {
  const [ref, v] = useCountUp(value, 1400, decimals);
  return <span ref={ref} className="num">{v.toFixed(decimals)}{suffix}</span>;
}

// ── i18n: hook + 地球仪语言切换器 ───────────────────────────────────
// useLang() 订阅 AII18N，语言切换时强制重渲染；返回翻译函数 t。
function useLang() {
  const [, force] = React.useState(0);
  React.useEffect(() => window.AII18N.subscribe(() => force((n) => n + 1)), []);
  return { t: window.AII18N.t, lang: window.AII18N.lang, setLang: window.AII18N.setLang };
}

function LangSwitcher() {
  const { lang, setLang } = useLang();
  const [open, setOpen] = React.useState(false);
  const LANGS = window.AII18N.LANGS;
  const cur = LANGS.find((l) => l.code === lang) || LANGS[0];
  React.useEffect(() => {
    if (!open) return;
    const close = () => setOpen(false);
    window.addEventListener("click", close);
    return () => window.removeEventListener("click", close);
  }, [open]);
  return (
    <div style={{ position: "relative" }} onClick={(e) => e.stopPropagation()}>
      <button onClick={() => setOpen((v) => !v)} title="Language · 语言 · 語言"
        style={{
          display: "inline-flex", alignItems: "center", gap: 6,
          background: "rgba(255,255,255,.04)", border: "0.5px solid var(--line)",
          color: "var(--ink-2)", font: "500 11px var(--mono)",
          padding: "5px 9px", borderRadius: 7, cursor: "pointer",
        }}>
        <span style={{ fontSize: 13, lineHeight: 1 }}>🌐</span>
        <span>{cur.flag}</span>
      </button>
      {open && (
        <div style={{
          position: "absolute", top: "calc(100% + 6px)", right: 0, zIndex: 50,
          background: "var(--bg-2, #131316)", border: "0.5px solid var(--line-2)",
          borderRadius: 9, padding: 5, minWidth: 132,
          boxShadow: "0 8px 28px rgba(0,0,0,.5)",
        }}>
          {LANGS.map((l) => (
            <button key={l.code} onClick={() => { setLang(l.code); setOpen(false); }}
              style={{
                display: "flex", alignItems: "center", gap: 9, width: "100%",
                background: l.code === lang ? "rgba(255,255,255,.06)" : "transparent",
                border: 0, color: l.code === lang ? "var(--ink)" : "var(--ink-2)",
                font: "500 12px var(--display)", padding: "7px 9px",
                borderRadius: 6, cursor: "pointer", textAlign: "left",
              }}>
              <span style={{ fontSize: 14 }}>{l.flag}</span>{l.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Sparkline, Ring, AreaChart, StackedBar, Heatmap, useCountUp, CountUp, useElementSize, useLang, LangSwitcher });