import React from 'react';
import { ShoppingCart, Plus, Minus, Trash2, X } from 'lucide-react';
import { Card } from '../../ui/Card';
import { Button } from '../../ui/Button';
import { useTenantCurrency } from '../../../hooks/useTenantCurrency';

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
  category: string;
  stock: number;
}

interface POSCartProps {
  cart: CartItem[];
  onUpdateQuantity: (id: string, quantity: number) => void;
  onClearCart: () => void;
  taxRate?: number;
}

/**
 * POSCart - Fixed sidebar cart component with clear totals and item management
 * Optimized for quick checkout operations
 */
export const POSCart: React.FC<POSCartProps> = ({
  cart,
  onUpdateQuantity,
  onClearCart,
  taxRate = 0.21, // 21% IVA by default
}) => {
  const { currencySymbol } = useTenantCurrency();

  // Calculate totals
  const subtotal = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const tax = subtotal * taxRate;
  const total = subtotal + tax;
  const itemCount = cart.reduce((sum, item) => sum + item.quantity, 0);

  return (
    <div className="h-full flex flex-col">
      {/* Cart Header */}
      <div className="flex items-center justify-between mb-4 pb-4 border-b border-[var(--border-primary)]">
        <h3 className="text-xl font-bold text-[var(--text-primary)] flex items-center gap-2">
          <ShoppingCart className="w-6 h-6 text-[var(--color-primary)]" />
          Carrito ({itemCount})
        </h3>
        {cart.length > 0 && (
          <Button variant="ghost" size="sm" onClick={onClearCart}>
            <Trash2 className="w-4 h-4 mr-1" />
            Limpiar
          </Button>
        )}
      </div>

      {/* Cart Items */}
      <div className="flex-1 overflow-y-auto space-y-3 mb-4">
        {cart.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-full text-center py-12">
            <ShoppingCart className="w-16 h-16 text-[var(--text-tertiary)] mb-3 opacity-30" />
            <p className="text-[var(--text-secondary)] font-medium">Carrito vacío</p>
            <p className="text-sm text-[var(--text-tertiary)] mt-1">
              Agrega productos para comenzar
            </p>
          </div>
        ) : (
          cart.map((item) => (
            <Card
              key={item.id}
              className="p-3 bg-[var(--bg-secondary)] border-l-4 transition-all hover:shadow-md"
              style={{
                borderLeftColor: 'var(--color-primary)',
              }}
            >
              <div className="flex items-start justify-between gap-3">
                {/* Item Info */}
                <div className="flex-1 min-w-0">
                  <h4
                    className="text-sm font-semibold text-[var(--text-primary)] truncate"
                    title={item.name}
                  >
                    {item.name}
                  </h4>
                  <div className="flex items-baseline gap-2 mt-1">
                    <span className="text-sm font-medium text-[var(--color-primary)]">
                      {currencySymbol}{item.price.toFixed(2)}
                    </span>
                    <span className="text-xs text-[var(--text-tertiary)]">c/u</span>
                  </div>
                  <p className="text-xs text-[var(--text-tertiary)] mt-1">
                    Stock: {item.stock}
                  </p>
                </div>

                {/* Remove Button */}
                <button
                  onClick={() => onUpdateQuantity(item.id, 0)}
                  className="text-[var(--color-error)] hover:bg-[var(--color-error)]/10 p-1 rounded transition-colors"
                  title="Eliminar"
                >
                  <X className="w-4 h-4" />
                </button>
              </div>

              {/* Quantity Controls */}
              <div className="flex items-center justify-between mt-3 pt-3 border-t border-[var(--border-primary)]">
                <div className="flex items-center gap-2">
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => onUpdateQuantity(item.id, item.quantity - 1)}
                    className="w-8 h-8 p-0"
                  >
                    <Minus className="w-3 h-3" />
                  </Button>
                  <span className="w-10 text-center text-base font-bold text-[var(--text-primary)]">
                    {item.quantity}
                  </span>
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => onUpdateQuantity(item.id, item.quantity + 1)}
                    disabled={item.quantity >= item.stock}
                    className="w-8 h-8 p-0"
                  >
                    <Plus className="w-3 h-3" />
                  </Button>
                </div>

                {/* Item Subtotal */}
                <div className="text-right">
                  <p className="text-base font-bold text-[var(--text-primary)]">
                    {currencySymbol}{(item.price * item.quantity).toFixed(2)}
                  </p>
                </div>
              </div>
            </Card>
          ))
        )}
      </div>

      {/* Cart Totals */}
      {cart.length > 0 && (
        <Card className="p-4 bg-[var(--bg-tertiary)] border-2 border-[var(--color-primary)]/20">
          <div className="space-y-3">
            {/* Subtotal */}
            <div className="flex justify-between items-center text-sm">
              <span className="text-[var(--text-secondary)]">Subtotal:</span>
              <span className="font-semibold text-[var(--text-primary)]">
                {currencySymbol}{subtotal.toFixed(2)}
              </span>
            </div>

            {/* Tax */}
            <div className="flex justify-between items-center text-sm">
              <span className="text-[var(--text-secondary)]">IVA ({(taxRate * 100).toFixed(0)}%):</span>
              <span className="font-semibold text-[var(--text-primary)]">
                {currencySymbol}{tax.toFixed(2)}
              </span>
            </div>

            {/* Divider */}
            <div className="border-t-2 border-[var(--border-secondary)] pt-3">
              {/* Total */}
              <div className="flex justify-between items-center">
                <span className="text-lg font-bold text-[var(--text-primary)]">TOTAL:</span>
                <span className="text-2xl font-bold text-[var(--color-primary)]">
                  {currencySymbol}{total.toFixed(2)}
                </span>
              </div>
            </div>
          </div>
        </Card>
      )}
    </div>
  );
};

export default POSCart;
