'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { useParams, useRouter } from 'next/navigation'
import { ShoppingCart, Plus, Minus, Package, AlertCircle, CheckCircle2, Truck, Star, ArrowLeft } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/Card'
import { Input } from '@/components/ui/Input'
import { Badge } from '@/components/ui/Badge'
import { Skeleton } from '@/components/ui/Skeleton'
import { formatCurrency } from '@/lib/types'
import { getPublicProduct, PublicProduct } from '@/lib/shop'
import { useCart } from '@/lib/cart'
import { cn } from '@/lib/utils'
import { ShopHeader } from '../../ShopHeader'

export default function ProductPage() {
  const params = useParams()
  const router = useRouter()
  const businessSlug = params.businessSlug as string
  const productSlug = params.slug as string
  const { addItem } = useCart()
  const [product, setProduct] = useState<PublicProduct | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [quantity, setQuantity] = useState(1)

  useEffect(() => {
    async function loadProduct() {
      try {
        const res = await fetch(`/api/shop/business/${businessSlug}/product/${params.slug}`)
        const data = await res.json()
        if (data.success) {
          setProduct(data.data)
        } else {
          setError(data.message || 'Product not found')
        }
      } catch {
        setError('Failed to load product')
      } finally {
        setLoading(false)
      }
    }
    loadProduct()
  }, [businessSlug, params.slug])

  if (loading) {
    return (
      <>
        <ShopHeader businessSlug={businessSlug} />
        <div className="bg-gray-50 dark:bg-gray-950 py-12 px-4">
        <div className="max-w-4xl mx-auto">
          <Skeleton className="h-8 w-64 mb-8" />
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <Skeleton className="h-96 w-full" />
            <div className="space-y-6">
              <Skeleton className="h-12 w-3/4" />
              <Skeleton className="h-4 w-full" />
              <Skeleton className="h-4 w-3/4" />
              <Skeleton className="h-16 w-full" />
              <Skeleton className="h-12 w-48" />
            </div>
          </div>
        </div>
      </div>
      </>
    )
  }

  if (error || !product) {
    return (
      <>
        <ShopHeader businessSlug={businessSlug} />
        <div className="min-h-[70vh] bg-gray-50 dark:bg-gray-950 flex items-center justify-center px-4">
        <div className="text-center max-w-md">
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Product Not Found</h1>
          <p className="text-gray-500 dark:text-gray-400 mb-6">
            {error || 'The product you\'re looking for doesn\'t exist or is not available.'}
          </p>
          <Link href={`/shop/${params.businessSlug}`} className="inline-flex items-center gap-2 text-indigo-600 dark:text-indigo-400 hover:underline">
            <ArrowLeft className="h-4 w-4" />
            Back to Store
          </Link>
        </div>
      </div>
      </>
    )
  }

  const available = product.available_quantity || 0
  const isOutOfStock = available <= 0
  const isLowStock = available > 0 && available <= 5

  const handleAddToCart = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    addItem({
      productId: product.id,
      productName: product.name,
      productSlug: product.public_slug,
      quantity,
      unitPrice: product.unit_price,
      imageUrl: product.image_url,
      category: product.category,
    })
    setQuantity(1)
  }

  return (
    <>
      <ShopHeader businessSlug={businessSlug} />
      <div className="bg-gray-50 dark:bg-gray-950 py-8 px-4">
      <div className="max-w-4xl mx-auto">
        <Link href={`/shop/${params.businessSlug}`} className="inline-flex items-center gap-2 text-indigo-600 dark:text-indigo-400 hover:underline mb-6">
          <ArrowLeft className="h-4 w-4" />
          Back to Store
        </Link>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Product Image */}
          <div className="space-y-4">
            <div className="aspect-square bg-gray-100 dark:bg-gray-800 rounded-xl overflow-hidden">
              {product.image_url ? (
                <img
                  src={product.image_url}
                  alt={product.name}
                  className="w-full h-96 object-cover"
                />
              ) : (
                <div className="w-full h-96 flex items-center justify-center text-gray-400">
                  <Package className="h-24 w-24" />
                </div>
              )}
            </div>

            {/* Thumbnail placeholders */}
            <div className="flex gap-4">
              <button className="flex-1 aspect-square bg-gray-100 dark:bg-gray-800 rounded-lg border-2 border-indigo-500" />
              <button className="flex-1 aspect-square bg-gray-100 dark:bg-gray-800 rounded-lg" />
              <button className="flex-1 aspect-square bg-gray-100 dark:bg-gray-gray-800 rounded-lg" />
            </div>
          </div>

          {/* Product Info */}
          <div className="space-y-6">
            <div>
              <Badge variant="secondary" className="text-sm mb-2">{product.category}</Badge>
              <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">{product.name}</h1>
              <p className="text-gray-500 dark:text-gray-400">{product.description || 'No description available.'}</p>
            </div>

            <div className="flex items-center gap-4">
              <div className="text-3xl font-bold text-gray-900 dark:text-white">
                {formatCurrency(product.unit_price)}
              </div>
              <div className="flex items-center gap-2">
                {available > 0 ? (
                  <div className="flex items-center gap-1">
                    <button
                      onClick={() => setQuantity(Math.max(1, quantity - 1))}
                      className="p-2 rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800"
                      aria-label="Decrease quantity"
                    >
                      <span className="text-xl">−</span>
                    </button>
                    <span className="w-10 text-center text-lg font-medium">{quantity}</span>
                    <button
                      onClick={() => setQuantity(Math.min(quantity + 1, available))}
                      className="p-2 rounded border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800"
                      aria-label="Increase quantity"
                    >
                      <span className="text-xl">+</span>
                    </button>
                  </div>
) : (
              <Badge variant="danger" className="text-lg px-4 py-2">
                Out of Stock
              </Badge>
            )}
              </div>
            </div>

            {isOutOfStock ? (
              <div className="p-4 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg">
                <div className="flex items-center gap-2 text-red-700 dark:text-red-400">
                  <AlertCircle className="h-5 w-5 flex-shrink-0" />
                  <span className="font-medium">Out of Stock</span>
                </div>
              </div>
            ) : isLowStock ? (
              <div className="p-4 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-800 rounded-lg">
                <div className="flex items-center gap-2 text-amber-700 dark:text-amber-400">
                  <AlertCircle className="h-5 w-5 flex-shrink-0" />
                  <span className="font-medium">Low Stock</span>
                  <span className="text-sm">Only {available} remaining</span>
                </div>
              </div>
            ) : (
              <div className="p-4 bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 rounded-lg">
                <div className="flex items-center gap-2 text-green-700 dark:text-green-400">
                  <CheckCircle2 className="h-5 w-5 flex-shrink-0" />
                  <span className="font-medium">In Stock</span>
                  <span className="text-sm">{available} available</span>
                </div>
              </div>
            )}

            <div className="space-y-4">
              <Button
                onClick={handleAddToCart}
                disabled={isOutOfStock}
                className="w-full"
                size="lg"
              >
                <ShoppingCart className="h-5 w-5 mr-2" />
                {isOutOfStock ? 'Out of Stock' : 'Add to Cart'}
              </Button>

              <div className="grid grid-cols-2 gap-4 text-center text-sm text-gray-500 dark:text-gray-400">
                <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                  <Truck className="h-5 w-5 mx-auto mb-1 text-indigo-600 dark:text-indigo-400" />
                  <p>Free delivery over $50</p>
                </div>
                <div className="p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                  <Star className="h-5 w-5 mx-auto mb-1 text-amber-500" />
                  <p>Quality guaranteed</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
      </>
  )
}