// ============================================================
// 18% CLUB · TRADE DESK · v6
// kpis.jsx — Shared KPI components used by homepage AND dashboard
// Exports to window so any HTML shell can use them.
// ============================================================

const { useEffect: kpisUseEffect, useRef: kpisUseRef, useState: kpisUseState } = React;

// Animated count-up — keeps the marquee number alive on first render
function useKpiCountUp(target, durationMs = 1100) {
  const [v, setV] = kpisUseState(0);
  const started = kpisUseRef(false);
  kpisUseEffect(() => {
    if (started.current) {setV(target);return;}
    started.current = true;
    const t0 = performance.now();
    let raf;
    const tick = (now) => {
      const p = Math.min(1, (now - t0) / durationMs);
      const eased = 1 - Math.pow(1 - p, 3);
      setV(target * eased);
      if (p < 1) raf = requestAnimationFrame(tick);else
      setV(target);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [target]);
  return v;
}

// ============================================================
// HERO P&L card (used on both homepage + dashboard)
// ============================================================
function KpiHero({ kpis }) {
  const livePnl = useKpiCountUp(kpis.live_pnl_usd, 1100);
  return (
    <div className="kpi hero">
      <div className="kpi-l">
        LIVE <span className="tt" data-tip="P&L = Profit and Loss. Total money made or lost so far, including positions still open.">P&L</span> · REALIZED + OPEN
      </div>
      <div className="kpi-v">${Math.round(livePnl).toLocaleString()}</div>
      <div className="kpi-s">Realized <b>${kpis.realized_pnl_usd.toLocaleString()}</b> · Open <b>+${kpis.open_unrealized_usd.toLocaleString()}</b></div>
    </div>);

}

// ============================================================
// HOMEPAGE — Performance snapshot card (4-tile layout)
// "Tracked results from the operating loop"
// ============================================================
function HomeKpiTriad({ kpis, initialCapital, currentNav, inceptionDate, tradingDay, openPositionsCount }) {
  const livePnl = useKpiCountUp(kpis.live_pnl_usd, 1100);
  const equity = currentNav != null ? currentNav : (initialCapital || 0) + (kpis.live_pnl_usd || 0);
  const liveEquity = useKpiCountUp(equity, 1100);
  const pnlPct = initialCapital ? kpis.live_pnl_usd / initialCapital * 100 : null;
  const totalTrades = (kpis.wins || 0) + (kpis.losses || 0) + (openPositionsCount || 0);
  const openCount = openPositionsCount || 0;

  const fmtDate = (iso) => {
    if (!iso) return '';
    const [y, m, d] = iso.split('-');
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    return `${parseInt(d, 10)} ${months[+m - 1]} ${y}`;
  };

  return (
    <div className="kpi-snapshot">
      <div className="kps-head">
        <div className="kps-head-l">
          <div className="kps-since">Since {fmtDate(inceptionDate)} · ${(initialCapital / 1000).toFixed(0)}K start · one asset, one system</div>
        </div>
      </div>

      <div className="kps-tiles">
        <div className="kps-tile">
          <div className="kpt-l">ACCOUNT EQUITY</div>
          <div className="kpt-v">${Math.round(liveEquity).toLocaleString()}</div>
          <div className="kpt-s">As of {fmtDate(tradingDay)}</div>
        </div>

        <div className="kps-tile">
          <div className="kpt-l">NET <span className="tt" data-tip="P&L = Profit and Loss. Total money made or lost so far, including positions still open.">P&amp;L</span></div>
          <div className="kpt-v">${Math.round(livePnl).toLocaleString()}</div>
          <div className="kpt-s">Realized ${kpis.realized_pnl_usd.toLocaleString()} · Open ${kpis.open_unrealized_usd.toLocaleString()}</div>
        </div>

        <div className="kps-tile">
          <div className="kpt-l">RETURN</div>
          <div className="kpt-v accent">{pnlPct == null ? '—' : `${pnlPct >= 0 ? '+' : ''}${pnlPct.toFixed(1)}%`}</div>
          <div className="kpt-s">On starting capital</div>
        </div>

        <a className="kps-tile kps-tile-cta" href="dashboard.html?from=index">
          <span className="kpt-cta-label">Performance Dashboard</span>
          <span className="kpt-cta-arrow">→</span>
        </a>
      </div>
    </div>);

}

// ============================================================
// DASHBOARD — Full KPI grid (everything that was on the homepage)
// ============================================================
function FullKpiGrid({ kpis, realized }) {
  return (
    <>
      <div className="kpi-row">
        <KpiHero kpis={kpis} />
      </div>

      <div className="kpi-row">
        <div className="kpi">
          <div className="kpi-l">WIN RATE</div>
          <div className="kpi-v">{(kpis.win_rate * 100).toFixed(1)}%</div>
          <div className="kpi-s">{kpis.wins}W / {kpis.losses}L</div>
        </div>
        <div className="kpi">
          <div className="kpi-l"><span className="tt" data-tip="Profit Factor = total wins divided by total losses (in absolute terms). Above 1 means profitable; above 3 is excellent.">PROFIT FACTOR</span></div>
          <div className="kpi-v">{kpis.profit_factor.toFixed(2)}</div>
          <div className="kpi-s">gross win ÷ |gross loss|</div>
        </div>
      </div>

      <div className="kpi-row">
        <div className="kpi">
          <div className="kpi-l"><span className="tt" data-tip="Max Drawdown = the biggest peak-to-trough decline. How deep the worst dip went before recovering.">MAX DRAWDOWN</span></div>
          <div className="kpi-v neg">{fmtUSD(kpis.max_drawdown_usd)}</div>
          <div className="kpi-s">Peak <b>${kpis.peak_pnl_usd.toLocaleString()}</b></div>
        </div>
        <div className="kpi">
          <div className="kpi-l">SHARPE (30D)</div>
          <div className="kpi-v pos">{kpis.sharpe_30d.toFixed(2)}</div>
          <div className="kpi-s">risk-adjusted return</div>
        </div>
      </div>

      <div className="kpi-row">
        <div className="kpi">
          <div className="kpi-l">REALIZED · MONTH</div>
          <div className={`kpi-v ${realized.this_month_usd >= 0 ? 'pos' : 'neg'}`}>{fmtUSD(realized.this_month_usd, { signed: true })}</div>
          <div className="kpi-s">{realized.this_month_closed_plans} closed plans</div>
        </div>
        <div className="kpi">
          <div className="kpi-l">UNREALIZED · OPEN</div>
          <div className={`kpi-v ${kpis.open_unrealized_usd >= 0 ? 'pos' : 'neg'}`}>{fmtUSD(kpis.open_unrealized_usd, { signed: true })}</div>
          <div className="kpi-s">live mark to market</div>
        </div>
      </div>
    </>);

}

// ============================================================
// STAT SHEET — moved from homepage to dashboard
// ============================================================
function StatSheet({ kpis }) {
  return (
    <div className="stat-sheet">
      <div className="stat-h">
        <span className="stat-t">Stat sheet</span>
        <span className="stat-m">CLOSED PLANS · LAST 30D</span>
      </div>
      <div className="stat-grid">
        <div className="stat-row"><span className="k">expectancy</span><span className="v pos">{fmtUSD(kpis.expectancy_per_trade_usd, { signed: true })}</span></div>
        <div className="stat-row"><span className="k">sharpe 30d</span><span className="v pos">{kpis.sharpe_30d.toFixed(2)}</span></div>
        <div className="stat-row"><span className="k">avg win</span><span className="v pos">{fmtUSD(kpis.avg_win_usd, { signed: true })}</span></div>
        <div className="stat-row"><span className="k">avg loss</span><span className="v neg">{fmtUSD(kpis.avg_loss_usd, { signed: true })}</span></div>
        <div className="stat-row"><span className="k">largest win</span><span className="v pos">{fmtUSD(kpis.largest_win_usd, { signed: true })}</span></div>
        <div className="stat-row"><span className="k">largest loss</span><span className="v neg">{fmtUSD(kpis.largest_loss_usd, { signed: true })}</span></div>
        <div className="stat-row"><span className="k">wins / losses</span><span className="v">{kpis.wins} / {kpis.losses}</span></div>
        <div className="stat-row"><span className="k">profit factor</span><span className="v pos">{kpis.profit_factor.toFixed(2)}</span></div>
      </div>
    </div>);

}

// ---------- export ----------
Object.assign(window, {
  KpiHero, HomeKpiTriad, FullKpiGrid, StatSheet, useKpiCountUp
});