manoon-headless/src/components/product/ProductDetail.tsx

"use client";

import { useState, useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronDown, Star, Minus, Plus } from "lucide-react";
import { useTranslations } from "next-intl";
import type { Product } from "@/types/saleor";
import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
import { getProductPrice, getProductPriceAmount, getLocalizedProduct, formatPrice } from "@/lib/saleor";
import ProductCard from "@/components/product/ProductCard";
import ProductBenefits from "@/components/product/ProductBenefits";
import ProductReviews from "@/components/product/ProductReviews";
import AsSeenIn from "@/components/home/AsSeenIn";
import TrustBadges from "@/components/home/TrustBadges";
import BeforeAfterGallery from "@/components/home/BeforeAfterGallery";
import HowItWorks from "@/components/home/HowItWorks";
import NewsletterSection from "@/components/home/NewsletterSection";

interface ProductDetailProps {
  product: Product;
  relatedProducts: Product[];
  locale?: string;
}

function ExpandableSection({
  title,
  children,
  defaultOpen = false
}: {
  title: string;
  children: React.ReactNode;
  defaultOpen?: boolean;
}) {
  const [isOpen, setIsOpen] = useState(defaultOpen);

  return (
    <div className="border-b border-[#e5e5e5]">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full py-5 flex items-center justify-between text-left group"
      >
        <span className="text-sm uppercase tracking-[0.1em] font-medium">
          {title}
        </span>
        <ChevronDown
          className={`w-5 h-5 transition-transform duration-300 ${isOpen ? 'rotate-180' : ''}`}
          strokeWidth={1.5}
        />
      </button>
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.3 }}
            className="overflow-hidden"
          >
            <div className="pb-6 text-[#666666] text-sm leading-relaxed">
              {children}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

function StarRating({ rating = 5, count = 0 }: { rating?: number; count?: number }) {
  return (
    <div className="flex items-center gap-1">
      <div className="flex">
        {[...Array(5)].map((_, i) => (
          <Star
            key={i}
            className={`w-4 h-4 ${i < rating ? 'fill-yellow-400 text-yellow-400' : 'text-gray-300'}`}
          />
        ))}
      </div>
      {count > 0 && (
        <span className="text-sm text-[#666666] ml-1">({count >= 1000 ? '1000+' : count})</span>
      )}
    </div>
  );
}

