import React, { useState, useEffect } from 'react';
import { CreditCard, X, CheckCircle, AlertCircle, Loader2 } from 'lucide-react';
import { Button, Modal, Input } from '../../components/ui';
import { DialogModal } from '../../components/ui/DialogModal/DialogModal';
import { subscriptionService } from '../../api';
import { showToast } from '../../utils/toast';
import { useTranslation } from 'react-i18next';

interface PaymentMethodUpdateModalProps {
  isOpen: boolean;
  onClose: () => void;
  tenantId: string;
  currentPaymentMethod?: {
    brand?: string;
    last4?: string;
    exp_month?: number;
    exp_year?: number;
  };
  onPaymentMethodUpdated: (paymentMethod: {
    brand: string;
    last4: string;
    exp_month?: number;
    exp_year?: number;
  }) => void;
}

export const PaymentMethodUpdateModal: React.FC<PaymentMethodUpdateModalProps> = ({
  isOpen,
  onClose,
  tenantId,
  currentPaymentMethod,
  onPaymentMethodUpdated
}) => {
  const { t } = useTranslation('subscription');
  const [loading, setLoading] = useState(false);
  const [paymentMethodId, setPaymentMethodId] = useState('');
  const [stripe, setStripe] = useState<any>(null);
  const [elements, setElements] = useState<any>(null);
  const [cardElement, setCardElement] = useState<any>(null);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  // Load Stripe.js dynamically
  useEffect(() => {
    if (isOpen) {
      const loadStripe = async () => {
        try {
          // Load Stripe.js from CDN
          const stripeScript = document.createElement('script');
          stripeScript.src = 'https://js.stripe.com/v3/';
          stripeScript.async = true;
          stripeScript.onload = () => {
            const stripeInstance = (window as any).Stripe('pk_test_your_publishable_key'); // Replace with actual key
            setStripe(stripeInstance);
            const elementsInstance = stripeInstance.elements();
            setElements(elementsInstance);
          };
          document.body.appendChild(stripeScript);
        } catch (err) {
          console.error('Failed to load Stripe:', err);
          setError('Failed to load payment processor');
        }
      };
      
      loadStripe();
    }
  }, [isOpen]);

  // Create card element when Stripe and elements are loaded
  useEffect(() => {
    if (elements && !cardElement) {
      const card = elements.create('card', {
        style: {
          base: {
            fontSize: '16px',
            color: '#32325d',
            '::placeholder': {
              color: '#aab7c4',
            },
          },
          invalid: {
            color: '#fa755a',
            iconColor: '#fa755a',
          },
        },
      });
      
      // Mount the card element
      const cardElementContainer = document.getElementById('card-element');
      if (cardElementContainer) {
        card.mount(cardElementContainer);
        setCardElement(card);
      }
    }
  }, [elements, cardElement]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!stripe || !cardElement) {
      setError('Payment processor not loaded');
      return;
    }

    setLoading(true);
    setError(null);
    setSuccess(false);

    try {
      // Create payment method using Stripe Elements
      const { paymentMethod, error: stripeError } = await stripe.createPaymentMethod({
        type: 'card',
        card: cardElement,
      });

      if (stripeError) {
        setError(stripeError.message || 'Failed to create payment method');
        setLoading(false);
        return;
      }

      if (!paymentMethod || !paymentMethod.id) {
        setError('No payment method created');
        setLoading(false);
        return;
      }

      // Call backend to update payment method
      const result = await subscriptionService.updatePaymentMethod(tenantId, paymentMethod.id);

      if (result.success) {
        setSuccess(true);
        showToast.success(result.message);
        
        // Notify parent component about the update
        onPaymentMethodUpdated({
          brand: result.brand,
          last4: result.last4,
          exp_month: result.exp_month,
          exp_year: result.exp_year,
        });
        
        // Close modal after a brief delay to show success message
        setTimeout(() => {
          onClose();
        }, 2000);
      } else {
        setError(result.message || 'Failed to update payment method');
      }

    } catch (err) {
      console.error('Error updating payment method:', err);
      setError(err instanceof Error ? err.message : 'An unexpected error occurred');
    } finally {
      setLoading(false);
    }
  };

  const handleClose = () => {
    setError(null);
    setSuccess(false);
    setPaymentMethodId('');
    onClose();
  };

  return (
    <DialogModal
      isOpen={isOpen}
      onClose={handleClose}
      title="Actualizar Método de Pago"
      message={null}
      type="custom"
      size="lg"
    >
      <div className="space-y-6">
        {/* Current Payment Method Info */}
        {currentPaymentMethod && (
          <div className="p-4 bg-[var(--bg-secondary)] rounded-lg border border-[var(--border-secondary)]">
            <h4 className="font-medium text-[var(--text-primary)] mb-2">Método de Pago Actual</h4>
            <div className="flex items-center gap-3">
              <CreditCard className="w-6 h-6 text-blue-500" />
              <div>
                <p className="text-[var(--text-primary)]">
                  {currentPaymentMethod.brand} terminando en {currentPaymentMethod.last4}
                </p>
                {currentPaymentMethod.exp_month && currentPaymentMethod.exp_year && (
                  <p className="text-sm text-[var(--text-secondary)]">
                    Expira: {currentPaymentMethod.exp_month}/{currentPaymentMethod.exp_year}
                  </p>
                )}
              </div>
            </div>
          </div>
        )}

        {/* Payment Form */}
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
              Nueva Tarjeta
            </label>
            <div id="card-element" className="p-3 border border-[var(--border-primary)] rounded-lg bg-[var(--bg-primary)]">
              {/* Stripe card element will be mounted here */}
              {!cardElement && !error && (
                <div className="flex items-center gap-2 text-[var(--text-secondary)]">
                  <Loader2 className="w-4 h-4 animate-spin" />
                  <span>Cargando procesador de pagos...</span>
                </div>
              )}
            </div>
          </div>

          {error && (
            <div className="p-3 bg-red-500/10 border border-red-500/20 rounded-lg flex items-center gap-2 text-red-500">
              <AlertCircle className="w-4 h-4" />
              <span className="text-sm">{error}</span>
            </div>
          )}

          {success && (
            <div className="p-3 bg-green-500/10 border border-green-500/20 rounded-lg flex items-center gap-2 text-green-500">
              <CheckCircle className="w-4 h-4" />
              <span className="text-sm">Método de pago actualizado correctamente</span>
            </div>
          )}

          <div className="flex gap-3 justify-end">
            <Button 
              type="button" 
              variant="outline" 
              onClick={handleClose}
              disabled={loading}
            >
              Cancelar
            </Button>
            <Button 
              type="submit" 
              variant="primary" 
              disabled={loading || !cardElement}
              className="flex items-center gap-2"
            >
              {loading && <Loader2 className="w-4 h-4 animate-spin" />}
              {loading ? 'Procesando...' : 'Actualizar Método de Pago'}
            </Button>
          </div>
        </form>

        {/* Security Info */}
        <div className="p-3 bg-blue-500/5 border border-blue-500/20 rounded-lg text-sm text-[var(--text-secondary)]">
          <p className="flex items-center gap-2">
            <CreditCard className="w-4 h-4 text-blue-500" />
            <span>Tus datos de pago están protegidos y se procesan de forma segura.</span>
          </p>
        </div>
      </div>
    </DialogModal>
  );
};