'use client';

import { useState } from 'react';
import { ShoppingCart, Minus, Plus, Check } from 'lucide-react';
import { toast } from 'sonner';
import { useCart } from '@/components/CartProvider';
import { cn } from '@/lib/utils';
import type { Product } from '@/types';

interface AddToCartButtonProps {
  product: Product;
  className?: string;
}

export function AddToCartButton({ product, className }: AddToCartButtonProps) {
  const { addItem } = useCart();
  const [qty, setQty] = useState(1);
  const [added, setAdded] = useState(false);

  const image = product.images[0] || '/placeholder.svg';

  const handleAdd = () => {
    if (product.stock < qty) {
      toast.error('Not enough stock');
      return;
    }
    addItem(
      {
        productId: product.id,
        name: product.name,
        slug: product.slug,
        price: product.price,
        image,
      },
      qty
    );
    setAdded(true);
    toast.success(`${product.name} added to cart`);
    setTimeout(() => setAdded(false), 1500);
  };

  if (product.stock <= 0) {
    return (
      <button
        disabled
        className="w-full rounded-lg bg-muted px-4 py-3 font-medium text-muted-foreground"
      >
        Out of stock
      </button>
    );
  }

  return (
    <div className={cn('flex flex-col gap-3 sm:flex-row', className)}>
      <div className="flex items-center rounded-lg border">
        <button
          onClick={() => setQty((q) => Math.max(1, q - 1))}
          className="p-3 hover:bg-muted"
          aria-label="Decrease"
        >
          <Minus className="h-4 w-4" />
        </button>
        <span className="w-12 text-center font-medium">{qty}</span>
        <button
          onClick={() => setQty((q) => Math.min(product.stock, q + 1))}
          className="p-3 hover:bg-muted"
          aria-label="Increase"
        >
          <Plus className="h-4 w-4" />
        </button>
      </div>

      <button
        onClick={handleAdd}
        className="inline-flex flex-1 items-center justify-center gap-2 rounded-lg bg-primary px-6 py-3 font-medium text-primary-foreground transition-colors hover:bg-primary/90"
      >
        {added ? (
          <>
            <Check className="h-4 w-4" /> Added
          </>
        ) : (
          <>
            <ShoppingCart className="h-4 w-4" /> Add to cart
          </>
        )}
      </button>
    </div>
  );
}