"use client";

import { Suspense, useState, useEffect, startTransition } from "react";
import { useLanguage } from "@/contexts/LanguageContext";
import { useSearchParams, useRouter } from "next/navigation";
import { categories } from "@/data/products";
import type { Product } from "@/data/products";
import { listProducts } from "@/lib/api/products";
import ProductCard from "@/components/ProductCard";

function ShopContent() {
  const { t } = useLanguage();
  const searchParams = useSearchParams();
  const router = useRouter();
  const selectedCategory = searchParams.get("category") || "all";
  const [products, setProducts] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);

  const setCategory = (cat: string) => {
    router.push(cat === "all" ? "/boutique" : `/boutique?category=${cat}`);
  };

  useEffect(() => {
    startTransition(() => setLoading(true));
    listProducts({
      per_page: 100,
      category: selectedCategory === "all" ? undefined : selectedCategory,
    })
      .then((res) => setProducts(res.data))
      .catch((e) => { console.error("[boutique] listProducts failed:", e); setProducts([]); })
      .finally(() => setLoading(false));
  }, [selectedCategory]);

  return (
    <div className="min-h-screen py-20 lg:py-12">
      <div className="container mx-auto px-4 lg:px-8">
        <h1 className="font-serif text-3xl lg:text-5xl text-center mb-8">{t("shop.title")}</h1>

        <div className="flex flex-wrap justify-center gap-2 mb-10">
          <button
            onClick={() => setCategory("all")}
            className={`px-4 py-2 rounded-full text-sm transition-colors ${
              selectedCategory === "all"
                ? "bg-primary text-primary-foreground"
                : "bg-muted text-muted-foreground hover:bg-accent"
            }`}
          >
            {t("shop.filter.all")}
          </button>
          {categories.map((cat) => (
            <button
              key={cat.id}
              onClick={() => setCategory(cat.id)}
              className={`px-4 py-2 rounded-full text-sm transition-colors cursor-pointer ${
                selectedCategory === cat.id
                  ? "bg-primary text-primary-foreground"
                  : "bg-muted text-muted-foreground hover:bg-accent"
              }`}
            >
              {cat.name}
            </button>
          ))}
        </div>

        {loading ? (
          <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
            {Array.from({ length: 8 }).map((_, i) => (
              <div key={i} className="aspect-[3/4] bg-muted animate-pulse rounded-lg" />
            ))}
          </div>
        ) : products.length === 0 ? (
          <p className="text-center text-muted-foreground py-20">{t("shop.no_products")}</p>
        ) : (
          <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
            {products.map((product) => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

export default function Shop() {
  return (
    <Suspense>
      <ShopContent />
    </Suspense>
  );
}