import { useCallback, useRef, useState } from 'react';
import './AppShell.css';
import Sidebar from './Sidebar.jsx';
import Navbar from './Navbar.jsx';

const HOVER_OPEN_COOLDOWN_MS = 350;

function AppShell({ activePage, onChangePage, onLogout, navItems, userName, userEmail, role, children }) {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const hoverOpenCooldownRef = useRef(0);

  const handleToggleSidebar = () => {
    setIsSidebarOpen((prev) => !prev);
  };

  return (
    <div className={`app-shell ${isSidebarOpen ? 'app-shell--sidebar-open' : 'app-shell--sidebar-closed'}`}>
      <button
        type="button"
        className="app-shell-backdrop"
        aria-label="Close navigation"
        aria-hidden={!isSidebarOpen}
        tabIndex={-1}
        onClick={handleToggleSidebar}
      />
      <Sidebar
        activePage={activePage}
        navItems={navItems}
        onChangePage={onChangePage}
        onLogout={onLogout}
        onToggleSidebar={handleToggleSidebar}
      />
      <div className="app-shell-content">
        <Navbar
          userName={userName}
          userEmail={userEmail}
          role={role}
          onToggleSidebar={handleToggleSidebar}
          isSidebarOpen={isSidebarOpen}
        />
        <div className="app-shell-content-main">{children}</div>
      </div>
    </div>
  );
}

export default AppShell;