export default function ProductDetail({ product, relatedProducts, locale = "sr" }: ProductDetailProps) {
  const t = useTranslations("ProductDetail");
  const tProduct = useTranslations("Product");
  const [selectedImage, setSelectedImage] = useState(0);
  const [quantity, setQuantity] = useState(1);
  const [isAdding, setIsAdding] = useState(false);
  const [urgencyIndex, setUrgencyIndex] = useState(0);
  const { addLine, openCart } = useSaleorCheckoutStore();

  useEffect(() => {
    const interval = setInterval(() => {
      setUrgencyIndex(prev => (prev + 1) % 3);
    }, 3000);
    return () => clearInterval(interval);
  }, []);

  const urgencyMessages = [
    { icon: "🚀", text: t("urgency1") },
    { icon: "🛒", text: t("urgency2") },
    { icon: "👀", text: t("urgency3") },
  ];

  const localized = getLocalizedProduct(product, locale);
  const variant = product.variants?.[0];

  const images = product.media?.length > 0
    ? product.media.filter(m => m.type === "IMAGE")
    : [{ id: "0", url: "/placeholder-product.jpg", alt: localized.name, type: "IMAGE" as const }];

  const handleAddToCart = async () => {
    if (!variant?.id) return;

    setIsAdding(true);
    try {
      await addLine(variant.id, quantity);
      openCart();
    } finally {
      setIsAdding(false);
    }
  };

  const isAvailable = variant?.quantityAvailable > 0;
  const price = getProductPrice(product);
  const priceAmount = getProductPriceAmount(product);
  const originalPrice = priceAmount > 0 ? formatPrice(Math.round(priceAmount * 1.30)) : null;

  const shortDescription = localized.description
    ? localized.description.split('.')[0] + '.'
    : locale === "en" ? "Premium natural oil for your beauty routine." : "Premium prirodno ulje za vašu rutinu lepote.";

  const benefits = product.metadata?.find(m => m.key === "benefits")?.value?.split(',') || [
    locale === "en" ? "Natural" : "Prirodno",
    locale === "en" ? "Organic" : "Organsko",
    locale === "en" ? "Cruelty-free" : "Bez okrutnosti",
  ];

  return (
    <>
      <section className="min-h-screen" id="product-detail">
        <div className="border-b border-[#e5e5e5] pt-[72px] lg:pt-[72px]">
          <div className="container py-5">
            <nav className="flex items-center gap-2 text-sm">
              <Link href={`/${locale.toLowerCase()}`} className="text-[#666666] hover:text-black transition-colors">
                {t("home")}
              </Link>
              <span className="text-[#999999]">/</span>
              <span className="text-[#1a1a1a]">{localized.name}</span>
            </nav>
          </div>
        </div>

        <div className="container py-12 lg:py-16">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.6 }}
              className="flex flex-col md:flex-row gap-4"
            >
              {images.length > 1 && (
                <div className="hidden md:flex flex-col gap-3 w-20 flex-shrink-0">
                  {images.map((image, index) => (
                    <button
                      key={image.id}
                      onClick={() => setSelectedImage(index)}
                      className={`relative aspect-square w-full overflow-hidden border-2 transition-colors ${
                        selectedImage === index
                          ? "border-black"
                          : "border-transparent hover:border-[#999999]"
                      }`}
                    >
                      <img
                        src={image.url}
                        alt={image.alt || localized.name}
                        className="w-full h-full object-cover"
                      />
                    </button>
                  ))}
                </div>
              )}

              <div className="relative w-full aspect-square bg-[#f8f9fa] overflow-hidden flex-1">
                <img
                  src={images[selectedImage].url}
                  alt={images[selectedImage].alt || localized.name}
                  className="w-full h-full object-cover"
                />

                {images.length > 1 && (
                  <>
                    <button
                      onClick={() => setSelectedImage(prev => prev === 0 ? images.length - 1 : prev - 1)}
                      className="absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/80 hover:bg-white rounded-full flex items-center justify-center shadow-md transition-all hover:scale-110 md:hidden"
                      aria-label="Previous image"
                    >
                      <svg className="w-5 h-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
                      </svg>
                    </button>

                    <button
                      onClick={() => setSelectedImage(prev => prev === images.length - 1 ? 0 : prev + 1)}
                      className="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 bg-white/80 hover:bg-white rounded-full flex items-center justify-center shadow-md transition-all hover:scale-110 md:hidden"
                      aria-label="Next image"
                    >
                      <svg className="w-5 h-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                      </svg>
                    </button>

                    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 md:hidden">
                      {images.map((_, index) => (
                        <button
                          key={index}
                          onClick={() => setSelectedImage(index)}
                          className={`w-2 h-2 rounded-full transition-all ${
                            selectedImage === index ? "bg-white w-4" : "bg-white/50"
                          }`}
                          aria-label={`Go to image ${index + 1}`}
                        />
                      ))}
                    </div>
                  </>
                )}
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="lg:pl-8"
            >
              <motion.div
                key={urgencyIndex}
                initial={{ opacity: 0, y: -10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: 10 }}
                transition={{ duration: 0.3 }}
                className="bg-white/80 backdrop-blur-sm text-[#1a1a1a] py-3 rounded-lg mb-4 text-sm font-medium text-left"
              >
                <span className="mr-2">{urgencyMessages[urgencyIndex].icon}</span>
                {urgencyMessages[urgencyIndex].text}
              </motion.div>

              <h1 className="text-3xl md:text-4xl font-medium mb-4 tracking-tight">
                {localized.name}
              </h1>

              <p className="text-[#666666] leading-relaxed mb-4">
                {shortDescription}
              </p>

              <div className="flex items-center justify-start gap-2 mb-6">
                <span className="relative flex h-3 w-3">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
                </span>
                <span className="text-red-600 text-sm font-medium">{t("stocksRunningOut")}</span>
              </div>

              {originalPrice && priceAmount > 0 && (
                <div className="mb-4">
                  <div className="flex items-center gap-3 mb-2">
                    <span className="text-xl text-[#666666] line-through">
                      {originalPrice}
                    </span>
                    <span className="bg-[#b91c1c] text-white text-xs font-bold px-2 py-1 rounded">
                      -30%
                    </span>
                  </div>
                  <span className="text-3xl font-bold text-[#b91c1c]">
                    {price}
                  </span>
                </div>
              )}

              {!originalPrice && (
                <div className="flex items-center justify-between mb-8">
                  <span className="text-3xl font-medium">
                    {price || tProduct("outOfStock")}
                  </span>
                  <StarRating rating={5} count={1000} />
                </div>
              )}

              <div className="border-t border-[#e5e5e5] mb-8" />

              {product.variants && product.variants.length > 1 && (
                <div className="mb-8">
                  <div className="flex items-center justify-between mb-4">
                    <span className="text-sm uppercase tracking-[0.1em] font-medium">
                      {t("size")}
                    </span>
                  </div>
                  <div className="flex gap-3">
                    {product.variants.map((v) => (
                      <button
                        key={v.id}
                        className={`px-5 py-3 text-sm border-2 transition-colors ${
                          v.id === variant?.id
                            ? "border-black bg-black text-white"
                            : "border-[#e5e5e5] hover:border-[#999999]"
                        }`}
                      >
                        {v.name}
                      </button>
                    ))}
                  </div>
                </div>
              )}

              <div className="flex items-center gap-4 mb-8">
                <span className="text-sm uppercase tracking-[0.1em] font-medium w-16">
                  {t("qty")}
                </span>
                <div className="flex items-center border-2 border-[#1a1a1a]">
                  <button
                    onClick={() => setQuantity(Math.max(1, quantity - 1))}
                    className="w-12 h-12 flex items-center justify-center hover:bg-[#f8f9fa] transition-colors"
                    disabled={quantity <= 1}
                  >
                    <Minus className="w-4 h-4" />
                  </button>
                  <span className="w-14 text-center text-base font-medium">{quantity}</span>
                  <button
                    onClick={() => setQuantity(quantity + 1)}
                    className="w-12 h-12 flex items-center justify-center hover:bg-[#f8f9fa] transition-colors"
                  >
                    <Plus className="w-4 h-4" />
                  </button>
                </div>
              </div>

              {isAvailable ? (
                <button
                  onClick={handleAddToCart}
                  disabled={isAdding}
                  className="w-full h-16 bg-black text-white text-[13px] uppercase tracking-[0.15em] font-semibold hover:bg-[#333333] active:bg-[#1a1a1a] transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed mb-6 hover:scale-[1.02] shadow-lg hover:shadow-xl"
                >
                  {isAdding
                    ? t("adding")
                    : t("transformHairSkin")
                  }
                </button>
              ) : (
                <div className="w-full h-16 bg-[#f8f9fa] text-[#666666] flex items-center justify-center text-base uppercase tracking-[0.15em] mb-8">
                  {t("outOfStock")}
                </div>
              )}

              <div className="flex items-center justify-center gap-2 mb-6">
                <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
                </svg>
                <p className="text-sm text-[#666666]">
                  {t("freeShipping")}
                </p>
              </div>

              <div className="grid grid-cols-3 gap-4 mb-8 p-4 bg-[#f8f9fa] rounded-lg">
                <div className="text-center">
                  <svg className="w-6 h-6 mx-auto mb-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                  </svg>
                  <p className="text-xs text-[#666666]">
                    {t("guarantee")}
                  </p>
                </div>
                <div className="text-center">
                  <svg className="w-6 h-6 mx-auto mb-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                  </svg>
                  <p className="text-xs text-[#666666]">
                    {t("secureCheckout")}
                  </p>
                </div>
                <div className="text-center">
                  <svg className="w-6 h-6 mx-auto mb-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-8m15.357 8H15" />
                  </svg>
                  <p className="text-xs text-[#666666]">
                    {t("easyReturns")}
                  </p>
                </div>
              </div>

              <div className="border-t border-[#e5e5e5] mb-8" />

              <div className="mb-8">
                <div className="flex items-center justify-between mb-4">
                  <span className="text-sm uppercase tracking-[0.1em] font-medium">
                    {t("benefits")}
                  </span>
                </div>
                <div className="flex flex-wrap gap-2">
                  {benefits.map((benefit, index) => (
                    <span
                      key={index}
                      className="px-4 py-2 text-sm border border-[#e5e5e5] text-[#666666]"
                    >
                      {benefit.trim()}
                    </span>
                  ))}
                </div>
              </div>

              <div>
                <ExpandableSection title={t("description")}>
                  <div dangerouslySetInnerHTML={{ __html: localized.description }} />
                </ExpandableSection>

                <ExpandableSection title={t("howToUse")}>
                  <p>{t("howToUseText")}</p>
                </ExpandableSection>

                <ExpandableSection title={t("ingredients")}>
                  <p>{t("ingredientsText")}</p>
                </ExpandableSection>
              </div>

              {variant?.sku && (
                <p className="text-xs text-[#999999] mt-8">
                  SKU: {variant.sku}
                </p>
              )}
            </motion.div>
          </div>
        </div>
      </section>

      <ProductReviews locale={locale} productName={localized.name} />

      <AsSeenIn />

      <BeforeAfterGallery />

      {relatedProducts && relatedProducts.length > 0 && (
        <section className="py-20 lg:py-28 bg-[#f8f9fa]">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center mb-16">
              <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
                {t("youMayAlsoLike")}
              </span>
              <h2 className="text-3xl md:text-4xl font-medium">
                {t("similarProducts")}
              </h2>
            </div>
            <div className="flex flex-wrap justify-center gap-6 lg:gap-8">
              {relatedProducts.filter(p => p && p.id).slice(0, 4).map((relatedProduct, index) => (
                <div key={relatedProduct.id} className="w-full sm:w-[calc(50%-12px)] lg:w-[calc(25%-18px)]">
                  <ProductCard
                    product={relatedProduct}
                    index={index}
                    locale={locale}
                  />
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      <ProductBenefits key={locale} locale={locale} />

      <TrustBadges />

      <HowItWorks />

      <NewsletterSection />
    </>
  );
}