import { useState, useEffect } from 'react';
import { Outlet } from 'react-router-dom';
import { Menu } from 'lucide-react';
import Sidebar from '../components/Sidebar';

export default function MainLayout() {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
  const [isDesktop, setIsDesktop] = useState(false);

  useEffect(() => {
    const handleResize = () => {
      setIsDesktop(window.innerWidth >= 1024);
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const handleToggleCollapse = () => {
    setIsSidebarCollapsed(!isSidebarCollapsed);
  };

  return (
    <div className="flex min-h-screen bg-[#F5F5F5]">
      <Sidebar
        isOpen={isMobileMenuOpen}
        onClose={() => setIsMobileMenuOpen(false)}
        isCollapsed={isSidebarCollapsed}
        onToggleCollapse={handleToggleCollapse}
      />

      {/* Mobile Header with Hamburger */}
      <div className="lg:hidden fixed top-0 left-0 right-0 bg-white border-b border-[#E5E7EB] px-4 py-3 flex items-center justify-between z-30 shadow-sm">
        <button
          onClick={() => setIsMobileMenuOpen(true)}
          className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
        >
          <Menu className="w-6 h-6 text-gray-700" />
        </button>
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 bg-gradient-to-br from-[#FF6B00] to-[#FF8534] rounded-lg flex items-center justify-center shadow-lg">
            <span className="text-white text-sm font-bold">P</span>
          </div>
          <span className="text-lg font-bold text-gray-900 flex items-center">
            <div className='text-[#c1282b]'>Pozo</div>
            <div className='text-[#29282e]'>Accounts</div>

          </span>
        </div>
        <div className="w-10"></div>
      </div>

      <main
        className="w-full pt-16 lg:pt-0 transition-all duration-300"
        style={{
          // marginLeft: isDesktop ? (isSidebarCollapsed ? '80px' : '256px') : '0'
        }}
      >
        <div className="p-4 md:p-6 lg:p-8 w-full " >
          <Outlet />
        </div>
      </main>
    </div>
  );
}

