/* onchain-pane.jsx — Whale flow visualization with chain rail + event ledger */
function OnchainPane() {
  const [tick, setTick] = React.useState(0);
  const [chainFilter, setChainFilter] = React.useState("");
  const [highlightedId, setHighlightedId] = React.useState(null);
  React.useEffect(() => {
    return window.NTData.subscribe((evt) => {
      if (evt.type === "whale") {
        setTick(t => t + 1);
        // flash highlight
        if (evt.event) {
          setHighlightedId(evt.event.id);
          setTimeout(() => setHighlightedId(null), 1800);
        }
      }
    });
  }, []);

  const whales = window.NTData.getWhales();
  const filtered = chainFilter ? whales.filter(w => w.chain === chainFilter) : whales;
  const visible = filtered.slice(0, 60);
  const { fmtUSD, timeAgo } = window.NTData;

  // Aggregate per-chain net flow (last 24h, all data)
  const recent = whales;
  const chainStats = {};
  recent.forEach(w => {
    const c = w.chain;
    if (!chainStats[c]) chainStats[c] = { in: 0, out: 0, count: 0, color: w.chainColor };
    if (w.direction === "EXCHANGE_INFLOW") chainStats[c].in += w.amount_usd;
    else if (w.direction === "EXCHANGE_OUTFLOW") chainStats[c].out += w.amount_usd;
    chainStats[c].count += 1;
  });
  const chains = Object.entries(chainStats).sort((a, b) => (b[1].in + b[1].out) - (a[1].in + a[1].out));

  return (
    <div className="panel">
      <style>{`
        .oc-chains {
          padding: 8px 12px;
          border-bottom: 1px solid var(--border);
          background: var(--bg-panel-2);
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
          gap: 8px;
        }
        .oc-chain {
          display: flex; flex-direction: column; gap: 3px;
          padding: 6px 8px;
          background: var(--bg-inset);
          border: 1px solid var(--border);
          border-radius: 3px;
          cursor: pointer;
          transition: border-color .12s;
          min-width: 0;
        }
        .oc-chain:hover, .oc-chain[data-active="true"] {
          border-color: var(--accent);
        }
        .oc-chain__head {
          display: flex; align-items: center; gap: 6px;
          font-family: var(--font-mono); font-size: 9.5px;
          font-weight: 700; letter-spacing: 0.1em;
        }
        .oc-chain__dot { width: 6px; height: 6px; border-radius: 50%; }
        .oc-chain__count { margin-left: auto; color: var(--fg-dim); font-weight: 500; }
        .oc-chain__bars {
          display: flex; height: 4px; gap: 1px; margin-top: 2px; border-radius: 1px; overflow: hidden;
        }
        .oc-chain__bar-in {
          background: var(--loss);
          border-radius: 1px;
        }
        .oc-chain__bar-out {
          background: var(--gain);
          border-radius: 1px;
        }
        .oc-chain__net {
          display: flex; justify-content: space-between;
          font-family: var(--font-mono); font-size: 9px;
        }

        .oc-filter {
          display: flex; gap: 4px;
        }
        .oc-filter button {
          appearance: none; background: transparent;
          border: 1px solid var(--border);
          color: var(--fg-muted);
          font-family: var(--font-mono); font-size: 9px;
          letter-spacing: 0.08em;
          padding: 2px 7px;
          border-radius: 3px;
          cursor: pointer;
        }
        .oc-filter button[data-active="true"] {
          background: var(--accent-soft);
          color: var(--accent);
          border-color: var(--accent-line);
        }

        .oc-ledger {
          display: flex; flex-direction: column;
          font-family: var(--font-mono); font-size: 10.5px;
        }
        .oc-row {
          display: grid;
          grid-template-columns: 44px 52px 60px 1fr 80px 80px 16px;
          gap: 8px;
          padding: 5px 12px;
          align-items: center;
          border-bottom: 1px solid var(--divider);
          transition: background .25s;
          min-width: 0;
        }
        .oc-row:hover { background: var(--bg-subtle); }
        .oc-row[data-new="true"] {
          background: var(--accent-soft);
          animation: flash 1.6s ease-out;
        }
        @keyframes flash {
          0% { background: color-mix(in srgb, var(--accent) 35%, var(--bg-panel)); }
          100% { background: var(--bg-panel); }
        }
        .oc-row__time { color: var(--fg-dim); font-size: 9px; letter-spacing: 0.04em; }
        .oc-row__chain { font-weight: 700; letter-spacing: 0.06em; }
        .oc-row__dir {
          padding: 1px 5px; border-radius: 2px;
          font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em;
          text-align: center;
          border: 1px solid;
        }
        .oc-row__label {
          color: var(--fg-2);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .oc-row__coin { color: var(--fg-muted); font-size: 9px; text-align: right; letter-spacing: 0.06em; }
        .oc-row__amt { font-weight: 700; text-align: right; }
        .oc-row__link { color: var(--accent); cursor: pointer; opacity: 0.5; text-align: center; }
        .oc-row__link:hover { opacity: 1; }

        .oc-head-row {
          display: grid;
          grid-template-columns: 44px 52px 60px 1fr 80px 80px 16px;
          gap: 8px;
          padding: 6px 12px;
          font-family: var(--font-mono); font-size: 8.5px;
          color: var(--fg-dim); letter-spacing: 0.12em; text-transform: uppercase;
          background: var(--bg-elev);
          border-bottom: 1px solid var(--border);
          font-weight: 600;
        }
        .oc-head-row > span:nth-child(5), .oc-head-row > span:nth-child(6) { text-align: right; }
      `}</style>

      <div className="panel__head">
        <span className="panel__title panel__title-accent">On-Chain · Whale Flow</span>
        <div className="oc-filter" style={{ marginLeft: 6 }}>
          {["", "BTC", "ETH", "SOL", "XRP", "POLYGON"].map(c => (
            <button key={c} data-active={chainFilter === c} onClick={() => setChainFilter(c)}>
              {c || "ALL"}
            </button>
          ))}
        </div>
        <div className="panel__meta">
          <span>{filtered.length} events · 24h</span>
          <span className="live-dot"></span>
        </div>
      </div>

      <div className="oc-chains">
        {chains.map(([cName, st]) => {
          const total = st.in + st.out || 1;
          return (
            <div className="oc-chain" key={cName}
                 data-active={chainFilter === cName}
                 onClick={() => setChainFilter(chainFilter === cName ? "" : cName)}>
              <div className="oc-chain__head" style={{ color: st.color }}>
                <span className="oc-chain__dot" style={{ background: st.color }} />
                <span>{cName}</span>
                <span className="oc-chain__count">{st.count}</span>
              </div>
              <div className="oc-chain__bars">
                <div className="oc-chain__bar-in" style={{ flex: st.in }} />
                <div className="oc-chain__bar-out" style={{ flex: st.out }} />
              </div>
              <div className="oc-chain__net">
                <span className="fg-loss">↓{fmtUSD(st.in)}</span>
                <span className="fg-gain">↑{fmtUSD(st.out)}</span>
              </div>
            </div>
          );
        })}
      </div>

      <div className="oc-head-row">
        <span>Time</span>
        <span>Chain</span>
        <span>Type</span>
        <span>Wallet</span>
        <span>Coin</span>
        <span>USD</span>
        <span></span>
      </div>

      <div className="panel__body">
        <div className="oc-ledger">
          {visible.map(w => {
            const isIn = w.direction === "EXCHANGE_INFLOW";
            const isOut = w.direction === "EXCHANGE_OUTFLOW";
            const c = isIn ? "var(--loss)" : isOut ? "var(--gain)" : "var(--warn)";
            const dirLabel = isIn ? "▼IN" : isOut ? "▲OUT" : "◇TX";
            return (
              <div className="oc-row" key={w.id} data-new={highlightedId === w.id}>
                <span className="oc-row__time">{timeAgo(w.timestamp)} ago</span>
                <span className="oc-row__chain" style={{ color: w.chainColor }}>{w.chain}</span>
                <span className="oc-row__dir" style={{ color: c, borderColor: c, background: `color-mix(in srgb, ${c} 14%, transparent)` }}>
                  {dirLabel}
                </span>
                <span className="oc-row__label">{w.label}</span>
                <span className="oc-row__coin">{w.coin}</span>
                <span className="oc-row__amt" style={{ color: c }}>{fmtUSD(w.amount_usd)}</span>
                <span className="oc-row__link" title="View tx">↗</span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.OnchainPane = OnchainPane;