"use client";

import { useState } from "react";
import { Header } from "@/components/layout/header";
import { Footer } from "@/components/layout/footer";
import { HeroSection } from "@/components/home/hero-section";
import { CategoryShowcase } from "@/components/home/category-showcase";
import { FeaturedProducts } from "@/components/home/featured-products";
import { PromoSection } from "@/components/home/promo-section";
import { CartDrawer } from "@/components/cart/cart-drawer";
import { ChatWidget } from "@/components/chat/chat-widget";
import { ProductsListModal } from "@/components/product/products-list-modal";
import { CheckoutModal } from "@/components/checkout/checkout-modal";
import { AuthModal } from "@/components/auth/auth-modal";
import { useThemeContext } from "@/components/theme/theme-provider";
import { Loader2 } from "lucide-react";

export default function Home() {
  const [productsModalOpen, setProductsModalOpen] = useState(false);
  const [selectedCategory, setSelectedCategory] = useState<string>("");
  const [authModalOpen, setAuthModalOpen] = useState(false);
  const [checkoutModalOpen, setCheckoutModalOpen] = useState(false);
  const { loading: themeLoading, theme } = useThemeContext();

  const handleCategoryClick = (categorySlug: string) => {
    setSelectedCategory(categorySlug);
    setProductsModalOpen(true);
  };

  if (themeLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <Loader2 className="w-8 h-8 animate-spin text-primary" />
      </div>
    );
  }

  return (
    <>
      <Header 
        onAuthClick={() => setAuthModalOpen(true)}
        onCategoryClick={handleCategoryClick}
        onProductsClick={() => {
          setSelectedCategory("");
          setProductsModalOpen(true);
        }}
      />
      <main className="flex-1">
        <HeroSection />
        <CategoryShowcase onCategoryClick={handleCategoryClick} />
        <FeaturedProducts />
        <PromoSection />
      </main>
      <Footer />
      <CartDrawer />
      <ChatWidget />
      
      {/* Modals */}
      <ProductsListModal
        open={productsModalOpen}
        onOpenChange={setProductsModalOpen}
        categorySlug={selectedCategory}
      />
      <AuthModal open={authModalOpen} onOpenChange={setAuthModalOpen} />
      <CheckoutModal open={checkoutModalOpen} onOpenChange={setCheckoutModalOpen} />
    </>
  );
}