import { useState, useEffect } from 'react'
import { useParams, Link } from 'react-router-dom'
import Navbar from '../components/Navbar'
import Footer from '../components/Footer'
import ProductCard from '../components/ProductCard'
import { API_BASE, getCategoryImage, formatPrice, type Category, type Product } from '../types'
import { useCartStore } from '../store/cartStore'

export default function ProductDetailPage() {
  const { id } = useParams<{ id: string }>()

  const [categories, setCategories] = useState<Category[]>([])
  const [product, setProduct] = useState<Product | null>(null)
  const [related, setRelated] = useState<Product[]>([])
  const [selectedVariant, setSelectedVariant] = useState<number>(0)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  
  const { addToCart } = useCartStore()

  useEffect(() => {
    fetch(`${API_BASE}/categories`)
      .then((r) => r.json())
      .then(setCategories)
      .catch(console.error)
  }, [])

  useEffect(() => {
    if (!id) return
    setLoading(true)
    setError(null)
    setSelectedVariant(0)

    fetch(`${API_BASE}/products/${id}`)
      .then(async (r) => {
        if (!r.ok) throw new Error('Product not found')
        return r.json()
      })
      .then(async (data: Product) => {
        setProduct(data)
        // Fetch related (same category, different product)
        const relRes = await fetch(`${API_BASE}/products?categoryId=${data.category.id}`)
        const relJson = await relRes.json()
        const relData: Product[] = relJson.data || []
        setRelated(relData.filter((p) => p.id !== data.id).slice(0, 6))
      })
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false))
  }, [id])

  if (loading) {
    return (
      <div className="min-h-screen bg-pop-bg">
        <Navbar categories={categories} />
        <div className="pt-32 px-6 max-w-7xl mx-auto animate-pulse space-y-8">
          <div className="h-6 w-48 bg-spa-stone/10 rounded" />
          <div className="grid md:grid-cols-2 gap-12">
            <div className="h-96 bg-spa-stone/10 rounded-2xl" />
            <div className="space-y-4">
              <div className="h-8 w-3/4 bg-spa-stone/10 rounded" />
              <div className="h-4 w-1/2 bg-spa-stone/10 rounded" />
              <div className="h-12 w-1/3 bg-spa-stone/10 rounded" />
            </div>
          </div>
        </div>
        <Footer categories={categories} />
      </div>
    )
  }

  if (error || !product) {
    return (
      <div className="min-h-screen bg-pop-bg">
        <Navbar categories={categories} />
        <div className="pt-40 text-center space-y-4">
          <p className="text-4xl">⚠️</p>
          <p className="text-spa-stone font-medium">{error ?? 'Product not found'}</p>
          <Link to="/shop" className="text-spa-forest hover:underline text-sm font-bold">
            Back to Shop
          </Link>
        </div>
        <Footer categories={categories} />
      </div>
    )
  }

  const currentVariant = product.variants[selectedVariant]

  const handleAddToCart = () => {
    if (!product || !currentVariant) return
    addToCart({
      productId: product.id,
      variantId: currentVariant.id,
      quantity: 1,
      price: currentVariant.price || product.price || 0,
      productName: product.scent.name,
      variantSize: currentVariant.size,
      productImage: product.images?.[0]?.url || getCategoryImage(product.category.name)
    })
  }

  return (
    <div className="min-h-screen pb-24 md:pb-0 bg-pop-bg">
      <Navbar categories={categories} />

      <div className="max-w-7xl mx-auto px-6 pt-24 md:pt-32 pb-24 space-y-12 md:space-y-24">
        {/* Breadcrumb */}
        <div className="flex items-center flex-wrap gap-2 text-[10px] md:text-xs text-spa-stone/60 uppercase tracking-widest font-semibold mb-6 md:mb-0">
          <Link to="/" className="hover:text-spa-forest transition-colors">Home</Link>
          <span>/</span>
          <Link to="/shop" className="hover:text-spa-forest transition-colors">Shop</Link>
          <span>/</span>
          <Link to={`/category/${product.category.id}`} className="hover:text-spa-forest transition-colors">
            {product.category.name}
          </Link>
          <span>/</span>
          <span className="text-spa-forest">{product.scent.name}</span>
        </div>

        {/* Product Detail */}
        <div className="grid md:grid-cols-2 gap-8 md:gap-16 items-start">
          {/* Image */}
          <div className="relative rounded-2xl overflow-hidden h-[480px] group bg-white shadow-sm border border-spa-stone/10">
            <img
              src={product.images?.[0]?.url || getCategoryImage(product.category.name)}
              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
              alt={product.scent.name}
              onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/10 to-transparent" />
            <div className="absolute top-6 left-6 bg-white/90 backdrop-blur-sm px-3 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-widest text-spa-forest shadow-sm">
              {product.category.name}
            </div>
          </div>

          {/* Info */}
          <div className="space-y-8">
            <div className="space-y-2">
              <p className="text-spa-forest uppercase tracking-[0.3em] text-xs font-bold opacity-80">
                {product.category.name}
              </p>
              <h1 className="text-5xl font-bold leading-tight text-pop-black">
                {product.scent.name}
              </h1>
              <p className="text-spa-stone/80 text-sm uppercase tracking-widest font-semibold">
                Premium Collection
              </p>
            </div>

            {product.description && (
              <p className="text-spa-stone leading-relaxed">{product.description}</p>
            )}

            {/* Price */}
            <div className="flex items-baseline gap-3">
              <span className="text-4xl font-bold text-rose-500">
                {formatPrice(currentVariant?.price)}
              </span>
              {currentVariant && (
                <span className="text-spa-stone/60 text-sm font-semibold">/ {currentVariant.size}</span>
              )}
            </div>

            {/* Variant Selector */}
            <div className="space-y-3">
              <p className="text-xs uppercase tracking-widest text-spa-stone/80 font-bold">
                Select Size
              </p>
              <div className="flex flex-wrap gap-3">
                {product.variants.map((v, i) => (
                  <button
                    key={v.id}
                    onClick={() => setSelectedVariant(i)}
                    className={`px-5 py-2.5 rounded-lg text-sm font-bold uppercase tracking-widest transition-all duration-300 border ${
                      selectedVariant === i
                        ? 'bg-spa-forest text-white border-spa-forest shadow-md'
                        : 'bg-white text-spa-stone border-spa-stone/20 hover:border-spa-forest hover:text-spa-forest shadow-sm'
                    }`}
                  >
                    {v.size}
                    <span className={`block text-[10px] mt-0.5 ${selectedVariant === i ? 'text-white/80' : 'text-spa-stone/60'}`}>
                      {formatPrice(v.price)}
                    </span>
                  </button>
                ))}
              </div>
            </div>

            {/* Actions */}
            <div className="hidden md:flex gap-4">
              <button 
                onClick={handleAddToCart}
                className="flex-1 py-4 bg-spa-forest text-white font-bold rounded-lg tracking-widest uppercase hover:bg-spa-stone hover:shadow-lg transition-all duration-300"
              >
                Add to Cart
              </button>
              <button className="bg-white border border-spa-stone/20 text-spa-stone p-4 rounded-lg hover:border-spa-forest hover:text-spa-forest shadow-sm transition-all">
                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </button>
            </div>

            {/* Meta */}
            <div className="border-t border-spa-stone/10 pt-6 grid grid-cols-2 gap-4 text-sm text-spa-stone/80">
              <div>
                <span className="text-xs uppercase tracking-widest block mb-1 font-semibold text-spa-stone/60">Scent</span>
                <span className="text-pop-black font-bold">{product.scent.name}</span>
              </div>
              <div>
                <span className="text-xs uppercase tracking-widest block mb-1 font-semibold text-spa-stone/60">Category</span>
                <Link
                  to={`/category/${product.category.id}`}
                  className="text-pop-black font-bold hover:text-spa-forest transition-colors"
                >
                  {product.category.name}
                </Link>
              </div>
            </div>
          </div>
        </div>

        {/* Full Details Section */}
        {product.details && (
          <div className="pt-16 border-t border-spa-stone/10 space-y-6">
            <h2 className="text-3xl font-bold text-pop-black">Product Details</h2>
            <div 
              className="prose prose-spa prose-lg max-w-4xl product-editorial text-spa-stone"
              dangerouslySetInnerHTML={{ __html: product.details }}
            />
          </div>
        )}

        {/* Related Products */}
        {related.length > 0 && (
          <div className="space-y-8 border-t border-spa-stone/10 pt-16">
            <div className="flex justify-between items-end">
              <div>
                <p className="text-spa-forest uppercase tracking-[0.3em] text-xs font-bold opacity-80 mb-2">
                  More {product.category.name}
                </p>
                <h2 className="text-3xl font-bold text-pop-black">Related Products</h2>
              </div>
              <Link
                to={`/category/${product.category.id}`}
                className="text-spa-forest text-sm font-bold uppercase tracking-widest hover:underline"
              >
                View All →
              </Link>
            </div>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-8">
              {related.map((p) => (
                <ProductCard key={p.id} product={p} />
              ))}
            </div>
          </div>
        )}
      </div>

      <Footer categories={categories} />

      {/* Mobile Sticky Add to Cart Bar */}
      <div className="md:hidden fixed bottom-0 left-0 right-0 p-4 bg-white/95 backdrop-blur-xl border-t border-spa-stone/10 z-40 animate-fade-in flex flex-col gap-3 shadow-[0_-10px_30px_rgba(0,0,0,0.05)]">
        
        {/* Mobile Variant Selector */}
        {product.variants && product.variants.length > 1 && (
          <div className="flex gap-2 overflow-x-auto pb-1" style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
            {product.variants.map((v, i) => (
              <button
                key={`mobile-v-${v.id}`}
                onClick={() => setSelectedVariant(i)}
                className={`flex-shrink-0 px-4 py-2 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all border whitespace-nowrap ${
                  selectedVariant === i 
                    ? 'bg-spa-forest border-spa-forest text-white' 
                    : 'bg-white border-spa-stone/20 text-spa-stone'
                }`}
              >
                {v.size}
              </button>
            ))}
          </div>
        )}

        <div className="flex items-center justify-between gap-4">
           <div className="flex flex-col">
            <span className="text-[10px] uppercase tracking-widest text-spa-stone/60 font-semibold">
              {product.variants && product.variants.length > 1 ? currentVariant?.size : 'Total Price'}
            </span>
            <span className="text-xl font-bold text-rose-500">
              {formatPrice(currentVariant?.price)}
            </span>
          </div>
          <button 
            onClick={handleAddToCart}
            className="flex-1 py-3.5 bg-spa-forest text-white font-bold rounded-lg tracking-widest uppercase hover:bg-spa-stone shadow-sm transition-all flex justify-center items-center gap-2"
          >
            Add to Cart
          </button>
        </div>
      </div>

    </div>
  )
}