import { useState, useEffect, type CSSProperties } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import { 
  Calendar, 
  Clock, 
  User, 
  Phone, 
  Mail, 
  MessageSquare, 
  ChevronLeft, 
  ChevronRight, 
  Check,
  ArrowRight,
  ArrowLeft 
} from "lucide-react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation, useQuery } from "@tanstack/react-query";
import { apiRequest } from "@/lib/queryClient";
import { useToast } from "@/hooks/use-toast";
// Import shared booking core utilities
import {
  bookingSchema,
  type BookingFormData,
  type Service,
  type BlockedTime,
  generateCalendarDays,
  createBookingPayload,
  formatMonthYear,
  serviceRequiresPayment,
  getPaymentConfig,
  DAY_NAMES,
} from "@shared/bookingModalCore";

interface BookingModalProps {
  isOpen: boolean;
  onClose: () => void;
  pageId?: string;
  ctaBarId?: string;
  businessName: string;
  services: Service[];
  maxPeople?: number;
  brandColor?: string;
  salutation?: "du" | "Sie";
}

export function BookingModal({ isOpen, onClose, pageId, ctaBarId, businessName, services, maxPeople = 10, brandColor = '#2563eb', salutation = 'Sie' }: BookingModalProps) {
  // Determine which ID to use (one must be provided)
  const resourceId = pageId || ctaBarId;
  const isCtaBar = !!ctaBarId;
  const [currentStep, setCurrentStep] = useState(1);
  const [selectedDate, setSelectedDate] = useState("");
  const [selectedService, setSelectedService] = useState("");
  const [calendarDate, setCalendarDate] = useState(new Date());
  const [pendingBookingData, setPendingBookingData] = useState<any>(null);
  const [showPaymentSelection, setShowPaymentSelection] = useState(false);
  const { toast } = useToast();

  const form = useForm<BookingFormData>({
    resolver: zodResolver(bookingSchema),
    defaultValues: {
      customerName: "",
      customerEmail: "",
      customerPhone: "",
      serviceName: "",
      bookingDate: "",
      bookingTime: "",
      numberOfPeople: 1,
      notes: "",
    },
  });

  // Get available time slots for selected date
  const { data: availableSlots = [], isLoading: loadingSlots } = useQuery({
    queryKey: ["/api/available-slots", resourceId, selectedDate, isCtaBar ? 'ctaBar' : 'page'],
    queryFn: () => {
      const param = isCtaBar ? `ctaBarId=${resourceId}` : `pageId=${resourceId}`;
      return apiRequest("GET", `/api/available-slots?${param}&date=${selectedDate}`)
        .then(res => res.json());
    },
    enabled: !!selectedDate && !!resourceId,
  });

  // Get blocked times for this page/CTA bar
  const { data: blockedTimes = [] } = useQuery({
    queryKey: ["/api/blocked-times", resourceId, isCtaBar ? 'ctaBar' : 'page'],
    queryFn: () => {
      const param = isCtaBar ? `ctaBarId=${resourceId}` : `pageId=${resourceId}`;
      return apiRequest("GET", `/api/blocked-times?${param}`)
        .then(res => res.json());
    },
    enabled: !!resourceId,
  });

  // Get booking page/CTA bar data for payment URL
  const { data: bookingPageData } = useQuery({
    queryKey: isCtaBar ? ["/api/public/cta-bars", resourceId] : ["/api/booking-pages", resourceId],
    queryFn: () => {
      // Use public endpoint for CTA bars (accessible without auth)
      const endpoint = isCtaBar ? `/api/public/cta-bars/${resourceId}` : `/api/booking-pages/${resourceId}`;
      return apiRequest("GET", endpoint).then(res => res.json());
    },
    enabled: !!resourceId,
  });

  // Create booking mutation (after payment or for free bookings)
  const createBookingMutation = useMutation({
    mutationFn: (data: any) =>
      apiRequest("POST", "/api/bookings", data).then(res => res.json()),
    onSuccess: (booking) => {
      // Check if server provided a payment redirect URL (for unconfirmed payments)
      if (booking.paymentRedirect) {
        toast({
          title: "Booking Created!",
          description: "Redirecting to payment page to complete your booking...",
        });
        // Use the exact payment URL provided by the server
        window.open(booking.paymentRedirect, '_blank');
      } else if ((booking.paymentStatus === "pending" || booking.paymentStatus === "unconfirmed") && 
                 bookingPageData?.acceptOnlinePayments && bookingPageData?.paymentUrl) {
        // Fallback for older flow - construct payment URL with parameters  
        toast({
          title: "Booking Created!",
          description: "Redirecting to payment page to complete your booking...",
        });
        const paymentUrl = new URL(bookingPageData.paymentUrl);
        paymentUrl.searchParams.set('booking_id', booking.id);
        paymentUrl.searchParams.set('customer_name', booking.customerName);
        paymentUrl.searchParams.set('service_name', booking.serviceName);
        if (booking.servicePrice) paymentUrl.searchParams.set('amount', booking.servicePrice);
        window.open(paymentUrl.toString(), '_blank');
      } else {
        toast({
          title: "Booking Confirmed!",
          description: booking.paymentStatus === "pending" 
            ? "Your booking is confirmed. Payment can be made in cash when you arrive."
            : "Your booking has been successfully created. You'll receive a confirmation email shortly.",
        });
      }
      
      form.reset();
      setPendingBookingData(null);
      setCurrentStep(1);
      setSelectedDate("");
      setSelectedService("");
      onClose();
    },
    onError: () => {
      toast({
        title: "Booking Failed",
        description: "There was an error creating your booking. Please try again.",
        variant: "destructive",
      });
    },
  });

  const onSubmit = (data: BookingFormData) => {
    // Use shared core to create booking payload with correct ID
    const bookingData = createBookingPayload(data, services, pageId, ctaBarId);
    
    setPendingBookingData(bookingData);

    // Find selected service to check payment requirement
    const selectedServiceData = services.find(s => s.name === data.serviceName);
    
    // Check if service requires payment
    if (selectedServiceData && serviceRequiresPayment(selectedServiceData)) {
      // Show payment selection modal
      setShowPaymentSelection(true);
    } else {
      // Free service - create booking directly
      createBookingMutation.mutate({
        ...bookingData,
        status: "confirmed",
        paymentStatus: "completed",
        paymentMethod: "free"
      });
    }
  };

  const handlePaymentMethodSelect = (paymentMethod: string) => {
    if (!pendingBookingData) return;

    if (paymentMethod === "online" && bookingPageData?.acceptOnlinePayments && bookingPageData?.paymentUrl) {
      // Create pending booking with unconfirmed payment status
      createBookingMutation.mutate({
        ...pendingBookingData,
        status: "pending",
        paymentStatus: "unconfirmed",
        paymentMethod: "payment_url"
      });
    } else {
      // Cash or bank transfer - create confirmed booking
      createBookingMutation.mutate({
        ...pendingBookingData,
        status: "confirmed",
        paymentStatus: "pending",
        paymentMethod: paymentMethod
      });
    }
    
    setShowPaymentSelection(false);
  };

  // Payment handlers removed - using external payment URLs now

  const handleDateSelect = (dateString: string) => {
    setSelectedDate(dateString);
    form.setValue("bookingDate", dateString);
    if (currentStep === 1) setCurrentStep(2);
  };

  const handleServiceSelect = (service: string) => {
    setSelectedService(service);
    form.setValue("serviceName", service);
    if (currentStep === 2) setCurrentStep(3);
  };

  const handleTimeSelect = (time: string) => {
    form.setValue("bookingTime", time);
    setCurrentStep(4);
  };

  const navigateMonth = (direction: 'prev' | 'next') => {
    setCalendarDate(prev => {
      const newDate = new Date(prev);
      if (direction === 'prev') {
        newDate.setMonth(prev.getMonth() - 1);
      } else {
        newDate.setMonth(prev.getMonth() + 1);
      }
      return newDate;
    });
  };

  const selectedServiceData = services.find(s => s.name === selectedService);
  const calendarDays = generateCalendarDays(calendarDate, selectedDate, blockedTimes);

  // Reset form when modal closes
  useEffect(() => {
    if (!isOpen) {
      form.reset();
      setCurrentStep(1);
      setSelectedDate("");
      setSelectedService("");
      setCalendarDate(new Date());
    }
  }, [isOpen, form]);

  const renderStepIndicator = () => (
    <div className="flex justify-center mb-6 overflow-x-auto px-2">
      <div className="flex items-center gap-1 min-w-max">
        {[1, 2, 3, 4].map((step) => (
          <div key={step} className="flex items-center">
            <div
              className="w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center text-xs sm:text-sm font-medium flex-shrink-0"
              style={currentStep >= step
                ? { backgroundColor: brandColor, color: '#fff' }
                : { backgroundColor: '#e5e7eb', color: '#6b7280' }}
            >
              {currentStep > step ? <Check className="w-3 h-3 sm:w-4 sm:h-4" /> : step}
            </div>
            {step < 4 && (
              <div
                className="w-4 sm:w-8 h-0.5 mx-1 sm:mx-2 flex-shrink-0"
                style={{ backgroundColor: currentStep > step ? brandColor : '#e5e7eb' }}
              />
            )}
          </div>
        ))}
      </div>
    </div>
  );

  const renderDateSelection = () => (
    <div className="space-y-4">
      <div className="text-center">
        <h3 className="text-lg font-semibold mb-2">Datum wählen</h3>
        <p className="text-gray-600 text-sm">{salutation === 'du' ? 'Wähle deinen Wunschtermin' : 'Wählen Sie Ihren Wunschtermin'}</p>
      </div>
      
      {/* Calendar Header */}
      <div className="flex items-center justify-between mb-4">
        <Button
          variant="outline"
          size="icon"
          onClick={() => navigateMonth('prev')}
          className="h-8 w-8"
        >
          <ChevronLeft className="w-4 h-4" />
        </Button>
        
        <h4 className="font-semibold">
          {formatMonthYear(calendarDate)}
        </h4>
        
        <Button
          variant="outline"
          size="icon"
          onClick={() => navigateMonth('next')}
          className="h-8 w-8"
        >
          <ChevronRight className="w-4 h-4" />
        </Button>
      </div>

      {/* Calendar Grid */}
      <div className="grid grid-cols-7 gap-1 mb-4">
        {DAY_NAMES.map((day) => (
          <div key={day} className="p-2 text-center text-sm font-medium text-gray-500">
            {day}
          </div>
        ))}
        
        {calendarDays.map((day, index) => {
          const isDisabled = day.isPast || !day.isCurrentMonth || day.isBlocked;
          let dayStyle: CSSProperties = {};
          let dayClass = 'p-2 text-sm rounded-lg transition-colors h-10 w-10 relative';
          if (!day.isCurrentMonth || day.isPast) {
            dayClass += ' text-gray-300 cursor-not-allowed';
          } else if (day.isBlocked) {
            dayClass += ' text-red-400 cursor-not-allowed bg-red-50 border border-red-200';
          } else if (day.isSelected) {
            dayClass += ' text-white font-semibold';
            dayStyle = { backgroundColor: brandColor };
          } else if (day.isToday) {
            dayClass += ' font-semibold border';
            dayStyle = { backgroundColor: `${brandColor}18`, color: brandColor, borderColor: `${brandColor}50` };
          } else {
            dayClass += ' hover:bg-gray-100 text-gray-900';
          }
          return (
          <button
            key={index}
            type="button"
            onClick={() => !isDisabled && handleDateSelect(day.dateString)}
            disabled={isDisabled}
            className={dayClass}
            style={dayStyle}
          >
            {day.dayNumber}
            {day.isBlocked && (
              <div className="absolute inset-0 flex items-center justify-center">
                <span className="text-xs text-red-500">✕</span>
              </div>
            )}
          </button>
          );
        })}
      </div>
    </div>
  );

  const renderServiceSelection = () => {
    // Group services by category
    const groups: { category: string; items: typeof services }[] = [];
    const seen = new Set<string>();
    for (const svc of services) {
      const cat = (svc as any).category || "";
      if (!seen.has(cat)) { seen.add(cat); groups.push({ category: cat, items: [] }); }
      groups.find(g => g.category === cat)!.items.push(svc);
    }
    const hasCategories = groups.some(g => g.category !== "");

    return (
      <div className="space-y-4">
        <div className="text-center">
          <h3 className="text-lg font-semibold mb-2">Leistung wählen</h3>
          <p className="text-gray-600 text-sm">{salutation === 'du' ? 'Wähle die gewünschte Leistung' : 'Wählen Sie die gewünschte Leistung'}</p>
        </div>

        <div className="space-y-4">
          {groups.map(({ category, items }) => (
            <div key={category || "__none__"}>
              {hasCategories && category && (
                <div className="flex items-center gap-2 mb-2">
                  <span className="text-xs font-bold uppercase tracking-widest" style={{ color: brandColor }}>{category}</span>
                  <div className="flex-1 h-px" style={{ backgroundColor: `${brandColor}30` }} />
                </div>
              )}
              <div className="space-y-2">
                {items.map((service) => (
                  <button
                    key={service.name}
                    type="button"
                    onClick={() => handleServiceSelect(service.name)}
                    className="w-full p-4 rounded-lg border text-left transition-all"
                    style={selectedService === service.name
                      ? { borderColor: brandColor, backgroundColor: `${brandColor}10` }
                      : { borderColor: '#e5e7eb' }}
                  >
                    <div className="flex justify-between items-center">
                      <div>
                        <p className="font-medium">{service.name}</p>
                        {service.price && (
                          <p className="text-sm text-gray-600">{service.price}</p>
                        )}
                        {service.description && (
                          <p className="text-xs text-gray-400 mt-0.5">{service.description}</p>
                        )}
                      </div>
                      {selectedService === service.name && (
                        <Check className="w-5 h-5 flex-shrink-0" style={{ color: brandColor }} />
                      )}
                    </div>
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  };

  const renderTimeSelection = () => (
    <div className="space-y-4">
      <div className="text-center">
        <h3 className="text-lg font-semibold mb-2">Uhrzeit wählen</h3>
        <p className="text-gray-600 text-sm">
          Verfügbare Zeiten am {selectedDate ? new Date(selectedDate + 'T12:00:00').toLocaleDateString('de-AT', { weekday: 'long', day: 'numeric', month: 'long' }) : ''}
        </p>
      </div>
      
      {loadingSlots ? (
        <div className="flex justify-center py-8">
          <div className="animate-spin w-8 h-8 border-4 border-primary border-t-transparent rounded-full" />
        </div>
      ) : availableSlots.length === 0 ? (
        <div className="text-center py-8">
          <Clock className="w-12 h-12 text-gray-400 mx-auto mb-4" />
          <p className="text-gray-600">Keine freien Zeiten an diesem Tag</p>
          <Button
            variant="outline"
            onClick={() => setCurrentStep(1)}
            className="mt-4"
          >
            Anderes Datum wählen
          </Button>
        </div>
      ) : (
        <div className="grid grid-cols-3 gap-2">
          {availableSlots.map((slot: any) => (
            <Button
              key={slot.time}
              variant="outline"
              onClick={() => handleTimeSelect(slot.time)}
              className="p-3 h-auto"
            >
              {slot.time.slice(0, 5)} Uhr
            </Button>
          ))}
        </div>
      )}
    </div>
  );

  const renderContactForm = () => (
    <div className="space-y-4">
      <div className="text-center">
        <h3 className="text-lg font-semibold mb-2">Deine Angaben</h3>
        <p className="text-gray-600 text-sm">Diese Angaben werden zur Buchungsbestätigung benötigt</p>
      </div>
      
      <div className="space-y-4">
        <div>
          <Label htmlFor="customerName">Vollständiger Name</Label>
          <Input
            id="customerName"
            {...form.register("customerName")}
            placeholder="Vor- und Nachname"
            className="mt-1"
          />
          {form.formState.errors.customerName && (
            <p className="text-sm text-red-600 mt-1">
              {form.formState.errors.customerName.message}
            </p>
          )}
        </div>

        <div>
          <Label htmlFor="customerEmail">E-Mail-Adresse</Label>
          <Input
            id="customerEmail"
            type="email"
            {...form.register("customerEmail")}
            placeholder={salutation === 'du' ? 'deine@email.com' : 'ihre@email.com'}
            className="mt-1"
          />
          {form.formState.errors.customerEmail && (
            <p className="text-sm text-red-600 mt-1">
              {form.formState.errors.customerEmail.message}
            </p>
          )}
        </div>

        <div>
          <Label htmlFor="customerPhone">Telefonnummer</Label>
          <Input
            id="customerPhone"
            type="tel"
            {...form.register("customerPhone")}
            placeholder="+43 660 ..."
            className="mt-1"
          />
          {form.formState.errors.customerPhone && (
            <p className="text-sm text-red-600 mt-1">
              {form.formState.errors.customerPhone.message}
            </p>
          )}
        </div>

        <div>
          <Label htmlFor="numberOfPeople">Anzahl Personen</Label>
          <Select
            value={form.watch("numberOfPeople")?.toString()}
            onValueChange={(value) => form.setValue("numberOfPeople", parseInt(value))}
          >
            <SelectTrigger className="mt-1">
              <SelectValue placeholder="Anzahl wählen" />
            </SelectTrigger>
            <SelectContent>
              {Array.from({ length: maxPeople }, (_, i) => i + 1).map((num) => (
                <SelectItem key={num} value={num.toString()}>
                  {num} {num === 1 ? "Person" : "Personen"}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {form.formState.errors.numberOfPeople && (
            <p className="text-sm text-red-600 mt-1">
              {form.formState.errors.numberOfPeople.message}
            </p>
          )}
        </div>

        <div>
          <Label htmlFor="notes">Anmerkungen (optional)</Label>
          <Textarea
            id="notes"
            {...form.register("notes")}
            placeholder="Besondere Wünsche oder Anmerkungen..."
            rows={3}
            className="mt-1"
          />
        </div>

        {/* Booking Summary */}
        <div className="bg-gray-50 p-4 rounded-lg">
          <h4 className="font-medium mb-3">Buchungsübersicht</h4>
          <div className="space-y-2 text-sm">
            <div className="flex justify-between">
              <span className="text-gray-600">Leistung:</span>
              <span>{selectedService}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">Datum:</span>
              <span>{selectedDate ? new Date(selectedDate + 'T12:00:00').toLocaleDateString('de-AT', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }) : ''}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">Uhrzeit:</span>
              <span>{form.watch("bookingTime") && form.watch("bookingTime").slice(0, 5)} Uhr</span>
            </div>
            <div className="flex justify-between">
              <span className="text-gray-600">Personen:</span>
              <span>{form.watch("numberOfPeople") || 1}</span>
            </div>
            {selectedServiceData?.price && (
              <div className="flex justify-between font-medium">
                <span>Preis:</span>
                <span>
                  {(() => {
                    const numPeople = form.watch("numberOfPeople") || 1;
                    if (selectedServiceData.price === "Free" || !selectedServiceData.price) {
                      return "Kostenlos";
                    }
                    if (numPeople === 1) {
                      return selectedServiceData.price;
                    }
                    const priceMatch = selectedServiceData.price.match(/[\d.]+/);
                    if (priceMatch) {
                      const priceValue = parseFloat(priceMatch[0]);
                      const totalPrice = priceValue * numPeople;
                      return selectedServiceData.price.replace(/[\d.]+/, totalPrice.toFixed(2));
                    }
                    return selectedServiceData.price;
                  })()}
                </span>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <>
      <Dialog open={isOpen} onOpenChange={onClose}>
        <DialogContent className="sm:max-w-lg max-h-[95vh] overflow-y-auto p-0">
          <DialogHeader className="p-6 pb-0">
            <DialogTitle className="flex items-center gap-2 text-xl">
              <Calendar className="w-6 h-6" style={{ color: brandColor }} />
              Termin bei {businessName}
            </DialogTitle>
            <DialogDescription>
              Terminvereinbarung in wenigen Schritten
            </DialogDescription>
          </DialogHeader>

          <div className="p-6">
            {renderStepIndicator()}
            
            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
              {currentStep === 1 && renderDateSelection()}
              {currentStep === 2 && renderServiceSelection()}
              {currentStep === 3 && renderTimeSelection()}
              {currentStep === 4 && renderContactForm()}

              {/* Navigation Buttons */}
              <div className="flex justify-between pt-6 border-t">
                {currentStep > 1 && (
                  <Button
                    type="button"
                    variant="outline"
                    onClick={() => setCurrentStep(currentStep - 1)}
                    className="flex items-center gap-2"
                  >
                    <ArrowLeft className="w-4 h-4" />
                    Zurück
                  </Button>
                )}
                
                <div className="flex-1" />
                
                {currentStep < 4 ? (
                  <Button
                    type="button"
                    onClick={() => {
                      if (currentStep === 1 && !selectedDate) return;
                      if (currentStep === 2 && !selectedService) return;
                      if (currentStep === 3 && !form.watch("bookingTime")) return;
                      setCurrentStep(currentStep + 1);
                    }}
                    disabled={
                      (currentStep === 1 && !selectedDate) ||
                      (currentStep === 2 && !selectedService) ||
                      (currentStep === 3 && !form.watch("bookingTime"))
                    }
                    className="flex items-center gap-2"
                  >
                    Weiter
                    <ArrowRight className="w-4 h-4" />
                  </Button>
                ) : (
                  <Button
                    type="submit"
                    disabled={createBookingMutation.isPending}
                    className="flex items-center gap-2"
                  >
                    {createBookingMutation.isPending && (
                      <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                    )}
                    Jetzt buchen
                  </Button>
                )}
              </div>
            </form>
          </div>
        </DialogContent>
      </Dialog>

      {/* Payment Selection Modal */}
      <Dialog open={showPaymentSelection} onOpenChange={setShowPaymentSelection}>
        <DialogContent className="max-w-md">
          <DialogHeader>
            <DialogTitle>Zahlungsart wählen</DialogTitle>
            <DialogDescription>
              {salutation === 'du' ? 'Wie möchtest du bezahlen?' : 'Wie möchten Sie bezahlen?'}
            </DialogDescription>
          </DialogHeader>
          
          <div className="space-y-3">
            {/* Service and Price Info */}
            {pendingBookingData && (
              <div className="bg-gray-50 p-4 rounded-lg mb-4">
                <div className="font-medium">{pendingBookingData.serviceName}</div>
                <div className="text-lg font-bold text-green-600">{pendingBookingData.servicePrice}</div>
                {pendingBookingData.businessSpecificData?.numberOfPeople > 1 && (
                  <div className="text-sm text-gray-600">
                    Für {pendingBookingData.businessSpecificData.numberOfPeople} Personen
                  </div>
                )}
              </div>
            )}

            {/* Payment Options */}
            {bookingPageData?.acceptOnlinePayments && bookingPageData?.paymentUrl && (
              <Button 
                onClick={() => handlePaymentMethodSelect("online")}
                className="w-full justify-start h-auto p-4"
                variant="outline"
              >
                <div className="text-left">
                  <div className="font-medium">💳 Online bezahlen</div>
                  <div className="text-sm text-gray-600">Sicher mit Karte oder digitalem Wallet</div>
                </div>
              </Button>
            )}

            {bookingPageData?.acceptCash && (
              <Button 
                onClick={() => handlePaymentMethodSelect("cash")}
                className="w-full justify-start h-auto p-4"
                variant="outline"
              >
                <div className="text-left">
                  <div className="font-medium">💵 Bar bezahlen</div>
                  <div className="text-sm text-gray-600">Barzahlung vor Ort</div>
                </div>
              </Button>
            )}

            {bookingPageData?.acceptBankTransfer && (
              <Button 
                onClick={() => handlePaymentMethodSelect("bank_transfer")}
                className="w-full justify-start h-auto p-4"
                variant="outline"
              >
                <div className="text-left">
                  <div className="font-medium">🏦 Banküberweisung</div>
                  <div className="text-sm text-gray-600">Zahlung per Überweisung — Details folgen per E-Mail</div>
                </div>
              </Button>
            )}
          </div>
        </DialogContent>
      </Dialog>
    </>
  );
}