/* Liquidity & Chain Analysis widgets */

// === Funding rate ======================================================
function W_Funding() {
  const m = window.MOCK;
  const series = m.FUNDING;
  const cur = series[series.length - 1];
  const avg = series.reduce((a, b) => a + b, 0) / series.length;
  const sign = cur >= 0 ? 'positive' : 'negative';
  const chipKind = cur > 0.025 ? 'bear' : cur < -0.005 ? 'bull' : 'neutral';
  const interpretation = cur > 0.025 ? 'crowded longs — correction risk' :
                         cur < -0.005 ? 'crowded shorts — squeeze setup' :
                         'neutral — healthy balance';
  const n = series.length;
  const times = (Array.isArray(m.FUNDING_TIMES) && m.FUNDING_TIMES.length === n)
    ? m.FUNDING_TIMES
    : series.map((_, i) => Date.now() - (n - 1 - i) * 8 * 3600000);

  return (
    <div className="card" style={{ gridColumn: 'span 4' }}>
      <div className="card-h">
        <CardTitle topic="funding">Funding rate · perp</CardTitle>
        <span className={"chip " + chipKind}><span className="chip-dot" /> {sign}</span>
      </div>
      <div className="card-b">
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span className="mono" style={{ fontSize: 24, fontWeight: 600, color: cur >= 0 ? 'var(--bull-dim)' : 'var(--bear-dim)' }}>
            {(cur * 100).toFixed(4)}%
          </span>
          <span style={{ fontSize: 11, color: 'var(--text-3)' }}>per 8h · avg {(avg * 100).toFixed(3)}%</span>
        </div>
        <div style={{ marginTop: 6 }}>
          <Sparkline values={series} times={times} height={50} baseline={0}
                     color={cur >= 0 ? 'var(--bull)' : 'var(--bear)'} />
        </div>
        <div style={{ marginTop: 4, fontSize: 11.5, color: 'var(--text-2)' }}>{interpretation}</div>
      </div>
    </div>
  );
}

// === Open Interest =====================================================
function W_OpenInterest() {
  const m = window.MOCK;
  const oi     = m.OPEN_INTEREST;
  const cur    = oi.current;
  const prev30 = oi.series[Math.max(0, oi.series.length - 31)];
  const oiChg  = ((cur - prev30) / prev30) * 100;
  const n      = oi.series.length;
  const times  = (Array.isArray(oi.times) && oi.times.length === n)
    ? oi.times
    : oi.series.map((_, i) => Date.now() - (n - 1 - i) * 3600000);
  const spanH  = n > 1 ? Math.max(1, Math.round((times[n - 1] - times[0]) / 3600000)) : n;

  return (
    <div className="card" style={{ gridColumn: 'span 4' }}>
      <div className="card-h">
        <CardTitle topic="open-interest">Open Interest</CardTitle>
        <span className="tag">1h · {spanH}h</span>
      </div>
      <div className="card-b">
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span className="mono" style={{ fontSize: 24, fontWeight: 600 }}>${cur.toFixed(1)}B</span>
          <span className={"num " + (oiChg >= 0 ? 'up' : 'down')} style={{ fontSize: 12 }}>
            {window.fmtSigned(oiChg, 1)}%
          </span>
        </div>
        <div style={{ marginTop: 6 }}>
          <Sparkline values={oi.series} times={times} height={50} color="var(--info)" />
        </div>
        <div style={{ marginTop: 4, fontSize: 11.5, color: 'var(--text-2)' }}>
          {(() => {
            const priceUp = (m.dayChangePct ?? 0) >= 0;
            const oiUp = oiChg >= 0;
            if (oiUp && priceUp) return 'OI rising with price — new money, continuation.';
            if (oiUp && !priceUp) return 'OI rising as price falls — shorts pressing.';
            if (!oiUp && priceUp) return 'OI falling as price rises — short covering.';
            return 'OI falling with price — positions unwinding.';
          })()}
        </div>
      </div>
    </div>
  );
}

// === Long/Short ratio — reads from window.MOCK.LONG_SHORT ===============
function W_LongShort() {
  const m      = window.MOCK;
  const ls     = m.LONG_SHORT || { longs: 58.4, shorts: 41.6 };
  const longs  = ls.longs;
  const shorts = ls.shorts;

  return (
    <div className="card" style={{ gridColumn: 'span 4' }}>
      <div className="card-h">
        <CardTitle topic="long-short">Long / Short ratio</CardTitle>
        <window.DataTag src="fallback" />
      </div>
      <div className="card-b">
        <div style={{ display: 'flex', height: 10, borderRadius: 3, overflow: 'hidden', marginTop: 4 }}>
          <div style={{ width: longs + '%', background: 'var(--bull)' }} />
          <div style={{ width: shorts + '%', background: 'var(--bear)' }} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 12 }}>
          <span style={{ color: 'var(--bull)' }}>Longs {longs.toFixed(1)}%</span>
          <span style={{ color: 'var(--bear)' }}>Shorts {shorts.toFixed(1)}%</span>
        </div>
        <div style={{ marginTop: 12, fontSize: 11.5, color: 'var(--text-2)' }}>
          {(() => {
            const skew = longs - shorts;
            if (skew > 10) return 'Positioning skewed long — crowded, downside-squeeze risk.';
            if (skew < -10) return 'Positioning skewed short — crowded, upside-squeeze risk.';
            return 'Positioning roughly balanced between longs and shorts.';
          })()}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { W_Funding, W_OpenInterest, W_LongShort });