/* Global shell: Sidebar, TopBar, Toasts. Exported to window.SHELL. */
(function () {
  const I = window.ICONS;

  const NAV = [
    { id: "home",     label: "Home",          icon: I.home },
    { id: "inbox",    label: "Inbox",          icon: I.inbox,   badgeKey: "inbox" },
    { id: "leads",    label: "Leads",          icon: I.users,   badgeKey: "leads" },
    { id: "brief",    label: "Daily Brief",    icon: I.brief },
    { id: "reengage", label: "Re-engagement",  icon: I.target,  badgeKey: "reengage", warn: true },
    { id: "training", label: "Training",       icon: I.sliders },
    { id: "chat",     label: "Assistant Chat", icon: I.chat },
  ];

  function Sidebar({ route, setRoute, counts }) {
    return (
      <aside className="sidebar">
        <div className="brand">
          <span className="logo" style={{ fontSize: 30, letterSpacing: "0.12em", color: "var(--ink-soft)", whiteSpace: "nowrap" }}>CLO<span style={{ color: "var(--green-lift)" }}>$</span>ED</span>
        </div>

        <nav className="nav hide-scroll">
          <div className="nav-group-label eyebrow">Cockpit</div>
          {NAV.map(n => {
            const c = n.badgeKey ? counts[n.badgeKey] : 0;
            return (
              <div key={n.id} className={`nav-item ${route === n.id ? "active" : ""}`} onClick={() => setRoute(n.id)}>
                <n.icon />
                <span className="nav-text">{n.label}</span>
                {c > 0 && <span className={`nav-badge ${n.hot ? "hot" : ""} ${n.warn ? "warn" : ""}`}>{c}</span>}
              </div>
            );
          })}
        </nav>

        <div className="sidebar-foot">
          <div className="avatar" style={{ borderColor: "var(--gold-strong)" }}>AM</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>Andrew Madrigal</div>
            <div className="mono" style={{ fontSize: 9.5, color: "var(--ink-faint)", letterSpacing: "0.1em", textTransform: "uppercase" }}>NMLS #1833965</div>
          </div>
          <div className="live-dot" title="Assistant online"></div>
        </div>
      </aside>
    );
  }

  const TITLES = {
    home: "Overview", approvals: "Approvals Queue", inbox: "Comms Inbox", leads: "Leads & Pipeline",
    brief: "Daily Brief", reengage: "Re-engagement", training: "Training Rules", chat: "Assistant",
  };

  function TopBar({ route, setRoute, theme, toggleTheme, counts }) {
    return (
      <header className="topbar">
        <span className="page-title">{TITLES[route] || ""}</span>
        <div className="topbar-spacer"></div>

        <div className="search">
          <I.search width={15} height={15} />
          <input placeholder="Search leads, messages…" />
          <kbd>/</kbd>
        </div>

        <button className={`approval-pill ${counts.inbox === 0 ? "zero" : ""}`} onClick={() => setRoute("inbox")}>
          <span className="count">{counts.inbox}</span>
          <span>Need reply</span>
        </button>

        <button className="icon-btn" title="Notifications">
          <I.bell />
        </button>
        <button className="icon-btn" onClick={toggleTheme} title="Toggle theme">
          {theme === "dark" ? <I.sun /> : <I.moon />}
        </button>
      </header>
    );
  }

  function Toasts({ toasts, dismiss }) {
    return (
      <div className="toast-wrap">
        {toasts.map(t => (
          <div key={t.id} className={`toast ${t.out ? "out" : ""}`} onClick={() => dismiss(t.id)}>
            <div style={{ marginTop: 1, color: "var(--green-lift)", flexShrink: 0 }}>
              {t.icon === "msg" ? <I.msg width={18} height={18} /> : <I.bolt width={18} height={18} />}
            </div>
            <div style={{ flex: 1 }}>
              <div className="mono" style={{ fontSize: 9.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-faint)", marginBottom: 4 }}>
                {t.eyebrow}
              </div>
              <div style={{ fontSize: 13, lineHeight: 1.45 }}>{t.body}</div>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
              <span className="live-dot"></span>
            </div>
          </div>
        ))}
      </div>
    );
  }

  window.SHELL = { Sidebar, TopBar, Toasts, NAV };
})();