// frontend/src/components/layout/MainLayout.jsx
// Root shell for all authenticated pages.
//
// Structure (sidebar-first):
//   <Sidebar>   — position: fixed, full height, left column (224px)
//   .main-area
//     <Header>  — position: fixed, top-right (left: --sidebar-width)
//     <main>    — scrollable content, padded for fixed header
//
// Mobile (< 768px): sidebar hidden, header goes full-width,
//   hamburger in header opens <MobileDrawer>.

import { useState } from 'react'
import { Outlet } from 'react-router-dom'
import Header from './Header'
import Sidebar from './Sidebar'
import MobileDrawer from './MobileDrawer'

export default function MainLayout() {
  const [drawerOpen, setDrawerOpen] = useState(false)

  return (
    <>
      {/* Fixed sidebar — full viewport height */}
      <Sidebar />

      {/* Main area — offset from sidebar, full remaining width */}
      <div className="main-area">
        <Header onMenuOpen={() => setDrawerOpen(true)} />

        <main
          id="main-content"
          className="main-content"
          tabIndex={-1}
        >
          <Outlet />
        </main>
      </div>

      {/* Mobile slide-over drawer */}
      <MobileDrawer
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
      />
    </>
  )
}
