// Mock desktop app window — matches the real aican.trade desktop UI screenshot
function DesktopApp({ accent = '#00E0B8', accent2 = '#FF3D6E' }) {
  const [tick, setTick] = React.useState(0);
  const [mode, setMode] = React.useState('standard');

  React.useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 1400);
    return () => clearInterval(id);
  }, []);

  // Candlestick data — XAUUSD-ish uptrend
  const candles = React.useMemo(() => {
    const out = [];
    let p = 4680;
    for (let i = 0; i < 70; i++) {
      const drift = 0.6 + Math.sin(i * 0.18) * 0.4;
      const vol = 4 + Math.abs(Math.sin(i * 0.4 + tick * 0.05)) * 6;
      const o = p;
      const c = p + drift + (Math.sin(i * 1.3 + tick * 0.1) * vol);
      const h = Math.max(o, c) + Math.random() * 3 + 1;
      const l = Math.min(o, c) - Math.random() * 3 - 1;
      out.push({ o, c, h, l });
      p = c;
    }
    return out;
  }, [tick]);

  const cMin = Math.min(...candles.map(k => k.l));
  const cMax = Math.max(...candles.map(k => k.h));
  const cRange = cMax - cMin;
  const candleW = 540 / candles.length;
  const candleY = v => 12 + ((cMax - v) / cRange) * 156;

  // Fibonacci levels (right-side labels)
  const fibs = [
    { lvl: '361.8% E', px: '4725.91', col: '#5dd6ff' },
    { lvl: '261.8% E', px: '4732.43', col: accent },
    { lvl: '200.0% E', px: '4735.23', col: '#5dd6ff' },
    { lvl: '161.8% E', px: '4735.89', col: accent },
    { lvl: '100.0% E', px: '4736.13', col: accent2 },
    { lvl: '78.6% R',  px: '4734.67', col: accent2 },
    { lvl: '61.8% R',  px: '4735.53', col: accent2 },
    { lvl: '50.0% R',  px: '4736.13', col: accent2 },
  ];

  const sessions = [
    { lbl: '1H 0',     px: '4722.87', col: '#ffe26a' },
    { lbl: 'NY H',     px: '4722.87', col: '#ffe26a' },
    { lbl: 'Asian H',  px: '4721.28', col: '#ff9ad8' },
    { lbl: 'London L', px: '4692.40', col: '#ff9ad8' },
    { lbl: 'Asian L',  px: '4677.05', col: '#ff9ad8' },
    { lbl: '1H L',     px: '4660.26', col: '#ffb627' },
    { lbl: 'NY L',     px: '4660.26', col: '#ffb627' },
  ];

  const news = [
    { t: '15:30:00', cur: 'USD', name: 'Initial Jobless Claims', val: null, dot: accent2 },
    { t: '11:59:00', cur: 'EUR', name: '10-Year OAT Auction',    val: '3.61',  dot: '#5a5a66' },
    { t: '12:00:00', cur: 'EUR', name: 'Retail Sales m/m',        val: '−0.1',  dot: '#5a5a66' },
    { t: '12:00:00', cur: 'EUR', name: 'Retail Sales y/y',        val: '1.2',   dot: '#5a5a66' },
    { t: '12:43:00', cur: 'EUR', name: '3-Year Bonos Auction',    val: '2.675', dot: '#5a5a66' },
  ];

  // RSI line
  const rsi = React.useMemo(() => {
    const pts = [];
    for (let i = 0; i < 70; i++) {
      const v = 50 + Math.sin(i * 0.5 + tick * 0.07) * 22 + Math.cos(i * 0.18) * 10;
      pts.push(Math.max(15, Math.min(85, v)));
    }
    return pts;
  }, [tick]);

  return (
    <div className="da-window">
      {/* macOS chrome */}
      <div className="da-chrome">
        <div className="da-traffic">
          <span style={{ background: '#FF5F57' }}></span>
          <span style={{ background: '#FEBC2E' }}></span>
          <span style={{ background: '#28C840' }}></span>
        </div>
        <div className="da-title">aican.trade</div>
        <div className="da-meta"></div>
      </div>

      {/* Top header bar */}
      <div className="da-topbar">
        <div className="da-brand">
          <div className="da-brand-mark">
            <svg viewBox="0 0 64 64" width="22" height="22"><defs><linearGradient id="dab" x1="0" y1="0" x2="64" y2="64"><stop offset="0" stopColor={accent}/><stop offset="1" stopColor={accent2}/></linearGradient></defs><path d="M32 3 L57 17.5 L57 46.5 L32 61 L7 46.5 L7 17.5 Z" stroke="url(#dab)" strokeWidth="2" fill="none"/><rect x="16" y="22" width="8" height="14" fill="url(#dab)"/><rect x="28" y="18" width="8" height="22" fill="#0d0d0f" stroke="url(#dab)" strokeWidth="1.6"/><rect x="40" y="26" width="8" height="12" fill="url(#dab)"/></svg>
          </div>
          <div className="da-brand-txt">
            <div className="da-brand-name" style={{ color: accent }}>aican.trade</div>
            <div className="da-brand-sub">Autonomous AI Trading Desk</div>
          </div>
          <div className="da-idle"><span className="da-idle-dot"></span>Idle</div>
        </div>

        <div className="da-stats">
          <div className="da-stat-pill"><span className="da-stat-icon">$</span><span className="da-stat-val">$25,000</span></div>
          <div className="da-stat-pill"><span className="da-stat-icon">▥</span><span className="da-stat-val">Trades <strong>148</strong> <em>(3 open)</em></span></div>
          <div className="da-stat-pill"><span className="da-stat-icon" style={{color: accent}}>↗</span><span className="da-stat-val">Net P/L <strong style={{color: accent}}>+$4,218.40</strong></span></div>
          <div className="da-stat-pill"><span className="da-stat-icon">📰</span><span className="da-stat-val">News <span className="da-news-pill" style={{background: accent2}}>1</span> <span className="da-news-pill amber">9</span> <em>14</em></span></div>
        </div>

        <div className="da-top-right">
          <button className="da-icon-btn">⚙</button>
          <button className="da-live-btn" style={{ borderColor: accent, color: accent }}>
            <span className="da-live-dot" style={{ background: accent }}></span> Live
          </button>
        </div>
      </div>

      {/* Body */}
      <div className="da-body">
        {/* Sidebar */}
        <aside className="da-side">
          <div className="da-mt5">
            <div className="da-mt5-head">
              <span className="da-wifi" style={{ color: accent }}>📶</span>
              <div>
                <div className="da-mt5-title">MT5 Connected</div>
                <div className="da-mt5-acct">Account #5050134653</div>
              </div>
              <span className="da-mt5-dot" style={{ background: accent }}></span>
            </div>
            <div className="da-balance">
              <div className="da-balance-l">BALANCE</div>
              <div className="da-balance-v">$29,218.40</div>
            </div>
          </div>

          <div className="da-budget">
            <span><span style={{color: accent}}>$</span> BUDGET</span>
            <span className="da-budget-r">1× $25,000 ▾</span>
          </div>

          <div className="da-perf-head">
            <span><span className="da-perf-icon" style={{color: accent}}>◎</span> PERFORMANCE</span>
            <span className="da-reset">↻ Reset</span>
          </div>
          <div className="da-perf-grid">
            <div className="da-perf-cell">
              <div className="da-perf-l">⇄ TOTAL TRADES</div>
              <div className="da-perf-v">148</div>
            </div>
            <div className="da-perf-cell">
              <div className="da-perf-l">◎ WIN RATE</div>
              <div className="da-perf-v" style={{ color: accent }}>62.2%</div>
            </div>
            <div className="da-perf-cell">
              <div className="da-perf-l">↗ NET P/L</div>
              <div className="da-perf-v" style={{ color: accent }}>+$4,218.40</div>
            </div>
            <div className="da-perf-cell">
              <div className="da-perf-l">◎ PROFIT FACTOR</div>
              <div className="da-perf-v">2.81</div>
            </div>
          </div>

          <div className="da-active-head">
            <span>● ACTIVE TRADES</span>
            <span className="da-active-pill" style={{ background: accent }}>1</span>
          </div>
          <div className="da-active-card">
            <div className="da-active-row">
              <span><span style={{color: accent}}>●</span> 92 win <span style={{color: accent2, marginLeft: 8}}>●</span> 56 loss</span>
              <span style={{color: accent}}>+$4,218.40</span>
            </div>
            <div className="da-active-row sub">
              <span>+$5,914.20</span>
              <span>−$1,695.80</span>
            </div>
            <div className="da-active-bar"><span style={{ width: '38%', background: accent }}></span></div>
            <div className="da-active-line"><span>$ Risk Used</span><strong>$9,500 / $25,000</strong></div>
            <div className="da-active-line"><span>$ Available</span><strong style={{color: accent}}>$15,500</strong></div>
            <div className="da-active-line"><span>$ Budget</span><strong>$25,000</strong></div>
            <div className="da-active-line"><span>$ Balance</span><strong>$29,218.40</strong></div>
          </div>

          <div className="da-pair-card">
            <span className="da-pair-spark">⌇</span>
            <div className="da-pair-body">
              <div className="da-pair-top"><strong>USDCAD</strong><span className="da-pair-side" style={{ background: accent2 }}>SELL</span></div>
              <div className="da-pair-sub">1M · AI Analysis</div>
            </div>
            <span style={{color: accent, fontFamily: 'var(--font-mono)'}}>+$182.40 ▾</span>
          </div>
        </aside>

        {/* Center */}
        <main className="da-center">
          <div className="da-live-tab">⚡ Live Trading</div>

          <div className="da-trademode">
            <div className="da-tm-head">
              <span>◇ TRADE MODE</span>
              <button className="da-resume" style={{ borderColor: accent, color: accent }}>▶ Resume</button>
            </div>
            <div className="da-tm-grid">
              <button
                className={`da-tm-card ${mode === 'conservative' ? 'active' : ''}`}
                onClick={() => setMode('conservative')}
                style={mode === 'conservative' ? { borderColor: accent, boxShadow: `0 0 0 1px ${accent}, 0 0 30px -8px ${accent}` } : {}}
              >
                <div className="da-tm-row">
                  <span>🛡 Conservative</span>
                  <span className="da-tm-active" style={{ color: accent }}>● ACTIVE</span>
                </div>
                <div className="da-tm-running">4/4 running</div>
              </button>
              <button
                className={`da-tm-card ${mode === 'standard' ? 'active' : ''}`}
                onClick={() => setMode('standard')}
                style={mode === 'standard' ? { borderColor: '#A78BFA', boxShadow: `0 0 0 1px #A78BFA, 0 0 30px -6px rgba(167,139,250,0.6)` } : {}}
              >
                <div className="da-tm-row">
                  <span>▤ <strong>Standard</strong></span>
                  <span className="da-tm-active" style={{ color: '#C4B5FD' }}>● ACTIVE</span>
                </div>
                <div className="da-tm-running">38/38 running</div>
              </button>
            </div>
          </div>

          <div className="da-livechart">
            <h3 className="da-lc-title">Live Chart</h3>
            <div className="da-lc-sub">XAUUSD with canonical EW+RSI annotations (mirrors Gold panel)</div>

            <div className="da-lc-toolbar">
              <button className="da-lc-tab active" style={{ background: accent, color: '#0a0a0c' }}>Gold</button>
              <button className="da-lc-tab">Forex</button>
              <span className="da-lc-tf">TF <span className="da-lc-tf-pill">1M ▾</span></span>
              <span className="da-lc-clock">15:58:17</span>
              <button className="da-lc-refresh">↻ Refresh</button>
            </div>

            <div className="da-lc-chart">
              <svg viewBox="0 0 600 200" width="100%" height="200" preserveAspectRatio="none">
                {/* grid */}
                <g stroke="#ffffff" strokeOpacity="0.05">
                  {[40, 80, 120, 160].map(y => <line key={y} x1="0" y1={y} x2="540" y2={y} />)}
                </g>
                {/* dotted EW pivot lines */}
                <line x1="50" y1="148" x2="500" y2="60" stroke={accent} strokeOpacity="0.4" strokeDasharray="3 3" strokeWidth="1"/>
                <line x1="200" y1="120" x2="500" y2="60" stroke={accent} strokeOpacity="0.5" strokeDasharray="3 3" strokeWidth="1"/>
                {/* EW labels */}
                <g fontFamily="JetBrains Mono, monospace" fontSize="10" fill={accent}>
                  <rect x="42" y="138" width="16" height="14" fill="#0d0d0f" stroke={accent} strokeOpacity="0.6"/>
                  <text x="46" y="149">0</text>
                  <rect x="195" y="113" width="14" height="14" fill="#0d0d0f" stroke={accent} strokeOpacity="0.6"/>
                  <text x="199" y="124">I</text>
                </g>
                {/* candles */}
                {candles.map((k, i) => {
                  const x = i * candleW + 4;
                  const isUp = k.c >= k.o;
                  const col = isUp ? accent : accent2;
                  const bodyTop = candleY(Math.max(k.o, k.c));
                  const bodyBot = candleY(Math.min(k.o, k.c));
                  return (
                    <g key={i}>
                      <line x1={x + candleW / 2} y1={candleY(k.h)} x2={x + candleW / 2} y2={candleY(k.l)} stroke={col} strokeWidth="0.8"/>
                      <rect x={x + 1} y={bodyTop} width={candleW - 2} height={Math.max(1, bodyBot - bodyTop)} fill={col}/>
                    </g>
                  );
                })}
                {/* head dot */}
                <circle cx={candles.length * candleW + 4} cy={candleY(candles[candles.length-1].c)} r="3" fill={accent}>
                  <animate attributeName="opacity" values="1;0.3;1" dur="1.4s" repeatCount="indefinite"/>
                </circle>
                {/* TV watermark */}
                <g opacity="0.5">
                  <rect x="6" y="178" width="14" height="14" rx="2" fill="#2962FF"/>
                  <text x="9" y="189" fontFamily="Geist" fontSize="11" fontWeight="700" fill="#fff">T</text>
                </g>
                {/* x-axis labels */}
                <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#8a8a96">
                  {['15:00','18:00','20:30','7','03:30','06:00','09:00','12:00'].map((t, i) => (
                    <text key={t} x={20 + i * 70} y="195">{t}</text>
                  ))}
                </g>
              </svg>

              {/* fib labels right */}
              <div className="da-fibs">
                {fibs.map((f, i) => (
                  <div key={i} className="da-fib" style={{ background: f.col, color: '#0a0a0c' }}>
                    <span>{f.lvl}</span><span>{f.px}</span>
                  </div>
                ))}
                <div className="da-fib-pause">⏸</div>
              </div>
            </div>

            {/* RSI panel */}
            <div className="da-rsi">
              <svg viewBox="0 0 600 90" width="100%" height="90" preserveAspectRatio="none">
                <g stroke="#ffffff" strokeOpacity="0.06">
                  <line x1="0" y1="22" x2="540" y2="22" strokeDasharray="2 3" stroke={accent2} strokeOpacity="0.4"/>
                  <line x1="0" y1="45" x2="540" y2="45" strokeDasharray="2 3"/>
                  <line x1="0" y1="68" x2="540" y2="68" strokeDasharray="2 3" stroke={accent} strokeOpacity="0.4"/>
                </g>
                <path
                  d={rsi.map((v, i) => `${i === 0 ? 'M' : 'L'}${(i / (rsi.length-1)) * 540},${90 - (v * 0.9)}`).join(' ')}
                  fill="none" stroke="#5dd6ff" strokeWidth="1"
                />
                <g opacity="0.5">
                  <rect x="6" y="72" width="14" height="14" rx="2" fill="#2962FF"/>
                  <text x="9" y="83" fontFamily="Geist" fontSize="11" fontWeight="700" fill="#fff">T</text>
                </g>
                <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#8a8a96">
                  {['15:00','18:00','20:30','7','03:30','06:00','09:00','12:00'].map((t, i) => (
                    <text key={t} x={20 + i * 70} y="88">{t}</text>
                  ))}
                </g>
              </svg>
              <div className="da-rsi-labels">
                <div style={{ background: accent2, color: '#0a0a0c' }}>70 70.0</div>
                <div style={{ background: '#fff', color: '#0a0a0c' }}>50 50.0</div>
                <div style={{ background: accent, color: '#0a0a0c' }}>30 30.0</div>
                <div style={{ background: '#ffb627', color: '#0a0a0c' }}>22.7</div>
              </div>
            </div>
          </div>
        </main>

        {/* Right rail */}
        <aside className="da-right">
          <div className="da-news">
            <div className="da-news-head">
              <span>News <span className="da-news-hi" style={{ background: accent2 }}>1 HIGH</span></span>
              <span className="da-news-toggle" style={{ background: accent }}></span>
            </div>
            <div className="da-news-banner" style={{ color: accent2 }}>
              0-Year OAT Auction — Actual: 3.61 · EUR Retail Sales m/m
            </div>
            <div className="da-news-text">
              Blocks new trades before high-impact news, closes profitable positions for protection, and trades news surprises.
            </div>
            <div className="da-news-impact">
              <span>Impact Factor</span>
              <div className="da-impact-bar"><span style={{ width: '10%', background: '#9aa0a6' }}></span></div>
              <span>10%</span>
            </div>
            <div className="da-news-list">
              {news.map((n, i) => (
                <div key={i} className="da-news-row">
                  <span className="da-news-bullet" style={{ background: n.dot }}></span>
                  <span className="da-news-t">{n.t}</span>
                  <span className="da-news-cur">{n.cur}</span>
                  <span className="da-news-name">{n.name}</span>
                  <span className="da-news-val" style={{ color: n.val && n.val.startsWith('−') ? accent2 : '#c8c8d0' }}>{n.val || ''}</span>
                </div>
              ))}
            </div>
            <div className="da-news-legend">
              <span><span className="dot" style={{ background: accent2 }}></span>High</span>
              <span><span className="dot" style={{ background: '#ffb627' }}></span>Medium</span>
              <span><span className="dot" style={{ background: '#9aa0a6' }}></span>Low</span>
            </div>
          </div>

          <div className="da-comm">
            <div className="da-comm-head">◎ COMMISSION (10%)</div>
            <div className="da-comm-row"><span>Net Profit</span><strong>$4,218.40</strong></div>
            <div className="da-comm-row"><span>Commission Due</span><strong>$421.84</strong></div>
            <div className="da-comm-warn" style={{ color: '#ffb627' }}>⚠ Commission payment pending.</div>
          </div>

          <div className="da-license" style={{ borderColor: accent }}>
            <div className="da-license-head">⚹ LICENSE</div>
            <div className="da-license-body">
              <span className="da-license-check" style={{ color: accent }}>✓</span>
              <div>
                <div className="da-license-title" style={{ color: accent }}>Active License</div>
                <div className="da-license-key">TA-S-****-****</div>
                <div className="da-license-exp">Expires: 2026-06-04 <span className="da-days" style={{ background: 'rgba(0,224,184,0.15)', color: accent }}>28d left</span></div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

window.DesktopApp = DesktopApp;