/* Meridian — Dashboard Screen */

function DashboardScreen({ onNavigate }) {
  const positions = [
    { inst: "EURUSD", side: "Buy", size: "0.50", pl: "+18.40", plPct: "+0.31%" },
    { inst: "XAUUSD", side: "Sell", size: "0.10", pl: "+9.60", plPct: "+0.08%" },
    { inst: "GBPJPY", side: "Buy", size: "0.20", pl: "+10.00", plPct: "+0.06%" },
  ];
  const instruments = [
    { name: "EURUSD", val: "+$612", pct: 85 },
    { name: "XAUUSD", val: "+$487", pct: 70 },
    { name: "GBPJPY", val: "+$244", pct: 45 },
    { name: "USDJPY", val: "+$118", pct: 28 },
    { name: "BTCUSD", val: "−$94", pct: 15, neg: true },
    { name: "ETHUSD", val: "−$188", pct: 30, neg: true },
  ];
  /* Fake chart bars */
  const dailyBars = [40,60,30,80,20,55,70,90,45,35,65,50,85,25,60,75,40,95,30,55,70,45];
  const cumData = [10,15,18,22,30,28,35,40,38,45,52,55,60,58,65,70,72,78,82,88,90,95,100];

  return (
    <div className="app-page" data-screen-label="Dashboard">
      {/* Resume banner */}
      <div className="resume-banner" style={{ marginBottom: "var(--space-4)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: "var(--space-3)" }}>
          <Icon name="loader" size={20} color="var(--fg-muted)" />
          <div>
            <div style={{ fontWeight: "var(--w-semibold)", fontSize: "var(--text-sm)" }}>You're 4 steps from trading.</div>
            <div style={{ fontSize: "var(--text-xs)", color: "var(--fg-subtle)" }}>Step 2 of 5 · Make first deposit</div>
            <div className="resume-banner-progress"><div className="resume-banner-fill" style={{ width: "40%" }}></div></div>
          </div>
        </div>
        <button className="m-btn m-btn-dark" style={{ fontSize: 13, padding: "8px 16px" }} onClick={() => onNavigate("authorize")}>Resume onboarding</button>
      </div>

      {/* News ticker */}
      <div className="news-ticker" style={{ marginBottom: "var(--space-5)" }}>
        <span className="news-badge">Latest</span>
        <span style={{ color: "var(--fg-muted)", fontSize: "var(--text-sm)" }}>XAUUSD spreads tightened to 0.18 — through Friday.</span>
        <a href="#" style={{ marginLeft: "auto", fontSize: "var(--text-sm)", whiteSpace: "nowrap" }}>View all (3) →</a>
      </div>

      {/* Top cards: Account + Equity + MT5 */}
      <div className="grid-3" style={{ marginBottom: "var(--space-6)" }}>
        {/* Account balance */}
        <div className="m-card" style={{ padding: "var(--space-5)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: "var(--space-2)", marginBottom: "var(--space-3)" }}>
            <span style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)" }}>Trading account</span>
            <span style={{ fontSize: "var(--text-xs)", padding: "2px 8px", borderRadius: "var(--radius-pill)", background: "var(--bg-raised)", color: "var(--fg-muted)", fontFamily: "var(--font-sans)", fontVariantNumeric: "tabular-nums" }}>#50047231</span>
          </div>
          <div className="tnum" style={{ fontSize: 32, fontWeight: "var(--w-semibold)", marginBottom: 4 }}>$12,450.32 <span style={{ fontSize: "var(--text-sm)", fontWeight: "var(--w-regular)", color: "var(--fg-muted)" }}>USD</span></div>
          <div className="tnum" style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)" }}>P&L today: <span className="up">+$38.00 (+0.31%)</span></div>
          <div style={{ display: "flex", gap: "var(--space-2)", marginTop: "var(--space-4)" }}>
            <button className="m-btn m-btn-dark" style={{ flex: 1, padding: "10px" }} onClick={() => onNavigate("app-deposit")}>Deposit</button>
            <button className="m-btn m-btn-ghost" style={{ flex: 1, padding: "10px" }} onClick={() => onNavigate("withdraw")}>Withdraw</button>
          </div>
          <div style={{ textAlign: "center", marginTop: "var(--space-2)" }}>
            <a href="#" style={{ fontSize: "var(--text-xs)", color: "var(--fg-subtle)" }}>or transfer between accounts →</a>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: "var(--space-2)", marginTop: "var(--space-4)", padding: "var(--space-2) var(--space-3)", background: "var(--bg-raised)", borderRadius: "var(--radius-sm)", fontSize: "var(--text-xs)" }}>
            <span style={{ color: "var(--fg-muted)" }}>Earn from referrals — your code:</span>
            <span style={{ fontWeight: "var(--w-bold)", color: "var(--fg)" }}>RedLion</span>
            <button className="m-btn m-btn-ghost" style={{ padding: "2px 8px", fontSize: 11, marginLeft: "auto" }}>Copy link</button>
          </div>
        </div>

        {/* Equity stats */}
        <div className="m-card" style={{ padding: "var(--space-5)" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
            {[
              { label: "EQUITY", val: "12,488.32" },
              { label: "FREE MARGIN", val: "11,210.00" },
              { label: "MARGIN LEVEL", val: "512%" },
              { label: "OPEN P/L", val: "+38.00 / +0.31%", up: true },
              { label: "LEVERAGE", val: "1:500" },
            ].map((s, i) => (
              <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span className="label-upper">{s.label}</span>
                <span className={`tnum ${s.up ? "up" : ""}`} style={{ fontSize: "var(--text-body)", fontWeight: "var(--w-semibold)" }}>{s.val}</span>
              </div>
            ))}
          </div>
        </div>

        {/* MT5 connection */}
        <div className="m-card" style={{ padding: "var(--space-5)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: "var(--space-4)" }}>
            <span className="m-status-dot connected" style={{ width: 8, height: 8 }}></span>
            <span style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)" }}>MetaTrader connected · last sync 2s</span>
          </div>
          {[
            { label: "SERVER", val: "Meridian-MT5Real01" },
            { label: "LOGIN", val: "50047231" },
            { label: "PASSWORD", val: "••••••••" },
          ].map((c, i) => (
            <div key={i} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "8px 0", borderBottom: i < 2 ? "1px solid var(--border)" : "none" }}>
              <span className="label-upper" style={{ fontSize: 10 }}>{c.label}</span>
              <span className="tnum" style={{ fontSize: "var(--text-sm)", fontWeight: "var(--w-medium)" }}>{c.val}</span>
            </div>
          ))}
          <div style={{ marginTop: "var(--space-3)", fontSize: "var(--text-xs)", color: "var(--fg-subtle)" }}>
            Connection problem? <a href="#">See diagnostics</a>
          </div>
        </div>
      </div>

      {/* Trading section header */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "var(--space-4)" }}>
        <h2 style={{ fontSize: "var(--text-h3)", fontWeight: "var(--w-semibold)" }}>Your trading, last 30 days</h2>
        <a href="#" onClick={e => { e.preventDefault(); onNavigate("analytics"); }} style={{ fontSize: "var(--text-sm)" }}>View full analytics →</a>
      </div>

      {/* Chart row */}
      <div className="grid-2" style={{ marginBottom: "var(--space-4)" }}>
        <div className="chart-placeholder">
          <div className="chart-placeholder-header">
            <span className="label-upper">Cumulative P&L</span>
            <span className="tnum up" style={{ fontWeight: "var(--w-semibold)" }}>+$1,881</span>
          </div>
          <div className="chart-area" style={{ alignItems: "flex-end", borderBottom: "1px solid var(--border)" }}>
            {cumData.map((v, i) => (
              <div key={i} style={{ flex: 1, height: `${v}%`, background: "var(--accent)", opacity: 0.6 + (i / cumData.length) * 0.4, borderRadius: "1px 1px 0 0", minHeight: 2 }}></div>
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: "var(--text-xs)", color: "var(--fg-subtle)", marginTop: 4 }}>
            <span>Apr 14</span><span>May 13</span>
          </div>
        </div>
        <div className="chart-placeholder">
          <div className="chart-placeholder-header">
            <span className="label-upper">Daily P&L</span>
            <span className="tnum" style={{ fontWeight: "var(--w-semibold)" }}>15W · 7L</span>
          </div>
          <div className="chart-area" style={{ borderBottom: "1px solid var(--border)" }}>
            {dailyBars.map((v, i) => (
              <div key={i} className={`chart-bar ${i % 5 === 3 ? 'neg' : 'pos'}`} style={{ height: `${v}%` }}></div>
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: "var(--text-xs)", color: "var(--fg-subtle)", marginTop: 4 }}>
            <span>Apr 14</span><span>May 13</span>
          </div>
        </div>
      </div>

      {/* Win rate + By instrument */}
      <div className="grid-2" style={{ marginBottom: "var(--space-6)" }}>
        <div className="chart-placeholder">
          <div className="chart-placeholder-header">
            <span className="label-upper">Win rate</span>
            <span className="tnum" style={{ fontWeight: "var(--w-semibold)" }}>1.93R</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: "var(--space-6)", padding: "var(--space-4)" }}>
            <div style={{ width: 90, height: 90, borderRadius: "50%", background: `conic-gradient(var(--accent) 0deg 245deg, var(--sell) 245deg 360deg)`, display: "flex", alignItems: "center", justifyContent: "center" }}>
              <div style={{ width: 60, height: 60, borderRadius: "50%", background: "var(--bg-elevated)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
                <span className="tnum" style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-bold)" }}>68%</span>
                <span style={{ fontSize: 9, color: "var(--fg-subtle)" }}>win rate</span>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px 20px", fontSize: "var(--text-sm)" }}>
              <div><span className="label-upper" style={{ fontSize: 9 }}>Wins</span><div className="tnum" style={{ fontWeight: "var(--w-semibold)" }}>15</div></div>
              <div><span className="label-upper" style={{ fontSize: 9 }}>Losses</span><div className="tnum" style={{ fontWeight: "var(--w-semibold)" }}>7</div></div>
              <div><span className="label-upper" style={{ fontSize: 9 }}>Avg win</span><div className="tnum up" style={{ fontWeight: "var(--w-semibold)" }}>+$165</div></div>
              <div><span className="label-upper" style={{ fontSize: 9 }}>Avg loss</span><div className="tnum down" style={{ fontWeight: "var(--w-semibold)" }}>−$86</div></div>
            </div>
          </div>
        </div>
        <div className="chart-placeholder">
          <div className="chart-placeholder-header">
            <span className="label-upper">By instrument</span>
            <span style={{ fontSize: "var(--text-xs)", color: "var(--fg-subtle)" }}>last 30 days</span>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6, padding: "var(--space-2) 0" }}>
            {instruments.map((inst, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: "var(--text-sm)" }}>
                <span className="tnum" style={{ width: 60, fontWeight: "var(--w-medium)" }}>{inst.name}</span>
                <div style={{ flex: 1, height: 14, background: "var(--bg-raised)", borderRadius: 2, overflow: "hidden" }}>
                  <div style={{ width: `${inst.pct}%`, height: "100%", background: inst.neg ? "var(--sell)" : "var(--accent)", borderRadius: 2 }}></div>
                </div>
                <span className={`tnum ${inst.neg ? "down" : "up"}`} style={{ width: 60, textAlign: "right", fontWeight: "var(--w-medium)", fontSize: "var(--text-xs)" }}>{inst.val}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Open Positions */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "var(--space-3)" }}>
        <h2 style={{ fontSize: "var(--text-h3)", fontWeight: "var(--w-semibold)" }}>Open positions</h2>
        <a href="#" onClick={e => { e.preventDefault(); onNavigate("positions"); }} style={{ fontSize: "var(--text-sm)" }}>View all →</a>
      </div>
      <div className="m-card" style={{ padding: 0, overflowX: "auto", marginBottom: "var(--space-6)" }}>
        <table className="m-table">
          <thead><tr><th>Instrument</th><th>Side</th><th>Size</th><th style={{ textAlign: "right" }}>P/L (USD)</th><th style={{ textAlign: "right" }}>P/L (%)</th></tr></thead>
          <tbody>
            {positions.map((p, i) => (
              <tr key={i}>
                <td><a href="#" onClick={e => { e.preventDefault(); onNavigate("instrument"); }}>{p.inst}</a></td>
                <td>{p.side}</td>
                <td className="tnum">{p.size}</td>
                <td className="tnum up" style={{ textAlign: "right" }}>{p.pl}</td>
                <td className="tnum up" style={{ textAlign: "right" }}>{p.plPct}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Referral */}
      <div className="m-card" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "var(--space-3)", padding: "var(--space-4) var(--space-5)", marginBottom: "var(--space-6)" }}>
        <span style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)" }}>Refer traders, earn a share of their spread.</span>
        <div style={{ display: "flex", gap: "var(--space-3)", flexWrap: "wrap", alignItems: "center" }}>
          <button className="m-btn m-btn-ghost" style={{ padding: "8px 16px", fontSize: 13 }}>Affiliate program</button>
          <a href="#" style={{ fontSize: "var(--text-sm)" }}>Or apply to the IB program →</a>
        </div>
      </div>

      {/* Need a hand */}
      <h2 style={{ fontSize: "var(--text-h3)", fontWeight: "var(--w-semibold)", marginBottom: "var(--space-4)" }}>Need a hand?</h2>
      <div className="grid-2" style={{ marginBottom: "var(--space-6)" }}>
        <div className="m-card" style={{ cursor: "pointer" }} onClick={() => onNavigate("help")}>
          <span className="label-upper" style={{ marginBottom: 6, display: "block" }}>Self-service</span>
          <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: 6 }}>Fix something that broke</h3>
          <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", lineHeight: 1.5, marginBottom: "var(--space-3)" }}>Deposit not arriving, MT5 won't connect, withdrawal stuck — common issues with the steps to clear them.</p>
          <a href="#" onClick={e => e.preventDefault()} style={{ fontSize: "var(--text-sm)" }}>Open help center →</a>
        </div>
        <div className="m-card" style={{ cursor: "pointer" }}>
          <span className="label-upper" style={{ marginBottom: 6, display: "block" }}>Live diagnostics</span>
          <h3 style={{ fontSize: "var(--text-h4)", fontWeight: "var(--w-semibold)", marginBottom: 6 }}>MT5 connection problems</h3>
          <p style={{ fontSize: "var(--text-sm)", color: "var(--fg-muted)", lineHeight: 1.5, marginBottom: "var(--space-3)" }}>Step-by-step diagnostic if MT5 stops syncing or shows a different P&L than your account.</p>
          <a href="#" onClick={e => e.preventDefault()} style={{ fontSize: "var(--text-sm)" }}>Run diagnostics →</a>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DashboardScreen });