"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import TextAbout from '@/components/sections/about/TextAbout';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import ButtonDirectionalHover from '@/components/button/ButtonDirectionalHover/ButtonDirectionalHover';
import { useEffect, useState } from 'react';
import clsx from 'clsx';
import { CheckCircle } from 'lucide-react';

// Placeholder product data (in a real app, this would be fetched based on id)
const productData = {
  id: "1",  name: "Hoodie Elite Performance",  price: "€69.99",  description: "Eleva tu estilo y rendimiento con nuestra Hoodie Elite Performance. Confeccionada con tecnología de punta, esta sudadera ofrece una comodidad inigualable y durabilidad para tus entrenamientos y el día a día. Su diseño moderno y ajuste perfecto te mantendrán listo para cualquier desafío.",  fullDetails: "Nuestra Hoodie Elite Performance está diseñada para los atletas que exigen lo mejor. Fabricada con una mezcla de algodón premium y poliéster técnico, proporciona una transpirabilidad superior y una resistencia excepcional. Las costuras reforzadas aseguran una larga vida útil, mientras que el interior suave al tacto garantiza el máximo confort. Ideal para capas o para usar sola, esta sudadera es un elemento esencial en cualquier guardarropa de alto rendimiento.",  videoSrc: "http://img.b2bpic.net/free-photo/weight-training-workout-exercise-fitness-concept_53876-144313.jpg",  imageSrc: "http://img.b2bpic.net/free-photo/portrait-adult-male-getting-ready-exercise_23-2148531045.jpg",  gallery: [
    { imageSrc: "http://img.b2bpic.net/free-photo/side-view-female-boxer-practicing-ring-with-trainer_23-2148426215.jpg", imageAlt: "Detalle de costura"},
    { imageSrc: "http://img.b2bpic.net/free-photo/man-corner-box-ring_23-2148024339.jpg", imageAlt: "Modelo vistiendo hoodie"},
    { imageSrc: "http://img.b2bpic.net/free-photo/young-sporty-woman-orange-sport-suit_1303-31740.jpg", imageAlt: "Material en detalle"}
  ],
  sizeGuide: "Consulta nuestra guía de tallas detallada para asegurar el ajuste perfecto. Disponible en S, M, L, XL, XXL. Te recomendamos medir tu pecho y longitud de brazo para una elección óptima. Las tallas son europeas estándar.",  guarantee: "Tu satisfacción es nuestra prioridad. Ofrecemos una garantía de satisfacción de 30 días. Si no estás completamente feliz con tu compra, te devolvemos el dinero sin preguntas.",  reviews: [
    { id: "rev-1", name: "Alex G.", role: "Cliente Verificado", company: "SAINTS DEN", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-training-gym-doing-push-ups_23-2147755601.jpg", imageAlt: "Alex G."},
    { id: "rev-2", name: "María P.", role: "Cliente Verificado", company: "SAINTS DEN", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-doing-warmup-exercise-before-training-gym_23-2147913380.jpg", imageAlt: "María P."},
    { id: "rev-3", name: "Juan L.", role: "Cliente Verificado", company: "SAINTS DEN", rating: 4, imageSrc: "http://img.b2bpic.net/free-photo/trans-man-working-out-gym_23-2149712788.jpg", imageAlt: "Juan L."}
  ],
  relatedProducts: [
    { id: "rp-1", name: "Rashguard Apex Pro", price: "€49.99", variant: "Negro | Tallas S-XXL", imageSrc: "http://img.b2bpic.net/free-photo/woman-comfortable-sports-resting-leaned-against-wall-finished-workout-girl-gather-energy-concept_1153-4173.jpg", imageAlt: "Rashguard Apex Pro"},
    { id: "rp-2", name: "Camiseta Oversize Dominus", price: "€34.99", variant: "Blanco | Tallas S-XXL", imageSrc: "http://img.b2bpic.net/free-vector/damn-good-black-blue-retro-calligraphy_53876-99595.jpg", imageAlt: "Camiseta Oversize Dominus"},
    { id: "rp-3", name: "Fight Shorts Warrior", price: "€59.99", variant: "Gris Oscuro | Tallas S-XL", imageSrc: "http://img.b2bpic.net/free-photo/front-view-shirtless-male-boxer_23-2148615119.jpg", imageAlt: "Fight Shorts Warrior"}
  ]
};

const globalNavItems = [
  { name: "Inicio", target: "/" },
  { name: "Streetwear", target: "/#collections" },
  { name: "Fightwear", target: "/#collections" },
  { name: "Productos", target: "/product/1" },
  { name: "Comunidad", target: "/#community" },
  { name: "Contacto", target: "/#contact" }
];

export default function ProductDetailPage() {
  const [showStickyButton, setShowStickyButton] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      const scrollThreshold = 300;
      if (window.scrollY > scrollThreshold) {
        setShowStickyButton(true);
      } else {
        setShowStickyButton(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="noiseDiagonalGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
          <NavbarStyleFullscreen
            navItems={globalNavItems.map(item => ({ name: item.name, id: item.target }))}
            logoSrc="http://img.b2bpic.net/free-vector/minimalist-fashion-typography-logo-template_742173-7469.jpg"
            logoAlt="SAINTS DEN logo"
            brandName="SAINTS DEN"
            bottomLeftText="Comunidad Global"
            bottomRightText="contacto@saintsden.com"
          />
        </div>

        <div id="product-hero" data-section="product-hero">
          <HeroSplitDualMedia
            background={{ variant: "plain" }}
            title={productData.name}
            description={`${productData.price} | ${productData.description.split('.')[0]}.`}
            tag="Producto SAINTS DEN"
            tagAnimation="slide-up"
            buttons={[
              { text: "Añadir al Carrito", onClick: () => alert(`Añadido ${productData.name} al carrito!`), href: "#" },
              { text: "Ver Guía de Tallas", href: "#size-guide" }
            ]}
            buttonAnimation="slide-up"
            mediaItems={[
              { videoSrc: productData.videoSrc, imageSrc: productData.imageSrc, imageAlt: productData.name },
              { imageSrc: productData.gallery[0].imageSrc, imageAlt: productData.gallery[0].imageAlt }
            ]}
            mediaAnimation="opacity"
            rating={5}
            ratingText="Más de 100 reseñas"
          />
        </div>

        <div id="product-details" data-section="product-details">
          <TextAbout
            useInvertedBackground={false}
            tag="Detalles del Producto"
            title="Información Completa"
            buttons={[]}
          />
          <p className="mt-4 text-base text-gray-600 dark:text-gray-300">{productData.fullDetails}</p>
        </div>

        <div id="size-guide" data-section="size-guide">
          <TextAbout
            useInvertedBackground={true}
            tag="Guía Esencial"
            title="Encuentra Tu Talla Perfecta"
            buttons={[]}
          />
          <p className="mt-4 text-base text-gray-600 dark:text-gray-300">{productData.sizeGuide}</p>
        </div>

        <div id="customer-reviews" data-section="customer-reviews">
          <TestimonialCardSixteen
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            carouselMode="auto"
            testimonials={productData.reviews}
            kpiItems={[
              { value: "5/5", label: "Calificación" },
              { value: "+100", label: "Reseñas" },
              { value: "98%", label: "Recomiendan" }
            ]}
            title="Lo Que Dicen Nuestros Clientes"
            description="Opiniones verificadas de nuestra comunidad de atletas y entusiastas del streetwear."
            tag="RESEÑAS REALES"
          />
        </div>

        <div id="related-products" data-section="related-products">
          <ProductCardFour
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="three-columns-all-equal-width"
            useInvertedBackground={true}
            products={productData.relatedProducts}
            title="Productos Relacionados"
            description="Completa tu look o tu equipamiento con artículos seleccionados que te pueden interesar."
            tag="MÁS PARA TI"
          />
        </div>

        <div id="satisfaction-guarantee" data-section="satisfaction-guarantee">
          <TextAbout
            useInvertedBackground={false}
            tag="Nuestra Promesa"
            title="Garantía de Satisfacción SAINTS DEN"
            buttons={[]}
          />
          <div className="mt-4 flex items-center gap-2 text-base text-gray-600 dark:text-gray-300">
            <CheckCircle className="text-green-500 w-5 h-5" />
            <p>{productData.guarantee}</p>
          </div>
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseReveal
            logoSrc="http://img.b2bpic.net/free-vector/minimalist-fashion-typography-logo-template_742173-7469.jpg"
            logoAlt="SAINTS DEN logo"
            logoText="SAINTS DEN"
            columns={[
              {
                title: "Compañía",                items: [
                  { label: "Sobre Nosotros", href: "/#brand-story" },
                  { label: "Embajadores", href: "/#ambassadors" },
                  { label: "Comunidad", href: "/#community" },
                  { label: "Contacto", href: "/#contact" }
                ]
              },
              {
                title: "Soporte",                items: [
                  { label: "Preguntas Frecuentes", href: "#" },
                  { label: "Política de Envíos", href: "#" },
                  { label: "Cambios y Devoluciones", href: "#" },
                  { label: "Privacidad", href: "#" }
                ]
              },
              {
                title: "Explorar",                items: [
                  { label: "Streetwear", href: "/#collections" },
                  { label: "Fightwear", href: "/#collections" },
                  { label: "Productos", href: "/product/1" },
                  { label: "Nuevos Lanzamientos", href: "/#collections" }
                ]
              }
            ]}
            copyrightText="© 2024 SAINTS DEN. Todos los derechos reservados."
          />
        </div>

        {/* Sticky Add to Cart for Mobile */}
        <div className={clsx(
          "fixed bottom-0 left-0 w-full bg-background/95 backdrop-blur-md p-4 border-t border-border z-50 transition-transform duration-300 ease-in-out",          showStickyButton ? "translate-y-0" : "translate-y-full",          "lg:hidden"
        )}>
          <ButtonDirectionalHover
            text={`Añadir al Carrito - ${productData.price}`}
            onClick={() => alert(`Añadido ${productData.name} al carrito!`)}
            className="w-full"
          />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}