/* Meridian — App Shell (sidebar + topbar for post-onboarding screens) */

function AppTopbar({ theme, onNavigate }) {
  const R = (typeof window !== "undefined" && window.__resources) || {};
  const logoSrc = theme === "light" ? (R.logoColor || "assets/meridian-horizontal-color.png") : (R.logoLight || "assets/meridian-horizontal-light.png");
  return (
    <header className="app-topbar">
      <div className="app-topbar-left">
        <img src={logoSrc} alt="Meridian" className="m-topbar-logo" style={{ cursor: "pointer" }} onClick={() => onNavigate("landing")} />
        <a className="app-topbar-temp" onClick={() => onNavigate("signup")}>Onboarding [temp]</a>
      </div>
      <div className="app-topbar-right">
        <span className="app-live-badge app-hide-sm"><span className="app-live-dot"></span> Live</span>
        <span className="app-lang"><Icon name="globe" size={14} /> EN</span>
        <span className="app-notif">
          <Icon name="alertCircle" size={18} color="var(--fg-muted)" />
          <span className="app-notif-badge">3</span>
        </span>
        <button className="app-deposit-btn app-hide-sm" onClick={() => onNavigate("app-deposit")}>Deposit</button>
      </div>
    </header>
  );
}

/* Mobile-only horizontal tab nav (replaces hidden sidebar) */
function AppMobileNav({ active, onNavigate }) {
  const items = [
    { id: "dashboard", label: "Dashboard" },
    { id: "positions", label: "Positions" },
    { id: "account", label: "Account" },
    { id: "help", label: "Help" },
  ];
  return (
    <nav className="app-mobnav">
      {items.map(it => (
        <button key={it.id} className={`app-mobnav-item ${active === it.id ? "active" : ""}`}
          onClick={() => onNavigate(it.id)}>{it.label}</button>
      ))}
    </nav>
  );
}

function AppSidebar({ active, onNavigate }) {
  const links = [
    { id: "dashboard", label: "Dashboard" },
    { id: "analytics", label: "Analytics" },
    { id: "positions", label: "Positions" },
    { id: "app-deposit", label: "Deposit" },
    { id: "withdraw", label: "Withdraw" },
    { id: "account", label: "Account" },
    { id: "help", label: "Help" },
  ];
  return (
    <nav className="app-sidebar">
      {links.map(l => (
        <a key={l.id} className={`app-sidebar-link ${active === l.id ? "active" : ""}`}
          onClick={() => onNavigate(l.id)}>{l.label}</a>
      ))}
      <div className="app-sidebar-divider"></div>
      <a className="app-sidebar-temp" onClick={() => onNavigate("signup")} style={{ cursor: "pointer" }}>Onboarding (temp)</a>
      <div style={{ flex: 1 }}></div>
      <div className="app-status-bar" style={{ flexDirection: "column", gap: 6, padding: "var(--space-3) var(--space-6)" }}>
        <div className="app-status-item"><span className="app-status-dot"></span> MetaTrader connected</div>
        <div className="app-status-item"><span className="app-status-dot"></span> Markets connected</div>
      </div>
    </nav>
  );
}

function AppFooterCompact() {
  return (
    <footer className="app-footer-compact">
      <span>Trading involves significant risk. You can lose your money.</span>
      <div className="app-footer-links">
        <a href="#">Risk disclosure</a>
        <a href="#">Help</a>
        <a href="#">Status</a>
        <a href="#">Terms</a>
        <a href="#">Privacy</a>
      </div>
      <span>© 2026 Meridian</span>
    </footer>
  );
}

function AppShell({ active, onNavigate, theme, children }) {
  return (
    <div className="app-layout">
      <div style={{ display: "contents" }}>
        <div style={{ gridColumn: "1 / -1" }}>
          <AppTopbar theme={theme} onNavigate={onNavigate} />
        </div>
      </div>
      <AppSidebar active={active} onNavigate={onNavigate} />
      <div className="app-content">
        <AppMobileNav active={active} onNavigate={onNavigate} />
        {children}
        <AppFooterCompact />
      </div>
    </div>
  );
}

Object.assign(window, { AppTopbar, AppSidebar, AppMobileNav, AppFooterCompact, AppShell });