import { useState, useEffect } from "react";
import { Outlet, useLocation } from "react-router-dom";
import { Spin } from "antd";
import Sidebar from "../components/sidebar/Sidebar";
import Header from "../components/shared/Header";
import { useAuth } from "@/hooks/useAuth";
import { LandingPage } from "@/pages/landing/LandingPage";

const MainLayout: React.FC = () => {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const location = useLocation();
  const { isAuthenticated } = useAuth();

  const toggleSidebar = () => {
    setIsSidebarOpen(!isSidebarOpen);
  };

  useEffect(() => {
    setLoading(true);
    const timer = setTimeout(() => setLoading(false), 0);
    return () => clearTimeout(timer);
  }, [location.pathname]);

  if (!isAuthenticated) {
    return <LandingPage />;
  }

  return (
    <div className="relative flex h-screen bg-gray-100 text-gray-800">
      <Sidebar isOpen={isSidebarOpen} onClose={toggleSidebar} />

      <div className="flex-1 flex flex-col overflow-hidden">
        <Header onMenuClick={toggleSidebar} />

        <main className="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100 p-4">
          {loading ? (
            <div className="flex justify-center items-center h-full">
              <Spin size="default" tip="Loading..." />
            </div>
          ) : (
            <Outlet />
          )}
        </main>
      </div>

      {/* Overlay for mobile */}
      {isSidebarOpen && (
        <div
          className="fixed inset-0 bg-black bg-opacity-50 z-20 md:hidden"
          onClick={toggleSidebar}
          aria-hidden="true"
        ></div>
      )}
    </div>
  );
};

export default MainLayout;