import React, { useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useCheckoutWizard } from "../WizardContext";

interface PaymentStepProps {
  stripePublishableKey: string;
}

export const PaymentStep: React.FC<PaymentStepProps> = ({ stripePublishableKey }) => {
  const { selectedPackage, paymentProvider, setPaymentProvider, resetPaymentState, nextStep } = useCheckoutWizard();

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

  const isFree = selectedPackage.price === 0;

  if (isFree) {
    return (
      <div className="space-y-6">
        <Alert>
          <AlertTitle>Kostenloses Paket</AlertTitle>
          <AlertDescription>
            Dieses Paket ist kostenlos. Wir aktivieren es direkt nach der Bestaetigung.
          </AlertDescription>
        </Alert>
        <div className="flex justify-end">
          <Button size="lg" onClick={nextStep}>
            Paket aktivieren
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <Tabs value={paymentProvider ?? 'stripe'} onValueChange={(value) => setPaymentProvider(value as 'stripe' | 'paypal')}>
        <TabsList className="grid w-full grid-cols-2">
          <TabsTrigger value="stripe">Stripe</TabsTrigger>
          <TabsTrigger value="paypal">PayPal</TabsTrigger>
        </TabsList>
        <TabsContent value="stripe" className="mt-4">
          <div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
            <p className="text-sm text-muted-foreground">
              Karten- oder SEPA-Zahlung via Stripe Elements. Wir erzeugen beim Fortfahren einen Payment Intent.
            </p>
            <Alert variant="secondary">
              <AlertTitle>Integration folgt</AlertTitle>
              <AlertDescription>
                Stripe Elements wird im naechsten Schritt integriert. Aktuell dient dieser Block als Platzhalter fuer UI und API Hooks.
              </AlertDescription>
            </Alert>
            <div className="flex justify-end">
              <Button disabled>Stripe Zahlung starten</Button>
            </div>
          </div>
        </TabsContent>
        <TabsContent value="paypal" className="mt-4">
          <div className="rounded-lg border bg-card p-6 shadow-sm space-y-4">
            <p className="text-sm text-muted-foreground">
              PayPal Express Checkout mit Rueckleitung zur Bestaetigung. Wir hinterlegen Paket- und Tenant-Daten im Order-Metadata.
            </p>
            <Alert variant="secondary">
              <AlertTitle>Integration folgt</AlertTitle>
              <AlertDescription>
                PayPal Buttons werden im Folge-PR angebunden. Dieser Platzhalter zeigt den spaeteren Container fuer die Buttons.
              </AlertDescription>
            </Alert>
            <div className="flex justify-end">
              <Button disabled>PayPal Bestellung anlegen</Button>
            </div>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
};