'use client';

/**
 * AppLayout Component
 *
 * Wraps the application with:
 * - AppStateMachineProvider (state management)
 * - Mantine AppShell (responsive layout)
 * - Navigation (mobile bottom bar / desktop sidebar)
 */

import { AppShell } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { AppStateMachineProvider } from './AppStateMachine';
import { MobileBottomBar } from './Navigation/MobileBottomBar';
import { MobileHeader } from './Navigation/MobileHeader';
import { DesktopSidebar } from './Navigation/DesktopSidebar';

export function AppLayout({ children }: { children: React.ReactNode }) {
  const isMobile = useMediaQuery('(max-width: 768px)');

  return (
    <AppStateMachineProvider>
      {/* Mobile Header - only on mobile */}
      {isMobile && <MobileHeader />}

      <AppShell
        navbar={{
          width: isMobile ? 0 : 260,
          breakpoint: 'sm',
        }}
        padding={isMobile ? 0 : 'md'}
        style={{ height: '100vh' }}
      >
        {/* Desktop Sidebar - only on desktop */}
        {!isMobile && (
          <AppShell.Navbar>
            <DesktopSidebar />
          </AppShell.Navbar>
        )}

        {/* Main Content */}
        <AppShell.Main
          style={{
            height: '100vh',
            overflow: 'auto',
            paddingTop: isMobile ? '72px' : '0', // Space for mobile header
            paddingBottom: isMobile ? '90px' : '0', // Space for mobile bottom bar
          }}
        >
          {children}
        </AppShell.Main>

        {/* Mobile Bottom Bar - only on mobile */}
        {isMobile && <MobileBottomBar />}
      </AppShell>
    </AppStateMachineProvider>
  );
}