/* On-chain widgets */

// === MVRV Ratio ========================================================
function W_MVRV() {
  const m    = window.MOCK;
  const v    = m.ONCHAIN.mvrv;
  const zone = m.ONCHAIN.mvrvZone || 'neutral';
  const chipKind = zone === 'undervalued' ? 'bull' : zone === 'euphoria' ? 'bear' : zone === 'overvalued' ? 'neutral' : 'info';
  const segments = [
    { from: 0,   to: 1,   color: 'var(--bull)' },
    { from: 1,   to: 2.4, color: 'var(--info-dim)' },
    { from: 2.4, to: 3.5, color: 'var(--gold)' },
    { from: 3.5, to: 5,   color: 'var(--bear)' },
  ];
  return (
    <div className="card" style={{ gridColumn: 'span 4' }}>
      <div className="card-h">
        <CardTitle topic="mvrv">MVRV Ratio</CardTitle>
        <span className={"chip " + chipKind}><span className="chip-dot" /> {zone}</span>
      </div>
      <div className="card-b" style={{ display: 'flex', justifyContent: 'center' }}>
        <div>
          <Gauge value={v} min={0} max={5} segments={segments} label="MARKET / REALIZED" />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginTop: 4, fontFamily: 'var(--font-mono)', fontSize: 11 }}>
            <div><span style={{ color: 'var(--text-4)' }}>Realized price </span><span style={{ color: 'var(--text-2)' }}>${window.fmtUSD(m.ONCHAIN.realizedPrice)}</span></div>
            <div><span style={{ color: 'var(--text-4)' }}>Miner cost </span><span style={{ color: 'var(--text-2)' }}>${window.fmtUSD(m.ONCHAIN.electricalCost)}</span></div>
          </div>
          <div style={{ fontSize: 11.5, color: 'var(--text-2)', marginTop: 10, lineHeight: 1.5 }}>
            MVRV {typeof v === 'number' ? v.toFixed(2) : v} — zone {zone}. Above 3.5 is historically euphoria.
          </div>
        </div>
      </div>
    </div>
  );
}

// === Whale flows ========================================================
function W_Whales() {
  const m = window.MOCK;
  const vols = m.WHALE_TX || [];
  const n = vols.length;
  const times = (Array.isArray(m.WHALE_TX_TIMES) && m.WHALE_TX_TIMES.length === n)
    ? m.WHALE_TX_TIMES
    : vols.map((_, i) => Date.now() - (n - 1 - i) * 3600000);
  const total = vols.reduce((a, b) => a + b, 0);
  const recent = vols.slice(-12).reduce((a, b) => a + b, 0) / 12;
  const prior = vols.slice(0, 12).reduce((a, b) => a + b, 0) / 12;
  const trendUp = recent >= prior;
  const pk = vols.length ? Math.max(...vols) : 0;
  return (
    <div className="card" style={{ gridColumn: 'span 12' }}>
      <div className="card-h">
        <CardTitle topic="whales">BTC trading volume · 48h</CardTitle>
        <window.DataTag src={m.WHALE_TX_SOURCE || 'fallback'} />
      </div>
      <div className="card-b" style={{ paddingTop: 6 }}>
        <Sparkline values={vols} times={times} height={64} color="var(--gold)" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginTop: 12, fontFamily: 'var(--font-mono)' }}>
          <div style={{ background: 'var(--bg-elev)', padding: 8, borderRadius: 6 }}>
            <div style={{ color: 'var(--text-4)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.06em' }}>48h volume</div>
            <div style={{ fontSize: 16, marginTop: 2 }}>{window.fmtCompact(Math.round(total))} BTC</div>
          </div>
          <div style={{ background: 'var(--bg-elev)', padding: 8, borderRadius: 6 }}>
            <div style={{ color: 'var(--text-4)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.06em' }}>peak hour</div>
            <div style={{ fontSize: 16, marginTop: 2 }}>{window.fmtCompact(Math.round(pk))} BTC</div>
          </div>
          <div style={{ background: 'var(--bg-elev)', padding: 8, borderRadius: 6 }}>
            <div style={{ color: 'var(--text-4)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.06em' }}>12h trend</div>
            <div className={trendUp ? 'up' : 'down'} style={{ fontSize: 16, marginTop: 2 }}>{trendUp ? '▲ rising' : '▼ easing'}</div>
          </div>
        </div>
        <div style={{ marginTop: 10, fontSize: 11, color: 'var(--text-4)' }}>
          Hourly spot volume on Binance BTC/USDT — a proxy for overall market participation.
        </div>
      </div>
    </div>
  );
}

