import { useEffect, useState } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { Menu } from 'lucide-react';
import Sidebar from '../components/Sidebar';
import { isMobile as mobile } from 'react-device-detect';

export default function Layout({ user }) {


  const location = useLocation();
  const navigate = useNavigate();

  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth <= 768);
    };

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

  const handleToggleSidebar = () => {
    if (!isMobile) {
      // Desktop: Toggle collapse/expand
      setIsSidebarCollapsed(prev => !prev);
    } else {
      // Mobile: Toggle open/close
      setIsSidebarCollapsed(false)
      setIsMobileMenuOpen(!isMobileMenuOpen);
    }
  };

  const handleNavigate = () => {
    if (location.pathname !== '/dashboard') {
      navigate('/dashboard');
      setIsMobileMenuOpen(false);
    }
  }

  console.log(mobile, "isMobile")

  return (
    <div className="flex min-h-screen bg-[#F5F5F5]"
      style={{
        display: "flex", alignItems: "flex-start", width: "100vw",
        height: "100vh", overflow: "hidden"
      }}
    >
      <Sidebar
        isOpen={isMobileMenuOpen}
        onClose={() => setIsMobileMenuOpen(false)}
        isCollapsed={isSidebarCollapsed}
        onToggle={handleToggleSidebar}
        isMobile={isMobile}
      />

      {/* Mobile Header with Hamburger - Only show when sidebar is closed */}
      {isMobile && (
        <div className="fixed top-0 left-0 right-0 bg-white border-b border-[#E5E7EB] px-4 py-2 flex items-center shadow-sm justify-between" style={{ zIndex: 6 }}>
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-gradient-to-br from-[#FF6B00] to-[#FF8534] rounded-xl flex items-center justify-center shadow-lg cursor-pointer" onClick={handleNavigate}>
              <span className="text-white text-xl font-bold">P</span>
            </div>
            <span className="text-xl font-bold text-gray-900 whitespace-nowrap flex items-center cursor-pointer" onClick={handleNavigate}>
              <div className='text-[#c1282b]'>Pozo</div>
              <div className='text-[#29282e]'>Accounts</div>
            </span>
          </div>
          <button
            onClick={handleToggleSidebar}
            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <Menu className="w-6 h-6 text-gray-700" />
          </button>
        </div>
      )}

      <main
        className={`w-full pt-16 ${!mobile ? 'md:pt-0' : ''} transition-all duration-500 ease-in-out`}
      // style={{
      //   marginLeft: isDesktop ? (isSidebarCollapsed ? '80px' : '256px') : '0'
      // }}
      >
        <div className={`p-4 md:p-6 lg:p-8 w-full max-md:pb-20 ${mobile ? 'sm:pb-20' : ''}`} style={{
          height: "100vh",
          overflow: "auto",
          scrollbarWidth: "thin",
          scrollBehavior: "smooth",
          WebkitOverflowScrolling: "touch"
        }}>
          <Outlet />
        </div>
      </main>
    </div>
  );
}

