// App shell — responsive sidebar (rail + mobile drawer) + topbar with global search.
// Grouped by job-to-be-done, mirroring the real dashboard's Inbox / Money / Time nav.
const NAV_GROUPS = [
  { items: [{ id:'overview', label:'Overview', icon:'layout-grid' }] },
  { label:'Inbox', items: [
    { id:'mail',   label:'Mail',    icon:'mail-check' },
    { id:'chat',   label:'AI Chat', icon:'message-square' },
    { id:'tasks',  label:'Tasks',   icon:'check-square' },
    { id:'people', label:'People',  icon:'users' },
  ] },
  { label:'Money', items: [
    { id:'bills',   label:'Bills',         icon:'dollar-sign' },
    { id:'banking', label:'Banking',       icon:'landmark' },
    { id:'subs',    label:'Subscriptions', icon:'credit-card' },
  ] },
  { label:'Time', items: [
    { id:'calendar', label:'Calendar', icon:'calendar' },
    { id:'packages', label:'Packages', icon:'package' },
  ] },
];
const NAV = NAV_GROUPS.flatMap(g => g.items);
const NAV2 = [
  { id:'notifications', label:'Notifications', icon:'bell', count:1 },
  { id:'settings',      label:'Settings',      icon:'settings' },
  { id:'bug',           label:'Report a Bug',  icon:'bug' },
];

function Sidebar({ route, go }) {
  const Item = (n) => (
    <button key={n.id} data-nav={n.id} className={`nav-item ${route === n.id ? 'active' : ''}`} onClick={() => go(n.id)} title={n.label}>
      <Icon name={n.icon} size={19} />
      <span className="nav-lbl">{n.label}</span>
      {n.count && <span className="count">{n.count}</span>}
    </button>
  );
  return (
    <aside className="sidebar">
      <button className="brand" onClick={() => go('overview')} style={{ border:'none', background:'none', cursor:'pointer' }}>
        <img src={(window.__resources && window.__resources.logo) || 'assets/zeranda-mark.svg'} alt="" />
        <span className="wm">Zeranda</span>
      </button>
      <nav className="nav">
        {NAV_GROUPS.map((g, gi) => (
          <React.Fragment key={gi}>
            {g.label && <div className="nav-label">{g.label}</div>}
            {g.items.map(Item)}
          </React.Fragment>
        ))}
      </nav>
      <div className="nav-spacer" />
      <nav className="nav">{NAV2.map(Item)}
        <button className="nav-item" onClick={() => go('logout')} title="Sign Out"><Icon name="log-out" size={19} /><span className="nav-lbl">Sign Out</span></button>
      </nav>
    </aside>
  );
}

