"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import { CartProvider, useCart } from "@/context/cartContext";
import ProductCart from '@/components/ecommerce/cart/ProductCart';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';

export default function CartPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="compact"
        sizing="largeSmall"
        background="circleGradient"
        cardStyle="glass-depth"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="light"
    >
      <ReactLenis root>
        <CartProvider>
          <NavbarLayoutFloatingInline
            navItems={[
              {
                name: "Home",                id: "/"},
              {
                name: "About",                id: "/#about"},
              {
                name: "Products",                id: "/#products"},
              {
                name: "Features",                id: "/#features"},
              {
                name: "Testimonials",                id: "/#testimonials"},
              {
                name: "Contact",                id: "/#contact"},
              {
                name: "Cart",                id: "/cart"},
            ]}
            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
            logoAlt="Elegance Atelier Logo"
            brandName="Elegance Atelier"
            button={{
              text: "View Cart",              href: "/cart"}}
            animateOnLoad={true}
          />
          <CartContent />
          <div id="footer" data-section="footer">
            <FooterLogoEmphasis
              logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
              logoAlt="Elegance Atelier Logo"
              columns={[
                {
                  items: [
                    {
                      label: "Home",                      href: "/"},
                    {
                      label: "About Us",                      href: "/#about"},
                    {
                      label: "Collections",                      href: "/#products"},
                    {
                      label: "Membership",                      href: "/#pricing"},
                  ],
                },
                {
                  items: [
                    {
                      label: "Contact",                      href: "/#contact"},
                    {
                      label: "FAQ",                      href: "/#faq"},
                    {
                      label: "Careers",                      href: "#"},
                    {
                      label: "Press",                      href: "#"},
                  ],
                },
                {
                  items: [
                    {
                      label: "Privacy Policy",                      href: "#"},
                    {
                      label: "Terms of Service",                      href: "#"},
                    {
                      label: "Shipping & Returns",                      href: "#"},
                  ],
                },
              ]}
              logoText="Elegance Atelier"
            />
          </div>
        </CartProvider>
      </ReactLenis>
    </ThemeProvider>
  );
}

function CartContent() {
  const { cartItems, removeFromCart, updateQuantity, getTotalPrice } = useCart();

  const handleQuantityChange = (id: string, quantity: number) => {
    updateQuantity(id, quantity);
  };

  const handleRemove = (id: string) => {
    removeFromCart(id);
  };

  return (
    <div className="flex min-h-screen flex-col items-center justify-center p-4 lg:p-24">
      <ProductCart
        isOpen={true} // Always open for a dedicated cart page
        onClose={() => {}} // No close action for a dedicated page
        items={cartItems.map(item => ({...item, variants: item.variant ? [item.variant] : []}))}
        onQuantityChange={handleQuantityChange}
        onRemove={handleRemove}
        total={getTotalPrice()}
        title="Your Shopping Cart"
        emptyMessage="Your cart is currently empty. Start exploring our exquisite collection to find your next luxury item!"
        buttons={[
          {
            text: "Continue Shopping",            href: "/"},
          {
            text: "Proceed to Checkout",            onClick: () => alert("Proceeding to checkout!"), // Placeholder for checkout logic
          },
        ]}
      />
    </div>
  );
}
