import React from 'react'
import { FaTimes, FaMinus, FaPlus, FaShoppingBag, FaTrash } from 'react-icons/fa'
import { BillingCycle, BasketItem } from '@/proxy/order/models'
import { useLocalization } from '@/utils/hooks/useLocalization'

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 { translate } = useLocalization()

  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">
              {translate('::Public.cart.title')}
            </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={translate('::Public.cart.clear')}
                >
                  <FaTrash className="w-5 h-5" />
                </button>
              )}
              <button
                onClick={onClose}
                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
              >
                <FaTimes 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">
                <FaShoppingBag className="w-16 h-16 mb-4" />
                <p className="text-lg font-medium">{translate('::Public.cart.empty.title')}</p>
                <p className="text-sm">{translate('::Public.cart.empty.subtitle')}</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">
                        {translate('::' + item.product.name)}
                      </h4>
                      <button
                        onClick={() => removeItem(item.product.id)}
                        className="text-red-500 hover:text-red-700 ml-2"
                      >
                        <FaTimes 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'
                          ? translate('::Public.cart.monthly')
                          : item.billingCycle === 'yearly'
                            ? translate('::Public.cart.yearly')
                            : translate('::Public.cart.monthly')}
                        {cartState.globalPeriod > 1 && item.product.isQuantityBased && (
                          <span className="text-xs text-gray-500">
                            ({cartState.globalPeriod}{' '}
                            {item.billingCycle === 'monthly'
                              ? translate('::Public.cart.month')
                              : translate('::Public.cart.year')}
                            )
                          </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"
                          >
                            <FaMinus 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"
                          >
                            <FaPlus 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">
                  {translate('::Public.cart.total')}
                </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"
              >
                {translate('::Public.cart.checkout')}
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}