// ---- Account switcher menu (opens from the profile in the topbar) --------
// The global sibling of AccountFilterBar: lists every connected inbox with its
// at-a-glance access state, lets you pick which inbox to view, pause/resume each
// (or all at once), reconnect a limited one, and jump to Settings.
function AccountMenu({ user, viewAccount, onViewAccount, onClose, go, anchorRef }) {
  const perm = usePermissions();
  const accts = perm.accounts();
  const [reconnect, setReconnect] = useState(null);
  const [pos, setPos] = useState(null);
  const ref = useRef(null);
  React.useLayoutEffect(() => {
    const place = () => {
      const a = anchorRef && anchorRef.current; if (!a) return;
      const r = a.getBoundingClientRect();
      const small = window.innerWidth <= 480;
      setPos(small
        ? { top: Math.round(r.bottom + 8), left: 8, right: 8 }
        : { top: Math.round(r.bottom + 10), right: Math.round(window.innerWidth - r.right) });
    };
    place();
    window.addEventListener('resize', place);
    return () => window.removeEventListener('resize', place);
  }, []);
  useEffect(() => {
    const onDoc = e => {
      const a = anchorRef && anchorRef.current;
      if (ref.current && !ref.current.contains(e.target) && !(a && a.contains(e.target))) onClose();
    };
    const onEsc = e => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onEsc);
    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onEsc); };
  }, []);
  const allPaused = perm.allPaused();
  const anyPaused = perm.anyPaused();
  const pick = id => { onViewAccount && onViewAccount(id); };
  const menu = (
    <div className="acctmenu zd-scroll" ref={ref} role="menu"
      style={pos ? { top: pos.top, left: pos.left, right: pos.right } : { visibility: 'hidden' }}>
      <div className="acctmenu-id">
        <div className="avatar amid-av">{user.initial}</div>
        <div className="amid-meta">
          <div className="amid-nm">{user.name}</div>
          <div className="amid-em">{user.email}</div>
        </div>
      </div>

      <div className="acctmenu-sync">
        <span className="ams-ic"><Icon name="shield-check" size={16} color="var(--green-600)" /></span>
        <div className="ams-meta">
          <div className="ams-t">Auto-sync on</div>
          <div className="ams-s">All inboxes syncing normally</div>
        </div>
      </div>

      <div className="acctmenu-lbl">Connected inboxes <span className="aml-n">{accts.length}</span></div>
      <div className="acctmenu-list">
        <button className={`acctmenu-row pickrow ${viewAccount === 'all' ? 'sel' : ''}`} onClick={() => pick('all')}>
          <span className="amr-dot amr-all"><Icon name="layers" size={13} color="var(--gold-700)" /></span>
          <div className="amr-meta"><div className="amr-nm">All accounts</div><div className="amr-sub">Combine every connected inbox</div></div>
          {viewAccount === 'all' && <span className="amr-check"><Icon name="check" size={15} color="var(--gold-700)" /></span>}
        </button>

        {accts.map(a => {
          const m = mailboxMeta(a.email);
          const lvl = perm.accessLevel(a);
          const paused = lvl === 'paused';
          return (
            <div className={`acctmenu-acct ${viewAccount === a.id ? 'sel' : ''} ${paused ? 'paused' : ''}`} key={a.id}>
              <button className="acctmenu-row pickrow" onClick={() => pick(a.id)}>
                <span className="amr-dot" style={{ background: tintFg(m.tint) }} />
                <div className="amr-meta">
                  <div className="amr-nm">{a.nickname || m.label}{a.primary && <span className="amr-primary">Primary</span>}</div>
                  <div className="amr-sub">{a.email}</div>
                </div>
                <AccessLevelChip level={lvl} />
                {viewAccount === a.id && <span className="amr-check"><Icon name="check" size={15} color="var(--gold-700)" /></span>}
              </button>
              {lvl === 'limited' && (
                <div className="amr-acts">
                  <button className="amr-act gold" onClick={() => setReconnect({ account: a, highlight: perm.missing(a).map(x => x.key) })}>
                    <Icon name="refresh-cw" size={12} /> Reconnect
                  </button>
                </div>
              )}
            </div>
          );
        })}
      </div>

      <div className="acctmenu-foot">
        <button className="amf-btn" onClick={() => { onClose(); go('settings'); }}><Icon name="settings" size={15} /> Manage email accounts</button>
        <button className="amf-btn danger" onClick={() => { onClose(); go('logout'); }}><Icon name="log-out" size={15} /> Sign out</button>
      </div>

      {reconnect && <ReconnectModal account={reconnect.account} highlight={reconnect.highlight}
        onClose={() => setReconnect(null)} onDone={() => setReconnect(null)} />}
    </div>
  );
  return ReactDOM.createPortal(menu, document.body);
}

function TopBar({ title, user, onSync, syncing, onToggleNav, theme, onToggleTheme, go, viewAccount, onViewAccount }) {
  const perm = usePermissions();
  const [menu, setMenu] = useState(false);
  const whoRef = useRef(null);
  const anyLimited = perm.accounts().some(a => !a.paused && !perm.isFull(a));
  const ringSt = anyLimited ? 'limited' : 'ok';
  const sel = viewAccount && viewAccount !== 'all' ? perm.account(viewAccount) : null;
  const selMeta = sel ? mailboxMeta(sel.email) : null;

  return (
    <header className="topbar">
      <button className="nav-toggle" onClick={onToggleNav} title="Menu" aria-label="Toggle navigation"><Icon name="panel-left" size={20} /></button>
      <h1>{title}</h1>
      <div className="spacer" />
      <button className="iconbtn theme-tog" onClick={onToggleTheme} title={theme === 'dark' ? 'Switch to light' : 'Switch to dark'} aria-label="Toggle theme"><Icon name={theme === 'dark' ? 'sun' : 'moon'} size={18} /></button>
      <button className={`sync ${syncing ? 'spinning' : ''}`} onClick={onSync}
        title="Securely sync your inbox">
        <Icon name={syncing ? 'refresh-cw' : 'shield-check'} size={16} /> <span>{syncing ? 'Syncing…' : 'Secure Sync'}</span>
      </button>
      <button ref={whoRef} className={`who ${menu ? 'open' : ''}`} onClick={() => setMenu(v => !v)} title={user.email} aria-haspopup="menu" aria-expanded={menu}>
        <span className={`avatar-wrap rg-${ringSt}`}>
          <span className="avatar">{user.initial}</span>
          <span className="avatar-st" />
        </span>
        <div className="who-meta">
          <div className="nm">{sel ? (sel.nickname || selMeta.label) : user.name}</div>
          <div className="em">{sel ? sel.email : user.email}</div>
        </div>
        <span className="who-caret"><Icon name="chevron-down" size={15} /></span>
      </button>
      {menu && <AccountMenu user={user} viewAccount={viewAccount} onViewAccount={onViewAccount} onClose={() => setMenu(false)} go={go} anchorRef={whoRef} />}
    </header>
  );
}
Object.assign(window, { Sidebar, TopBar, AccountMenu, NAV });