'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { ShoppingCart, CheckCircle, Loader2 } from 'lucide-react'
import { useCart } from '@/lib/cart/context'
import { toast } from 'sonner'
import type { Product } from '@/lib/products/types'

interface AddToCartButtonProps {
  product: Product
}

export function AddToCartButton({ product }: AddToCartButtonProps) {
  const { addItem } = useCart()
  const [isAdding, setIsAdding] = useState(false)
  const [isAdded, setIsAdded] = useState(false)

  const handleAddToCart = () => {
    if (isAdding || isAdded) return

    setIsAdding(true)
    setIsAdded(false)
    
    try {
      addItem({
        id: product.id,
        name: product.name,
        price: product.price,
        priceId: product.priceId!,
        image: product.images?.[0] || '/placeholder.svg',
        quantity: 1,
      })
      
      // Show success feedback
      setIsAdded(true)
      toast.success(`${product.name} added to cart!`)
      
      // Reset states after showing feedback
      setTimeout(() => {
        setIsAdding(false)
        setIsAdded(false)
      }, 2000)
      
    } catch (error) {
      console.error('Error adding to cart:', error)
      toast.error('Failed to add item to cart')
      setIsAdding(false)
    }
  }

  if (!product.priceId) {
    return (
      <Button disabled className="w-full">
        <span className="flex items-center gap-2">
          <span>Product unavailable</span>
        </span>
      </Button>
    )
  }

  return (
    <Button
      onClick={handleAddToCart}
      disabled={isAdding || isAdded}
      variant="brand"
      className="w-full h-12"
      size="lg"
    >
      <div className="flex items-center gap-2">
        {isAdding ? (
          <Loader2 className="h-4 w-4 animate-spin" />
        ) : isAdded ? (
          <CheckCircle className="h-4 w-4 text-green-500" />
        ) : (
          <ShoppingCart className="h-4 w-4" />
        )}
        <span>
          {isAdding ? 'Adding...' : isAdded ? 'Added!' : 'Add to Cart'}
        </span>
      </div>
    </Button>
  )
}