/* chart-pane.jsx — Live multi-coin chart with signal + whale overlays */
function ChartPane() {
  const [tick, setTick] = React.useState(0);
  const [selected, setSelected] = React.useState("BTC");
  const [timeframe, setTimeframe] = React.useState("1H");
  React.useEffect(() => {
    return window.NTData.subscribe((evt) => {
      if (evt.type === "price" || evt.type === "whale") setTick(t => t + 1);
    });
  }, []);

  const phist = window.NTData.getPriceHistory();
  const signals = window.NTData.getSignals();
  const whales = window.NTData.getWhales();
  const coin = window.NTData.COINS.find(c => c.symbol === selected);
  const data = phist[selected];
  const signal = signals.find(s => s.coin === selected);
  const coinWhales = whales.filter(w => w.coin === selected).slice(0, 8);

  const W = 800, H = 320;
  const padL = 8, padR = 56, padT = 18, padB = 28;
  const innerW = W - padL - padR, innerH = H - padT - padB;

  const min = Math.min(...data), max = Math.max(...data);
  const rng = max - min || 1;
  const pad = rng * 0.06;
  const yMin = min - pad, yMax = max + pad;
  const yRng = yMax - yMin;

  const xStep = innerW / (data.length - 1);
  const xy = (i, v) => [padL + i * xStep, padT + innerH - ((v - yMin) / yRng) * innerH];
  const pts = data.map((v, i) => xy(i, v));
  const path = `M ${pts.map(p => `${p[0].toFixed(2)},${p[1].toFixed(2)}`).join(" L ")}`;
  const fillPath = `${path} L ${padL + innerW},${padT + innerH} L ${padL},${padT + innerH} Z`;

  const cur = data[data.length - 1];
  const prev = data[Math.max(0, data.length - 24)];
  const pctChange = ((cur - prev) / prev) * 100;
  const pos = pctChange >= 0;
  const color = pos ? "var(--gain)" : "var(--loss)";

  // y-axis ticks
  const yTicks = 5;
  const tickVals = Array.from({ length: yTicks }, (_, i) => yMin + (yRng * i) / (yTicks - 1));

  // x-axis tick labels (minutes ago)
  const xTickCount = 7;
  const xTicks = Array.from({ length: xTickCount }, (_, i) => {
    const idx = Math.round((i * (data.length - 1)) / (xTickCount - 1));
    return { x: padL + idx * xStep, label: `-${Math.round((data.length - 1 - idx))}` };
  });

  // signal marker on right edge
  const signalMarkerY = signal ? padT + innerH - ((signal.predicted - yMin) / yRng) * innerH : null;

  // whale events — distribute across last 4h (last 24 ticks)
  const whaleMarkers = coinWhales.map((w, i) => {
    const minutesAgo = (Date.now() - new Date(w.timestamp).getTime()) / 60_000;
    if (minutesAgo > data.length) return null;
    const idx = Math.max(0, data.length - 1 - Math.floor(minutesAgo));
    const v = data[idx];
    const [x, y] = xy(idx, v);
    return { x, y, w };
  }).filter(Boolean);

  return (
    <div className="panel">
      <style>{`
        .chart-head-tabs {
          display: flex; gap: 0; margin-left: 0;
        }
        .chart-tab {
          appearance: none; background: transparent; border: 0;
          font-family: var(--font-mono); font-size: 9.5px;
          color: var(--fg-muted); letter-spacing: 0.1em; text-transform: uppercase;
          padding: 6px 8px;
          border-bottom: 1px solid transparent;
          cursor: pointer;
          font-weight: 600;
          transition: color .12s, border-color .12s;
        }
        .chart-tab:hover { color: var(--fg); }
        .chart-tab[data-active="true"] {
          color: var(--accent);
          border-bottom-color: var(--accent);
        }
        .chart-tf {
          display: flex; gap: 2px;
          background: var(--bg-subtle); padding: 2px;
          border-radius: 3px;
        }
        .chart-tf button {
          appearance: none; background: transparent; border: 0;
          font-family: var(--font-mono); font-size: 9px;
          color: var(--fg-muted); letter-spacing: 0.08em;
          padding: 2px 7px; border-radius: 2px;
          cursor: pointer;
        }
        .chart-tf button[data-active="true"] {
          background: var(--bg-elev); color: var(--accent);
        }
        .chart-wrap {
          padding: 0;
          position: relative;
          flex: 1;
          min-height: 0;
          display: flex;
          flex-direction: column;
        }
        .chart-meta {
          display: flex; gap: 16px; align-items: baseline;
          padding: 10px 14px 4px;
        }
        .chart-meta__price {
          font-family: var(--font-display); font-size: 24px; font-weight: 600;
          color: var(--fg); letter-spacing: -0.02em;
          font-variant-numeric: tabular-nums;
        }
        .chart-meta__change {
          font-family: var(--font-mono); font-size: 12px; font-weight: 700;
        }
        .chart-meta__sub {
          font-family: var(--font-mono); font-size: 9px;
          color: var(--fg-dim); letter-spacing: 0.08em; text-transform: uppercase;
          margin-left: auto;
        }
        .chart-svg-wrap {
          flex: 1; min-height: 0;
          display: flex;
        }
        .chart-svg-wrap svg { width: 100%; height: 100%; display: block; }

        /* Whale marker dot */
        .whale-marker { cursor: pointer; }
        .whale-marker circle { transition: r .12s; }
        .whale-marker:hover circle { r: 6; }
        .whale-tooltip {
          position: absolute;
          background: var(--bg-elev);
          border: 1px solid var(--accent);
          border-radius: 3px;
          padding: 4px 7px;
          font-family: var(--font-mono); font-size: 9px;
          color: var(--fg);
          pointer-events: none;
          z-index: 5;
          white-space: nowrap;
        }
        .signal-target-line {
          stroke: currentColor;
          stroke-width: 1;
          stroke-dasharray: 3 3;
          opacity: 0.5;
        }
      `}</style>

      <div className="panel__head">
        <span className="panel__title panel__title-accent">Market · Chart</span>
        <div className="chart-head-tabs">
          {window.NTData.COINS.slice(0, 6).map(c => (
            <button key={c.symbol}
                    className="chart-tab"
                    data-active={selected === c.symbol}
                    onClick={() => setSelected(c.symbol)}>
              {c.symbol}
            </button>
          ))}
        </div>
        <div className="panel__meta">
          <div className="chart-tf">
            {["5M", "1H", "4H", "1D", "1W"].map(tf => (
              <button key={tf} data-active={tf === timeframe} onClick={() => setTimeframe(tf)}>{tf}</button>
            ))}
          </div>
          <span className="live-dot"></span>
          <span>LIVE</span>
        </div>
      </div>

      <div className="chart-wrap">
        <div className="chart-meta">
          <span className="chart-meta__price">${fmtPrice(cur)}</span>
          <span className="chart-meta__change" style={{ color }}>
            {pos ? "▲" : "▼"} {Math.abs(pctChange).toFixed(2)}%
          </span>
          {signal && (
            <span className="chart-meta__sub">
              <span style={{ color: window.SIGNAL_CFG[signal.signal]?.color }}>
                ● {window.SIGNAL_CFG[signal.signal]?.short}
              </span>
              {" · "}
              tgt ${fmtPrice(signal.predicted)}
              {" · "}
              conf {(signal.confidence * 100).toFixed(0)}%
            </span>
          )}
        </div>

        <div className="chart-svg-wrap">
          <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
            {/* grid lines */}
            {tickVals.map((v, i) => {
              const y = padT + innerH - ((v - yMin) / yRng) * innerH;
              return (
                <g key={i}>
                  <line x1={padL} x2={padL + innerW} y1={y} y2={y}
                        stroke="var(--border)" strokeWidth="0.5" strokeDasharray="2 4" opacity="0.5" />
                  <text x={W - padR + 4} y={y + 3}
                        style={{ font: "500 9px var(--font-mono)", fill: "var(--fg-dim)" }}>
                    {v < 1 ? v.toFixed(4) : v < 100 ? v.toFixed(2) : v.toFixed(0)}
                  </text>
                </g>
              );
            })}
            {/* x axis ticks */}
            {xTicks.map((t, i) => (
              <text key={i} x={t.x} y={H - 8}
                    textAnchor="middle"
                    style={{ font: "500 9px var(--font-mono)", fill: "var(--fg-dim)" }}>
                {t.label}m
              </text>
            ))}

            {/* fill */}
            <defs>
              <linearGradient id="chartFill" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor={pos ? "#34d399" : "#f47272"} stopOpacity="0.25" />
                <stop offset="100%" stopColor={pos ? "#34d399" : "#f47272"} stopOpacity="0" />
              </linearGradient>
            </defs>
            <path d={fillPath} fill="url(#chartFill)" />
            <path d={path} fill="none" stroke={pos ? "#34d399" : "#f47272"} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />

            {/* current price line + label */}
            <line x1={padL} x2={padL + innerW}
                  y1={padT + innerH - ((cur - yMin) / yRng) * innerH}
                  y2={padT + innerH - ((cur - yMin) / yRng) * innerH}
                  stroke={pos ? "#34d399" : "#f47272"}
                  strokeWidth="0.5" strokeDasharray="2 2" opacity="0.6" />
            <rect x={W - padR + 1} y={padT + innerH - ((cur - yMin) / yRng) * innerH - 7}
                  width={padR - 2} height="14"
                  fill={pos ? "#34d399" : "#f47272"} />
            <text x={W - padR + 4} y={padT + innerH - ((cur - yMin) / yRng) * innerH + 3}
                  style={{ font: "600 9px var(--font-mono)", fill: pos ? "#06140d" : "#1b0606" }}>
              {cur < 1 ? cur.toFixed(4) : cur < 100 ? cur.toFixed(2) : cur.toFixed(0)}
            </text>

            {/* target line */}
            {signal && signalMarkerY != null && (
              <g style={{ color: window.SIGNAL_CFG[signal.signal]?.color === "var(--gain)" ? "#34d399" : window.SIGNAL_CFG[signal.signal]?.color === "var(--loss)" ? "#f47272" : "#f5b744" }}>
                <line x1={padL} x2={padL + innerW} y1={signalMarkerY} y2={signalMarkerY}
                      className="signal-target-line" />
                <text x={padL + 4} y={signalMarkerY - 4}
                      style={{ font: "600 8.5px var(--font-mono)", fill: "currentColor", letterSpacing: "0.08em" }}>
                  TARGET · {window.SIGNAL_CFG[signal.signal]?.short}
                </text>
              </g>
            )}

            {/* whale markers */}
            {whaleMarkers.map((m, i) => {
              const isIn = m.w.direction === "EXCHANGE_INFLOW";
              const isOut = m.w.direction === "EXCHANGE_OUTFLOW";
              const mc = isIn ? "#f47272" : isOut ? "#34d399" : "#f5b744";
              return (
                <g key={m.w.id} className="whale-marker">
                  <line x1={m.x} x2={m.x} y1={m.y} y2={m.y - 14}
                        stroke={mc} strokeWidth="0.5" opacity="0.6" />
                  <circle cx={m.x} cy={m.y - 16} r="3" fill={mc} stroke="var(--bg-elev)" strokeWidth="1" />
                  <title>{m.w.label} · {isIn ? "INFLOW" : isOut ? "OUTFLOW" : "TX"} · {window.NTData.fmtUSD(m.w.amount_usd)}</title>
                </g>
              );
            })}
          </svg>
        </div>
      </div>
    </div>
  );
}

window.ChartPane = ChartPane;