"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import { fetchProducts, type ApiProduct } from "@/lib/api";
import { products as staticProducts } from "@/lib/data";

const CATEGORY_MAP: Record<string, { label: string; emoji: string }> = {
  "t-shirt": { label: "টি-শার্ট", emoji: "👕" },
  "three-piece": { label: "থ্রি পিস", emoji: "👗" },
  "saree": { label: "শাড়ি", emoji: "🥻" },
  "burqa": { label: "বোরকা", emoji: "🧕" },
  "hijab-niqab": { label: "হিজাব & নিকাব", emoji: "🧣" },
  "sunnati-dress": { label: "সুন্নাতি ড্রেস", emoji: "✨" },
  "panjabi": { label: "পাঞ্জাবি", emoji: "🕌" },
};

export function ProductsMarquee() {
  const [products, setProducts] = useState<ApiProduct[]>(
    (staticProducts as ApiProduct[]).slice(0, 15)
  );

  useEffect(() => {
    fetchProducts().then((data) => {
      if (data && data.length > 0) {
        setProducts(data.slice(0, 15));
      }
    });
  }, []);

  // Duplicate the list of products to ensure the marquee is long enough to loop seamlessly
  const displayProducts = [...products, ...products, ...products];

  return (
    <section className="mt-6 mb-10 overflow-hidden">
      <div className="mb-6 px-4 text-center sm:px-6 lg:px-8">
        <h2 className="text-2xl font-bold font-outfit text-white/90 sm:text-3xl tracking-wide">আমাদের পণ্য সমূহ</h2>
        <div className="h-[2px] w-20 bg-[#d4af37] mx-auto mt-2.5 opacity-80" />
      </div>
      <div className="relative">
        <div className="pointer-events-none absolute left-0 top-0 z-10 h-full w-16 bg-gradient-to-r from-[#07071a] to-transparent" />
        <div className="pointer-events-none absolute right-0 top-0 z-10 h-full w-16 bg-gradient-to-l from-[#07071a] to-transparent" />
        <div className="flex w-full overflow-hidden">
          <div className="animate-marquee flex gap-5 py-2">
            {displayProducts.map((p, i) => {
              const catInfo = CATEGORY_MAP[p.category] || { label: "পণ্য", emoji: "🛍️" };
              return (
                <Link
                  key={`${p.id}-${i}`}
                  href={`/product/${p.id}`}
                  className="group relative flex h-72 w-56 shrink-0 flex-col overflow-hidden rounded-2xl border border-white/10 shadow-lg transition-all duration-300 hover:border-[#d4af37]/40 hover:-translate-y-1 hover:shadow-[0_10px_26px_rgba(212,175,55,0.2)]"
                >
                  {/* Top: Image */}
                  <div className="relative h-[50%] w-full overflow-hidden bg-slate-900">
                    <Image
                      src={p.image}
                      alt={p.name}
                      fill
                      className="object-cover transition-transform duration-500 group-hover:scale-110"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/65 via-black/20 to-transparent" />
                  </div>
                  {/* Bottom: Info */}
                  <div
                    className="relative flex h-[50%] flex-col justify-between p-4 text-white"
                    style={{
                      background: "rgba(18,14,40,0.92)",
                      backdropFilter: "blur(12px)",
                      borderTop: "1px solid rgba(201,162,80,0.2)"
                    }}
                  >
                    <div>
                      <p className="text-[9px] font-bold uppercase tracking-[0.2em] text-[#d4af37]/85">
                        {catInfo.emoji} {catInfo.label}
                      </p>
                      <p className="mt-1 text-xs font-extrabold line-clamp-1 group-hover:text-[#d4af37] transition-colors">
                        {p.name}
                      </p>
                      <p className="mt-1 text-[10px] text-white/50 line-clamp-2 leading-relaxed">
                        {p.description}
                      </p>
                    </div>
                    <div className="flex items-center justify-between mt-1">
                      <span className="text-xs font-extrabold text-amber-200">৳{p.price.toLocaleString()}</span>
                      <span className="text-[10px] font-bold text-[#d4af37] hover:text-white transition-colors">অর্ডার করুন →</span>
                    </div>
                  </div>
                </Link>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}