/* ============================================================
   VYRON App — shared UI components
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---------- Icons ---------- */
const I = {
  dash: "M3 13h8V3H3zM13 21h8V3h-8zM3 21h8v-6H3z",
  services: "M4 6h16M4 12h16M4 18h10",
  routing: "M6 3v6a3 3 0 003 3h6a3 3 0 013 3v6M6 21l-3-3 3-3M18 3l3 3-3 3",
  settle: "M3 10h18M3 7a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2z",
  stake: "M13 2L3 14h7l-1 8 10-12h-7z",
  discover: "M11 4a7 7 0 100 14 7 7 0 000-14zM21 21l-4.3-4.3",
  gov: "M3 21h18M5 21V10l7-5 7 5v11M9 21v-6h6v6",
  settings: "M12 15a3 3 0 100-6 3 3 0 000 6zM19.4 15a1.6 1.6 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.6 1.6 0 00-2.7.7 1.6 1.6 0 01-3.2 0 1.6 1.6 0 00-2.7-.7l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.6 1.6 0 00-1.5-2.7 1.6 1.6 0 010-3.2 1.6 1.6 0 001.5-2.7l-.1-.1a2 2 0 112.8-2.8l.1.1a1.6 1.6 0 002.7-.7 1.6 1.6 0 013.2 0 1.6 1.6 0 002.7.7l.1-.1a2 2 0 112.8 2.8l-.1.1a1.6 1.6 0 001.5 2.7 1.6 1.6 0 010 3.2 1.6 1.6 0 00-1.2.9z",
  plus: "M12 5v14M5 12h14",
  arrow: "M5 12h14M13 6l6 6-6 6",
  check: "M20 6L9 17l-5-5",
  x: "M18 6L6 18M6 6l12 12",
  bolt: "M13 2L3 14h7l-1 8 10-12h-7z",
  copy: "M8 8h12v12H8zM4 16V4h12",
  logout: "M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9",
  pulse: "M22 12h-4l-3 9L9 3l-3 9H2",
  up: "M12 19V5M5 12l7-7 7 7",
  search: "M11 4a7 7 0 100 14 7 7 0 000-14zM21 21l-4.3-4.3",
};
function Ic({ d, s = 18, sw = 1.7, fill = false }) {
  return <svg width={s} height={s} viewBox="0 0 24 24" fill={fill ? "currentColor" : "none"} stroke={fill ? "none" : "currentColor"} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"><path d={d} /></svg>;
}

/* ---------- Logo mark ---------- */
function Brand({ size = 30 }) {
  return (
    <div className="ap-brand">
      <img src="assets/logo.png" style={{ width: size, height: size, borderRadius: 8 }} alt="VYRON" />
      <span className="ap-wordmark">VYRON</span>
    </div>
  );
}

/* ---------- Sidebar ---------- */
const NAV = [
  ['dashboard', 'Dashboard', I.dash],
  ['services', 'My Services', I.services],
  ['routing', 'Routing', I.routing],
  ['settlement', 'Settlement', I.settle],
  ['staking', 'Staking', I.stake],
  ['discovery', 'Discover', I.discover],
  ['governance', 'Governance', I.gov],
  ['settings', 'Settings', I.settings],
];
function Sidebar({ route, setRoute, open, onClose }) {
  return (
    <aside className={"ap-side" + (open ? " open" : "")}>
      <div className="ap-side-top"><Brand /></div>
      <nav className="ap-nav">
        {NAV.map(([k, label, icon]) => (
          <button key={k} className={"ap-navitem" + (route === k ? " active" : "")} onClick={() => { setRoute(k); onClose && onClose(); }}>
            <Ic d={icon} s={18} /><span>{label}</span>
          </button>
        ))}
      </nav>
      <div className="ap-side-foot">
        <a className="ap-navitem" href="docs.html"><Ic d={I.discover} s={18} /><span>Docs</span></a>
        <a className="ap-navitem" href="index.html"><Ic d={I.logout} s={18} /><span>Back to site</span></a>
      </div>
    </aside>
  );
}

