'use client'

import { useState } from 'react'
import { Minus, Plus, ShoppingCart, Trash2, AlertCircle, CheckCircle, Loader2 } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetFooter,
} from '@/components/ui/sheet'
import { Separator } from '@/components/ui/separator'
import { useCart } from '@/lib/cart/context'
import { Alert, AlertDescription } from '@/components/ui/alert'
import Image from 'next/image'

interface CartProps {
  isOpen: boolean
  onClose: () => void
}

export function Cart({ isOpen, onClose }: CartProps) {
  const { items, removeItem, updateQuantity, getTotal, clearCart } = useCart()
  const [isCheckingOut, setIsCheckingOut] = useState(false)
  const [checkoutError, setCheckoutError] = useState<string | null>(null)
  const [isRemoving, setIsRemoving] = useState<string | null>(null)

  const handleCheckout = async () => {
    if (items.length === 0) return

    setIsCheckingOut(true)
    setCheckoutError(null)
    
    try {
      const response = await fetch('/api/stripe/checkout', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          items: items.map((item) => ({
            priceId: item.priceId,
            quantity: item.quantity,
          })),
        }),
      })

      const data = await response.json()

      if (!response.ok) {
        throw new Error(data.error || 'Failed to create checkout session')
      }

      if (data.url) {
        // Redirect to Stripe Checkout
        window.location.href = data.url
      } else {
        throw new Error('No checkout URL returned from server')
      }
    } catch (error) {
      console.error('Error creating checkout session:', error)
      const errorMessage = error instanceof Error ? error.message : 'Failed to start checkout. Please try again.'
      setCheckoutError(errorMessage)
      
      // Auto-hide error after 5 seconds
      setTimeout(() => setCheckoutError(null), 5000)
    } finally {
      setIsCheckingOut(false)
    }
  }

  const handleRemoveItem = async (itemId: string) => {
    setIsRemoving(itemId)
    try {
      // Simulate API call delay for better UX
      await new Promise(resolve => setTimeout(resolve, 300))
      removeItem(itemId)
    } catch (error) {
      console.error('Error removing item:', error)
    } finally {
      setIsRemoving(null)
    }
  }

  return (
    <Sheet open={isOpen} onOpenChange={onClose}>
      <SheetContent side="right" className="w-full max-w-md flex flex-col p-0">
        <SheetHeader className="p-4 border-b border-border">
          <SheetTitle>Shopping Cart</SheetTitle>
          <div className="flex items-center gap-2 mt-1">
            <CheckCircle className="h-4 w-4 text-green-500" />
            <span className="text-sm text-muted-foreground">
              {items.length} {items.length === 1 ? 'item' : 'items'} in cart
            </span>
          </div>
        </SheetHeader>

        {/* Error Alert */}
        {checkoutError && (
          <div className="p-4 border-b border-border">
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertDescription>{checkoutError}</AlertDescription>
            </Alert>
          </div>
        )}

        {/* Cart Items */}
        <div className="flex-1 overflow-y-auto p-4">
          {items.length === 0 ? (
            <div className="flex flex-col items-center justify-center h-full text-center">
              <ShoppingCart className="h-16 w-16 text-muted-foreground mb-4" />
              <h3 className="text-lg font-medium mb-2">Your cart is empty</h3>
              <p className="text-sm text-muted-foreground">
                Add some products from our catalog to get started
              </p>
              <Button 
                className="mt-4" 
                onClick={() => {
                  onClose()
                  // Navigate to products page
                  window.location.href = '/products'
                }}
              >
                Browse Products
              </Button>
            </div>
          ) : (
            <div className="space-y-4">
              {items.map((item) => (
                <div
                  key={item.id}
                  className="flex gap-4 p-4 border border-border rounded-lg hover:border-secondary/50 transition-colors"
                >
                  <div className="relative w-20 h-20 flex-shrink-0 overflow-hidden rounded-md bg-muted">
                    <Image
                      src={item.image}
                      alt={item.name}
                      fill
                      className="object-cover transition-transform duration-300 hover:scale-105"
                      sizes="80px"
                    />
                  </div>
                  <div className="flex-1 min-w-0">
                    <h3 className="font-medium truncate mb-1">{item.name}</h3>
                    <p className="text-sm text-muted-foreground mb-2">
                      ${item.price.toFixed(2)} × {item.quantity}
                    </p>
                    <div className="flex items-center gap-2">
                      <Button
                        variant="outline"
                        size="icon"
                        className="h-7 w-7"
                        onClick={() => updateQuantity(item.id, item.quantity - 1)}
                        disabled={item.quantity <= 1}
                        title="Decrease quantity"
                      >
                        <Minus className="h-3 w-3" />
                      </Button>
                      <span className="w-8 text-center font-medium">{item.quantity}</span>
                      <Button
                        variant="outline"
                        size="icon"
                        className="h-7 w-7"
                        onClick={() => updateQuantity(item.id, item.quantity + 1)}
                        title="Increase quantity"
                      >
                        <Plus className="h-3 w-3" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-7 w-7 ml-auto text-destructive hover:text-destructive/80"
                        onClick={() => handleRemoveItem(item.id)}
                        disabled={isRemoving === item.id}
                        title="Remove item"
                      >
                        {isRemoving === item.id ? (
                          <Loader2 className="h-4 w-4 animate-spin" />
                        ) : (
                          <Trash2 className="h-4 w-4" />
                        )}
                      </Button>
                    </div>
                  </div>
                  <div className="flex flex-col justify-end items-end">
                    <div className="text-lg font-semibold">
                      ${(item.price * item.quantity).toFixed(2)}
                    </div>
                    <div className="text-xs text-muted-foreground">
                      ${(item.price).toFixed(2)} each
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Footer */}
        {items.length > 0 && (
          <SheetFooter className="flex-col gap-4 p-4 border-t border-border">
            <div className="flex justify-between items-end">
              <div>
                <div className="text-sm text-muted-foreground">Subtotal</div>
                <div className="flex items-baseline gap-1">
                  <span className="text-2xl font-bold">${getTotal().toFixed(2)}</span>
                  <span className="text-sm text-muted-foreground">USD</span>
                </div>
              </div>
              <div className="text-right text-sm text-muted-foreground">
                {items.reduce((total, item) => total + item.quantity, 0)} items
              </div>
            </div>
            <Separator />
            <Button
              onClick={handleCheckout}
              disabled={isCheckingOut}
              variant="brand"
              className="w-full"
              size="lg"
              className="w-full h-12"
            >
              {isCheckingOut ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  Processing...
                </>
              ) : (
                <>
                  <ShoppingCart className="h-4 w-4 mr-2" />
                  Checkout - ${getTotal().toFixed(2)}
                </>
              )}
            </Button>
            <Button
              variant="outline"
              onClick={clearCart}
              className="w-full"
              size="sm"
              disabled={isCheckingOut}
            >
              Clear Cart
            </Button>
          </SheetFooter>
        )}
      </SheetContent>
    </Sheet>
  )
}