"use client";

import { useState, useEffect } from "react";
import { useParams } from "next/navigation";
import Image from "next/image";
import Link from "next/link";
import { ShoppingCart, Heart, Star, ChevronLeft, ChevronRight, Check, Shield, Truck, RefreshCw, Plus, Minus, Loader2 } from "lucide-react";
import { useCartStore } from "@/store/cart";
import { formatPrice } from "@/lib/utils";
import { cn } from "@/lib/utils";
import toast from "react-hot-toast";

interface Spec { label: string; value: string; sortOrder: number }
interface Review { id: string; rating: number; title?: string; comment: string; createdAt: string; user: { name?: string } }
interface Product {
  id: string; name: string; slug: string; description: string; price: number; comparePrice?: number;
  images: string[]; stock: number; isNew: boolean; isHot: boolean; condition: string;
  brand: { name: string }; category: { name: string; slug: string };
  specs: Spec[]; reviews: Review[]; tags: { tag: string }[];
}

export default function ProductDetailPage() {
  const params = useParams();
  const slug = params.slug as string;
  const [product, setProduct] = useState<Product | null>(null);
  const [loading, setLoading] = useState(true);
  const [selectedImage, setSelectedImage] = useState(0);
  const [quantity, setQuantity] = useState(1);
  const [activeTab, setActiveTab] = useState<"specs" | "reviews">("specs");
  const { addItem } = useCartStore();

  useEffect(() => {
    fetch(`/api/products/${slug}`)
      .then((r) => r.json())
      .then((d) => { setProduct(d); setLoading(false); })
      .catch(() => setLoading(false));
  }, [slug]);

  if (loading) return (
    <div className="flex items-center justify-center min-h-96">
      <Loader2 className="w-8 h-8 animate-spin text-sky-500" />
    </div>
  );

  if (!product) return (
    <div className="max-w-7xl mx-auto px-4 py-20 text-center">
      <h1 className="text-2xl font-black text-slate-800 mb-4">Product Not Found</h1>
      <Link href="/products" className="text-sky-600 hover:underline">Browse all products</Link>
    </div>
  );

  const discount = product.comparePrice
    ? Math.round(((product.comparePrice - product.price) / product.comparePrice) * 100)
    : null;
  const avgRating = product.reviews.length
    ? product.reviews.reduce((s, r) => s + r.rating, 0) / product.reviews.length
    : null;

  const handleAddToCart = () => {
    addItem({ id: product.id, name: product.name, price: product.price, image: product.images[0] || "/images/placeholder.png", slug: product.slug, stock: product.stock }, quantity);
    toast.success("Added to cart!");
  };

  return (
    <div className="max-w-7xl mx-auto px-4 py-8">
      {/* Breadcrumb */}
      <div className="flex items-center gap-2 text-sm text-slate-500 mb-6">
        <Link href="/" className="hover:text-sky-600">Home</Link>
        <span>/</span>
        <Link href={`/${product.category.slug}`} className="hover:text-sky-600 capitalize">{product.category.name}</Link>
        <span>/</span>
        <span className="text-slate-800 font-medium line-clamp-1">{product.name}</span>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-10">
        {/* Images */}
        <div>
          <div className="relative aspect-[4/3] rounded-2xl overflow-hidden bg-slate-50 border border-slate-100 mb-3">
            <Image src={product.images[selectedImage] || "/images/placeholder.png"} alt={product.name} fill className="object-contain p-4" sizes="(max-width: 1024px) 100vw, 50vw" priority />
            {product.images.length > 1 && (
              <>
                <button onClick={() => setSelectedImage((i) => (i - 1 + product.images.length) % product.images.length)}
                  className="absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center hover:bg-sky-50 transition-colors">
                  <ChevronLeft className="w-5 h-5 text-slate-700" />
                </button>
                <button onClick={() => setSelectedImage((i) => (i + 1) % product.images.length)}
                  className="absolute right-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center hover:bg-sky-50 transition-colors">
                  <ChevronRight className="w-5 h-5 text-slate-700" />
                </button>
              </>
            )}
          </div>
          {product.images.length > 1 && (
            <div className="flex gap-2 overflow-x-auto pb-1">
              {product.images.map((img, i) => (
                <button key={i} onClick={() => setSelectedImage(i)}
                  className={cn("relative w-20 h-16 rounded-xl overflow-hidden border-2 shrink-0 transition-all", i === selectedImage ? "border-sky-500" : "border-slate-100 hover:border-sky-300")}>
                  <Image src={img} alt="" fill className="object-cover" />
                </button>
              ))}
            </div>
          )}
        </div>

        {/* Info */}
        <div>
          <div className="flex items-start justify-between gap-3 mb-2">
            <div>
              <p className="text-sky-600 font-bold text-sm mb-1">{product.brand.name}</p>
              <h1 className="text-2xl font-black text-slate-900 leading-tight">{product.name}</h1>
            </div>
            <button className="p-2 rounded-xl border border-slate-200 hover:bg-red-50 hover:border-red-200 transition-colors shrink-0">
              <Heart className="w-5 h-5 text-slate-500 hover:text-red-500" />
            </button>
          </div>

          {/* Rating */}
          {avgRating !== null && (
            <div className="flex items-center gap-2 mb-3">
              <div className="flex">
                {[1,2,3,4,5].map((s) => <Star key={s} className={cn("w-4 h-4", s <= Math.round(avgRating) ? "text-amber-400 fill-amber-400" : "text-slate-200")} />)}
              </div>
              <span className="text-sm text-slate-500">{avgRating.toFixed(1)} ({product.reviews.length} reviews)</span>
            </div>
          )}

          {/* Price */}
          <div className="flex items-end gap-3 mb-4">
            <span className="text-4xl font-black text-slate-900">{formatPrice(product.price)}</span>
            {product.comparePrice && (
              <div className="flex items-center gap-2 pb-1">
                <span className="text-lg text-slate-400 line-through">{formatPrice(product.comparePrice)}</span>
                {discount && <span className="bg-red-100 text-red-600 text-sm font-bold px-2 py-0.5 rounded-full">-{discount}%</span>}
              </div>
            )}
          </div>

          {/* Badges */}
          <div className="flex flex-wrap gap-2 mb-5">
            {product.isNew && <span className="bg-emerald-100 text-emerald-700 text-xs font-bold px-3 py-1 rounded-full">NEW</span>}
            {product.isHot && <span className="bg-orange-100 text-orange-700 text-xs font-bold px-3 py-1 rounded-full">HOT</span>}
            <span className="bg-sky-100 text-sky-700 text-xs font-bold px-3 py-1 rounded-full">{product.condition}</span>
            {product.tags.map((t) => <span key={t.tag} className="bg-slate-100 text-slate-600 text-xs px-3 py-1 rounded-full">{t.tag}</span>)}
          </div>

          {/* Stock */}
          <div className={cn("flex items-center gap-2 mb-5 text-sm font-medium", product.stock > 0 ? "text-emerald-600" : "text-red-500")}>
            {product.stock > 0 ? <Check className="w-4 h-4" /> : null}
            {product.stock > 0 ? `In Stock (${product.stock} available)` : "Out of Stock"}
          </div>

          {/* Quantity & Cart */}
          {product.stock > 0 && (
            <div className="flex items-center gap-3 mb-5">
              <div className="flex items-center border-2 border-slate-200 rounded-xl overflow-hidden">
                <button onClick={() => setQuantity((q) => Math.max(1, q - 1))} className="px-4 py-3 hover:bg-slate-50 transition-colors">
                  <Minus className="w-4 h-4 text-slate-600" />
                </button>
                <span className="px-5 text-lg font-black text-slate-800 min-w-12 text-center">{quantity}</span>
                <button onClick={() => setQuantity((q) => Math.min(product.stock, q + 1))} className="px-4 py-3 hover:bg-slate-50 transition-colors">
                  <Plus className="w-4 h-4 text-slate-600" />
                </button>
              </div>
              <button onClick={handleAddToCart}
                className="flex-1 flex items-center justify-center gap-2 bg-gradient-to-r from-sky-600 to-sky-500 text-white py-3.5 rounded-xl font-bold hover:from-sky-700 hover:to-sky-600 transition-all shadow-lg shadow-sky-200 text-sm">
                <ShoppingCart className="w-4 h-4" /> Add to Cart
              </button>
            </div>
          )}

          {/* Trust badges */}
          <div className="grid grid-cols-3 gap-3 mb-6">
            {[
              { icon: Truck, label: "Same-Day Delivery", sub: "Nairobi" },
              { icon: Shield, label: "1 Year Warranty", sub: "Guaranteed" },
              { icon: RefreshCw, label: "Easy Returns", sub: "7 Days" },
            ].map(({ icon: Icon, label, sub }) => (
              <div key={label} className="flex flex-col items-center gap-1 p-3 bg-sky-50 rounded-xl text-center">
                <Icon className="w-5 h-5 text-sky-600" />
                <p className="text-xs font-bold text-slate-700">{label}</p>
                <p className="text-xs text-slate-400">{sub}</p>
              </div>
            ))}
          </div>

          {/* Short description */}
          <p className="text-slate-600 text-sm leading-relaxed">{product.description.slice(0, 300)}{product.description.length > 300 && "..."}</p>
        </div>
      </div>

      {/* Tabs */}
      <div className="mt-12">
        <div className="flex border-b border-slate-200 mb-6">
          {(["specs", "reviews"] as const).map((tab) => (
            <button key={tab} onClick={() => setActiveTab(tab)}
              className={cn("px-6 py-3 font-bold text-sm capitalize transition-colors border-b-2 -mb-px", activeTab === tab ? "border-sky-500 text-sky-600" : "border-transparent text-slate-500 hover:text-slate-700")}>
              {tab === "specs" ? "Specifications" : `Reviews (${product.reviews.length})`}
            </button>
          ))}
        </div>

        {activeTab === "specs" && (
          <div className="bg-white rounded-2xl border border-slate-100 overflow-hidden">
            {product.specs.length > 0 ? (
              <table className="w-full">
                <tbody>
                  {product.specs.map((spec, i) => (
                    <tr key={spec.label} className={i % 2 === 0 ? "bg-slate-50" : "bg-white"}>
                      <td className="px-6 py-3 text-sm font-bold text-slate-700 w-1/3">{spec.label}</td>
                      <td className="px-6 py-3 text-sm text-slate-600">{spec.value}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            ) : (
              <div className="p-8 text-center text-slate-400">
                <p>Full specifications coming soon.</p>
              </div>
            )}
          </div>
        )}

        {activeTab === "reviews" && (
          <div className="space-y-4">
            {product.reviews.length === 0 ? (
              <div className="text-center py-12 text-slate-400">
                <Star className="w-12 h-12 mx-auto mb-3 text-slate-200" />
                <p className="font-medium">No reviews yet. Be the first to review!</p>
              </div>
            ) : product.reviews.map((review) => (
              <div key={review.id} className="bg-white rounded-2xl border border-slate-100 p-6">
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-3">
                    <div className="w-9 h-9 rounded-full bg-sky-100 flex items-center justify-center font-bold text-sky-600 text-sm">
                      {review.user.name?.charAt(0) || "U"}
                    </div>
                    <div>
                      <p className="font-bold text-slate-800 text-sm">{review.user.name || "Customer"}</p>
                      <div className="flex">
                        {[1,2,3,4,5].map((s) => <Star key={s} className={cn("w-3 h-3", s <= review.rating ? "text-amber-400 fill-amber-400" : "text-slate-200")} />)}
                      </div>
                    </div>
                  </div>
                  <span className="text-xs text-slate-400">{new Date(review.createdAt).toLocaleDateString("en-KE")}</span>
                </div>
                {review.title && <p className="font-bold text-slate-800 text-sm mb-1">{review.title}</p>}
                <p className="text-slate-600 text-sm leading-relaxed">{review.comment}</p>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}