/* v3/bigcharts.jsx — 4-across compact chart strip (SPX / 10Y / DXY / BTC) with time-range tabs */
const { useState: useBC_S, useMemo: useBC_M, useRef: useBC_R } = React;

// Fake 10Y yield proxy derived from an existing seed (no TNX in data)
const SYNTH_TNX = (() => {
  const s = genSeries(180, 919, 4.30, 0.006, -0.0001);
  const last = s[s.length - 1].c;
  const prev = s[s.length - 2].c;
  const ch = last - prev, chPct = (ch / prev) * 100;
  return { sym: "US10Y", name: "US 10Y", series: s, px: last, ch, chPct, unit: "%" };
})();

function sliceSeries(series, range) {
  const n = series.length;
  const map = { "1D": 24, "5D": 60, "1M": 90, "YTD": 160, "1Y": n };
  const k = map[range] || 90;
  return series.slice(Math.max(0, n - k));
}

function BigChart({ item, range, accent, href }) {
  const svgRef = useBC_R(null);
  const [hover, setHover] = useBC_S(null);
  const W = 360, H = 56;
  const slice = useBC_M(() => sliceSeries(item.series, range), [item, range]);

  const { path, area, min, max, first, last, pts } = useBC_M(() => {
    const vs = slice.map(p => p.c);
    const mn = Math.min(...vs), mx = Math.max(...vs);
    const rng = mx - mn || 1;
    const step = (W - 8) / (vs.length - 1);
    const ys = vs.map(v => (H - 6) - ((v - mn) / rng) * (H - 12));
    const pts = vs.map((v, i) => ({ x: 4 + i * step, y: ys[i], v }));
    const path = pts.map((p, i) => (i === 0 ? "M" : "L") + p.x.toFixed(1) + "," + p.y.toFixed(1)).join(" ");
    const area = path + ` L${pts[pts.length-1].x.toFixed(1)},${H-2} L${pts[0].x.toFixed(1)},${H-2} Z`;
    return { path, area, min: mn, max: mx, first: vs[0], last: vs[vs.length - 1], pts };
  }, [slice]);

  const delta = last - first;
  const deltaPct = (delta / first) * 100;
  const up = delta >= 0;
  const stroke = accent === "warm" ? "var(--warm)" : accent === "cool" ? "var(--cool)" : up ? "var(--up)" : "var(--down)";

  const onMove = (e) => {
    const svg = svgRef.current; if (!svg) return;
    const rect = svg.getBoundingClientRect();
    const rx = ((e.clientX - rect.left) / rect.width) * W;
    let best = 0, bd = Infinity;
    for (let i = 0; i < pts.length; i++) {
      const d = Math.abs(pts[i].x - rx);
      if (d < bd) { bd = d; best = i; }
    }
    setHover({ i: best, ...pts[best] });
  };

  const fmt = (v) => item.sym === "US10Y" ? v.toFixed(3) + "%" : item.sym === "BTC" ? "$" + Math.round(v).toLocaleString() : fmtPx(v);
  const gradId = "g-" + item.sym;

  return (
    <a className="bigchart" href={href || "#"}>
      <div className="bc-head">
        <div className="bc-ident">
          <span className="bc-sym">{item.sym}</span>
          <span className="bc-name">{item.name}</span>
        </div>
        <div className="bc-nums">
          <span className="bc-px tabnum">{fmt(last)}</span>
          <span className={"bc-delta tabnum " + (up ? "up" : "down")}>
            {up ? "+" : ""}{item.sym === "US10Y" ? (delta*100).toFixed(1) + "bps" : fmtPct(deltaPct)}
          </span>
        </div>
      </div>
      <svg ref={svgRef} className="bc-svg" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none"
           onMouseMove={onMove} onMouseLeave={() => setHover(null)}>
        <defs>
          <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={stroke} stopOpacity="0.18" />
            <stop offset="100%" stopColor={stroke} stopOpacity="0" />
          </linearGradient>
        </defs>
        <path d={area} fill={`url(#${gradId})`} />
        <path d={path} fill="none" stroke={stroke} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
        {hover && (
          <>
            <line x1={hover.x} y1={2} x2={hover.x} y2={H - 2} stroke="var(--rule-strong)" strokeDasharray="2 2" />
            <circle cx={hover.x} cy={hover.y} r="3" fill="var(--card)" stroke={stroke} strokeWidth="1.5" />
          </>
        )}
      </svg>
      {hover && (
        <div className="bc-tip" style={{ left: `${(hover.x / W) * 100}%` }}>
          <span className="v tabnum">{fmt(hover.v)}</span>
        </div>
      )}
    </a>
  );
}

function BigChartGrid() {
  const [range, setRange] = useBC_S(() => localStorage.getItem("tmt.v3.bcRange") || "1M");
  const setR = (r) => { setRange(r); try { localStorage.setItem("tmt.v3.bcRange", r); } catch {} };

  const items = [
    { item: BY_SYM.SPX, accent: "default", href: "/details.html?symbol=%5EGSPC" },
    { item: SYNTH_TNX,   accent: "warm",    href: "/cpi.html" },
    { item: BY_SYM.DXY, accent: "cool",    href: "/commodities.html" },
    { item: BY_SYM.BTC, accent: "warm",    href: "/details.html?symbol=BTC-USD" },
  ];

  return (
    <section className="bcgrid-wrap">
      <div className="bcgrid">
        {items.map(({item, accent, href}) => (
          <BigChart key={item.sym} item={item} range={range} accent={accent} href={href} />
        ))}
        <div className="bc-tabs-inline" role="tablist">
          {["1D","5D","1M","YTD","1Y"].map(r => (
            <button key={r} className={range === r ? "on" : ""} onClick={() => setR(r)}>{r}</button>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BigChartGrid });