"use client";

import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { ShoppingCart, ChevronLeft, Package, Plus, Minus } from "lucide-react";

// This is a client component that receives the product as a prop from the server page
type ProductImage = { id: string; url: string; isPrimary: boolean; sortOrder: number };
type Variation = { id: string; sku: string | null; size: string | null; colour: string | null; price: number | null; stock: number };
type Product = {
  id: string; name: string; slug: string; description: string | null;
  price: number; stock: number; isFeatured: boolean;
  category: { name: string; slug: string } | null;
  images: ProductImage[];
  variations: Variation[];
};

export default function ProductDetailClient({ product }: { product: Product }) {
  const [selectedImage, setSelectedImage] = useState(0);
  const [qty, setQty] = useState(1);
  const [selectedVariation, setSelectedVariation] = useState<Variation | null>(null);
  const [added, setAdded] = useState(false);

  const price = selectedVariation?.price ?? product.price;
  const stock = selectedVariation?.stock ?? product.stock;
  const sizes = [...new Set(product.variations.map(v => v.size).filter(Boolean))];
  const colours = [...new Set(product.variations.map(v => v.colour).filter(Boolean))];
  const [selSize, setSelSize] = useState<string | null>(null);
  const [selColour, setSelColour] = useState<string | null>(null);

  function handleVariation(size: string | null, colour: string | null) {
    const v = product.variations.find(x =>
      (size ? x.size === size : true) && (colour ? x.colour === colour : true)
    );
    setSelectedVariation(v ?? null);
  }

  function addToCart() {
    const cartItem = {
      productId: product.id,
      slug: product.slug,
      name: product.name + (selSize ? ` (${selSize})` : "") + (selColour ? ` / ${selColour}` : ""),
      price: Number(price),
      quantity: qty,
      image: product.images[0]?.url ?? "",
      variationId: selectedVariation?.id,
    };
    const existing = JSON.parse(localStorage.getItem("kc_cart") ?? "[]") as typeof cartItem[];
    const key = cartItem.productId + (cartItem.variationId ?? "");
    const idx = existing.findIndex(i => i.productId + (i.variationId ?? "") === key);
    if (idx >= 0) {
      existing[idx].quantity += qty;
    } else {
      existing.push(cartItem);
    }
    localStorage.setItem("kc_cart", JSON.stringify(existing));
    window.dispatchEvent(new Event("cart-updated"));
    setAdded(true);
    setTimeout(() => setAdded(false), 2500);
  }

  return (
    <div className="min-h-screen bg-neutral-50">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        {/* Breadcrumb */}
        <div className="flex items-center gap-2 text-sm text-neutral-400 mb-8">
          <Link href="/shop" className="hover:text-navy-600 flex items-center gap-1"><ChevronLeft size={14} /> Shop</Link>
          {product.category && <><span>/</span><Link href={`/shop?cat=${product.category.slug}`} className="hover:text-navy-600">{product.category.name}</Link></>}
          <span>/</span><span className="text-neutral-600 font-medium">{product.name}</span>
        </div>

        <div className="grid lg:grid-cols-2 gap-10">
          {/* Images */}
          <div>
            <div className="relative aspect-square bg-white rounded-2xl border border-neutral-200 overflow-hidden mb-3">
              {product.images[selectedImage] ? (
                <Image src={product.images[selectedImage].url} alt={product.name} fill className="object-contain p-4" unoptimized />
              ) : (
                <div className="w-full h-full flex items-center justify-center text-neutral-300"><Package size={64} /></div>
              )}
            </div>
            {product.images.length > 1 && (
              <div className="flex gap-2 flex-wrap">
                {product.images.map((img, i) => (
                  <button key={img.id} onClick={() => setSelectedImage(i)}
                    className={`w-16 h-16 rounded-xl border-2 overflow-hidden transition-colors ${i === selectedImage ? "border-navy-600" : "border-neutral-200 hover:border-neutral-400"}`}>
                    <Image src={img.url} alt="" width={64} height={64} className="object-cover w-full h-full" unoptimized />
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* Info */}
          <div>
            {product.category && (
              <div className="text-xs font-bold text-neutral-400 uppercase tracking-wide mb-2">{product.category.name}</div>
            )}
            <h1 className="text-2xl font-bold text-navy-900 mb-2">{product.name}</h1>
            <div className="text-3xl font-bold text-navy-700 mb-4">${Number(price).toFixed(2)}</div>

            {product.description && (
              <p className="text-neutral-600 text-sm leading-relaxed mb-6">{product.description}</p>
            )}

            {/* Variations */}
            {sizes.length > 0 && (
              <div className="mb-4">
                <label className="text-xs font-bold text-neutral-500 uppercase tracking-wide block mb-2">Size</label>
                <div className="flex gap-2 flex-wrap">
                  {sizes.map(s => (
                    <button key={s} onClick={() => { setSelSize(s!); handleVariation(s!, selColour); }}
                      className={`px-4 py-2 rounded-lg border text-sm font-medium transition-colors ${selSize === s ? "bg-navy-700 text-white border-navy-700" : "border-neutral-300 hover:border-navy-400"}`}>
                      {s}
                    </button>
                  ))}
                </div>
              </div>
            )}
            {colours.length > 0 && (
              <div className="mb-6">
                <label className="text-xs font-bold text-neutral-500 uppercase tracking-wide block mb-2">Colour</label>
                <div className="flex gap-2 flex-wrap">
                  {colours.map(c => (
                    <button key={c} onClick={() => { setSelColour(c!); handleVariation(selSize, c!); }}
                      className={`px-4 py-2 rounded-lg border text-sm font-medium transition-colors ${selColour === c ? "bg-navy-700 text-white border-navy-700" : "border-neutral-300 hover:border-navy-400"}`}>
                      {c}
                    </button>
                  ))}
                </div>
              </div>
            )}

            {/* Qty + Add to cart */}
            <div className="flex items-center gap-4 mb-6">
              <div className="flex items-center border border-neutral-300 rounded-lg overflow-hidden">
                <button onClick={() => setQty(q => Math.max(1, q - 1))} className="px-3 py-2.5 hover:bg-neutral-100 text-neutral-600"><Minus size={14} /></button>
                <span className="px-4 py-2.5 font-semibold text-sm min-w-[3rem] text-center">{qty}</span>
                <button onClick={() => setQty(q => Math.min(stock, q + 1))} className="px-3 py-2.5 hover:bg-neutral-100 text-neutral-600"><Plus size={14} /></button>
              </div>
              <button onClick={addToCart} disabled={stock === 0}
                className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl font-semibold transition-colors ${added ? "bg-emerald-600 text-white" : stock === 0 ? "bg-neutral-200 text-neutral-400 cursor-not-allowed" : "bg-navy-700 text-white hover:bg-navy-800"}`}>
                <ShoppingCart size={16} />
                {added ? "Added to cart!" : stock === 0 ? "Out of stock" : "Add to Cart"}
              </button>
            </div>

            {stock > 0 && stock < 10 && (
              <p className="text-sm text-amber-600 font-medium">Only {stock} left in stock</p>
            )}
            {stock === 0 && (
              <p className="text-sm text-red-500 font-medium">Currently out of stock</p>
            )}

            <Link href="/cart" className="block mt-4 text-center text-sm text-navy-600 hover:underline font-medium">View Cart →</Link>
          </div>
        </div>
      </div>
    </div>
  );
}