/**
 * ============================================
 * ADD TO CART BUTTON
 * ============================================
 * Equivalent to: buy-widget.html.twig in Shopware
 * 
 * 'use client' because it needs:
 * - useState (for quantity)
 * - useCart (for adding to cart)
 * - onClick handler
 * 
 * FOR SHOPWARE DEVS:
 * In Twig, you'd use the AddToCart plugin.
 * In React, we use a hook (useCart) and state.
 */

'use client';

import { useState } from 'react';
import { useCart } from '@/lib/cart-context';

interface AddToCartButtonProps {
  productId: string;
}

export default function AddToCartButton({ productId }: AddToCartButtonProps) {
  const { addToCart, isLoading } = useCart();
  const [quantity, setQuantity] = useState(1);
  const [added, setAdded] = useState(false);

  const handleAddToCart = async () => {
    try {
      await addToCart(productId, quantity);
      setAdded(true);
      // Reset "Added!" message after 2 seconds
      setTimeout(() => setAdded(false), 2000);
    } catch (error) {
      console.error('Failed to add to cart:', error);
    }
  };

  return (
    <div className="flex items-stretch gap-2">
      {/* Quantity selector — Shopware style compact input */}
      <div className="flex items-center border border-surface-300 rounded-lg overflow-hidden flex-shrink-0">
        <button
          onClick={() => setQuantity(Math.max(1, quantity - 1))}
          className="px-3 py-3 text-surface-500 hover:text-surface-900 hover:bg-surface-50 transition-colors"
          aria-label="Decrease quantity"
        >
          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
          </svg>
        </button>
        <input
          type="number"
          min="1"
          value={quantity}
          onChange={(e) => setQuantity(Math.max(1, parseInt(e.target.value) || 1))}
          aria-label="Quantity"
          className="w-12 text-center py-3 font-medium text-sm border-x border-surface-300 focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
        />
        <button
          onClick={() => setQuantity(quantity + 1)}
          className="px-3 py-3 text-surface-500 hover:text-surface-900 hover:bg-surface-50 transition-colors"
          aria-label="Increase quantity"
        >
          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
          </svg>
        </button>
      </div>

      {/* Add to cart button — Shopware brand color */}
      <button
        onClick={handleAddToCart}
        disabled={isLoading}
        className={`
          flex-1 py-3 px-6 rounded-lg font-semibold text-white text-sm
          transition-all duration-200
          ${added
            ? 'bg-green-500 hover:bg-green-600'
            : 'bg-brand-500 hover:bg-brand-600 active:scale-[0.98]'
          }
          disabled:opacity-50 disabled:cursor-not-allowed
        `}
      >
        {isLoading ? (
          <span className="flex items-center justify-center gap-2">
            <svg className="animate-spin w-5 h-5" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
            </svg>
            Adding...
          </span>
        ) : added ? (
          <span className="flex items-center justify-center gap-2">
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
            Added!
          </span>
        ) : (
          <span className="flex items-center justify-center gap-2">
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 100 4 2 2 0 000-4z" />
            </svg>
            Add to shopping cart
          </span>
        )}
      </button>
    </div>
  );
}