badoHair_fe/app/produit/[id]/page.tsx

"use client";

import { useState, useEffect } from "react";
import { Star, ChevronLeft, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useLanguage } from "@/contexts/LanguageContext";
import { useCart } from "@/contexts/CartContext";
import { getProduct, listProducts } from "@/lib/api/products";
import type { Product } from "@/data/products";
import ProductCard from "@/components/ProductCard";
import Link from "next/link";
import { useParams } from "next/navigation";
import { toast } from "sonner";

export default function ProductDetail() {
  const { id } = useParams();
  const { t } = useLanguage();
  const { addItem } = useCart();

  const [product, setProduct] = useState<Product | null>(null);
  const [similar, setSimilar] = useState<Product[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedImage, setSelectedImage] = useState(0);
  const [selectedColor, setSelectedColor] = useState("");
  const [selectedLength, setSelectedLength] = useState("");

  useEffect(() => {
    if (!id) return;
    setLoading(true);
    getProduct(id as string)
      .then((p) => {
        setProduct(p);
        setSelectedImage(0);
        setSelectedColor(p.colors[0] ?? "");
        setSelectedLength(p.lengths[0] ?? "");
        return listProducts({ category: p.category, exclude: p.id, per_page: 4 });
      })
      .then((res) => setSimilar(res.data))
      .catch((e) => console.error("[produit] fetch failed:", e))
      .finally(() => setLoading(false));
  }, [id]);

  if (loading) {
    return (
      <div className="min-h-screen py-6 lg:py-12">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
            <div className="aspect-[3/4] bg-muted animate-pulse rounded-lg" />
            <div className="space-y-4">
              <div className="h-8 bg-muted animate-pulse rounded w-3/4" />
              <div className="h-4 bg-muted animate-pulse rounded w-1/4" />
              <div className="h-24 bg-muted animate-pulse rounded" />
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (!product) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <p className="text-muted-foreground">{t("product.not_found")}</p>
      </div>
    );
  }

  const handleAddToCart = () => {
    const color = selectedColor || product.colors[0];
    const length = selectedLength || product.lengths[0];
    addItem(product, color, length);
    toast.success(`${t("product.added_to_cart")} — ${product.name} — ${color}, ${length}`);
  };

  return (
    <div className="min-h-screen py-6 lg:py-12">
      <div className="container mx-auto px-4 lg:px-8">
        <Link href="/boutique" className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-6">
          <ChevronLeft className="h-4 w-4" /> {t("nav.shop")}
        </Link>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
          <div className="space-y-3">
            <div className="aspect-[3/4] rounded-lg overflow-hidden bg-muted">
              <img
                src={product.images[selectedImage]}
                alt={product.name}
                className="w-full h-full object-cover"
              />
            </div>
            {product.images.length > 1 && (
              <div className="flex gap-2">
                {product.images.map((img, i) => (
                  <button
                    key={i}
                    onClick={() => setSelectedImage(i)}
                    className={`w-16 h-20 rounded-md overflow-hidden border-2 transition-colors ${
                      i === selectedImage ? "border-primary" : "border-transparent"
                    }`}
                  >
                    <img src={img} alt="" className="w-full h-full object-cover" />
                  </button>
                ))}
              </div>
            )}
          </div>

          <div className="space-y-6">
            <div>
              <h1 className="font-serif text-2xl lg:text-4xl font-semibold mb-2">{product.name}</h1>
              <div className="flex items-center gap-2 mb-4">
                <div className="flex gap-0.5">
                  {Array.from({ length: 5 }).map((_, i) => (
                    <Star
                      key={i}
                      className={`h-4 w-4 ${
                        i < Math.floor(product.rating) ? "fill-primary text-primary" : "text-muted"
                      }`}
                    />
                  ))}
                </div>
                <span className="text-sm text-muted-foreground">({product.reviewCount} {t("product.reviews")})</span>
              </div>
              <div className="flex items-baseline gap-3">
                <span className="text-2xl font-semibold">{product.price} €</span>
                {product.originalPrice && (
                  <span className="text-lg text-muted-foreground line-through">
                    {product.originalPrice} €
                  </span>
                )}
              </div>
            </div>

            <p className="text-muted-foreground leading-relaxed">{product.description}</p>

            <div>
              <h3 className="text-sm font-medium mb-2">{t("product.color")}</h3>
              <div className="flex flex-wrap gap-2">
                {product.colors.map((color) => (
                  <button
                    key={color}
                    onClick={() => setSelectedColor(color)}
                    className={`px-3 py-1.5 rounded-full text-sm border transition-colors cursor-pointer ${
                      selectedColor === color
                        ? "border-primary bg-accent text-accent-foreground"
                        : "border-border text-muted-foreground hover:border-primary"
                    }`}
                  >
                    {color}
                  </button>
                ))}
              </div>
            </div>

            <div>
              <h3 className="text-sm font-medium mb-2">{t("product.length")}</h3>
              <div className="flex gap-2">
                {product.lengths.map((length) => (
                  <button
                    key={length}
                    onClick={() => setSelectedLength(length)}
                    className={`px-4 py-2 rounded-md text-sm border transition-colors cursor-pointer ${
                      selectedLength === length
                        ? "border-primary bg-accent text-accent-foreground"
                        : "border-border text-muted-foreground hover:border-primary"
                    }`}
                  >
                    {length}
                  </button>
                ))}
              </div>
            </div>

            <Button size="lg" className="w-full text-sm tracking-wide" onClick={handleAddToCart}>
              {t("cart.add")}
            </Button>

            {product.features.length > 0 && (
              <div>
                <h3 className="text-sm font-medium mb-3">{t("product.features")}</h3>
                <ul className="space-y-2">
                  {product.features.map((feature) => (
                    <li key={feature} className="flex items-center gap-2 text-sm text-muted-foreground">
                      <Check className="h-4 w-4 text-primary" />
                      {feature}
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        </div>

        {similar.length > 0 && (
          <section className="mt-16 lg:mt-24">
            <h2 className="font-serif text-2xl mb-8">{t("product.similar")}</h2>
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
              {similar.map((p) => (
                <ProductCard key={p.id} product={p} />
              ))}
            </div>
          </section>
        )}
      </div>
    </div>
  );
}