import React, { useState, useEffect } from 'react';
import AdminSidebar from '../components/AdminSidebar';
import AdminNavbar from '../components/AdminNavbar';

export default function AdminLayout({ children }) {
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [sidebarMinimized, setSidebarMinimized] = useState(false);
  const [isMobile, setIsMobile] = useState(false);

  // Detect screen size and auto-adjust sidebar
  useEffect(() => {
    const checkScreenSize = () => {
      const mobile = window.innerWidth < 768;
      setIsMobile(mobile);
      
      if (mobile) {
        // Mobile: Auto-close sidebar
        setSidebarOpen(false);
      } else {
        // Desktop: Auto-open sidebar
        setSidebarOpen(true);
      }
    };

    // Check on mount
    checkScreenSize();
    
    // Listen for resize
    window.addEventListener('resize', checkScreenSize);
    return () => window.removeEventListener('resize', checkScreenSize);
  }, []);

  return (
    <div className="flex h-screen bg-gray-100">
      <AdminSidebar
        open={sidebarOpen}
        minimized={sidebarMinimized}
        isMobile={isMobile}
        onClose={() => setSidebarOpen(false)}
        onMinimize={() => setSidebarMinimized(!sidebarMinimized)}
        onOpen={() => setSidebarOpen(true)}
      />
      <div className="flex-1 flex flex-col min-w-0">
        <AdminNavbar
          onMenuToggle={() => setSidebarOpen(!sidebarOpen)}
          sidebarOpen={sidebarOpen}
        />
        <main className="flex-1 overflow-y-auto p-4">
          {children}
        </main>
      </div>
    </div>
  );
}
