/* global React, AURA_DATA */
const { useState, useEffect } = React;
const D = window.AURA_DATA;

const Icon = {
  search: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>,
  bell: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 8a6 6 0 0112 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 004 0"/></svg>,
  dash: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>,
  trades: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></svg>,
  history: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
  perf: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3v18h18"/><path d="M7 14l4-4 3 3 5-5"/></svg>,
  bot: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="4" y="8" width="16" height="11" rx="2"/><path d="M12 8V4M8 4h8"/><circle cx="9" cy="13" r="1.2"/><circle cx="15" cy="13" r="1.2"/></svg>,
  acct: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 7h18v10H3z"/><path d="M3 11h18M7 15h2"/></svg>,
  shield: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7z"/></svg>,
  analytics: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 3v18h18"/><rect x="7" y="12" width="3" height="6"/><rect x="12" y="8" width="3" height="10"/><rect x="17" y="5" width="3" height="13"/></svg>,
  user: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a6 6 0 016-6h4a6 6 0 016 6v1"/></svg>,
  help: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 015 0c0 2-2.5 2-2.5 4M12 17h.01"/></svg>,
  play: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 4l14 8-14 8z"/></svg>,
  stop: <svg viewBox="0 0 24 24" fill="currentColor"><rect x="5" y="5" width="14" height="14"/></svg>,
  refresh: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 12a9 9 0 0115-6.7L21 8M21 4v4h-4M21 12a9 9 0 01-15 6.7L3 16M3 20v-4h4"/></svg>,
  settings: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1.1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3H9a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8V9a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z"/></svg>,
  download: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 4v12m0 0l-4-4m4 4l4-4M4 20h16"/></svg>,
  plus: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 5v14M5 12h14"/></svg>,
  more: <svg viewBox="0 0 24 24" fill="currentColor"><circle cx="6" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="18" cy="12" r="1.5"/></svg>,
  x: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M18 6L6 18"/></svg>,
  alert: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 3l10 18H2z"/><path d="M12 10v5M12 18h.01"/></svg>,
  dollar: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2v20M17 6H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>,
  target: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1"/></svg>,
  activity: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 12h4l3-9 4 18 3-9h4"/></svg>,
  arrowUp: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M7 14l5-5 5 5"/></svg>,
  arrowDown: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M7 10l5 5 5-5"/></svg>,
  zap: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg>,
  signal: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M2 12h4M18 12h4M12 2v4M12 18v4"/><circle cx="12" cy="12" r="4"/></svg>,
};

const SunIcon = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>;
const MoonIcon = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>;

function TopBar({ onNav, marketOpen, theme, onToggleTheme, user }) {
  const initials = user ? user.name.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase() : "?";
  return (
    <div className="topbar">
      <div className="brand">
        <img className="brand-mark" src="/logo.png" alt="AURA" />
        <span>AURA</span>
      </div>
      <div className="topbar-search">
        <span style={{ width: 14, height: 14 }}>{Icon.search}</span>
        <input placeholder="Search trades, settings..." />
        <kbd>⌘K</kbd>
      </div>
      <div className={`market-pill ${marketOpen ? "" : "closed"}`}>
        <span className="dot"></span>
        <span>XAUUSD {marketOpen ? "OPEN" : "CLOSED"}</span>
        <span style={{ color: "var(--text-3)" }}>•</span>
        <span style={{ color: "var(--text-2)" }}>24/5 · {marketOpen ? "Closes Fri 22:00 GMT" : "Opens Mon 00:00 GMT"}</span>
      </div>
      <div className="topbar-spacer"></div>
      <div className="row" style={{ gap: 4 }}>
        <button className="icon-btn" title={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"} onClick={onToggleTheme}>
          {theme === "dark" ? SunIcon : MoonIcon}
        </button>
        <button className="icon-btn" title="Notifications">{Icon.bell}<span className="badge"></span></button>
      </div>
      <div className="user-chip" onClick={() => onNav("profile")}>
        <span className="avatar">{initials}</span>
        <span>{user ? user.name.split(" ")[0] : "Account"}</span>
      </div>
    </div>
  );
}

function Sidebar({ active, onNav, balance, dayPnL, openCount }) {
  const Item = ({ id, icon, children, count }) => (
    <div className={`nav-item ${active === id ? "active" : ""}`} onClick={() => onNav(id)}>
      <span>{icon}</span>
      <span>{children}</span>
      {count != null && <span className="count">{count}</span>}
    </div>
  );
  return (
    <div className="sidebar">
      <div className="nav-section">Overview</div>
      <Item id="dashboard" icon={Icon.dash}>Dashboard</Item>
      <Item id="analytics" icon={Icon.analytics}>Analytics</Item>

      <div className="nav-section">Trading</div>
      <Item id="active" icon={Icon.trades} count={openCount > 0 ? openCount : null}>Active Trades</Item>
      <Item id="history" icon={Icon.history}>Trade History</Item>
      <Item id="signals" icon={Icon.signal}>Signal Log</Item>
      <Item id="performance" icon={Icon.perf}>Performance</Item>

      <div className="nav-section">Configuration</div>
      <Item id="bot" icon={Icon.bot}>Bot Settings</Item>
      <Item id="accounts" icon={Icon.acct}>MT5 Accounts</Item>
      <Item id="risk" icon={Icon.shield}>Risk Management</Item>

      <div className="nav-section">Account</div>
      <Item id="profile" icon={Icon.user}>Profile</Item>
      <Item id="help" icon={Icon.help}>Help & Docs</Item>

      <div className="sidebar-footer">
        <div className="mini-stat">
          <span className="label">Balance</span>
          <span className="val mono">{balance != null ? "$" + balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : "—"}</span>
        </div>
        <div className="mini-stat">
          <span className="label">Today P&L</span>
          <span className={`val mono ${dayPnL >= 0 ? "pos" : ""}`}>{D.fmtSigned(dayPnL || 0)}</span>
        </div>
        <div className="mini-stat">
          <span className="label">Plan</span>
          <span className="val mono" style={{ color: "var(--accent)" }}>FREE</span>
        </div>
      </div>
    </div>
  );
}

function Tape() {
  const t = [
    { s: "XAUUSD", p: "—", c: 0, sub: "Spot Gold" },
    { s: "DXY", p: "—", c: 0, sub: "Dollar Index" },
    { s: "US10Y", p: "—", c: 0, sub: "10Y Yield" },
    { s: "VIX", p: "—", c: 0, sub: "Volatility" },
    { s: "ATR(M15)", p: "—", c: 0, sub: "Avg True Range" },
    { s: "SPREAD", p: "—", c: 0, sub: "Live" },
  ];
  const items = [...t, ...t];
  return (
    <div className="tape">
      <div className="tape-track">
        {items.map((it, i) => (
          <div key={i} className="tape-item">
            <span className="s">{it.s}</span>
            <span className="p">{it.p}</span>
            <span style={{ color: "var(--text-3)", fontSize: 10 }}>{it.sub}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { TopBar, Sidebar, Tape, Icon });