// productdetails/components/RelatedProducts.tsx
"use client";

import React, { useEffect, useRef, useState } from 'react';
import Swiper from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';

interface RelatedProductsProps {
  currentProductId: string;
  category?: string;
}

export default function RelatedProducts({ currentProductId, category }: RelatedProductsProps) {
  const swiperRef = useRef<HTMLDivElement>(null);
  const [products, setProducts] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchRelatedProducts = async () => {
      try {
        // Fetch related products based on category
        const url = category 
          ? `/clientapi/products?category=${category}&limit=8`
          : `/clientapi/products?limit=8`;
        
        const response = await fetch(url);
        const result = await response.json();
        
        if (result.success && result.data) {
          // Filter out current product
          const filtered = result.data.filter((p: any) => p._id !== currentProductId);
          setProducts(filtered.slice(0, 8));
        }
      } catch (error) {
        console.error('Error fetching related products:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchRelatedProducts();
  }, [currentProductId, category]);

  useEffect(() => {
    if (swiperRef.current && products.length > 0) {
      const swiper = new Swiper(swiperRef.current, {
        slidesPerView: 1,
        spaceBetween: 20,
        navigation: {
          nextEl: '.swiper-button-next-reception-collections',
          prevEl: '.swiper-button-prev-reception-collections',
        },
        breakpoints: {
          640: { slidesPerView: 2 },
          768: { slidesPerView: 3 },
          1024: { slidesPerView: 4 },
        },
      });

      return () => swiper.destroy();
    }
  }, [products]);

  if (loading) {
    return (
      <section className="productcontainer">
        <div className="container container-xxl px-3">
          <div className="section-heading sm:text-center">
            <h2>You May Also Like</h2>
          </div>
          <div className="text-center py-10">
            <p>Loading related products...</p>
          </div>
        </div>
      </section>
    );
  }

  if (products.length === 0) {
    return null;
  }

  return (
    <section className="productcontainer">
      <div className="container container-xxl px-3">
        <div className="section-heading sm:text-center">
          <h2>You May Also Like</h2>
        </div>
        <div className="flex flex-wrap -mx-n3">
          <div className="px-3 w-full relative">
            <div ref={swiperRef} className="swiper">
              <div className="swiper-wrapper">
                {products.map((product) => (
                  <div className="swiper-slide" key={product._id}>
                    <ProductCard product={product} />
                  </div>
                ))}
              </div>
            </div>
            <div className="swiper-nav">
              <div className="swiper-button-prev swiper-button-prev-reception-collections"></div>
              <div className="swiper-button-next swiper-button-next-reception-collections"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProductCard({ product }: { product: any }) {
  const price = product.price || product.minPrice || 0;
  const originalPrice = product.maxPrice && product.maxPrice > price ? product.maxPrice : undefined;
  const discount = originalPrice ? Math.round(((originalPrice - price) / originalPrice) * 100) : 0;
  const image = product.defaultImage || product.variants?.[0]?.images?.[0]?.url || '/images/placeholder.jpg';
  
  return (
    <div className="productbx">
      <div className="productbximg relative">
        <a href={`/productdetails/${product.slug}`}>
          <img src={image} alt={product.name} />
        </a>
        {discount > 0 && (
          <div className="discountbx absolute top-2 left-2">
            <span className="discounttxt">{discount}% Off</span>
          </div>
        )}
      </div>
      <div className="productcontent">
        <div className="flex gap-2 justify-between mb-2">
          <h3><a href={`/productdetails/${product.slug}`}>{product.name}</a></h3>
          <button className="productcart" type="button">
            <i className="icon icon-cart-bag"></i>
          </button>
        </div>
        <div className="flex gap-2 justify-between">
          {originalPrice && (
            <span className="crossprice">₹{originalPrice.toLocaleString("en-IN")}.00</span>
          )}
          <span className="price">₹{price.toLocaleString("en-IN")}.00</span>
        </div>
      </div>
    </div>
  );
}