"use client";

import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
import { useProductCatalog } from "@/hooks/useProductCatalog";

// New imports for Navbar and Footer
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterBase from '@/components/sections/footer/FooterBase';

export default function ShopPage() {
    const {
        products,
        isLoading,
        search,
        setSearch,
        filters,
    } = useProductCatalog({ basePath: "/shop" });

    const themeProps = {
        defaultButtonVariant: "hover-bubble" as const,
        defaultTextAnimation: "background-highlight" as const,
        borderRadius: "sharp" as const,
        contentWidth: "mediumSmall" as const,
        sizing: "largeSmall" as const,
        background: "aurora" as const,
        cardStyle: "subtle-shadow" as const,
        primaryButtonStyle: "inset-glow" as const,
        secondaryButtonStyle: "solid" as const,
        headingFontWeight: "light" as const,
    };

    // Navbar configuration with Cart button (setCartOpen is not available here, so using console.log)
    const navbarProps = {
        navItems: [
            { name: "Home", id: "/" },
            { name: "Adopt", id: "/adopt" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" },
            { name: "Shop", id: "/shop" },
            { name: "Donate", id: "/donate" },
            { name: "Blog", id: "/blog" }
        ],
        brandName: "Hope Haven",        className: "py-4",        button: { text: "Cart", onClick: () => console.log("cart") }
    };

    // Footer configuration
    const footerProps = {
        columns: [
            { title: "About Us", items: [{ label: "Our Mission", href: "/about" }, { label: "Meet the Team", href: "/about#team" }, { label: "Impact Report", href: "/about#impact" }] },
            { title: "Get Involved", items: [{ label: "Adopt a Pet", href: "/adopt" }, { label: "Volunteer", href: "/contact" }, { label: "Foster a Pet", href: "/contact" }] },
            { title: "Resources", items: [{ label: "FAQs", href: "/faq" }, { label: "Pet Care Tips", href: "/blog" }, { label: "Contact Us", href: "/contact" }] }
        ],
        logoText: "Hope Haven",        copyrightText: "© 2024 Hope Haven Animal Shelter. All rights reserved.",        useInvertedBackground: false
    };

    if (isLoading) {
        return (
            <ThemeProvider {...themeProps}>
                <ReactLenis root>
                    <div id="navbar" data-section="navbar">
                        <NavbarStyleCentered {...navbarProps} />
                    </div>
                    <div id="loading-state" data-section="loading-state">
                        <main className="min-h-screen flex items-center justify-center pt-20">
                            <p className="text-foreground">Loading products...</p>
                        </main>
                    </div>
                    <div id="footer" data-section="footer">
                        <FooterBase {...footerProps} />
                    </div>
                </ReactLenis>
            </ThemeProvider>
        );
    }

    return (
        <ThemeProvider {...themeProps}>
            <ReactLenis root>
                <div id="navbar" data-section="navbar">
                    <NavbarStyleCentered {...navbarProps} />
                </div>
                <div id="product-catalog" data-section="product-catalog">
                    <ProductCatalog
                        layout="page"
                        products={products}
                        searchValue={search}
                        onSearchChange={setSearch}
                        searchPlaceholder="Search products..."
                        filters={filters}
                        emptyMessage="No products found"
                    />
                </div>
                <div id="footer" data-section="footer">
                    <FooterBase {...footerProps} />
                </div>
            </ReactLenis>
        </ThemeProvider>
    );
}
