const AppShell = ({ tab, onTab, onLogout, children: content }) => {
  const { user, children } = useSession();
  const isParent = user?.role === 'parent';

  const nav = isParent ? [
    { id:'home', label:'Сегодня', icon: <IconHome size={16}/> },
    { id:'calendar', label:'Календарь', icon: <IconCalendar size={16}/> },
    { id:'analytics', label:'Аналитика', icon: <IconChart size={16}/> },
    { id:'settings', label:'Семья', icon: <IconUsers size={16}/> },
  ] : [
    { id:'home', label:'Мой прогресс', icon: <IconHome size={16}/> },
    { id:'calendar', label:'Календарь', icon: <IconCalendar size={16}/> },
    { id:'analytics', label:'Статистика', icon: <IconChart size={16}/> },
    { id:'comments', label:'Комментарии', icon: <IconMessage size={16}/> },
  ];

  return (
    <div className="app-shell" style={{ minHeight:'100vh', minHeight:'100dvh', display:'grid', gridTemplateColumns:'260px 1fr' }}>
      <style>{`
        @media (max-width: 840px){
          .app-shell { grid-template-columns: 1fr !important; }
          .app-side { position: fixed !important; bottom: 0; left:0; right:0; top: auto !important; height: auto !important; border-right: none !important; border-top: 1px solid var(--border) !important; flex-direction: row !important; padding: 8px !important; z-index: 40; background: var(--surface) !important; gap: 0 !important; }
          .app-brand, .app-side-footer, .app-user-card, .app-child-selector { display:none !important; }
          .app-nav { flex-direction: row !important; gap: 2px !important; overflow-x: auto; flex: 1; }
          .app-nav button { flex: 1; justify-content:center !important; white-space: nowrap; font-size: 12px !important; padding: 8px !important; flex-direction: column !important; gap: 2px !important; }
          .app-main { padding-bottom: 80px !important; padding-left: 16px !important; padding-right: 16px !important; padding-top: 16px !important; }
        }
      `}</style>
      <aside className="app-side" style={{
        position:'sticky', top: 0, height:'100vh', borderRight:'1px solid var(--border)',
        background:'var(--surface)', display:'flex', flexDirection:'column', padding: 20, gap: 18
      }}>
        <div className="app-brand" style={{ padding:'4px 4px 18px', borderBottom:'1px solid var(--border)' }}>
          <Logo size={28}/>
        </div>

        <div className="app-user-card" style={{
          display:'flex', alignItems:'center', gap: 10, padding: 10, borderRadius: 12,
          background:'var(--surface-2)', border:'1px solid var(--border)'
        }}>
          <Avatar emoji={user?.avatar} color={user?.color} size={36} ring/>
          <div style={{ flex:1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 600, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{user?.name}</div>
            <div className="mono" style={{ fontSize: 10, color:'var(--fg-subtle)', textTransform:'uppercase', letterSpacing:'.06em' }}>
              {isParent ? (user?.parentRole || 'Родитель') : `${user?.age || '—'} ЛЕТ · РЕБЁНОК`}
            </div>
          </div>
        </div>

        {isParent && children && children.length > 1 && (
          <div className="app-child-selector">
            <ChildSelector/>
          </div>
        )}

        <nav className="app-nav" style={{ display:'flex', flexDirection:'column', gap: 2, flex: 1 }}>
          {nav.map(n => (
            <NavButton key={n.id} id={n.id} label={n.label} icon={n.icon} active={tab === n.id} onClick={onTab}/>
          ))}
        </nav>

        <div className="app-side-footer" style={{ borderTop:'1px solid var(--border)', paddingTop: 14, display:'flex', flexDirection:'column', gap: 8 }}>
          <InstallAppButton full label="Установить приложение"/>
          <button onClick={onLogout} style={{
            display:'flex', alignItems:'center', gap: 10, padding:'8px 12px', borderRadius: 10,
            background:'transparent', border:'none', color:'var(--fg-muted)', cursor:'pointer', fontSize: 13
          }}>
            <IconLogout size={16}/> Выйти
          </button>
        </div>
      </aside>
      <main className="app-main" style={{ padding: '32px 40px', maxWidth: 1200, width: '100%' }}>
        {content}
      </main>
    </div>
  );
};

Object.assign(window, { AppShell });