"use client";

import React, { useState } from 'react';
import Sidebar from './Sidebar';
import Header from './Header';
import AuthGuard from './AuthGuard';
import MobileBottomNav from './MobileBottomNav';

export default function MainShell({ children }: { children: React.ReactNode }) {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const toggleSidebar = () => setIsCollapsed(!isCollapsed);

  return (
    <AuthGuard>
      <div className="h-full flex overflow-hidden">
        {/* Desktop Sidebar - hidden on mobile */}
        <div className="hidden lg:block">
          <Sidebar isCollapsed={isCollapsed} />
        </div>
        
        {/* Mobile sidebar overlay (drawer) */}
        {mobileMenuOpen && (
          <div className="fixed inset-0 z-50 lg:hidden" onClick={() => setMobileMenuOpen(false)}>
            <div className="absolute inset-0 bg-black/40" />
            <div className="absolute left-0 top-0 bottom-0 w-[250px] bg-white shadow-xl" onClick={(e) => e.stopPropagation()}>
              <Sidebar isCollapsed={false} />
            </div>
          </div>
        )}
        
        <div className="flex-1 flex flex-col min-w-0 bg-canvas">
          <Header toggleSidebar={toggleSidebar} isCollapsed={isCollapsed} onOpenMobile={() => setMobileMenuOpen(true)} />
          
          <main className="flex-1 overflow-auto pb-16 lg:pb-0">
            {children}
          </main>
        </div>
      </div>
      {/* Mobile bottom navigation */}
      <MobileBottomNav />
    </AuthGuard>
  );
}