"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ProductCart from '@/components/ecommerce/cart/ProductCart';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import React, { useState } from 'react';

export default function CartPage() {
  const [cartItems, setCartItems] = useState([
    {
      id: "prod-1",      name: "Saffron Elixir Serum",      price: "$120.00",      quantity: 1,
      imageSrc: "http://img.b2bpic.net/free-photo/arrangement-with-make-up-container_23-2149030340.jpg?_wi=2",      imageAlt: "Saffron Elixir Serum bottle"},
    {
      id: "prod-2",      name: "Rose Hydrating Mist",      price: "$65.00",      quantity: 2,
      imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669138.jpg?_wi=2",      imageAlt: "Rose Hydrating Mist spray bottle"},
  ]);

  const handleQuantityChange = (id: string, newQuantity: number) => {
    setCartItems((prevItems) =>
      prevItems.map((item) => (item.id === id ? { ...item, quantity: newQuantity } : item))
    );
  };

  const handleRemoveItem = (id: string) => {
    setCartItems((prevItems) => prevItems.filter((item) => item.id !== id));
  };

  const calculateTotal = () => {
    return cartItems
      .reduce((sum, item) => sum + parseFloat(item.price.replace('$', '')) * item.quantity, 0)
      .toFixed(2);
  };

  const navItems = [
    { name: "Home", id: "/" },
    { name: "Skincare", id: "#skincare" },
    { name: "IranPour Men", id: "#iranpour" },
    { name: "Wholesale", id: "#wholesale" },
    { name: "Contact", id: "#wholesale" },
    { name: "Cart", id: "/cart" }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="large"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={navItems}
            logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=udbkoo"
            logoAlt="IranDokht logo"
            brandName="IranDokht"
            bottomLeftText="Global Luxury Community"
            bottomRightText="contact@irandokht.com"
          />
        </div>
        <div id="cart-content" data-section="cart-content" className="min-h-screen pt-24 pb-12 flex justify-center items-center">
            <ProductCart
              isOpen={true} // Always open on this dedicated cart page
              onClose={() => {}} // No specific close action for a dedicated page
              items={cartItems}
              onQuantityChange={handleQuantityChange}
              onRemove={handleRemoveItem}
              total={`$${calculateTotal()}`}
              buttons={[
                { text: "Continue Shopping", href: "/" },
                { text: "Proceed to Checkout", href: "/checkout" }
              ]}
              title="Your Shopping Cart"
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}