// ============================================================
// LineChart, AllocationDonut, Performance view, history hydration
// ============================================================

// ------------------------------------------------------------
// LineChart — proper line/area chart with axes
// ------------------------------------------------------------

function LineChart({ data, height = 200, color = 'var(--accent)', yFormat = (v) => v.toFixed(2), xFormat = (d) => d, area = true, baseline = null, label = '' }) {
  // data: [{ x: ISO-date or label, y: number }, ...]
  if (!data || data.length < 2) {
    return (
      <div className="chart-empty" style={{ height }}>
        <div>Not enough data yet</div>
        <div style={{ fontSize: 10, color: 'var(--muted)', marginTop: 4 }}>
          Chart appears once {label || 'history'} has at least 2 data points
        </div>
      </div>
    );
  }

  const W = 800;
  const H = height;
  const padL = 50, padR = 16, padT = 14, padB = 26;
  const innerW = W - padL - padR;
  const innerH = H - padT - padB;

  const ys = data.map((d) => d.y);
  const yMin = Math.min(...ys, baseline ?? Infinity);
  const yMax = Math.max(...ys, baseline ?? -Infinity);
  const yRange = yMax - yMin || 1;
  const yPad = yRange * 0.1;
  const yLo = yMin - yPad;
  const yHi = yMax + yPad;
  const yScale = (y) => padT + (1 - (y - yLo) / (yHi - yLo)) * innerH;
  const xScale = (i) => padL + (i / (data.length - 1)) * innerW;

  const points = data.map((d, i) => [xScale(i), yScale(d.y)]);
  const path = points.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
  const areaPath = `${path} L${padL + innerW},${padT + innerH} L${padL},${padT + innerH} Z`;

  // gridlines (4 horizontal)
  const yTicks = [yLo, yLo + (yHi - yLo) / 3, yLo + (yHi - yLo) * 2 / 3, yHi];

  // x labels — show ~5 ticks
  const xTickStep = Math.max(1, Math.floor((data.length - 1) / 4));
  const xTicks = [];
  for (let i = 0; i < data.length; i += xTickStep) xTicks.push(i);
  if (xTicks[xTicks.length - 1] !== data.length - 1) xTicks.push(data.length - 1);

  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{ width: '100%', height, display: 'block' }}>
      {/* gridlines */}
      {yTicks.map((t, i) => (
        <line
          key={`g${i}`}
          x1={padL} x2={W - padR}
          y1={yScale(t)} y2={yScale(t)}
          stroke="var(--border)"
          strokeWidth="1"
          strokeDasharray="2 4"
        />
      ))}
      {/* baseline (zero) */}
      {baseline != null && baseline >= yLo && baseline <= yHi && (
        <line
          x1={padL} x2={W - padR}
          y1={yScale(baseline)} y2={yScale(baseline)}
          stroke="var(--muted2)"
          strokeWidth="1"
          strokeDasharray="4 4"
        />
      )}
      {/* y-axis labels */}
      {yTicks.map((t, i) => (
        <text
          key={`yl${i}`}
          x={padL - 8}
          y={yScale(t) + 4}
          fill="var(--muted)"
          fontSize="10"
          textAnchor="end"
          fontFamily="IBM Plex Mono"
        >
          {yFormat(t)}
        </text>
      ))}
      {/* area + line */}
      {area && <path d={areaPath} fill={color} opacity="0.1" />}
      <path d={path} stroke={color} strokeWidth="2" fill="none" strokeLinejoin="round" strokeLinecap="round" />
      {/* last point */}
      {points.length > 0 && (
        <circle cx={points[points.length - 1][0]} cy={points[points.length - 1][1]} r="3.5" fill={color} stroke="var(--surface)" strokeWidth="2" />
      )}
      {/* x-axis labels */}
      {xTicks.map((i) => (
        <text
          key={`xl${i}`}
          x={xScale(i)}
          y={H - 6}
          fill="var(--muted)"
          fontSize="10"
          textAnchor="middle"
          fontFamily="IBM Plex Mono"
        >
          {xFormat(data[i].x)}
        </text>
      ))}
    </svg>
  );
}

// ------------------------------------------------------------
// AllocationDonut — BTC / USDT / alts breakdown
// ------------------------------------------------------------

