// components/Layout.jsx - Shell con nav e sidebar responsive
function Layout({ user, page, setPage, children }) {
  const [sidebarOpen, setSidebarOpen] = React.useState(false);

  const isAdmin = user.ruolo === 'admin';
  const isAss = user.ruolo === 'assistente';

  const adminItems = [
    { id: 'dashboard', icon: '📊', label: 'Dashboard' },
    { id: 'riunioni', icon: '🔑', label: 'Riunioni' },
    { id: 'alunni', icon: '👤', label: 'Alunni' },
    { id: 'classi', icon: '🏫', label: 'Classi' },
    { id: 'libri', icon: '📗', label: 'Libri' },
    { id: 'prestiti', icon: '📦', label: 'Prestiti' },
    { id: 'utenti', icon: '🔧', label: 'Utenti' },
    { id: 'conferme', icon: '✅', label: 'Conferme' },
    { id: 'report', icon: '📈', label: 'Report' },
    { id: 'configurazione', icon: '⚙️', label: 'Configurazione' },
  ];

  const assItems = [
    { id: 'assistente', icon: '📦', label: 'Consegne' },
    { id: 'inventario', icon: '📚', label: 'Inventario' },
    { id: 'liste_classe', icon: '🧾', label: 'Liste classe' },
    { id: 'portale', icon: '👨‍👩‍👧', label: 'Vista genitore' },
  ];

  const genitoreItems = [
    { id: 'portale', icon: '📚', label: 'I miei libri' },
  ];

  const items = isAdmin ? adminItems : isAss ? assItems : genitoreItems;

  function navTo(id) {
    setPage(id);
    setSidebarOpen(false);
  }

  async function logout() {
    const res = await fetch('/auth/logout', { credentials: 'same-origin' });
    if (res.ok) {
      window.location.reload();
    } else {
      window.alert('Errore durante il logout, riprova.');
    }
  }

  return (
    <div className="app-shell">
      {/* Top nav */}
      <nav className="app-nav">
        <button className="hamburger btn" onClick={() => setSidebarOpen(o => !o)}>☰</button>
        <div className="logo">📚 <span>LibriAssociazione</span></div>
        <div className="spacer" />
        <div className="user-chip">
          <span>{user.nome}</span>
          <span style={{ background: 'rgba(255,255,255,.12)', borderRadius: 4, padding: '.1rem .4rem', fontSize: '.7rem' }}>
            {user.ruolo}
          </span>
        </div>
        <button className="logout-btn" onClick={logout}>Esci</button>
      </nav>

      {/* Sidebar */}
      {sidebarOpen && (
        <div style={{ position: 'fixed', inset: 0, zIndex: 199 }} onClick={() => setSidebarOpen(false)} />
      )}
      <aside className={`app-sidebar ${sidebarOpen ? 'open' : ''}`}>
        {isAdmin && <div className="nav-section">Gestione</div>}
        {items.map(item => (
          <button
            key={item.id}
            className={`nav-item ${page === item.id ? 'active' : ''}`}
            onClick={() => navTo(item.id)}
          >
            <span className="nav-icon">{item.icon}</span>
            {item.label}
          </button>
        ))}
      </aside>

      {/* Main content */}
      <main className="app-main">
        {children}
      </main>
    </div>
  );
}