import React from 'react';
import { X, Minus, Plus, ShoppingBag, Trash2 } from 'lucide-react';
import { BillingCycle, BasketItem } from '@/proxy/order/models';

interface CartState {
  items: BasketItem[];
  total: number;
  globalBillingCycle: BillingCycle;
  globalPeriod: number;
}

interface CartProps {
  isOpen: boolean;
  onClose: () => void;
  onCheckout: () => void;
  cartState: CartState;
  updateQuantity: (id: string, quantity: number) => void;
  removeItem: (id: string) => void;
  clearCart: () => void;
}

export const Cart: React.FC<CartProps> = ({ 
  isOpen, 
  onClose, 
  onCheckout, 
  cartState, 
  updateQuantity, 
  removeItem,
  clearCart 
}) => {

  const handleClearCart = () => {
    if (window.confirm('Sepetteki tüm ürünleri silmek istediğinizden emin misiniz?')) {
      clearCart();
    }
  };

  const formatPrice = (price: number) => {
    return new Intl.NumberFormat('tr-TR', {
      style: 'currency',
      currency: 'TRY',
      minimumFractionDigits: 0
    }).format(price);
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 overflow-hidden">
      <div className="absolute inset-0 bg-black bg-opacity-50" onClick={onClose} />
      
      <div className="absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl">
        <div className="flex flex-col h-full">
          <div className="flex items-center justify-between p-6 border-b border-gray-200">
            <h2 className="text-lg font-semibold text-gray-900">Sepetim</h2>
            <div className="flex items-center space-x-2">
              {cartState.items.length > 0 && (
                <button
                  onClick={handleClearCart}
                  className="p-2 text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                  title="Sepeti Temizle"
                >
                  <Trash2 className="w-5 h-5" />
                </button>
              )}
              <button
                onClick={onClose}
                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
          </div>

          <div className="flex-1 overflow-y-auto p-6">
            {cartState.items.length === 0 ? (
              <div className="flex flex-col items-center justify-center h-full text-gray-500">
                <ShoppingBag className="w-16 h-16 mb-4" />
                <p className="text-lg font-medium">Sepetiniz boş</p>
                <p className="text-sm">Ürün eklemek için katalogdan seçim yapın</p>
              </div>
            ) : (
              <div className="space-y-4">
                {cartState.items.map((item: BasketItem, index: number) => (
                  <div key={`${item.product.id}-${item.billingCycle}-${index}`} className="border border-gray-200 rounded-lg p-4">
                    <div className="flex justify-between items-start mb-2">
                      <h4 className="font-medium text-gray-900 text-sm leading-tight">
                        {item.product.name}
                      </h4>
                      <button
                        onClick={() => removeItem(item.product.id)}
                        className="text-red-500 hover:text-red-700 ml-2"
                      >
                        <X className="w-4 h-4" />
                      </button>
                    </div>
                    
                    <div className="flex items-center justify-between">
                      <div className="text-sm text-gray-600">
                        {item.product.isQuantityBased && item.quantity > 1 && (
                          <span className="font-medium text-gray-900">{item.quantity}x - </span>
                        )}
                        {item.billingCycle === 'monthly' ? 'Aylık' : 
                         item.billingCycle === 'yearly' ? 'Yıllık' : 'Aylık'}
                        {cartState.globalPeriod > 1 && item.product.isQuantityBased && (
                          <span className="text-xs text-gray-500">
                            ({cartState.globalPeriod} {item.billingCycle === 'monthly' ? 'Ay' : 'Yıl'})
                          </span>
                        )}
                      </div>
                      
                      {item.product.isQuantityBased && (
                        <div className="flex items-center space-x-2">
                          <button
                            onClick={() => updateQuantity(item.product.id, item.quantity - 1)}
                            className="p-1 rounded border border-gray-300 hover:bg-gray-50"
                          >
                            <Minus className="w-3 h-3" />
                          </button>
                          <span className="w-8 text-center text-sm">{item.quantity}</span>
                          <button
                            onClick={() => updateQuantity(item.product.id, item.quantity + 1)}
                            className="p-1 rounded border border-gray-300 hover:bg-gray-50"
                          >
                            <Plus className="w-3 h-3" />
                          </button>
                        </div>
                      )}
                    </div>
                    
                    <div className="mt-2 font-semibold text-blue-600">
                      {formatPrice(item.totalPrice)}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

          {cartState.items.length > 0 && (
            <div className="border-t border-gray-200 p-6">
              <div className="flex justify-between items-center mb-4">
                <span className="text-lg font-semibold text-gray-900">Toplam:</span>
                <span className="text-xl font-bold text-blue-600">
                  {formatPrice(cartState.total)}
                </span>
              </div>
              
              <button
                onClick={onCheckout}
                className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-200"
              >
                Ödemeye Geç
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};