import { useState } from "react";
import { useParams, Link } from "react-router-dom";
import { Star, Truck, ShieldCheck, Minus, Plus, ChevronRight, ArrowLeft } from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { getProductBySlug, products } from "@/lib/data";

const StarRating = ({ rating, size = "md" }: { rating: number; size?: string }) => {
  const s = size === "lg" ? "w-5 h-5" : "w-4 h-4";
  return (
    <div className="flex items-center gap-0.5">
      {[1, 2, 3, 4, 5].map((star) => (
        <Star
          key={star}
          className={`${s} ${
            star <= Math.floor(rating) ? "fill-[#f39c12] text-[#f39c12]" : "text-[#555]"
          }`}
        />
      ))}
    </div>
  );
};

const ProductDetail = () => {
  const { slug } = useParams<{ slug: string }>();
  const product = getProductBySlug(slug || "");
  const [quantity, setQuantity] = useState(1);
  const [activeImage, setActiveImage] = useState(0);

  if (!product) {
    return (
      <div className="min-h-screen bg-[#1a1a1a]">
        <Header />
        <div className="pt-32 text-center">
          <h1 className="font-playfair text-3xl text-white mb-4">Product Not Found</h1>
          <Link to="/products" className="font-oswald text-[#d35400] hover:text-[#e67e22] uppercase tracking-wider">
            ← Back to Products
          </Link>
        </div>
        <Footer />
      </div>
    );
  }

  const allImages = product.images || [product.image];
  const relatedProducts = products.filter((p) => p.categorySlug === product.categorySlug && p.id !== product.id).slice(0, 3);

  return (
    <div className="min-h-screen bg-[#1a1a1a]">
      <Header />

      <div className="pt-20 lg:pt-24">
        {/* Breadcrumb */}
        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <nav className="flex items-center gap-2 text-sm font-inter">
            <Link to="/" className="text-[#888] hover:text-[#d35400] transition-colors">Home</Link>
            <ChevronRight className="w-3 h-3 text-[#555]" />
            <Link to="/products" className="text-[#888] hover:text-[#d35400] transition-colors">Products</Link>
            <ChevronRight className="w-3 h-3 text-[#555]" />
            <Link to={`/products?category=${product.categorySlug}`} className="text-[#888] hover:text-[#d35400] transition-colors">
              {product.category}
            </Link>
            <ChevronRight className="w-3 h-3 text-[#555]" />
            <span className="text-[#b0b0b0]">{product.name}</span>
          </nav>
        </div>

        {/* Product Section */}
        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 pb-16">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16">
            {/* Images */}
            <div>
              <div className="aspect-square bg-[#2b2b2b] rounded-lg overflow-hidden mb-4">
                <img
                  src={allImages[activeImage]}
                  alt={product.name}
                  className="w-full h-full object-cover"
                />
              </div>
              {allImages.length > 1 && (
                <div className="flex gap-3">
                  {allImages.map((img, i) => (
                    <button
                      key={i}
                      onClick={() => setActiveImage(i)}
                      className={`w-20 h-20 rounded-lg overflow-hidden border-2 transition-colors ${
                        activeImage === i ? "border-[#d35400]" : "border-[#444] hover:border-[#888]"
                      }`}
                    >
                      <img src={img} alt="" className="w-full h-full object-cover" />
                    </button>
                  ))}
                </div>
              )}
            </div>

            {/* Info */}
            <div>
              {product.badge && (
                <span className="inline-block bg-[#d35400] text-white font-oswald text-xs font-semibold uppercase tracking-wider px-3 py-1 rounded mb-4">
                  {product.badge}
                </span>
              )}

              <p className="font-oswald text-sm text-[#d35400] uppercase tracking-widest mb-2">
                {product.category}
              </p>

              <h1 className="font-playfair text-3xl sm:text-4xl font-bold text-white mb-4 leading-tight">
                {product.name}
              </h1>

              {/* Rating */}
              <div className="flex items-center gap-3 mb-6">
                <StarRating rating={product.rating} size="lg" />
                <span className="font-inter text-base text-[#b0b0b0]">
                  {product.rating} ({product.reviews} reviews)
                </span>
              </div>

              {product.expertReview && (
                <p className="font-inter text-sm text-[#888] italic mb-6 border-l-2 border-[#d35400] pl-4">
                  {product.expertReview}
                </p>
              )}

              {/* Price */}
              <div className="flex items-baseline gap-3 mb-6">
                <span className="font-oswald text-4xl font-bold text-white">
                  ${product.price.toLocaleString()}
                </span>
                {product.originalPrice && (
                  <>
                    <span className="font-inter text-lg text-[#888] line-through">
                      ${product.originalPrice.toLocaleString()}
                    </span>
                    <span className="font-oswald text-sm text-[#27ae60] font-semibold">
                      Save ${(product.originalPrice - product.price).toLocaleString()}
                    </span>
                  </>
                )}
              </div>

              {/* Badges */}
              <div className="flex flex-wrap gap-3 mb-6">
                {product.inStock && (
                  <span className="inline-flex items-center gap-1.5 text-[#27ae60] text-sm font-semibold bg-[#27ae60]/10 px-3 py-1.5 rounded">
                    <span className="w-2 h-2 bg-[#27ae60] rounded-full" />
                    In Stock — Ready to Ship
                  </span>
                )}
                {product.freeShipping && (
                  <span className="inline-flex items-center gap-1.5 text-[#d35400] border border-[#d35400] text-sm font-semibold px-3 py-1.5 rounded">
                    <Truck className="w-4 h-4" />
                    Free Shipping
                  </span>
                )}
                <span className="inline-flex items-center gap-1.5 text-[#b0b0b0] border border-[#444] text-sm px-3 py-1.5 rounded">
                  <ShieldCheck className="w-4 h-4 text-[#d35400]" />
                  Manufacturer Warranty
                </span>
              </div>

              {/* Description */}
              <p className="font-inter text-[#b0b0b0] text-base leading-relaxed mb-8">
                {product.description}
              </p>

              {/* Quantity & Add to Cart */}
              <div className="flex flex-wrap items-center gap-4 mb-8">
                <div className="flex items-center border border-[#444] rounded">
                  <button
                    onClick={() => setQuantity(Math.max(1, quantity - 1))}
                    className="px-3 py-3 text-[#b0b0b0] hover:text-white hover:bg-[#333] transition-colors"
                  >
                    <Minus className="w-4 h-4" />
                  </button>
                  <span className="font-oswald text-white text-lg w-12 text-center">{quantity}</span>
                  <button
                    onClick={() => setQuantity(quantity + 1)}
                    className="px-3 py-3 text-[#b0b0b0] hover:text-white hover:bg-[#333] transition-colors"
                  >
                    <Plus className="w-4 h-4" />
                  </button>
                </div>
                <button className="flex-1 sm:flex-none font-oswald bg-[#d35400] hover:bg-[#e67e22] text-white text-base font-semibold uppercase tracking-wider px-10 py-3.5 rounded transition-all duration-300 hover:shadow-[0_0_30px_rgba(211,84,0,0.3)]">
                  Add to Cart — ${(product.price * quantity).toLocaleString()}
                </button>
              </div>

              {/* Specs */}
              <div className="border-t border-[#333] pt-6">
                <h3 className="font-oswald text-lg font-bold text-white uppercase tracking-wider mb-4">
                  Specifications
                </h3>
                <div className="grid grid-cols-2 gap-3">
                  {product.specs.map((spec) => (
                    <div key={spec.label} className="bg-[#2b2b2b] rounded px-4 py-3">
                      <p className="font-inter text-xs text-[#888] mb-0.5">{spec.label}</p>
                      <p className="font-inter text-sm text-white font-medium">{spec.value}</p>
                    </div>
                  ))}
                </div>
              </div>

              {/* Features */}
              <div className="border-t border-[#333] pt-6 mt-6">
                <h3 className="font-oswald text-lg font-bold text-white uppercase tracking-wider mb-4">
                  Key Features
                </h3>
                <ul className="space-y-2">
                  {product.features.map((feature, i) => (
                    <li key={i} className="flex items-start gap-2">
                      <span className="w-1.5 h-1.5 bg-[#d35400] rounded-full mt-2 shrink-0" />
                      <span className="font-inter text-sm text-[#b0b0b0]">{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>

          {/* Related Products */}
          {relatedProducts.length > 0 && (
            <div className="mt-20 border-t border-[#333] pt-16">
              <h2 className="font-playfair text-2xl sm:text-3xl font-bold text-white mb-8">
                You May Also Like
              </h2>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {relatedProducts.map((p) => (
                  <Link
                    key={p.id}
                    to={`/products/${p.slug}`}
                    className="group bg-[#2b2b2b] border border-[#444] rounded-lg overflow-hidden transition-all duration-500 hover:-translate-y-2 hover:border-[#d35400]/50"
                  >
                    <div className="aspect-[4/3] overflow-hidden">
                      <img src={p.image} alt={p.name} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" loading="lazy" />
                    </div>
                    <div className="p-4">
                      <h3 className="font-playfair text-base font-bold text-white group-hover:text-[#d35400] transition-colors mb-1">{p.name}</h3>
                      <span className="font-oswald text-xl font-bold text-white">${p.price.toLocaleString()}</span>
                    </div>
                  </Link>
                ))}
              </div>
            </div>
          )}

          {/* Back */}
          <div className="mt-12">
            <Link to="/products" className="inline-flex items-center gap-2 font-oswald text-[#d35400] hover:text-[#e67e22] uppercase tracking-wider transition-colors">
              <ArrowLeft className="w-4 h-4" />
              Back to All Products
            </Link>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
};

export default ProductDetail;