/* ===============================================================
   AGENTICS.CREDIT — AGENT DASHBOARD v2 (Demo Mode + Live Borrower)
   =============================================================== */

const { useState: _useState_ag, useEffect: _useEffect_ag, useRef: _useRef_ag } = React;
// (lib.jsx already destructures these globally; this is a safety fallback if loaded standalone)

function RiskRow({ label, value }) {
  return (
    <div className="row between" style={{ padding: "6px 0", borderBottom: "1px dashed var(--border)", fontSize: 12 }}>
      <span className="muted">{label}</span>
      <span className="mono">{value}</span>
    </div>
  );
}

function AgentDashboard({ account }) {
  const [mode, setMode] = useState("demo"); // demo | live | graduated
  const [demo, setDemo] = useState(() => ({
    ...MOCK_DEMO,
    runDay: MOCK_DEMO.day,
    runScore: MOCK_DEMO.score,
    pnl: MOCK_DEMO.pnl,
    trades: [...MOCK_RECENT_TRADES],
  }));
  const [graduated, setGraduated] = useState(false);
  const toast = useToast();
  const tickRef = useRef(0);

  // Live ticker — every 8s, post a paper trade and bump metrics
  useEffect(() => {
    if (mode !== "demo") return;
    const id = setInterval(() => {
      tickRef.current++;
      const win = Math.random() > 0.32;
      const market = ["BTC-PERP", "ETH-PERP", "SOL-PERP"][Math.floor(Math.random() * 3)];
      const pnl = win ? Math.round(80 + Math.random() * 380) : -Math.round(40 + Math.random() * 220);
      const credit = win ? Math.round(pnl / 10) : 0;
      const now = new Date();
      const time = `${String(now.getHours()).padStart(2,"0")}:${String(now.getMinutes()).padStart(2,"0")}`;
      const entry = market === "BTC-PERP" ? 67000 + Math.round(Math.random() * 2000) : market === "ETH-PERP" ? 3200 + Math.round(Math.random() * 100) : 142 + Math.random() * 8;
      const exit = entry + (win ? entry * 0.012 : -entry * 0.008);
      const newTrade = { time, market, side: Math.random() > 0.5 ? "BUY" : "SELL", size: 2.3, entry: +entry.toFixed(2), exit: +exit.toFixed(2), pnl, credit };

      setDemo(prev => {
        const newScore = Math.min(820, prev.runScore + (win ? 1.4 : 0.3));
        const newDay = Math.min(prev.totalDays, prev.runDay + 0.04);
        return {
          ...prev,
          runDay: +newDay.toFixed(2),
          runScore: +newScore.toFixed(0),
          pnl: prev.pnl + pnl,
          trades: [newTrade, ...prev.trades].slice(0, 30),
          creditEarned: prev.creditEarned + credit,
        };
      });

      if (win) toast?.push({ title: `+${fmtUSDc(pnl)} paper profit`, meta: `+${credit} $CREDIT earned ◎` });
    }, 8000);
    return () => clearInterval(id);
  }, [mode]);

  // Graduation trigger
  useEffect(() => {
    if (mode === "demo" && demo.runScore >= 670 && !graduated) {
      setGraduated(true);
    }
  }, [demo.runScore, mode, graduated]);

  if (mode === "live") return <LiveBorrowerView onBack={() => setMode("demo")}/>;

  return (
    <div>
      {/* STICKY BANNER */}
      <div className="sticky-banner">
        <div className="left">
          <span className="demo-dot">◎</span>
          <span><strong style={{ color: "var(--fg)" }}>DEMO MODE</strong> — Paper trading on real Hyperliquid data · No capital at risk · Real scoring model</span>
        </div>
        <button className="btn btn-primary btn-sm" onClick={() => setMode("live")}>GO LIVE WITH REAL CAPITAL →</button>
      </div>

      <div className="page">
        {/* AGENT TAB BAR */}
        <div style={{ display: "flex", alignItems: "center", gap: 4, marginBottom: 18, paddingBottom: 0, borderBottom: "1px solid var(--border)" }}>
          <AgentTab active label={demo.agentName}/>
          <AgentTab label="Mean Reversion"/>
          <button className="btn btn-ghost btn-sm" style={{ marginLeft: "auto" }}>+ NEW AGENT</button>
        </div>

        <div className="grid-2" style={{ alignItems: "flex-start" }}>
          {/* LEFT — performance + eligibility */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <Card title="LIVE_PERFORMANCE · PAPER">
              <div className="kpi-strip" style={{ gridTemplateColumns: "repeat(3, 1fr)", marginBottom: 0 }}>
                <div className="kpi"><div className="k">PNL</div><div className="v accent">+{fmtUSDc(demo.pnl)}</div><div className="delta up">+{(demo.pnl / 50000 * 100).toFixed(1)}%</div></div>
                <div className="kpi"><div className="k">WIN_RATE</div><div className="v">{demo.winRate}%</div><div className="delta up">↑ trending</div></div>
                <div className="kpi"><div className="k">DRAWDOWN</div><div className="v">{demo.drawdown}%</div><div className="delta up">excellent</div></div>
              </div>
              <div className="kpi-strip" style={{ gridTemplateColumns: "repeat(3, 1fr)", marginTop: 12, marginBottom: 0 }}>
                <div className="kpi"><div className="k">SHARPE</div><div className="v">{demo.sharpe}</div></div>
                <div className="kpi"><div className="k">TRADES</div><div className="v">{demo.trades.length + 50}</div></div>
                <div className="kpi"><div className="k">RUNNING</div><div className="v">{Math.floor(demo.runDay)}<span style={{ fontSize: 13, color: "var(--muted)" }}>/{demo.totalDays}</span></div></div>
              </div>
            </Card>

            <Card title="LOAN_ELIGIBILITY_TRACKER">
              <ReqRow ok label="Win rate > 45%"   value={`${demo.winRate}%`} tier="QUALIFIED"/>
              <ReqRow ok label="Drawdown < 35%"   value={`${demo.drawdown}%`} tier="QUALIFIED"/>
              <ReqRow ok label="PnL positive"     value={`+${fmtUSDc(demo.pnl)}`} tier="QUALIFIED"/>
              <ReqRow label="History" value={`${Math.max(0, 60 - Math.floor(demo.runDay))} more days needed`}/>
              <ReqRow label="Forward PnL" value={`need ${fmtUSDc(Math.max(0, 4500 - demo.pnl))} more`}/>
              <div style={{ marginTop: 14 }}>
                <div className="row between" style={{ marginBottom: 6, fontSize: 12 }}>
                  <span className="muted f-mono">PROGRESS_TO_QUALIFIED</span>
                  <span className="f-mono">{Math.min(100, Math.round((demo.runScore - 540) / (640 - 540) * 100))}%</span>
                </div>
                <ProgressBar value={Math.min(100, (demo.runScore - 540) / (640 - 540) * 100)}/>
              </div>
              <div style={{ marginTop: 18, padding: 14, background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 6 }}>
                <div className="muted f-mono text-xs" style={{ letterSpacing: 1.5, marginBottom: 6 }}>// PROJECTED_CREDIT_LINE · DAY 60</div>
                <div className="f-mono" style={{ fontSize: 28, color: "var(--accent)" }}>{fmtUSDk(demo.projectedLoanAt60)} <span style={{ fontSize: 12, color: "var(--muted)" }}>USDC</span></div>
                <div className="muted text-xs" style={{ marginTop: 6, lineHeight: 1.55 }}>
                  Open-ended · No fixed term · Daily settlements · <span className="mono" style={{ color: "var(--fg-dim)" }}>1% borrow fee + 50/50 profit share</span>
                </div>
              </div>
            </Card>
          </div>

          {/* RIGHT — score + history + credit */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <Card title={`CREDIT_SCORE · DAY ${Math.floor(demo.runDay)}`}>
              <div style={{ display: "flex", justifyContent: "center", marginBottom: 10 }}>
                <ScoreDial score={demo.runScore} label="DEMO_SCORE"/>
              </div>
              <div style={{ textAlign: "center", marginBottom: 16 }}>
                <TierBadge tier={tierForScore(demo.runScore)} big/>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                {MOCK_SIGNALS_DEMO.map(s => (
                  <div key={s.label} className="signal-row">
                    <span className="lbl">{s.label}</span>
                    <div className="bar"><div className="fill" style={{ width: `${s.v}%` }}/></div>
                    <span className="val">{s.v}</span>
                  </div>
                ))}
              </div>
            </Card>

            <Card title="SCORE_HISTORY">
              <AreaChart data={MOCK_SCORE_HISTORY.slice(0, Math.floor(demo.runDay) + 1)} height={140} yMin={300} yMax={850}/>
              <div className="row between" style={{ marginTop: 8, fontSize: 11, color: "var(--muted)", fontFamily: "'DM Mono', monospace" }}>
                <span>DAY 1</span><span>DAY {Math.floor(demo.runDay)}</span>
              </div>
            </Card>

            <Card title="$CREDIT_EARNED">
              <div className="row between" style={{ padding: "6px 0", fontSize: 13 }}>
                <span className="muted">From trades</span>
                <span className="mono accent">{fmtTok(demo.creditEarned)} $CREDIT</span>
              </div>
              <div className="row between" style={{ padding: "6px 0", fontSize: 13 }}>
                <span className="muted">Purchased</span>
                <span className="mono">{fmtTok(demo.creditPurchased)} $CREDIT</span>
              </div>
              <div className="row between" style={{ padding: "10px 0", marginTop: 6, borderTop: "1px solid var(--border)", fontSize: 13 }}>
                <span style={{ color: "var(--fg)" }}>Total credit boost at graduation</span>
                <span className="mono" style={{ color: "var(--accent)", fontSize: 16 }}>+{fmtUSDc(demo.creditEarned + demo.creditPurchased)}</span>
              </div>
              <button className="btn btn-secondary btn-block" style={{ marginTop: 14 }}>BUY MORE $CREDIT →</button>
              <div className="muted text-xs" style={{ marginTop: 8, textAlign: "center" }}>Every $1 of $CREDIT = $1 added to your credit line</div>
            </Card>
          </div>
        </div>

        <div className="spacer"/>

        <Card title="RECENT_PAPER_TRADES">
          <table className="tbl">
            <thead>
              <tr>
                <th>TIME</th><th>MARKET</th><th>SIDE</th><th className="num">SIZE</th>
                <th className="num">ENTRY</th><th className="num">EXIT</th>
                <th className="num">PNL</th><th className="num">$CREDIT</th>
              </tr>
            </thead>
            <tbody>
              {demo.trades.slice(0, 12).map((t, i) => (
                <tr key={i}>
                  <td className="mono">{t.time}</td>
                  <td className="mono">{t.market}</td>
                  <td><span style={{ color: t.side === "BUY" ? "var(--accent)" : "var(--amber)", fontFamily: "'DM Mono', monospace", fontSize: 11 }}>{t.side}</span></td>
                  <td className="num">{t.size}%</td>
                  <td className="num">${t.entry.toLocaleString()}</td>
                  <td className="num">${t.exit.toLocaleString()}</td>
                  <td className={`num ${t.pnl >= 0 ? "pos" : "neg"}`}>{t.pnl >= 0 ? "+" : ""}{fmtUSDc(t.pnl)}</td>
                  <td className="num">{t.credit > 0 ? `+${t.credit} ◎` : "—"}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
      </div>

      {graduated && (
        <GraduationScreen
          score={Math.round(demo.runScore)}
          day={Math.floor(demo.runDay)}
          winRate={demo.winRate}
          drawdown={demo.drawdown}
          pnl={demo.pnl}
          creditBoost={demo.creditEarned + demo.creditPurchased}
          onContinue={() => { setGraduated(false); setMode("live"); }}
          onKeepRunning={() => setGraduated(false)}
        />
      )}
    </div>
  );
}

function AgentTab({ label, active }) {
  return (
    <button style={{
      padding: "10px 16px",
      background: active ? "var(--bg-2)" : "transparent",
      border: "1px solid " + (active ? "var(--border)" : "transparent"),
      borderBottom: active ? "1px solid var(--bg-2)" : "1px solid var(--border)",
      borderRadius: "6px 6px 0 0",
      color: active ? "var(--accent)" : "var(--muted)",
      fontFamily: "'DM Mono', monospace",
      fontSize: 12, letterSpacing: 0.5,
      cursor: "pointer",
      marginBottom: -1,
    }}>
      <span style={{ marginRight: 8 }}>◎</span>{label}
    </button>
  );
}

function ReqRow({ ok, label, value, tier }) {
  return (
    <div className="row between" style={{ padding: "8px 0", borderBottom: "1px solid var(--border)", fontSize: 12 }}>
      <div className="row gap-2">
        <span style={{ color: ok ? "var(--accent)" : "var(--red)", fontFamily: "'DM Mono', monospace", fontSize: 14, width: 14 }}>{ok ? "✓" : "✗"}</span>
        <span style={{ color: "var(--fg-dim)" }}>{label}</span>
      </div>
      <div className="row gap-2">
        <span className="mono" style={{ color: ok ? "var(--accent)" : "var(--muted)" }}>{value}</span>
        {tier && <span className="muted text-xs f-mono">{tier}</span>}
      </div>
    </div>
  );
}

/* =============================================================
   GRADUATION SCREEN (modal overlay)
   ============================================================= */

function GraduationScreen({ score, day, winRate, drawdown, pnl, creditBoost, onContinue, onKeepRunning }) {
  const [shareOpen, setShareOpen] = useState(false);
  const tier = tierForScore(score);
  const baseLoan = Math.round((score - 540) * 750);
  const total = baseLoan + creditBoost;

  return (
    <div className="modal-backdrop" style={{ alignItems: "flex-start", padding: 0, overflowY: "auto" }}>
      <div className="modal" style={{ width: "100%", maxWidth: 720, margin: "40px 0", padding: 0, border: "1px solid var(--accent)" }}>
        <div style={{ padding: "40px 36px", textAlign: "center" }}>
          <div style={{ width: 80, height: 80, margin: "0 auto 20px", borderRadius: "50%", background: "var(--card-tint-2)", border: "2px solid var(--accent)", display: "flex", alignItems: "center", justifyContent: "center", animation: "led-pulse 2s ease-in-out infinite" }}>
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="20 6 9 17 4 12"/>
            </svg>
          </div>
          <div className="label-mono" style={{ marginBottom: 10 }}>// GRADUATION</div>
          <h1 style={{ fontSize: 40, fontWeight: 600, letterSpacing: -0.8, margin: "0 0 12px", color: "var(--fg)" }}>
            🎯 Your agent qualifies.
          </h1>
          <p style={{ color: "var(--muted)", fontSize: 16, lineHeight: 1.6, margin: "0 auto 28px", maxWidth: 480 }}>
            After {day} days your strategy has proven itself on real Hyperliquid market data.
          </p>

          <div style={{ background: "var(--bg)", border: "1px solid var(--accent)", borderRadius: 10, padding: 24, marginBottom: 24 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, fontSize: 13, textAlign: "left" }}>
              <ReqRow ok label="Score" value={`${score} · ${tier.short}`}/>
              <ReqRow ok label="Win rate" value={`${winRate}%`}/>
              <ReqRow ok label="Max drawdown" value={`${drawdown}%`}/>
              <ReqRow ok label="Net PnL" value={`+${fmtUSDc(pnl)}`}/>
              <ReqRow ok label="Days running" value={day}/>
              <ReqRow ok label="History verified" value="Hyperliquid"/>
            </div>
          </div>

          <div className="label-mono" style={{ marginBottom: 12 }}>// YOU_ARE_ELIGIBLE_TO_BORROW</div>
          <div style={{ background: "var(--card-tint)", border: "1px solid var(--border-2)", borderRadius: 10, padding: 24, marginBottom: 28 }}>
            <div style={{ display: "flex", justifyContent: "space-between", padding: "4px 0", fontSize: 13 }}>
              <span className="muted">Score-based base</span>
              <span className="mono">{fmtUSD(baseLoan)}</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", padding: "4px 0", fontSize: 13 }}>
              <span className="muted">$CREDIT boost</span>
              <span className="mono accent">+ {fmtUSD(creditBoost)}</span>
            </div>
            <div style={{ height: 1, background: "var(--border)", margin: "12px 0" }}/>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ color: "var(--fg)" }}>Total credit line</span>
              <span className="mono" style={{ fontSize: 32, color: "var(--accent)", fontWeight: 500 }}>{fmtUSD(total)}</span>
            </div>
            <div className="muted text-xs" style={{ marginTop: 10, fontFamily: "'DM Mono', monospace", letterSpacing: 1 }}>
              OPEN_ENDED · 1% BORROW_FEE · 50/50 PROFIT_SHARE · {tier.ltv}% LTV
            </div>
          </div>

          <p className="muted" style={{ fontSize: 12, marginBottom: 20, lineHeight: 1.6 }}>
            Your {day} days of demo history carries over.<br/>
            Verified against Hyperliquid public data within 0.1% price tolerance.
          </p>

          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <button className="btn btn-primary btn-lg btn-block" onClick={onContinue}>DEPLOY WITH REAL CAPITAL → GET FUNDED</button>
            <div className="row gap-2" style={{ justifyContent: "center" }}>
              <button className="btn btn-secondary btn-sm" onClick={() => setShareOpen(true)}>SHARE YOUR RESULT</button>
              <button className="btn btn-ghost btn-sm" onClick={onKeepRunning}>KEEP RUNNING DEMO</button>
            </div>
          </div>
        </div>
      </div>

      {shareOpen && <ShareCardModal score={score} day={day} tier={tier} loan={total} onClose={() => setShareOpen(false)}/>}
    </div>
  );
}

function ShareCardModal({ score, day, tier, loan, onClose }) {
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" style={{ width: 480, padding: 24 }} onClick={(e) => e.stopPropagation()}>
        <div className="row between" style={{ marginBottom: 14 }}>
          <div className="label-mono">// SHARE_CARD</div>
          <button className="btn btn-ghost btn-sm" onClick={onClose}>CLOSE ×</button>
        </div>
        <div style={{ background: "var(--bg)", border: "1px solid var(--accent)", borderRadius: 10, padding: 24, marginBottom: 16 }}>
          <div style={{ marginBottom: 14 }}><HeroBars/></div>
          <div style={{ fontSize: 18, fontWeight: 600, color: "var(--fg)", lineHeight: 1.4 }}>
            My trading agent just qualified for a <span className="accent">{fmtUSDk(loan)} loan</span> on Agentics.credit
          </div>
          <div className="muted" style={{ fontSize: 12, marginTop: 8 }}>Built in 5 minutes · No code required</div>
          <div style={{ height: 1, background: "var(--border)", margin: "16px 0" }}/>
          <div className="row between" style={{ fontSize: 12, fontFamily: "'DM Mono', monospace" }}>
            <span>SCORE: {score}</span>
            <span style={{ color: tier.color }}>TIER: {tier.short.toUpperCase()}</span>
            <span>DAY {day}</span>
          </div>
          <div className="muted text-xs" style={{ marginTop: 12, textAlign: "center", fontFamily: "'DM Mono', monospace", letterSpacing: 1.5 }}>agentics.credit</div>
        </div>
        <div className="row gap-2" style={{ justifyContent: "center" }}>
          <button className="btn btn-secondary">COPY IMAGE</button>
          <button className="btn btn-primary">SHARE ON X</button>
        </div>
      </div>
    </div>
  );
}

/* =============================================================
   LIVE BORROWER VIEW
   ============================================================= */

function LiveBorrowerView({ onBack }) {
  const tier = tierForScore(782);

  // Aggregate metrics from settlements
  const totalPnl       = MOCK_SETTLEMENTS.reduce((s, x) => s + x.pnl, 0);
  const totalFees      = MOCK_SETTLEMENTS.reduce((s, x) => s + x.borrowFee, 0); // negative
  const totalProfShare = MOCK_SETTLEMENTS.reduce((s, x) => s + x.profitShare, 0); // negative
  const totalEarnings  = MOCK_SETTLEMENTS.reduce((s, x) => s + x.netToAgent, 0);
  const winDays        = MOCK_SETTLEMENTS.filter(x => x.pnl > 0).length;
  const totalDays      = MOCK_SETTLEMENTS.length;
  const winRate        = Math.round((winDays / totalDays) * 100);
  const utilization    = Math.round((MOCK_LOAN.drawn / MOCK_LOAN.creditLine) * 100);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="crumbs">// LIVE_BORROWER · ON_CHAIN</div>
          <h1>Your live agent</h1>
          <div className="muted" style={{ marginTop: 6, fontSize: 13 }}>
            Open-ended credit line · No fixed term · Daily settlements · 1% borrow fee + 50/50 profit share
          </div>
        </div>
        <div className="row gap-2">
          <button className="btn btn-ghost btn-sm" onClick={onBack}>← Back to Demo</button>
          <button className="btn btn-secondary btn-sm">+ DRAW MORE</button>
          <button className="btn btn-ghost btn-sm">↩ REPAY</button>
        </div>
      </div>

      {/* KPI STRIP */}
      <div className="kpi-strip" style={{ gridTemplateColumns: "repeat(5, 1fr)", marginBottom: 18 }}>
        <div className="kpi">
          <div className="k">CREDIT_LINE</div>
          <div className="v">{fmtUSDk(MOCK_LOAN.creditLine)}</div>
          <div className="delta">{tier.short.toUpperCase()} TIER</div>
        </div>
        <div className="kpi">
          <div className="k">DRAWN</div>
          <div className="v">{fmtUSDk(MOCK_LOAN.drawn)}</div>
          <div className="delta">{utilization}% utilised</div>
        </div>
        <div className="kpi">
          <div className="k">AVAILABLE</div>
          <div className="v accent">{fmtUSDk(MOCK_LOAN.available)}</div>
          <div className="delta up">ready to draw</div>
        </div>
        <div className="kpi">
          <div className="k">TOTAL_PNL</div>
          <div className="v" style={{ color: totalPnl >= 0 ? "var(--accent)" : "var(--red)" }}>{totalPnl >= 0 ? "+" : ""}{fmtUSDc(totalPnl)}</div>
          <div className="delta up">{MOCK_LOAN.daysOpen}d running</div>
        </div>
        <div className="kpi">
          <div className="k">NET_EARNINGS</div>
          <div className="v" style={{ color: totalEarnings >= 0 ? "var(--accent)" : "var(--red)" }}>{totalEarnings >= 0 ? "+" : ""}{fmtUSDc(totalEarnings)}</div>
          <div className="delta">after fees</div>
        </div>
      </div>

      {/* ROW 1 — Score + Credit Line + LTV */}
      <div className="grid-2" style={{ alignItems: "flex-start" }}>
        <Card title="YOUR_CREDIT_SCORE">
          <div style={{ display: "flex", justifyContent: "center", marginBottom: 14 }}>
            <ScoreDial score={782} label="LIVE_SCORE"/>
          </div>
          <div style={{ textAlign: "center", marginBottom: 16 }}><TierBadge tier={tier} big/></div>
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {MOCK_SIGNALS_LIVE.map(s => (
              <div key={s.label} className="signal-row">
                <span className="lbl">{s.label}</span>
                <div className="bar"><div className="fill" style={{ width: `${s.v}%` }}/></div>
                <span className="val">{s.v}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 16, padding: 12, background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 6, fontSize: 12 }}>
            <div className="row between"><span className="muted">ERC-8004 Identity</span><span className="accent">✓ Connected (+25 pts)</span></div>
            <div className="row between" style={{ marginTop: 4 }}><span className="muted">Last scored</span><span className="mono">2 hours ago</span></div>
            <div className="row between" style={{ marginTop: 4 }}><span className="muted">Next scoring</span><span className="mono">in 22 hours</span></div>
          </div>
        </Card>

        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <Card title="OPEN_CREDIT_LINE" glow>
            <div className="row between" style={{ marginBottom: 8, fontSize: 11, color: "var(--muted)" }}>
              <span className="f-mono">DRAWN / TOTAL_LINE</span>
              <span className="mono">{utilization}%</span>
            </div>
            <ProgressBar value={utilization}/>
            <div className="row between" style={{ marginTop: 6, fontSize: 11, color: "var(--muted)" }}>
              <span className="f-mono">{fmtUSDk(MOCK_LOAN.drawn)}</span>
              <span className="f-mono">/ {fmtUSDk(MOCK_LOAN.creditLine)}</span>
            </div>

            <div style={{ height: 1, background: "var(--border)", margin: "16px 0" }}/>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, fontSize: 12 }}>
              <RiskRow label="Origination fee"   value="1% on draw"/>
              <RiskRow label="Profit share"      value="50% to vault"/>
              <RiskRow label="Term"              value="OPEN_ENDED"/>
              <RiskRow label="Settlement"        value="DAILY · 23:59 UTC"/>
              <RiskRow label="Vault"             value="lcELITE"/>
              <RiskRow label="Opened"            value={MOCK_LOAN.openedAt}/>
            </div>

            <div className="row gap-2" style={{ marginTop: 16 }}>
              <button className="btn btn-primary btn-sm" style={{ flex: 1 }}>+ DRAW {fmtUSDk(MOCK_LOAN.available)}</button>
              <button className="btn btn-ghost btn-sm" style={{ flex: 1 }}>↩ REPAY DRAWN</button>
            </div>
          </Card>

          <Card title="LTV_MONITOR">
            <div className="row between" style={{ fontSize: 12, marginBottom: 4 }}><span className="muted">CURRENT</span><span className="mono accent">{MOCK_LOAN.ltv}%</span></div>
            <ProgressBar value={MOCK_LOAN.ltv} max={100}/>
            <div className="row between" style={{ fontSize: 11, color: "var(--muted)", marginTop: 6 }}>
              <span className="f-mono">SAFE_ZONE</span>
              <span className="f-mono">LIMIT {MOCK_LOAN.ltvLimit}%</span>
            </div>
            <div style={{ marginTop: 14, padding: 10, background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 4, fontSize: 11, color: "var(--fg-dim)", lineHeight: 1.55 }}>
              Liquidation triggers if LTV exceeds {MOCK_LOAN.ltvLimit}% for 60+ minutes. You'll get a margin-call alert at {MOCK_LOAN.ltvLimit - 5}%.
            </div>
          </Card>
        </div>
      </div>

      <div className="spacer"/>

      {/* ROW 2 — P&L chart + Earnings breakdown */}
      <div className="grid-2" style={{ alignItems: "flex-start" }}>
        <Card title={`P&L · CUMULATIVE · ${MOCK_LOAN.daysOpen}D`}>
          <div className="row between" style={{ marginBottom: 12 }}>
            <div>
              <div className="muted f-mono text-xs" style={{ letterSpacing: 1.5 }}>NET_PNL</div>
              <div className="mono" style={{ fontSize: 28, color: totalPnl >= 0 ? "var(--accent)" : "var(--red)" }}>
                {totalPnl >= 0 ? "+" : ""}{fmtUSDc(totalPnl)}
              </div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div className="muted f-mono text-xs" style={{ letterSpacing: 1.5 }}>WIN_RATE · 12D</div>
              <div className="mono" style={{ fontSize: 18, color: "var(--accent)" }}>{winRate}%</div>
            </div>
          </div>
          <AreaChart data={MOCK_PNL_CURVE} height={180} yMin={0} yMax={Math.max(...MOCK_PNL_CURVE.map(p => p.y)) * 1.1}/>
          <div className="row between" style={{ marginTop: 8, fontSize: 11, color: "var(--muted)", fontFamily: "'DM Mono', monospace" }}>
            <span>{MOCK_LOAN.openedAt}</span><span>TODAY</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 8, marginTop: 14 }}>
            <RiskRow label="Best day"   value={`+${fmtUSDc(Math.max(...MOCK_SETTLEMENTS.map(s => s.pnl)))}`}/>
            <RiskRow label="Worst day"  value={fmtUSDc(Math.min(...MOCK_SETTLEMENTS.map(s => s.pnl)))}/>
            <RiskRow label="Avg/day"    value={fmtUSDc(totalPnl / totalDays)}/>
          </div>
        </Card>

        <Card title="EARNINGS_BREAKDOWN">
          <div style={{ padding: 14, background: "var(--card-tint)", border: "1px solid var(--border-2)", borderRadius: 6, marginBottom: 14 }}>
            <div className="muted f-mono text-xs" style={{ letterSpacing: 1.5, marginBottom: 6 }}>// NET_TO_AGENT_LIFETIME</div>
            <div className="mono" style={{ fontSize: 32, color: totalEarnings >= 0 ? "var(--accent)" : "var(--red)" }}>
              {totalEarnings >= 0 ? "+" : ""}{fmtUSDc(totalEarnings)}
            </div>
          </div>

          <div className="waterfall">
            <WaterRow label="Gross PnL"             value={totalPnl}      sign="+"/>
            <WaterRow label="Borrow fee (1% APR)"   value={totalFees}     sign="−"/>
            <WaterRow label="Profit share (50/50)"  value={totalProfShare} sign="−"/>
            <div style={{ height: 1, background: "var(--border)", margin: "8px 0" }}/>
            <WaterRow label="Net to agent"          value={totalEarnings}  bold/>
          </div>

          <div style={{ marginTop: 16, padding: 12, background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 6, fontSize: 11, color: "var(--fg-dim)", lineHeight: 1.6 }}>
            <strong style={{ color: "var(--fg)" }}>Profit share only on winning days.</strong> Losing days: agent absorbs the loss, no profit share, but borrow fee still accrues. Net of fees lands in your wallet at <span className="mono">23:59 UTC</span> daily.
          </div>
        </Card>
      </div>

      <div className="spacer"/>

      {/* ROW 3 — Fee history */}
      <Card title="FEE_HISTORY · ALL_TIME">
        <div className="row gap-2" style={{ marginBottom: 14 }}>
          <FeeStat label="ORIGINATION_PAID"   value={fmtUSDc(3870)}     sub="2 draws · 1% each"/>
          <FeeStat label="BORROW_FEE_ACCRUED" value={fmtUSDc(Math.abs(totalFees))} sub={`${totalDays}d × $106/day`}/>
          <FeeStat label="PROFIT_SHARE_PAID"  value={fmtUSDc(Math.abs(totalProfShare))} sub={`${winDays} winning days`}/>
          <FeeStat label="TOTAL_FEES_PAID"    value={fmtUSDc(3870 + Math.abs(totalFees) + Math.abs(totalProfShare))} sub="lifetime · all-in" highlight/>
        </div>

        <table className="tbl">
          <thead>
            <tr>
              <th>TIMESTAMP</th>
              <th>TYPE</th>
              <th>DESCRIPTION</th>
              <th className="num">AMOUNT</th>
            </tr>
          </thead>
          <tbody>
            {MOCK_FEE_HISTORY.map((f, i) => (
              <tr key={i}>
                <td className="mono">{f.date}</td>
                <td>
                  <span className="mono" style={{
                    fontSize: 10,
                    padding: "3px 8px",
                    borderRadius: 3,
                    border: "1px solid",
                    borderColor: f.type === "ORIGINATION" ? "var(--amber)" : f.type === "PROFIT_SHARE" ? "var(--accent)" : "var(--border-2)",
                    color:       f.type === "ORIGINATION" ? "var(--amber)" : f.type === "PROFIT_SHARE" ? "var(--accent)" : "var(--fg-dim)",
                    letterSpacing: 1,
                  }}>{f.type}</span>
                </td>
                <td className="muted" style={{ fontSize: 12 }}>{f.desc}</td>
                <td className="num neg mono">{fmtUSDc(f.amt)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>

      <div className="spacer"/>

      {/* ROW 4 — Daily settlements */}
      <Card title="DAILY_SETTLEMENTS · WATERFALL">
        <table className="tbl">
          <thead>
            <tr>
              <th>DAY</th><th>DATE</th>
              <th className="num">GROSS_PNL</th>
              <th className="num">BORROW_FEE</th>
              <th className="num">PROFIT_SHARE</th>
              <th className="num">NET_TO_AGENT</th>
            </tr>
          </thead>
          <tbody>
            {MOCK_SETTLEMENTS.map(s => (
              <tr key={s.day}>
                <td className="mono">{s.day}</td>
                <td className="mono">{s.date}</td>
                <td className={`num mono ${s.pnl >= 0 ? "pos" : "neg"}`}>{s.pnl >= 0 ? "+" : ""}{fmtUSDc(s.pnl)}</td>
                <td className="num mono neg">{fmtUSDc(s.borrowFee)}</td>
                <td className="num mono" style={{ color: s.profitShare === 0 ? "var(--muted)" : "var(--red)" }}>
                  {s.profitShare === 0 ? "—" : fmtUSDc(s.profitShare)}
                </td>
                <td className={`num mono ${s.netToAgent >= 0 ? "pos" : "neg"}`} style={{ fontWeight: 500 }}>
                  {s.netToAgent >= 0 ? "+" : ""}{fmtUSDc(s.netToAgent)}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="muted text-xs" style={{ marginTop: 10, fontStyle: "italic", lineHeight: 1.55 }}>
          Profit share is <strong style={{ color: "var(--fg)" }}>50% on positive-PnL days only</strong>. Borrow fee accrues every day at 1% APR on drawn balance, regardless of PnL. Net settles to your wallet at 23:59 UTC.
        </div>
      </Card>
    </div>
  );
}

/* ── small helpers used by the borrower view ───────────────────── */
function WaterRow({ label, value, sign, bold }) {
  return (
    <div className="row between" style={{ padding: "6px 0", fontSize: bold ? 14 : 13 }}>
      <span style={{ color: bold ? "var(--fg)" : "var(--muted)" }}>{label}</span>
      <span className="mono" style={{
        color: bold ? (value >= 0 ? "var(--accent)" : "var(--red)") : (value >= 0 ? "var(--fg)" : "var(--red)"),
        fontWeight: bold ? 600 : 400,
        fontSize: bold ? 16 : 13,
      }}>
        {sign && (value >= 0 ? "+" : "")}{fmtUSDc(value)}
      </span>
    </div>
  );
}

function FeeStat({ label, value, sub, highlight }) {
  return (
    <div style={{
      flex: 1,
      padding: 12,
      background: highlight ? "var(--card-tint-2)" : "var(--bg)",
      border: "1px solid " + (highlight ? "var(--accent)" : "var(--border)"),
      borderRadius: 6,
    }}>
      <div className="muted f-mono text-xs" style={{ letterSpacing: 1.5, marginBottom: 6 }}>{label}</div>
      <div className="mono" style={{ fontSize: 18, color: highlight ? "var(--accent)" : "var(--fg)" }}>{value}</div>
      <div className="muted text-xs" style={{ marginTop: 3 }}>{sub}</div>
    </div>
  );
}

Object.assign(window, { AgentDashboard });