"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { useState } from "react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SplitAboutMetric from '@/components/sections/about/SplitAboutMetric';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import ContactCenterForm from '@/components/sections/contact/ContactCenterForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Sparkles, Star, Users, ShoppingCart, X } from "lucide-react";

interface CartItem {
  id: string;
  name: string;
  price: string;
  imageSrc: string;
  imageAlt: string;
  quantity: number;
}

export default function LandingPage() {
  const [cartItems, setCartItems] = useState<CartItem[]>([]);
  const [showCart, setShowCart] = useState(false);

  const handleAddToCart = (productId: string, productName: string, productPrice: string, productImage: string, productAlt: string) => {
    setCartItems(prevItems => {
      const existingItem = prevItems.find(item => item.id === productId);
      if (existingItem) {
        return prevItems.map(item =>
          item.id === productId ? { ...item, quantity: item.quantity + 1 } : item
        );
      }
      return [...prevItems, { id: productId, name: productName, price: productPrice, imageSrc: productImage, imageAlt: productAlt, quantity: 1 }];
    });
  };

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

  const handleUpdateQuantity = (productId: string, quantity: number) => {
    if (quantity <= 0) {
      handleRemoveFromCart(productId);
    } else {
      setCartItems(prevItems =>
        prevItems.map(item =>
          item.id === productId ? { ...item, quantity } : item
        )
      );
    }
  };

  const totalItems = cartItems.reduce((sum, item) => sum + item.quantity, 0);

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="mediumSizeLargeTitles"
      background="animatedGrid"
      cardStyle="outline-light"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      {/* Shopping Cart Modal */}
      {showCart && (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
          <div className="bg-white dark:bg-slate-900 rounded-lg shadow-xl max-w-md w-full max-h-96 flex flex-col">
            <div className="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700">
              <h2 className="text-xl font-semibold">Shopping Cart ({totalItems})</h2>
              <button onClick={() => setShowCart(false)} className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded">
                <X size={24} />
              </button>
            </div>
            <div className="flex-1 overflow-y-auto p-4">
              {cartItems.length === 0 ? (
                <p className="text-center text-gray-500 py-8">Your cart is empty</p>
              ) : (
                <div className="space-y-4">
                  {cartItems.map(item => (
                    <div key={item.id} className="flex gap-3 border-b border-gray-200 dark:border-gray-700 pb-4">
                      <img src={item.imageSrc} alt={item.imageAlt} className="w-16 h-16 object-cover rounded" />
                      <div className="flex-1">
                        <h3 className="font-medium text-sm">{item.name}</h3>
                        <p className="text-sm text-gray-600 dark:text-gray-400">{item.price}</p>
                        <div className="flex items-center gap-2 mt-2">
                          <button onClick={() => handleUpdateQuantity(item.id, item.quantity - 1)} className="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600">-</button>
                          <span className="text-xs">{item.quantity}</span>
                          <button onClick={() => handleUpdateQuantity(item.id, item.quantity + 1)} className="px-2 py-1 text-xs bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600">+</button>
                          <button onClick={() => handleRemoveFromCart(item.id)} className="ml-auto text-xs text-red-600 dark:text-red-400 hover:underline">Remove</button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
            <div className="p-4 border-t border-gray-200 dark:border-gray-700">
              <button className="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">Checkout</button>
            </div>
          </div>
        </div>
      )}

      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="Luxé"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Collections", id: "products" },
            { name: "About", id: "about" },
            { name: "Models", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Shop Now", href: "products" }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Discover Timeless Elegance"
          description="Explore our curated collection of premium fashion and beautiful clothing designs. Each piece tells a story of craftsmanship and style."
          tag="New Collection"
          tagIcon={Sparkles}
          mediaItems={[
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971764353-ff9r0lol.jpg", imageAlt: "Model in elegant dress on runway" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973505965-qfwdihin.jpg", imageAlt: "Fashion model wearing luxury dress" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973506470-pgtm7e08.jpg", imageAlt: "Professional fashion photoshoot" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973606721-tswb1gx1.jpg", imageAlt: "Model with professional styling" },
            { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973607520-6x9nj9qs.jpg", imageAlt: "Beautiful clothing showcase" }
          ]}
          buttons={[
            { text: "Shop Collection", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
        />
      </div>
      
      <div id="products" data-section="products">
        <ProductCardOne
          title="Featured Products"
          description="Browse our handpicked selection of luxury clothing and accessories from this season's most anticipated collection."
          tag="Exclusive"
          tagIcon={Star}
          products={[
            {
              id: "1",
              name: "Premium Evening Dress",
              price: "$450",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973831987-bmxkdy8r.jpg",
              imageAlt: "Elegant evening gown"
            },
            {
              id: "2",
              name: "Luxury Wool Jacket",
              price: "$380",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973832408-1hixdjwi.jpg",
              imageAlt: "Designer wool jacket"
            },
            {
              id: "3",
              name: "Tailored Trousers",
              price: "$220",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973832797-zmkzilv9.jpg",
              imageAlt: "Premium tailored pants"
            }
          ]}
          gridVariant="uniform-alternating-sizes"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
        
        {/* Add to Cart buttons for products - inline UI as workaround */}
        <div className="flex justify-center gap-4 mt-8">
          <button
            onClick={() => handleAddToCart("1", "Premium Evening Dress", "$450", "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973831987-bmxkdy8r.jpg", "Elegant evening gown")}
            className="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
          >
            Add Evening Dress to Cart
          </button>
          <button
            onClick={() => handleAddToCart("2", "Luxury Wool Jacket", "$380", "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973832408-1hixdjwi.jpg", "Designer wool jacket")}
            className="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
          >
            Add Wool Jacket to Cart
          </button>
          <button
            onClick={() => handleAddToCart("3", "Tailored Trousers", "$220", "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766973832797-zmkzilv9.jpg", "Premium tailored pants")}
            className="bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
          >
            Add Trousers to Cart
          </button>
        </div>
        
        {/* Cart Button */}
        <div className="fixed top-4 right-4 z-40">
          <button
            onClick={() => setShowCart(!showCart)}
            className="bg-purple-600 hover:bg-purple-700 text-white p-3 rounded-full shadow-lg transition-colors flex items-center gap-2"
          >
            <ShoppingCart size={24} />
            {totalItems > 0 && (
              <span className="bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                {totalItems}
              </span>
            )}
          </button>
        </div>
      </div>
      
      <div id="about" data-section="about">
        <SplitAboutMetric
          title="Crafted for Beauty"
          description={[
            "Since 2015, Luxé has been dedicated to bringing sophisticated, timeless fashion to discerning customers worldwide. Each piece in our collection is carefully selected and designed to embody elegance, quality, and authentic style. We believe that beautiful clothing should make you feel confident and inspired."
          ]}
          metrics={[
            { label: "Satisfied Customers", value: "50K+" },
            { label: "Collections Launched", value: "12" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="features" data-section="features">
        <FeatureCardTwentyOne
          title="Why Choose Luxé"
          description="Discover the features that make our fashion brand stand out in the industry."
          tag="Premium Quality"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766970907032-1blzmqcq.jpg"
          imageAlt="Fashion design and tailoring process"
          accordionItems={[
            {
              id: "1",
              title: "Custom Design Options",
              content: "Work with our designers to create bespoke pieces tailored to your exact specifications and preferences. From fabric selection to final fitting."
            },
            {
              id: "2",
              title: "Sustainable Materials",
              content: "We are committed to using ethically sourced, eco-friendly fabrics and sustainable production practices in all our collections."
            },
            {
              id: "3",
              title: "Premium Craftsmanship",
              content: "Each garment is handcrafted by skilled artisans with decades of experience in luxury fashion production."
            }
          ]}
          useInvertedBackground="noInvert"
          mediaPosition="left"
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Impact"
          description="See the numbers behind our commitment to excellence and customer satisfaction."
          tag="Results"
          metrics={[
            {
              id: "1",
              value: "98%",
              title: "Customer Satisfaction",
              description: "Rated excellent by our valued customers",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766970906171-hjfra2pz.jpg",
              imageAlt: "Happy customers shopping in boutique"
            },
            {
              id: "2",
              value: "24H",
              title: "Delivery Time",
              description: "Express shipping available for all orders",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971767174-s6q4uoux.jpg",
              imageAlt: "Fashion collection display"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="team" data-section="team">
        <TeamCardSix
          title="Featured Models"
          description="Meet the beautiful faces representing our collections this season."
          tag="Our Models"
          tagIcon={Users}
          members={[
            {
              id: "1",
              name: "Alexandra Sterling",
              role: "Lead Model",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810997055-ljmx5kmk.jpg",
              imageAlt: "Alexandra Sterling professional portrait"
            },
            {
              id: "2",
              name: "Sofia Martinez",
              role: "Featured Model",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766154635301-vse33sxl.jpg",
              imageAlt: "Sofia Martinez fashion model"
            },
            {
              id: "3",
              name: "Emma Rosewood",
              role: "Exclusive Model",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971772161-nr9paky2.jpg",
              imageAlt: "Emma Rosewood portrait"
            },
            {
              id: "4",
              name: "Isabella Chen",
              role: "Rising Star",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971765388-hloexpv0.jpg",
              imageAlt: "Isabella Chen model photo"
            }
          ]}
          gridVariant="uniform-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFive
          title="What Our Customers Say"
          description="Hear from fashion enthusiasts and style icons who love Luxé."
          tag="Testimonials"
          testimonials={[
            {
              id: "1",
              name: "Jasmine Park, Fashion Influencer",
              date: "Date: 15 January 2025",
              title: "Simply Exceptional Quality",
              quote: "The attention to detail in every piece is remarkable. I've invested in several items from Luxé and each one has become a wardrobe staple. The craftsmanship is unmatched.",
              tag: "Premium Customer",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg"
            },
            {
              id: "2",
              name: "Victoria Holmes, Style Blogger",
              date: "Date: 22 December 2024",
              title: "Elevated My Entire Wardrobe",
              quote: "Shopping with Luxé has transformed how I approach fashion. The pieces are timeless, versatile, and make me feel confident in everything I wear.",
              tag: "Loyal Customer",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183843211-zal0n8gj.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183843211-zal0n8gj.jpg"
            },
            {
              id: "3",
              name: "Amelia Richardson, Executive",
              date: "Date: 18 November 2024",
              title: "Investment Pieces Worth Every Dollar",
              quote: "These are not just clothes, they are investments in quality and style. Every garment feels luxurious and lasts beautifully through years of wear.",
              tag: "Executive",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183844045-gbini56u.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766183844045-gbini56u.jpg"
            },
            {
              id: "4",
              name: "Rebecca Turner, Fashion Designer",
              date: "Date: 10 October 2024",
              title: "Inspiring Craftsmanship",
              quote: "As someone in the industry, I deeply appreciate the design philosophy and execution at Luxé. The collections are beautifully curated and thoughtfully designed.",
              tag: "Industry Professional",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971771014-s49lscnq.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766971771014-s49lscnq.jpg"
            },
            {
              id: "5",
              name: "Sophie Laurent, Stylist",
              date: "Date: 05 September 2024",
              title: "My Go-To for Client Styling",
              quote: "Luxé has become my trusted source for styling clients. The quality, fit, and aesthetic are consistently excellent across all collections.",
              tag: "Stylist",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810996198-rgoz7x9l.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810996198-rgoz7x9l.jpg"
            },
            {
              id: "6",
              name: "Grace Mitchell, Magazine Editor",
              date: "Date: 28 August 2024",
              title: "Setting Fashion Standards",
              quote: "Luxé represents everything we love about modern luxury fashion. Their commitment to quality and design excellence is evident in every collection.",
              tag: "Editor",
              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810997055-ljmx5kmk.jpg",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766810997055-ljmx5kmk.jpg"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactCenterForm
          title="Get in Touch"
          description="Have questions about our collections or interested in custom designs? Reach out to our team and let's create something beautiful together."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true }
          ]}
          textarea={{ name: "message", placeholder: "Tell us about your inquiry...", rows: 5, required: true }}
          useInvertedBackground="noInvert"
          buttonText="Send Message"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Luxé"
          columns={[
            {
              title: "Shop",
              items: [
                { label: "New Arrivals", href: "#products" },
                { label: "Collections", href: "#products" },
                { label: "Sale", href: "#products" },
                { label: "Accessories", href: "#products" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Story", href: "#about" },
                { label: "Models", href: "#team" },
                { label: "Sustainability", href: "#" }
              ]
            },
            {
              title: "Customer Care",
              items: [
                { label: "Contact Us", href: "#contact" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" },
                { label: "FAQ", href: "#" }
              ]
            },
            {
              title: "Connect",
              items: [
                { label: "Instagram", href: "#" },
                { label: "Facebook", href: "#" },
                { label: "Pinterest", href: "#" },
                { label: "Newsletter", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Luxé Fashion. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}