function AllocationDonut({ portfolio }) {
  const btcPct = portfolio?.current_btc_allocation_pct ?? 100;
  const usdtPct = Math.max(0, 100 - btcPct - (portfolio?.current_alt_allocation_pct ?? 0));
  const altPct = portfolio?.current_alt_allocation_pct ?? 0;
  const btcPrice = portfolio?.current_btc_price_usdt || 0;
  const btcUsd = (portfolio?.btc_holdings || 0) * btcPrice;
  const usdtUsd = portfolio?.usdt_holdings || 0;

  // segments
  const segments = [
    { label: 'BTC',  pct: btcPct,  color: 'var(--accent)' },
    { label: 'USDT', pct: usdtPct, color: 'var(--blue)' },
    { label: 'Alts', pct: altPct,  color: 'var(--purple)' },
  ].filter((s) => s.pct > 0);

  // build conic-gradient
  let acc = 0;
  const stops = segments.map((s) => {
    const start = acc;
    acc += s.pct;
    return `${s.color} ${start}% ${acc}%`;
  }).join(', ');

  return (
    <div className="card accent-purple">
      <div className="card-head">
        <div className="card-head-row">
          <span className="section-label">ALLOCATION</span>
        </div>
        <div className="section-meta">target {portfolio?.target_btc_allocation_pct || 100}% BTC</div>
      </div>
      <div className="alloc-body">
        <div className="alloc-donut-large" style={{ background: `conic-gradient(${stops || 'var(--muted2)'})` }}>
          <div className="alloc-donut-inner">
            <div className="alloc-donut-pct">{Math.round(btcPct)}%</div>
            <div className="alloc-donut-label">BTC</div>
          </div>
        </div>
        <div className="alloc-legend">
          {segments.map((s) => (
            <div key={s.label} className="alloc-legend-row">
              <div className="alloc-swatch" style={{ background: s.color }}></div>
              <div className="alloc-legend-label">{s.label}</div>
              <div className="alloc-legend-pct">{s.pct.toFixed(1)}%</div>
              <div className="alloc-legend-usd">
                {s.label === 'BTC' && `₿${(portfolio?.btc_holdings || 0).toFixed(6)}`}
                {s.label === 'USDT' && BTC.fmtUSD(usdtUsd)}
                {s.label === 'Alts' && (portfolio?.alt_holdings || []).length + ' pos'}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ------------------------------------------------------------
// PerformanceView — equity curve, vs-hodl, trade history
// ------------------------------------------------------------

function PerformanceView({ data }) {
  const { portfolio, syslog } = data;
  const perf = portfolio?.performance || {};

  // Build time-series from system log
  const series = useMemo(() => {
    const entries = (syslog?.entries || [])
      .filter((e) => e.btc_price_at_run != null && e.btc_equivalent_total != null)
      .map((e) => ({
        timestamp: e.timestamp,
        date: e.timestamp.slice(0, 10),
        btcPrice: e.btc_price_at_run,
        btcEq: e.btc_equivalent_total,
        vsHodl: e.vs_hodl_btc_pct || 0,
        drawdown: e.btc_denominated_drawdown_pct || 0,
      }))
      .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
    return entries;
  }, [syslog]);

  const closed = portfolio?.closed_trades || [];
  const openCount = (portfolio?.open_positions || []).length;
  const totalTrades = perf.total_trades || 0;

  const fmtDate = (iso) => {
    const d = new Date(iso);
    return `${d.getUTCMonth() + 1}/${d.getUTCDate()}`;
  };

  return (
    <div className="view-stack">
      <div className="view-header">
        <div>
          <div className="view-title">Performance</div>
          <div className="view-subtitle">
            {series.length} data points · {totalTrades} trades · {closed.length} closed
          </div>
        </div>
      </div>

      {/* Hero stats */}
      <div className="perf-stats">
        <PerfStat
          label="Current stack"
          value={`₿${(portfolio?.btc_equivalent_total ?? 0).toFixed(6)}`}
          sub={`${Math.round((portfolio?.btc_equivalent_total ?? 0) * 1e8).toLocaleString()} sats`}
        />
        <PerfStat
          label="Hodl benchmark"
          value={`₿${(portfolio?.hodl_btc_benchmark ?? 0).toFixed(6)}`}
          sub={`${Math.round((portfolio?.hodl_btc_benchmark ?? 0) * 1e8).toLocaleString()} sats baseline`}
        />
        <PerfStat
          label="vs hodl"
          value={BTC.fmtPctSigned(perf.vs_hodl_btc_pct ?? 0, 2)}
          sub={`${(perf.sats_ahead_of_hodl ?? 0) >= 0 ? '+' : ''}${Math.round(perf.sats_ahead_of_hodl ?? 0).toLocaleString()} sats Δ`}
          tone={perf.vs_hodl_btc_pct > 0 ? 'pos' : perf.vs_hodl_btc_pct < 0 ? 'neg' : 'flat'}
        />
        <PerfStat
          label="Total fees"
          value={`₿${(perf.total_fees_btc ?? 0).toFixed(6)}`}
          sub={totalTrades > 0 ? `over ${totalTrades} trades` : 'no trades yet'}
        />
        <PerfStat
          label="Peak stack"
          value={`₿${(portfolio?.peak_btc_equivalent ?? portfolio?.btc_equivalent_total ?? 0).toFixed(6)}`}
          sub={`drawdown ${BTC.fmt(portfolio?.btc_denominated_drawdown_pct ?? 0)}%`}
        />
        <PerfStat
          label="Days tracked"
          value={series.length > 0 ? Math.ceil((new Date(series[series.length-1].timestamp) - new Date(series[0].timestamp)) / 86400000) + 1 : 0}
          sub={portfolio?.starting_date && portfolio.starting_date !== 'REPLACE_WITH_TODAY' ? `since ${portfolio.starting_date}` : 'cold-start'}
        />
      </div>

      {/* vs hodl chart */}
      <div className="card accent-cyan">
        <CardCommand command="./plot_vs_hodl.sh" flag="--btc-terms" live={true} />
        <div className="card-head">
          <div className="card-head-row">
            <span className="section-label">VS_HODL_OVER_TIME</span>
            <span className="badge accent">% BTC</span>
          </div>
          <div className="section-meta">{series.length} sample{series.length === 1 ? '' : 's'}</div>
        </div>
        <LineChart
          data={series.map((s) => ({ x: s.timestamp, y: s.vsHodl }))}
          yFormat={(v) => (v >= 0 ? '+' : '') + v.toFixed(2) + '%'}
          xFormat={fmtDate}
          color="var(--accent)"
          baseline={0}
          label="vs-hodl history"
        />
      </div>

      {/* Equity curve + BTC price side by side */}
      <div className="perf-chart-row">
        <div className="card accent-cyan">
          <div className="card-head">
            <div className="card-head-row">
              <span className="section-label">EQUITY_CURVE_SATS</span>
            </div>
            <div className="section-meta">sats over time</div>
          </div>
          <LineChart
            data={series.map((s) => ({ x: s.timestamp, y: Math.round(s.btcEq * 1e8) }))}
            yFormat={(v) => Math.round(v).toLocaleString()}
            xFormat={fmtDate}
            color="var(--green)"
            label="equity curve"
          />
        </div>

        <div className="card accent-amber">
          <div className="card-head">
            <div className="card-head-row">
              <span className="section-label">BTC_PRICE</span>
            </div>
            <div className="section-meta">USD</div>
          </div>
          <LineChart
            data={series.map((s) => ({ x: s.timestamp, y: s.btcPrice }))}
            yFormat={(v) => '$' + (v / 1000).toFixed(1) + 'k'}
            xFormat={fmtDate}
            color="var(--blue)"
            label="BTC price"
          />
        </div>
      </div>

      {/* Trade history */}
      <div className={`card accent-magenta ${closed.length === 0 ? 'card-condensed' : ''}`}>
        <CardCommand command="./list_closed_trades.sh" />
        <div className="card-head">
          <div className="card-head-row">
            <span className="section-label">TRADE_HISTORY</span>
            <span className="badge neutral">{closed.length} closed</span>
            {openCount > 0 && <span className="badge active">{openCount} open</span>}
          </div>
          <div className="section-meta">{totalTrades > 0 ? `${BTC.fmt(perf.win_rate_pct || 0)}% win rate` : 'no trades yet'}</div>
        </div>

        {closed.length === 0 ? (
          <div className="empty-state">
            <div className="empty-state-title">
              <span className="dot-big" style={{ background: 'var(--muted)' }}></span>
              No closed trades yet
            </div>
            <div className="empty-state-body">
              The system is still in observation mode. Trades will appear here as they close — with entry, exit, BTC-denominated P&amp;L, and which strategy fired the signal.
            </div>
            <div className="empty-state-foot">
              <div><strong>Open positions</strong> · {openCount}</div>
              <div><strong>Strategies in paper test</strong> · {(data.strategies?.strategies || []).filter((s) => s.status === 'paper_testing').length}</div>
              <div><strong>Closest to firing</strong> · {data.signals?.evaluation_summary?.closest_to_triggering?.split('—')[0].trim() || '—'}</div>
            </div>
          </div>
        ) : (
          <table className="trade-table">
            <thead>
              <tr>
                <th>Opened</th>
                <th>Closed</th>
                <th>Asset</th>
                <th>Strategy</th>
                <th>Entry</th>
                <th>Exit</th>
                <th>BTC P&amp;L</th>
                <th>vs hodl</th>
              </tr>
            </thead>
            <tbody>
              {closed.map((t, i) => (
                <tr key={i}>
                  <td className="c-muted">{t.opened_date}</td>
                  <td className="c-muted">{t.closed_date}</td>
                  <td><strong>{t.asset || 'BTC'}</strong></td>
                  <td className="c-muted">{t.strategy_id}</td>
                  <td>{t.entry_price_usdt ? BTC.fmtUSD(t.entry_price_usdt) : '—'}</td>
                  <td>{t.exit_price_usdt ? BTC.fmtUSD(t.exit_price_usdt) : '—'}</td>
                  <td className={BTC.signClass(t.btc_pnl_pct)}>
                    {BTC.fmtPctSigned(t.btc_pnl_pct, 2)}
                  </td>
                  <td className={BTC.signClass(t.vs_hodl_btc_pct)}>
                    {BTC.fmtPctSigned(t.vs_hodl_btc_pct, 2)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

function PerfStat({ label, value, sub, tone }) {
  const toneClass = tone === 'pos' ? 'c-pos' : tone === 'neg' ? 'c-neg' : '';
  return (
    <div className="perf-stat">
      <div className="perf-stat-label">{label}</div>
      <div className={`perf-stat-val ${toneClass}`}>{value}</div>
      <div className="perf-stat-sub">{sub}</div>
    </div>
  );
}

Object.assign(window, { LineChart, AllocationDonut, PerformanceView, PerfStat });