"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { products as staticProducts } from "@/lib/data";
import { fetchProducts, type ApiProduct } from "@/lib/api";
import { ProductCard } from "@/components/product-card";
import { ProductGridSkeleton } from "@/components/product-grid-skeleton";

export function ProductShowcase() {
  const [loading, setLoading] = useState(true);
  const [products, setProducts] = useState<ApiProduct[]>(staticProducts as ApiProduct[]);

  const ensureMinItems = useCallback((items: ApiProduct[], min = 6) => {
    if (items.length === 0) return products.slice(0, min);

    const filled = [...items];
    let i = 0;

    while (filled.length < min) {
      filled.push(items[i % items.length]);
      i += 1;
    }

    return filled.slice(0, min);
  }, [products]);

  useEffect(() => {
    fetchProducts().then((data) => {
      setProducts(data);
      setLoading(false);
    });
  }, []);

  const arrivals = useMemo(() => ensureMinItems(products.filter((p) => p.category === "new")), [products, ensureMinItems]);
  const best = useMemo(() => ensureMinItems(products.filter((p) => p.category === "best")), [products, ensureMinItems]);

  const renderGrid = (items: ApiProduct[]) => {
    if (loading) return <ProductGridSkeleton />;

    return (
      <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
        {items.map((product, index) => (
          <ProductCard key={`${product.id}-${index}`} product={product} />
        ))}
      </div>
    );
  };

  return (
    <div className="space-y-16">
      {/* New Arrival Section */}
      <section className="mx-auto mt-16 max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mb-8 flex items-center justify-between border-b border-white/5 pb-4">
          <div className="relative pb-1">
            <h2 className="text-xl font-bold font-outfit text-white/90 sm:text-2xl tracking-wide">New Arrival</h2>
            <div className="h-[2px] w-12 bg-[#d4af37] mt-1.5 opacity-80" />
          </div>
          <Link href="/collections?category=new" className="text-xs sm:text-sm font-semibold text-amber-300/70 hover:text-white transition-colors flex items-center gap-1">
            সব দেখুন <span className="text-base">→</span>
          </Link>
        </div>
        {renderGrid(arrivals)}
      </section>

      {/* Best Sellers Section */}
      <section className="mx-auto mt-16 max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mb-8 flex items-center justify-between border-b border-white/5 pb-4">
          <div className="relative pb-1">
            <h2 className="text-xl font-bold font-outfit text-white/90 sm:text-2xl tracking-wide">Best Sellers</h2>
            <div className="h-[2px] w-12 bg-[#d4af37] mt-1.5 opacity-80" />
          </div>
          <Link href="/collections?category=best" className="text-xs sm:text-sm font-semibold text-amber-300/70 hover:text-white transition-colors flex items-center gap-1">
            সব দেখুন <span className="text-base">→</span>
          </Link>
        </div>
        {renderGrid(best)}
      </section>
    </div>
  );
}