/* ---------- Top bar ---------- */
function TopBar({ state, onMenu, onLogout, setRoute }) {
  const [menu, setMenu] = useState(false);
  return (
    <header className="ap-top">
      <button className="ap-burger" onClick={onMenu} aria-label="Menu"><Ic d="M3 6h18M3 12h18M3 18h18" /></button>
      <div className="ap-net"><span className="ap-dot" /> Network · Operational</div>
      <div className="ap-top-right">
        <div className="ap-bal" onClick={() => setRoute('staking')}>
          <span className="ap-bal-l">Balance</span>
          <span className="ap-bal-v">{VY.fmt(state.balance)} <b>VYRON</b></span>
        </div>
        <a className="ap-xbtn" href="https://x.com/vyronprotocol" target="_blank" rel="noopener" aria-label="X">
          <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>
        </a>
        <div className="ap-user" onClick={() => setMenu(m => !m)}>
          <div className="ap-avatar">{(state.user.name || 'U')[0].toUpperCase()}</div>
          {menu && (
            <div className="ap-menu" onClick={e => e.stopPropagation()}>
              <div className="ap-menu-head">
                <div className="ap-menu-name">{state.user.name}</div>
                <div className="ap-menu-mail">{state.user.email}</div>
              </div>
              <button onClick={() => { setRoute('settings'); setMenu(false); }}><Ic d={I.settings} s={15} /> Settings</button>
              <button className="danger" onClick={onLogout}><Ic d={I.logout} s={15} /> Sign out</button>
            </div>
          )}
        </div>
      </div>
    </header>
  );
}

/* ---------- Page header ---------- */
function PageHead({ eyebrow, title, sub, actions }) {
  return (
    <div className="ap-pagehead">
      <div>
        <div className="ap-eyebrow">{eyebrow}</div>
        <h1>{title}</h1>
        {sub && <p>{sub}</p>}
      </div>
      {actions && <div className="ap-pagehead-act">{actions}</div>}
    </div>
  );
}

/* ---------- Stat card ---------- */
function Stat({ label, value, unit, delta, icon, accent }) {
  return (
    <div className="ap-stat">
      <div className="ap-stat-top">
        <span className="ap-stat-label">{label}</span>
        {icon && <span className="ap-stat-ic"><Ic d={icon} s={16} /></span>}
      </div>
      <div className="ap-stat-val" style={accent ? { color: 'var(--green)' } : null}>{value}{unit && <small> {unit}</small>}</div>
      {delta != null && <div className={"ap-stat-delta " + (delta >= 0 ? 'up' : 'down')}><Ic d={I.up} s={12} /> {delta >= 0 ? '+' : ''}{delta}%</div>}
    </div>
  );
}

/* ---------- Sparkline / bar chart ---------- */
function Bars({ data, height = 90 }) {
  const max = Math.max(...data, 1);
  return (
    <div className="ap-bars" style={{ height }}>
      {data.map((v, i) => (
        <div key={i} className="ap-bar" style={{ height: (v / max * 100) + '%' }} title={v} />
      ))}
    </div>
  );
}

/* ---------- Modal ---------- */
function Modal({ title, children, onClose, width = 480 }) {
  useEffect(() => {
    const h = e => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, []);
  return (
    <div className="ap-overlay" onClick={onClose}>
      <div className="ap-modal" style={{ maxWidth: width }} onClick={e => e.stopPropagation()}>
        <div className="ap-modal-head"><h3>{title}</h3><button onClick={onClose}><Ic d={I.x} s={18} /></button></div>
        <div className="ap-modal-body">{children}</div>
      </div>
    </div>
  );
}

/* ---------- Toast ---------- */
function Toast({ msg }) {
  return <div className="ap-toast"><Ic d={I.check} s={16} /> {msg}</div>;
}

/* ---------- Badge ---------- */
function Badge({ kind, children }) {
  return <span className={"ap-badge " + kind}>{children}</span>;
}

/* ---------- Field ---------- */
function Field({ label, ...props }) {
  return (
    <label className="ap-field">
      <span>{label}</span>
      <input {...props} />
    </label>
  );
}

Object.assign(window, {
  I, Ic, Brand, Sidebar, TopBar, PageHead, Stat, Bars, Modal, Toast, Badge, Field, NAV,
});