"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { ShoppingCart, Star, ChevronLeft, Plus, Minus, Shield, Truck, RotateCcw } from "lucide-react";
import { useCartStore } from "@/store/cartStore";
import { Product } from "@/types";
import { formatPrice, parseImages } from "@/lib/utils";
import toast from "react-hot-toast";

export default function ProductDetailPage({ params }: { params: { id: string } }) {
  const [product, setProduct] = useState<Product | null>(null);
  const [loading, setLoading] = useState(true);
  const [quantity, setQuantity] = useState(1);
  const [activeImage, setActiveImage] = useState(0);
  const addItem = useCartStore((s) => s.addItem);

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

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-spin h-10 w-10 border-4 border-primary-500 border-t-transparent rounded-full" />
      </div>
    );
  }

  if (!product) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <p className="text-2xl font-bold text-gray-900">Product not found</p>
          <Link href="/shop" className="btn-primary mt-4">Back to Shop</Link>
        </div>
      </div>
    );
  }

  const images = parseImages(product.images);
  const displayImages = images.length > 0 ? images : ["https://picsum.photos/600/600"];
  const effectivePrice = product.salePrice ?? product.price;

  const handleAddToCart = () => {
    addItem({
      id: product.id,
      name: product.name,
      price: product.price,
      salePrice: product.salePrice,
      image: displayImages[0],
      quantity,
      stock: product.stock,
    });
    toast.success(`${product.name} added to cart!`);
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <Link href="/shop" className="flex items-center gap-2 text-sm text-gray-500 hover:text-primary-600 mb-8 transition-colors">
          <ChevronLeft className="h-4 w-4" /> Back to Shop
        </Link>

        <div className="bg-white rounded-3xl shadow-sm overflow-hidden">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-0">
            {/* Images */}
            <div className="p-8 bg-gray-50">
              <div className="relative aspect-square rounded-2xl overflow-hidden mb-4">
                <Image
                  src={displayImages[activeImage]}
                  alt={product.name}
                  fill
                  className="object-cover"
                />
                {product.salePrice && (
                  <div className="absolute top-4 left-4 bg-accent text-white text-sm font-bold px-3 py-1 rounded-full">
                    SALE
                  </div>
                )}
              </div>
              {displayImages.length > 1 && (
                <div className="flex gap-2">
                  {displayImages.map((img, i) => (
                    <button
                      key={i}
                      onClick={() => setActiveImage(i)}
                      className={`relative w-16 h-16 rounded-xl overflow-hidden border-2 transition-all ${
                        activeImage === i ? "border-primary-500" : "border-transparent"
                      }`}
                    >
                      <Image src={img} alt="" fill className="object-cover" />
                    </button>
                  ))}
                </div>
              )}
            </div>

            {/* Details */}
            <div className="p-8 lg:p-10">
              <div className="text-xs text-primary-600 font-semibold uppercase tracking-wide mb-2">
                {product.category} · {product.petType}
              </div>
              <h1 className="text-2xl lg:text-3xl font-bold text-gray-900 leading-tight">
                {product.name}
              </h1>

              <div className="flex items-center gap-3 mt-4">
                <div className="flex">
                  {[1,2,3,4,5].map(s => (
                    <Star key={s} className={`h-4 w-4 ${s <= Math.round(product.rating) ? "fill-amber-400 text-amber-400" : "text-gray-200 fill-gray-200"}`} />
                  ))}
                </div>
                <span className="text-sm text-gray-500">{product.rating} ({product.reviewCount} reviews)</span>
              </div>

              <div className="mt-6 flex items-end gap-3">
                <span className="text-4xl font-bold text-primary-600">{formatPrice(effectivePrice)}</span>
                {product.salePrice && (
                  <span className="text-xl text-gray-400 line-through mb-1">{formatPrice(product.price)}</span>
                )}
              </div>

              <p className="mt-6 text-gray-600 leading-relaxed">{product.description}</p>

              <div className="mt-6 flex items-center gap-2">
                <span className={`text-sm font-medium ${product.stock > 0 ? "text-green-600" : "text-red-500"}`}>
                  {product.stock > 0 ? `In Stock (${product.stock} available)` : "Out of Stock"}
                </span>
              </div>

              {/* Quantity */}
              <div className="mt-8 flex items-center gap-4">
                <div className="flex items-center border border-gray-200 rounded-xl overflow-hidden">
                  <button
                    onClick={() => setQuantity(Math.max(1, quantity - 1))}
                    className="px-4 py-3 hover:bg-gray-50 transition-colors"
                  >
                    <Minus className="h-4 w-4" />
                  </button>
                  <span className="px-5 py-3 font-semibold text-gray-900 min-w-[3rem] text-center">{quantity}</span>
                  <button
                    onClick={() => setQuantity(Math.min(product.stock, quantity + 1))}
                    className="px-4 py-3 hover:bg-gray-50 transition-colors"
                  >
                    <Plus className="h-4 w-4" />
                  </button>
                </div>
                <button
                  onClick={handleAddToCart}
                  disabled={product.stock === 0}
                  className="flex-1 btn-primary justify-center py-3.5 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <ShoppingCart className="h-5 w-5" />
                  Add to Cart
                </button>
              </div>

              {/* Trust badges */}
              <div className="mt-8 grid grid-cols-3 gap-3">
                {[
                  { icon: Truck, text: "Free shipping over $75" },
                  { icon: RotateCcw, text: "30-day returns" },
                  { icon: Shield, text: "Secure checkout" },
                ].map(({ icon: Icon, text }) => (
                  <div key={text} className="flex flex-col items-center text-center p-3 bg-gray-50 rounded-xl gap-2">
                    <Icon className="h-5 w-5 text-primary-500" />
                    <span className="text-xs text-gray-500">{text}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}