// App shell: floating rounded sidebar card + main panel on a near-black page.
(function () {
  const NS = window.MineSafeGlobalDesignSystem_760fd2;
  const { Icon, Avatar, Input, ThemeToggle, LanguageSelect } = NS;

  const nav = [
    { id: 'dashboard', icon: 'layout-dashboard', key: 'nav_dashboard' },
    { id: 'courses', icon: 'graduation-cap', key: 'nav_courses' },
    { id: 'catalog', icon: 'library', key: 'nav_catalog' },
    { id: 'certs', icon: 'file-badge', key: 'nav_certs' },
    { id: 'ask', icon: 'messages-square', key: 'nav_ask' },
  ];
  const T = (k) => (window.msT ? window.msT(k) : k);

  function SidebarItem({ item, active, onClick, collapsed }) {
    const [h, setH] = React.useState(false);
    return (
      <button onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
        title={collapsed ? item.label : undefined}
        style={{
          display: 'flex', alignItems: 'center', gap: 12, width: '100%',
          textAlign: 'left', justifyContent: collapsed ? 'center' : 'flex-start',
          padding: collapsed ? '11px 0' : '11px 14px', borderRadius: 'var(--radius-md)', cursor: 'pointer', border: 'none',
          background: active ? 'var(--brand-yellow)' : h ? 'rgba(255,255,255,0.07)' : 'transparent',
          color: active ? 'var(--brand-ink)' : 'var(--grey-300)',
          fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14,
          letterSpacing: 'var(--ls-label)', textTransform: 'uppercase',
          transition: 'background var(--dur-fast)',
        }}>
        <Icon name={item.icon} size={19} />{!collapsed && item.label}
      </button>
    );
  }

  function AppShell({ route, onNavigate, onLogout, children }) {
    const d = window.MSA_DATA;
    const [collapsed, setCollapsed] = React.useState(false);
    return (
      <div style={{
        display: 'flex', gap: 14, minHeight: '100vh', boxSizing: 'border-box',
        padding: 14, background: '#0A0B0C',
      }}>
        {/* Floating sidebar card */}
        <aside style={{
          width: collapsed ? 78 : 'var(--sidebar-w)', flex: '0 0 auto', position: 'sticky', top: 14,
          height: 'calc(100vh - 28px)', display: 'flex', flexDirection: 'column', padding: collapsed ? 12 : 16,
          background: 'linear-gradient(180deg,#20232A 0%,#141619 100%)',
          borderRadius: 'var(--radius-xl)', border: '1px solid rgba(255,255,255,0.06)',
          boxShadow: '0 24px 60px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.4)',
          transition: 'width var(--dur-slow) var(--ease-standard), padding var(--dur-slow) var(--ease-standard)',
        }}>
          <div style={{ display: 'flex', alignItems: collapsed ? 'center' : 'flex-start', justifyContent: 'space-between', padding: collapsed ? '6px 0 18px' : '10px 6px 20px', flexDirection: collapsed ? 'column' : 'row', gap: collapsed ? 14 : 0 }}>
            {collapsed
              ? <img src="../../assets/minesafe-mark-white.png" alt="Mine Safe" style={{ height: 36 }} />
              : <div><img src="../../assets/minesafe-logo-white.png" alt="Mine Safe Global" style={{ height: 84 }} /><div style={{ fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '0.2em', color: 'var(--brand-yellow)', textTransform: 'uppercase', marginTop: 10 }}>{T('academy')}</div></div>}
            <button onClick={() => setCollapsed(c => !c)} aria-label={collapsed ? 'Expand menu' : 'Collapse menu'} title={collapsed ? 'Expand' : 'Collapse'} style={{
              border: 'none', background: 'rgba(255,255,255,0.06)', cursor: 'pointer', color: 'var(--grey-300)',
              width: 30, height: 30, borderRadius: 'var(--radius-sm)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto',
            }}><Icon name={collapsed ? 'chevrons-right' : 'chevrons-left'} size={17} /></button>
          </div>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 4, flex: 1 }}>
            {nav.map(n => <SidebarItem key={n.id} item={{ ...n, label: T(n.key) }} active={route === n.id} collapsed={collapsed} onClick={() => onNavigate(n.id)} />)}
          </nav>

          {/* User profile block with integrated theme control */}
          {collapsed ? (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
              <Avatar name={d.user.name} />
              <ThemeToggle compact style={{ width: 34, height: 34, background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.08)', color: 'var(--grey-300)' }} />
              <button onClick={onLogout} aria-label="Sign out" title="Sign out" style={{ border: 'none', background: 'none', cursor: 'pointer', color: 'var(--grey-400)', display: 'flex', padding: 2 }}><Icon name="log-out" size={18} /></button>
            </div>
          ) : (
          <div style={{
            padding: 10, background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.07)',
            borderRadius: 'var(--radius-md)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <Avatar name={d.user.name} />
              <div style={{ flex: 1, minWidth: 0, lineHeight: 1.25 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13.5, color: '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.user.name}</div>
                <div style={{ fontSize: 11.5, color: 'var(--grey-400)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.user.role} · {d.user.site}</div>
              </div>
              <button onClick={onLogout} aria-label="Sign out" title="Sign out" style={{ border: 'none', background: 'none', cursor: 'pointer', color: 'var(--grey-400)', display: 'flex', padding: 2 }}>
                <Icon name="log-out" size={18} />
              </button>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 10, paddingTop: 10, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 10.5, fontWeight: 600, letterSpacing: 'var(--ls-label)', textTransform: 'uppercase', color: 'var(--grey-500)' }}>{T('theme')}</span>
              <ThemeToggle variant="icons" data-on-dark="true" />
            </div>
          </div>
          )}
        </aside>

        {/* Floating main panel */}
        <div style={{
          flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column',
          background: 'var(--surface-page)', borderRadius: 'var(--radius-xl)', overflow: 'hidden',
          border: '1px solid var(--border-subtle)',
          boxShadow: '0 24px 60px rgba(0,0,0,0.5)',
        }}>
          <header style={{
            height: 'var(--topbar-h)', flex: '0 0 auto', background: 'var(--surface-card)',
            borderBottom: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center',
            gap: 16, padding: '0 24px', position: 'sticky', top: 0, zIndex: 5,
          }}>
            <div style={{ width: 320, maxWidth: '42%' }}>
              <Input icon="search" placeholder={T('search_ph')} />
            </div>
            <div style={{ flex: 1 }} />
            <LanguageSelect value={window.__msLang || 'en'} onChange={(c) => { (window.__msSetLang || (() => {}))(c); }} />
            <button aria-label="Notifications" style={{ border: 'none', background: 'none', cursor: 'pointer', color: 'var(--text-muted)', position: 'relative', display: 'flex' }}>
              <Icon name="bell" size={21} />
              <span style={{ position: 'absolute', top: -2, right: -2, width: 8, height: 8, borderRadius: '50%', background: 'var(--danger)', border: '2px solid var(--surface-card)' }} />
            </button>
          </header>
          <main style={{ flex: 1, padding: '28px', maxWidth: 1180, width: '100%', margin: '0 auto' }}>{children}</main>
        </div>
      </div>
    );
  }

  Object.assign(window, { AppShell });
})();