'use client';

import Link from 'next/link';
import Image from 'next/image';

interface Product {
  id: number;
  name: string;
  slug: string;
  thumbnail?: string;
  category?: { name: string; slug: string };
  short_description?: string;
}

interface RelatedProductsCarouselProps {
  products: Product[];
}

export default function RelatedProductsCarousel({ products }: RelatedProductsCarouselProps) {
  if (!products || products.length === 0) return null;

  // Duplicate items for seamless looping
  const items = products.length < 4 ? [...products, ...products, ...products] : [...products, ...products];

  return (
    <section className="py-16 bg-white border-t border-surface-100">
      <div className="container-custom mb-8">
        <div className="flex items-center gap-3">
          <span className="w-1 h-7 rounded-full bg-primary-500 block" />
          <h2 className="text-2xl font-bold text-dark-800">Sản phẩm cùng danh mục</h2>
        </div>
      </div>

      {/* Marquee wrapper */}
      <div className="overflow-hidden relative">
        {/* Fade edges */}
        <div className="absolute left-0 top-0 bottom-0 w-16 z-10 bg-gradient-to-r from-white to-transparent pointer-events-none" />
        <div className="absolute right-0 top-0 bottom-0 w-16 z-10 bg-gradient-to-l from-white to-transparent pointer-events-none" />

        <div
          className="flex gap-5 animate-marquee"
          style={{ width: 'max-content' }}
        >
          {items.map((product, index) => (
            <Link
              key={`${product.id}-${index}`}
              href={`/san-pham/${product.slug}`}
              className="group shrink-0 w-56"
            >
              <div className="bg-white rounded-2xl border border-surface-200 overflow-hidden shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 h-full flex flex-col">
                {/* Image */}
                <div className="aspect-square bg-surface-50 flex items-center justify-center relative border-b border-surface-100 overflow-hidden">
                  {product.thumbnail ? (
                    <Image
                      src={product.thumbnail}
                      alt={product.name}
                      fill
                      className="object-cover group-hover:scale-105 transition-transform duration-500"
                    />
                  ) : (
                    <div className="w-20 h-20 rounded-full bg-white shadow-sm flex items-center justify-center text-4xl">
                      💊
                    </div>
                  )}
                </div>

                {/* Info */}
                <div className="p-4 flex-1 flex flex-col">
                  <span className="text-[10px] font-bold text-primary-500 uppercase tracking-wider block mb-1">
                    {product.category?.name}
                  </span>
                  <h3 className="text-sm font-semibold text-dark-700 line-clamp-2 group-hover:text-primary-600 transition-colors leading-snug">
                    {product.name}
                  </h3>
                  <p className="mt-auto pt-3 text-xs text-primary-600 font-medium flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                    Xem chi tiết →
                  </p>
                </div>
              </div>
            </Link>
          ))}
        </div>
      </div>

      <style dangerouslySetInnerHTML={{ __html: `
        @keyframes marquee {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .animate-marquee {
          animation: marquee 30s linear infinite;
        }
        .animate-marquee:hover {
          animation-play-state: paused;
        }
      `}} />
    </section>
  );
}