// Scene 3 — Admin portal shell.
// Sidebar + topbar + content. Persona-driven nav. Theme-aware. Hosts pages.

// Resolve a nav item's badge hint to a live count for the current tenant.
// The persona config uses symbolic strings ('cardholders', 'inbox') so the
// same persona definition works across tenants with different data volumes.
function resolveBadge(hint, customer) {
  if (typeof hint === 'number') return hint;
  if (hint === 'cardholders') return (window.GM_CARDHOLDERS[customer.id] || []).length;
  if (hint === 'inbox')       return (window.GM_REQUESTS[customer.id]    || []).length;
  return hint;
}

function GMAdminPortal({
  customer, persona, onChangePersona, onExitWorkspace,
  themeMode, onToggleMode,
}) {
  const [pageId, setPageId] = React.useState(persona.landing);
  const [railCollapsed, setRailCollapsed] = React.useState(false);
  const [personaMenu, setPersonaMenu] = React.useState(null);
  const [settingsMenu, setSettingsMenu] = React.useState(null);
  const [cpOpen, setCpOpen] = React.useState(false);
  const { toasts, push: pushToast } = useToasts();

  // Reset page when persona changes so user lands on that persona's home
  React.useEffect(() => { setPageId(persona.landing); }, [persona.id]);

  // ⌘K opens palette, ⌘B toggles rail
  React.useEffect(() => {
    const h = (e) => {
      const meta = e.metaKey || e.ctrlKey;
      if (meta && e.key.toLowerCase() === 'k') { e.preventDefault(); setCpOpen(o => !o); }
      if (meta && e.key.toLowerCase() === 'b') { e.preventDefault(); setRailCollapsed(c => !c); }
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, []);

  const nav = persona.nav;
  const navByGroup = nav.reduce((acc, n) => {
    (acc[n.group] = acc[n.group] || []).push(n);
    return acc;
  }, {});
  const groupLabels = { workspace: 'Workspace', manage: 'Manage', insight: 'Insight', system: 'System' };

  const logo = window.GM_LOGOS[customer.id];
  const currentPage = nav.find(n => n.id === pageId) || nav[0];

  const openPersonaMenu = (e) => {
    setPersonaMenu(e.currentTarget.getBoundingClientRect());
  };
  const openSettingsMenu = (e) => {
    setSettingsMenu(e.currentTarget.getBoundingClientRect());
  };

  const renderPage = () => {
    const props = { customer, persona, onNav: setPageId, pushToast };
    switch (pageId) {
      case 'radar':       return <GMPageRadar {...props}/>;
      case 'cardholders': return <GMPageCardholders {...props}/>;
      case 'inbox':       return <GMPageInbox {...props}/>;
      default:
        return <GMPageStub pageId={pageId} label={currentPage.label}/>;
    }
  };

  return (
    <div className={`adm scene ${railCollapsed ? 'rail-collapsed' : ''}`}>
      <aside className="adm-sidebar">
        <div className="adm-sidebar-brand">
          <GMI.shield style={{ color: 'var(--paper)' }}/>
          <span className="adm-sidebar-brand-text">Guardian Mesh</span>
        </div>

        <button className="adm-sidebar-workspace" onClick={onExitWorkspace} title="Switch workspace">
          <div className="adm-sidebar-workspace-logo" style={{ background: customer.logoBg, color: customer.logoFg }}>
            {customer.logoSvg && GMI[customer.logoSvg]
              ? GMI[customer.logoSvg]({ width: 18, height: 18 })
              : <span>{customer.logoMark}</span>
            }
          </div>
          <div className="adm-sidebar-workspace-text">
            <div className="adm-sidebar-workspace-name">{customer.name}</div>
            <div className="adm-sidebar-workspace-role">{customer.region}</div>
          </div>
          <GMI.chevDown style={{ width: 12, height: 12, color: 'rgba(255,255,255,0.5)' }} className="adm-sidebar-workspace-chev"/>
        </button>

        <nav className="adm-sidebar-nav">
          {Object.entries(navByGroup).map(([group, items]) => (
            <div className="adm-nav-group" key={group}>
              <div className="adm-nav-label">{groupLabels[group] || group}</div>
              {items.map(n => {
                const Icon = GMI[n.icon] || GMI.arrowRight;
                return (
                  <button
                    key={n.id}
                    className={`adm-nav-item ${pageId === n.id ? 'is-active' : ''}`}
                    onClick={() => setPageId(n.id)}
                  >
                    <Icon/>
                    <span className="adm-nav-text">{n.label}</span>
                    {n.badge != null && (
                      <span className={`adm-nav-badge ${n.hot ? 'is-hot' : ''}`}>{resolveBadge(n.badge, customer)}</span>
                    )}
                  </button>
                );
              })}
            </div>
          ))}
        </nav>

        <div className="adm-sidebar-footer">
          <button className="adm-sidebar-rail-toggle" onClick={() => setRailCollapsed(c => !c)}>
            <GMI.rail/>
            <span>{railCollapsed ? 'Expand' : 'Collapse rail'}</span>
          </button>
        </div>
      </aside>

      <header className="adm-topbar">
        <div className="adm-breadcrumb">
          <span>{customer.name}</span>
          <GMI.chevRight/>
          <span className="adm-breadcrumb-current">{currentPage.label}</span>
        </div>
        <div className="adm-topbar-right">
          <button className="adm-search" onClick={() => setCpOpen(true)}>
            <GMI.search/>
            <span className="adm-search-placeholder">Search, jump, or ask Guardian…</span>
            <span className="adm-search-kbd">⌘K</span>
          </button>

          <button className="adm-persona" onClick={openPersonaMenu}>
            <span className="adm-persona-label">Viewing as</span>
            <span className="adm-persona-name">{persona.label}</span>
            <GMI.chevDown/>
          </button>

          <button className="adm-icon-btn" title="Notifications">
            <GMI.bell/>
            <span className="adm-icon-btn-dot"/>
          </button>

          <button className="adm-icon-btn" onClick={openSettingsMenu} title="Appearance">
            {themeMode === 'dark' ? <GMI.moon/> : <GMI.sun/>}
          </button>

          <button className="adm-avatar-btn">
            <GMAvatar initials="MB" size={30}/>
          </button>
        </div>
      </header>

      <main className="adm-main">
        {renderPage()}
      </main>

      {personaMenu && (
        <GMMenu anchor={personaMenu} onClose={() => setPersonaMenu(null)} width={280}>
          <div className="menu-group-label">Switch persona</div>
          {Object.values(window.GM_PERSONAS).map(p => {
            const Icon = GMI.user;
            return (
              <button
                key={p.id}
                className={`menu-item ${persona.id === p.id ? 'is-active' : ''}`}
                onClick={() => { onChangePersona(p.id); setPersonaMenu(null); }}
              >
                <div className="menu-item-icon"><Icon/></div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: persona.id === p.id ? 600 : 500 }}>{p.label}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 1 }}>{p.desc}</div>
                </div>
                <span className="menu-item-check"><GMI.check style={{ width: 12, height: 12 }}/></span>
              </button>
            );
          })}
        </GMMenu>
      )}

      {settingsMenu && (
        <GMMenu anchor={settingsMenu} onClose={() => setSettingsMenu(null)} width={240}>
          <div className="menu-group-label">Appearance</div>
          <button className={`menu-item ${themeMode === 'light' ? 'is-active' : ''}`} onClick={() => { if (themeMode !== 'light') onToggleMode(); setSettingsMenu(null); }}>
            <div className="menu-item-icon"><GMI.sun/></div>
            <span>Light</span>
            <span className="menu-item-check"><GMI.check style={{ width: 12, height: 12 }}/></span>
          </button>
          <button className={`menu-item ${themeMode === 'dark' ? 'is-active' : ''}`} onClick={() => { if (themeMode !== 'dark') onToggleMode(); setSettingsMenu(null); }}>
            <div className="menu-item-icon"><GMI.moon/></div>
            <span>Dark</span>
            <span className="menu-item-check"><GMI.check style={{ width: 12, height: 12 }}/></span>
          </button>
        </GMMenu>
      )}

      <GMCommandPalette
        open={cpOpen}
        onClose={() => setCpOpen(false)}
        nav={nav}
        customer={customer}
        persona={persona}
        onNav={setPageId}
        onChangePersona={onChangePersona}
        onToggleTheme={onToggleMode}
        onExitWorkspace={onExitWorkspace}
        pushToast={pushToast}
      />

      <GMToastHost toasts={toasts}/>
    </div>
  );
}

// Placeholder for nav items without a built page yet.
function GMPageStub({ pageId, label }) {
  return (
    <>
      <div className="adm-page-header">
        <div>
          <h1 className="adm-page-title">{label}</h1>
          <p className="adm-page-sub">This surface is part of the concept but not built in this prototype round. The shell adapts per persona — navigate back or switch personas to see the difference.</p>
        </div>
      </div>
      <div className="card" style={{ padding: 40, textAlign: 'center' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 56, height: 56, borderRadius: 14, background: 'var(--paper-2)', color: 'var(--ink-3)', marginBottom: 16 }}>
          <GMI.sparkle style={{ width: 22, height: 22 }}/>
        </div>
        <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: 'var(--ls-title)' }}>Concept surface — {label}</div>
        <p style={{ fontSize: 'var(--fs-sm)', color: 'var(--ink-3)', marginTop: 8, maxWidth: 480, marginLeft: 'auto', marginRight: 'auto', lineHeight: 1.5 }}>
          Real page would live here. Try Radar, Cardholders, or Inbox from the sidebar — those are fully implemented in this prototype.
        </p>
      </div>
    </>
  );
}

window.GMAdminPortal = GMAdminPortal;