// === Stablecoin / dominance ============================================
function W_Stablecoin() {
  const m = window.MOCK;
  const usdtSeries = Array.from({ length: 60 }, (_, i) => 138 + Math.log(i+2)*3 + Math.sin(i/5)*1.2);

  return (
    <div className="card" style={{ gridColumn: 'span 4' }}>
      <div className="card-h">
        <CardTitle topic="stablecoin">Stablecoin liquidity</CardTitle>
        <span className="tag">USDT + USDC supply</span>
      </div>
      <div className="card-b">
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span className="mono" style={{ fontSize: 22, fontWeight: 600 }}>${m.ONCHAIN.usdtMcap}B</span>
          <span className="up num" style={{ fontSize: 12 }}>+0.42%</span>
          <span style={{ fontSize: 11, color: 'var(--text-3)', marginLeft: 'auto' }}>24h</span>
        </div>
        <Sparkline values={usdtSeries} height={42} color="var(--bull)" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 10 }}>
          <Stat label="Stablecoin dom" value={m.ONCHAIN.stablecoinDom + '%'} note="dry powder" />
          <Stat label="USDT printing" value="active" note="last mint 18m ago" color="var(--bull)" />
        </div>
        <div style={{ marginTop: 10, padding: '8px 10px', background: 'var(--bg-elev)', borderRadius: 6,
                      fontSize: 11.5, color: 'var(--text-2)' }}>
          USDT non-stop printing — historically a leading indicator for capital deployment.
        </div>
      </div>
    </div>
  );
}

function Stat({ label, value, note, color }) {
  return (
    <div style={{ background: 'var(--bg-elev)', padding: '8px 10px', borderRadius: 6 }}>
      <div style={{ fontSize: 10, color: 'var(--text-4)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>{label}</div>
      <div className="mono" style={{ fontSize: 16, color: color || 'var(--text)', marginTop: 2 }}>{value}</div>
      {note && <div style={{ fontSize: 10, color: 'var(--text-4)' }}>{note}</div>}
    </div>
  );
}

// === BTC Dominance / Altseason =========================================
function W_Dominance() {
  const m = window.MOCK;
  return (
    <div className="card" style={{ gridColumn: 'span 4' }}>
      <div className="card-h">
        <CardTitle topic="dominance">BTC dominance & altseason</CardTitle>
        <span className="tag">market cap share</span>
      </div>
      <div className="card-b" style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
        <Donut value={m.ONCHAIN.btcDom} size={108} stroke={11} color="var(--gold)"
               label={m.ONCHAIN.btcDom + '%'} sub="BTC.D" />
        <div style={{ flex: 1 }}>
          <Row k="ETH.D"        v={m.ONCHAIN.ethDom + '%'} />
          <Row k="Stablecoin.D" v={m.ONCHAIN.stablecoinDom + '%'} />
          <Row k="Other"        v={m.ONCHAIN.otherDom + '%'} />
          <div style={{ marginTop: 8 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--text-3)' }}>
              <span>Altseason index</span>
              <span className="mono" style={{ color: 'var(--text)' }}>{m.ONCHAIN.altseasonIdx}/100</span>
            </div>
            <div className="bar" style={{ marginTop: 4 }}>
              <span style={{ width: m.ONCHAIN.altseasonIdx + '%', background: 'linear-gradient(90deg, var(--info), var(--gold), var(--bear))' }} />
            </div>
            <div style={{ fontSize: 10.5, color: 'var(--text-4)', marginTop: 4 }}>BTC season — wait for BTC.D break below 54</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Row({ k, v }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderBottom: '1px dashed var(--border-soft)' }}>
      <span style={{ fontSize: 11.5, color: 'var(--text-3)' }}>{k}</span>
      <span className="mono" style={{ fontSize: 12, color: 'var(--text)' }}>{v}</span>
    </div>
  );
}

Object.assign(window, { W_MVRV, W_Whales, W_Stablecoin, W_Dominance });