import { useState, useEffect } from "react";
import { useStripe, useElements, PaymentElement, Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { useCheckoutWizard } from "../WizardContext";

interface PaymentStepProps {
  stripePublishableKey: string;
}

// Komponente für kostenpflichtige Zahlungen (immer innerhalb Elements Provider)
const PaymentForm: React.FC = () => {
  const stripe = useStripe();
  const elements = useElements();
  const { selectedPackage, resetPaymentState, nextStep } = useCheckoutWizard();

  const [isProcessing, setIsProcessing] = useState(false);
  const [error, setError] = useState<string>('');
  const [paymentStatus, setPaymentStatus] = useState<'idle' | 'processing' | 'succeeded' | 'failed'>('idle');

  useEffect(() => {
    resetPaymentState();
  }, [selectedPackage?.id, resetPaymentState]);

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();

    if (!stripe || !elements) {
      setError('Stripe ist nicht initialisiert. Bitte Seite neu laden.');
      return;
    }

    setIsProcessing(true);
    setError('');
    setPaymentStatus('processing');

    try {
      const { error: stripeError, paymentIntent } = await stripe.confirmPayment({
        elements,
        confirmParams: {
          return_url: `${window.location.origin}/checkout/success`,
        },
        redirect: 'if_required', // Wichtig für SCA
      });

      if (stripeError) {
        console.error('Stripe Payment Error:', stripeError);
        let errorMessage = 'Zahlung fehlgeschlagen. ';

        switch (stripeError.type) {
          case 'card_error':
            errorMessage += stripeError.message || 'Kartenfehler aufgetreten.';
            break;
          case 'validation_error':
            errorMessage += 'Eingabedaten sind ungültig.';
            break;
          case 'api_connection_error':
            errorMessage += 'Verbindungsfehler. Bitte Internetverbindung prüfen.';
            break;
          case 'api_error':
            errorMessage += 'Serverfehler. Bitte später erneut versuchen.';
            break;
          case 'authentication_error':
            errorMessage += 'Authentifizierungsfehler. Bitte Seite neu laden.';
            break;
          default:
            errorMessage += stripeError.message || 'Unbekannter Fehler aufgetreten.';
        }

        setError(errorMessage);
        setPaymentStatus('failed');
      } else if (paymentIntent) {
        switch (paymentIntent.status) {
          case 'succeeded':
            setPaymentStatus('succeeded');
            // Kleiner Delay für bessere UX
            setTimeout(() => nextStep(), 1000);
            break;
          case 'processing':
            setError('Zahlung wird verarbeitet. Bitte warten...');
            setPaymentStatus('processing');
            break;
          case 'requires_payment_method':
            setError('Zahlungsmethode wird benötigt. Bitte Kartendaten überprüfen.');
            setPaymentStatus('failed');
            break;
          case 'requires_confirmation':
            setError('Zahlung muss bestätigt werden.');
            setPaymentStatus('failed');
            break;
          default:
            setError(`Unerwarteter Zahlungsstatus: ${paymentIntent.status}`);
            setPaymentStatus('failed');
        }
      }
    } catch (err) {
      console.error('Unexpected payment error:', err);
      setError('Unerwarteter Fehler aufgetreten. Bitte später erneut versuchen.');
      setPaymentStatus('failed');
    } finally {
      setIsProcessing(false);
    }
  };

  return (
    <div className="space-y-6">
      <form onSubmit={handleSubmit} className="space-y-4">
        {error && (
          <Alert variant="destructive">
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        )}

        <div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
          <p className="text-sm text-muted-foreground">
            Sichere Zahlung mit Kreditkarte, Debitkarte oder SEPA-Lastschrift.
          </p>
          <PaymentElement />
          <Button
            type="submit"
            disabled={!stripe || isProcessing}
            size="lg"
            className="w-full"
          >
            {isProcessing ? 'Verarbeitung...' : `Jetzt bezahlen (€${selectedPackage?.price || 0})`}
          </Button>
        </div>
      </form>
    </div>
  );
};

// Wrapper-Komponente mit eigenem Elements Provider
export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }) => {
  const { selectedPackage, authUser, nextStep } = useCheckoutWizard();
  const [clientSecret, setClientSecret] = useState<string>('');
  const [error, setError] = useState<string>('');

  const isFree = selectedPackage ? selectedPackage.price <= 0 : false;

  // Payment Intent für kostenpflichtige Pakete laden
  useEffect(() => {
    if (isFree || !authUser || !selectedPackage) return;

    const loadPaymentIntent = async () => {
      try {
        const response = await fetch('/stripe/create-payment-intent', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
          },
          body: JSON.stringify({
            package_id: selectedPackage.id,
          }),
        });

        const data = await response.json();

        console.log('Payment Intent Response:', {
          ok: response.ok,
          status: response.status,
          data: data
        });

        if (response.ok && data.client_secret) {
          setClientSecret(data.client_secret);
          setError('');
        } else {
          const errorMsg = data.error || 'Fehler beim Laden der Zahlungsdaten';
          console.error('Payment Intent Error:', errorMsg);
          setError(errorMsg);
        }
      } catch (err) {
        setError('Netzwerkfehler beim Laden der Zahlungsdaten');
      }
    };

    loadPaymentIntent();
  }, [selectedPackage?.id, authUser, isFree]);

  // Für kostenlose Pakete: Direkte Aktivierung ohne Stripe
  if (isFree) {
    return (
      <div className="space-y-6">
        <Alert>
          <AlertTitle>Kostenloses Paket</AlertTitle>
          <AlertDescription>
            Dieses Paket ist kostenlos. Wir aktivieren es direkt nach der Bestätigung.
          </AlertDescription>
        </Alert>
        <div className="flex justify-end">
          <Button size="lg" onClick={nextStep}>
            Paket aktivieren
          </Button>
        </div>
      </div>
    );
  }

  // Für kostenpflichtige Pakete: Warten auf clientSecret
  if (!clientSecret) {
    return (
      <div className="space-y-6">
        {error && (
          <Alert variant="destructive">
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        )}
        <div className="rounded-lg border bg-card p-6 shadow-sm">
          <p className="text-sm text-muted-foreground">
            Zahlungsdaten werden geladen...
          </p>
        </div>
      </div>
    );
  }

  // Eigener Elements Provider mit clientSecret für kostenpflichtige Pakete
  const stripePromise = loadStripe(stripePublishableKey);

  return (
    <Elements stripe={stripePromise} options={{ clientSecret }}>
      <PaymentForm />
    </Elements>
  );
};
