import AuthGuard from '@/components/auth/AuthGuard';
import Sidebar from '@/components/layout/Sidebar';
import TopNav from '@/components/layout/TopNav';
import RightPanel from '@/components/layout/RightPanel';
import DashboardContent from '@/components/layout/DashboardContent';
import PanelCoordinator from '@/components/layout/PanelCoordinator';

/**
 * Dashboard layout — wraps all authenticated pages.
 *
 * Structure (fixed header + fixed sidebar + collapsible right panel):
 *  ┌──────────────────────────────────────────────────────────┐
 *  │ TopNav  (fixed top)                                      │
 *  ├──────────┬───────────────────────────┬───────────────────┤
 *  │          │                           │                   │
 *  │ Sidebar  │  Main content area        │   Right Panel     │
 *  │ 260px    │  (scrollable)             │   300px           │
 *  │          │                           │   (collapsible)   │
 *  │          │                           │                   │
 *  │          │  Footer (at bottom)       │                   │
 *  │          │                           │                   │
 *  └──────────┴───────────────────────────┴───────────────────┘
 *
 * Responsive breakpoints:
 * - xl (≥1280px): sidebar + content + right panel side-by-side
 * - lg (1024–1279px): sidebar + content, right panel overlays
 * - md (768–1023px): sidebar hidden, content full-width, both panels overlay
 * - default (<768px): single column, both panels overlay
 *
 * PanelCoordinator ensures only one overlay is open at a time on mobile.
 * AuthGuard checks auth state and redirects unauthenticated users to /login.
 */
export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <AuthGuard>
      <div className="min-h-screen bg-divisi-bg">
        {/* Fixed header */}
        <TopNav />

        {/* Fixed sidebar */}
        <Sidebar />

        {/* Collapsible right panel */}
        <RightPanel />

        {/* Coordinates sidebar/panel mutual exclusion on mobile */}
        <PanelCoordinator />

        {/* Scrollable main content — offset by header height (h-14 = 3.5rem),
            sidebar width (260px) on lg+, and right panel width (300px) on xl+ when open */}
        <DashboardContent>
          {children}
        </DashboardContent>
      </div>
    </AuthGuard>
  );
}