'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { useForm, useFieldArray } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import * as z from 'zod'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Plus, Trash2, X, PlusCircle } from 'lucide-react'
import { createProduct, updateProduct } from '@/lib/actions/products'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Separator } from '@/components/ui/separator'
import { Category, Product } from '@/lib/types'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const moduleSchema = z.object({
  id: z.string().optional(),
  name: z.string().min(2, 'Name muss mindestens 2 Zeichen lang sein'),
  description: z.string().optional(),
  price: z.coerce.number().min(0, 'Preis darf nicht negativ sein'),
  is_required: z.boolean().default(false),
  has_quantity: z.boolean().default(false),
  requirements: z.array(z.string()).default([]),
  exclusions: z.array(z.string()).default([]),
})

const productSchema = z.object({
  name: z.string().min(2, 'Name muss mindestens 2 Zeichen lang sein'),
  description: z.string().optional(),
  base_price: z.coerce.number().min(0, 'Preis darf nicht negativ sein'),
  category_id: z.string().min(1, 'Bitte wählen Sie eine Kategorie'),
  billing_interval: z.enum(['one_time', 'monthly']).default('monthly'),
  show_in_kauf: z.boolean().default(true),
  show_in_abo: z.boolean().default(true),
  requirements: z.array(z.string()).default([]),
  exclusions: z.array(z.string()).default([]),
  modules: z.array(moduleSchema).default([]),
  allow_update_discount: z.boolean().default(true),
})

type ProductFormValues = z.infer<typeof productSchema>

export function CreateProductDialog({
  children,
  categories,
  product,
  products = []
}: {
  children?: React.ReactNode
  categories: Category[]
  product?: Product
  products?: Product[]
}) {
  const [open, setOpen] = useState(false)
  const [step, setStep] = useState(1)
  const router = useRouter()

  function handleOpenChange(isOpen: boolean) {
    setOpen(isOpen)
    if (isOpen) {
      setStep(1)
    }
  }

  async function nextStep() {
    let isValid = false
    if (step === 1) {
      isValid = await form.trigger(['name', 'category_id', 'base_price'])
    } else if (step === 2) {
      isValid = await form.trigger('billing_interval')
    } else if (step === 3) {
      isValid = await form.trigger(['show_in_kauf', 'show_in_abo'])
    } else if (step === 4) {
      isValid = await form.trigger(['requirements', 'exclusions'])
    }
    if (isValid || step === 5) {
      setStep(prev => Math.min(prev + 1, 5))
    }
  }

  const otherProducts = products.filter(p => p.id !== product?.id)

  const form = useForm<ProductFormValues>({
    resolver: zodResolver(productSchema) as any,
    defaultValues: {
      name: product?.name || '',
      description: product?.description || '',
      base_price: product?.base_price || 0,
      category_id: product?.category_id || '',
      billing_interval: product?.billing_interval || 'monthly',
      show_in_kauf: product ? (product.show_in_kauf ?? true) : true,
      show_in_abo: product ? (product.show_in_abo ?? true) : true,
      requirements: product?.requirements || [],
      exclusions: product?.exclusions || [],
      allow_update_discount: product ? (product.allow_update_discount ?? true) : true,
      modules: product?.modules?.map(m => ({
        id: m.id,
        name: m.name,
        description: m.description || '',
        price: m.price,
        is_required: false,
        has_quantity: m.has_quantity ?? false,
        requirements: m.requirements || [],
        exclusions: m.exclusions || [],
      })) || [],
    },
  })

  const { fields, append, remove } = useFieldArray({
    name: 'modules',
    control: form.control,
  })

  async function onSubmit(values: ProductFormValues) {
    try {
      const { modules, ...productData } = values
      const formattedModules = modules.map(m => ({
        ...m,
        id: m.id || (typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).substring(2, 15)),
      }))

      if (product) {
        await updateProduct(product.id, productData as any, formattedModules as any)
      } else {
        await createProduct(productData as any, formattedModules as any)
      }
      
      setOpen(false)
      if (!product) form.reset()
      router.refresh()
    } catch (error) {
      console.error('Error saving product:', error)
    }
  }

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild>
        {children || (
          <Button className="bg-primary hover:bg-primary/90">
            <Plus className="mr-2 h-4 w-4" /> Produkt hinzufügen
          </Button>
        )}
      </DialogTrigger>
      <DialogContent className="sm:max-w-[900px] max-h-[90vh] overflow-hidden flex flex-col bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white shadow-2xl">
        <DialogHeader>
          <DialogTitle className="text-2xl font-bold">
            {product ? 'Produkt bearbeiten' : 'Neues Produkt erstellen'}
          </DialogTitle>
          <DialogDescription className="text-slate-500 dark:text-slate-400">
            Definieren Sie das Basisprodukt und fügen Sie optionale oder erforderliche Module hinzu.
          </DialogDescription>
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4 overflow-hidden flex-1 min-h-0">
            <div className="flex-1 overflow-y-auto pr-4 space-y-6 py-4 min-h-0">
              {/* Step Indicator */}
              <div className="flex justify-between items-center mb-6 border-b border-slate-100 dark:border-white/5 pb-4">
                {[
                  { nr: 1, label: 'Allgemein' },
                  { nr: 2, label: 'Abrechnung' },
                  { nr: 3, label: 'Sichtbarkeit' },
                  { nr: 4, label: 'Abhängigkeiten' },
                  { nr: 5, label: 'Module' }
                ].map(s => (
                  <div key={s.nr} className="flex flex-col items-center gap-1 flex-1">
                    <div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-colors ${
                      step === s.nr
                        ? 'bg-primary text-white'
                        : step > s.nr
                        ? 'bg-green-500 text-white'
                        : 'bg-slate-200 dark:bg-slate-800 text-slate-500'
                    }`}>
                      {s.nr}
                    </div>
                    <span className="text-[10px] text-slate-500 dark:text-slate-400 font-medium">{s.label}</span>
                  </div>
                ))}
              </div>
              {step === 1 && (
                <div className="space-y-6">
                  <div className="grid grid-cols-2 gap-4">
                    <FormField
                      control={form.control}
                      name="name"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel className="text-slate-900 dark:text-white">Produktname</FormLabel>
                          <FormControl>
                            <Input placeholder="z.B. Basic ERP" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="base_price"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel className="text-slate-900 dark:text-white">Basispreis (€)</FormLabel>
                          <FormControl>
                            <Input type="number" step="0.01" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                  </div>

                  <FormField
                    control={form.control}
                    name="category_id"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel className="text-slate-900 dark:text-white">Kategorie</FormLabel>
                        <Select onValueChange={field.onChange} defaultValue={field.value}>
                          <FormControl>
                            <SelectTrigger className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
                              <SelectValue placeholder="Kategorie wählen" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent className="bg-white dark:bg-slate-950 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white">
                            {categories.map(cat => (
                              <SelectItem key={cat.id} value={cat.id}>{cat.name}</SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="description"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel className="text-slate-900 dark:text-white">Beschreibung</FormLabel>
                        <FormControl>
                          <Input placeholder="Kurze Beschreibung des Produkts" className="bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
              )}

              {step === 2 && (
                <div className="space-y-6">
                  <FormField
                    control={form.control}
                    name="billing_interval"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel className="text-slate-900 dark:text-white">Abrechnungsmodell</FormLabel>
                        <div className="grid grid-cols-2 gap-2 pt-1">
                          {[
                            { value: 'one_time', label: 'Einmalig',  icon: '💳' },
                            { value: 'monthly',  label: 'Monatlich', icon: '🔄' },
                          ].map(opt => (
                            <button
                              key={opt.value}
                              type="button"
                              onClick={() => field.onChange(opt.value)}
                              className={`flex flex-col items-center gap-1 p-3 rounded-xl border-2 text-sm font-medium transition-all ${
                                field.value === opt.value
                                  ? 'border-primary bg-primary/10 text-primary dark:text-white'
                                  : 'border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-white/5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10'
                              }`}
                            >
                              <span className="text-lg">{opt.icon}</span>
                              {opt.label}
                            </button>
                          ))}
                        </div>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
              )}

              {step === 3 && (
                <div className="space-y-6">
                  <div className="grid grid-cols-2 gap-4">
                    <FormField
                      control={form.control}
                      name="show_in_kauf"
                      render={({ field }) => (
                        <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10">
                          <FormControl>
                            <Checkbox
                              checked={field.value}
                              onCheckedChange={field.onChange}
                            />
                          </FormControl>
                          <div className="space-y-1 leading-none">
                            <FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer">In Kauf-Auswahl anzeigen</FormLabel>
                            <FormDescription className="text-xs text-slate-500">Produkt im Kauf-Zweig anzeigen</FormDescription>
                          </div>
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="show_in_abo"
                      render={({ field }) => (
                        <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10">
                          <FormControl>
                            <Checkbox
                              checked={field.value}
                              onCheckedChange={field.onChange}
                            />
                          </FormControl>
                          <div className="space-y-1 leading-none">
                            <FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer">In Abo-Auswahl anzeigen</FormLabel>
                            <FormDescription className="text-xs text-slate-500">Produkt im Abo-Zweig anzeigen</FormDescription>
                          </div>
                        </FormItem>
                      )}
                    />
                  </div>

                  {form.watch('billing_interval') === 'one_time' && (
                    <FormField
                      control={form.control}
                      name="allow_update_discount"
                      render={({ field }) => (
                        <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 bg-slate-50 dark:bg-white/5 border-slate-200 dark:border-white/10">
                          <FormControl>
                            <Checkbox
                              checked={field.value}
                              onCheckedChange={field.onChange}
                            />
                          </FormControl>
                          <div className="space-y-1 leading-none">
                            <FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer">Update-Rabatt erlauben</FormLabel>
                            <FormDescription className="text-xs text-slate-500">
                              Kunden erhalten für dieses Produkt den selektiven Update-Rabatt.
                            </FormDescription>
                          </div>
                        </FormItem>
                      )}
                    />
                  )}
                </div>
              )}

              {step === 4 && (
                <div className="grid grid-cols-2 gap-4">
                  {/* Product Requirements */}
                  <FormField
                    control={form.control}
                    name="requirements"
                    render={({ field: reqField }) => (
                      <FormItem className="flex flex-col gap-1.5">
                        <FormLabel className="text-slate-900 dark:text-white font-medium">Benötigte Artikel</FormLabel>
                        <ScrollArea className="h-32 border border-slate-200 dark:border-white/10 rounded p-3 bg-slate-50 dark:bg-white/5">
                          {otherProducts.length === 0 ? (
                            <p className="text-xs text-slate-500 italic">Keine anderen Artikel vorhanden.</p>
                          ) : (
                            <div className="space-y-2">
                              {otherProducts.map(other => {
                                const checked = (reqField.value || []).includes(other.id)
                                return (
                                  <div key={other.id} className="flex items-center space-x-2">
                                    <Checkbox
                                      id={`prod-req-${other.id}`}
                                      checked={checked}
                                      onCheckedChange={(checkedState) => {
                                        const currentVal = reqField.value || []
                                        if (checkedState) {
                                          reqField.onChange([...currentVal, other.id])
                                        } else {
                                          reqField.onChange(currentVal.filter(id => id !== other.id))
                                        }
                                      }}
                                    />
                                    <label
                                      htmlFor={`prod-req-${other.id}`}
                                      className="text-xs text-slate-700 dark:text-slate-300 cursor-pointer select-none truncate block"
                                      title={other.name}
                                    >
                                      {other.name}
                                    </label>
                                  </div>
                                )
                              })}
                            </div>
                          )}
                        </ScrollArea>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  {/* Product Exclusions */}
                  <FormField
                    control={form.control}
                    name="exclusions"
                    render={({ field: exclField }) => (
                      <FormItem className="flex flex-col gap-1.5">
                        <FormLabel className="text-slate-900 dark:text-white font-medium">Schließt aus</FormLabel>
                        <ScrollArea className="h-32 border border-slate-200 dark:border-white/10 rounded p-3 bg-slate-50 dark:bg-white/5">
                          {otherProducts.length === 0 ? (
                            <p className="text-xs text-slate-500 italic">Keine anderen Artikel vorhanden.</p>
                          ) : (
                            <div className="space-y-2">
                              {otherProducts.map(other => {
                                const checked = (exclField.value || []).includes(other.id)
                                return (
                                  <div key={other.id} className="flex items-center space-x-2">
                                    <Checkbox
                                      id={`prod-excl-${other.id}`}
                                      checked={checked}
                                      onCheckedChange={(checkedState) => {
                                        const currentVal = exclField.value || []
                                        if (checkedState) {
                                          exclField.onChange([...currentVal, other.id])
                                        } else {
                                          exclField.onChange(currentVal.filter(id => id !== other.id))
                                        }
                                      }}
                                    />
                                    <label
                                      htmlFor={`prod-excl-${other.id}`}
                                      className="text-xs text-slate-700 dark:text-slate-300 cursor-pointer select-none truncate block"
                                      title={other.name}
                                    >
                                      {other.name}
                                    </label>
                                  </div>
                                )
                              })}
                            </div>
                          )}
                        </ScrollArea>
                    )}
                  />
                </div>
              )}

              {step === 5 && (
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <h3 className="text-lg font-semibold flex items-center gap-2">
                      <PlusCircle className="w-5 h-5 text-primary" />
                      Module
                    </h3>
                  </div>

                  {fields.map((field, index) => {
                    const allModules = form.watch('modules') || []
                    const otherModules = allModules
                      .map((m, idx) => ({
                        id: m.id || field.id,
                        name: m.name || `Modul ${idx + 1}`,
                      }))
                      .filter((_, idx) => idx !== index)

                    return (
                      <div key={field.id} className="p-4 border border-slate-200 dark:border-white/10 rounded-xl bg-slate-50 dark:bg-white/5 space-y-4">
                        <div className="flex items-start justify-between gap-4">
                          <div className="flex-1 grid grid-cols-2 gap-4">
                            <FormField
                              control={form.control}
                              name={`modules.${index}.name`}
                              render={({ field }) => (
                                <FormItem>
                                  <FormLabel className="text-slate-900 dark:text-white text-xs">Modulname</FormLabel>
                                  <FormControl>
                                    <Input placeholder="z.B. Zusatzlizenz" className="bg-white dark:bg-slate-900 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white text-xs" {...field} />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />
                            <FormField
                              control={form.control}
                              name={`modules.${index}.price`}
                              render={({ field }) => (
                                <FormItem>
                                  <FormLabel className="text-slate-900 dark:text-white text-xs">Preis (€/Monat)</FormLabel>
                                  <FormControl>
                                    <Input type="number" step="0.01" className="bg-white dark:bg-slate-900 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white text-xs" {...field} />
                                  </FormControl>
                                  <FormMessage />
                                </FormItem>
                              )}
                            />
                          </div>
                          <Button
                            type="button"
                            variant="ghost"
                            size="sm"
                            className="text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/20 mt-6"
                            onClick={() => remove(index)}
                          >
                            <Trash2 className="w-4 h-4" />
                          </Button>
                        </div>

                        <FormField
                          control={form.control}
                          name={`modules.${index}.description`}
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel className="text-slate-900 dark:text-white text-xs">Beschreibung</FormLabel>
                              <FormControl>
                                <Input placeholder="Kurze Beschreibung" className="bg-white dark:bg-slate-900 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white text-xs" {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />

                        {otherModules.length > 0 && (
                          <div className="grid grid-cols-2 gap-4">
                            <FormField
                              control={form.control}
                              name={`modules.${index}.requirements`}
                              render={({ field: mReqField }) => (
                                <FormItem className="flex flex-col gap-1">
                                  <FormLabel className="text-slate-900 dark:text-white text-[11px] font-medium">Erfordert Module</FormLabel>
                                  <ScrollArea className="h-24 border border-slate-200 dark:border-white/10 rounded p-2 bg-white dark:bg-slate-900">
                                    <div className="space-y-1">
                                      {otherModules.map(other => {
                                        const checked = (mReqField.value || []).includes(other.id)
                                        return (
                                          <div key={other.id} className="flex items-center space-x-2">
                                            <Checkbox
                                              id={`mod-req-${index}-${other.id}`}
                                              checked={checked}
                                              onCheckedChange={(checkedState) => {
                                                const currentVal = mReqField.value || []
                                                if (checkedState) {
                                                  mReqField.onChange([...currentVal, other.id])
                                                } else {
                                                  mReqField.onChange(currentVal.filter(id => id !== other.id))
                                                }
                                              }}
                                            />
                                            <label
                                              htmlFor={`mod-req-${index}-${other.id}`}
                                              className="text-[10px] text-slate-650 dark:text-slate-350 cursor-pointer truncate block"
                                            >
                                              {other.name}
                                            </label>
                                          </div>
                                        )
                                      })}
                                    </div>
                                  </ScrollArea>
                                </FormItem>
                              )}
                            />

                            <FormField
                              control={form.control}
                              name={`modules.${index}.exclusions`}
                              render={({ field: mExclField }) => (
                                <FormItem className="flex flex-col gap-1">
                                  <FormLabel className="text-slate-900 dark:text-white text-[11px] font-medium">Schließt Module aus</FormLabel>
                                  <ScrollArea className="h-24 border border-slate-200 dark:border-white/10 rounded p-2 bg-white dark:bg-slate-900">
                                    <div className="space-y-1">
                                      {otherModules.map(other => {
                                        const checked = (mExclField.value || []).includes(other.id)
                                        return (
                                          <div key={other.id} className="flex items-center space-x-2">
                                            <Checkbox
                                              id={`mod-excl-${index}-${other.id}`}
                                              checked={checked}
                                              onCheckedChange={(checkedState) => {
                                                const currentVal = mExclField.value || []
                                                if (checkedState) {
                                                  mExclField.onChange([...currentVal, other.id])
                                                } else {
                                                  mExclField.onChange(currentVal.filter(id => id !== other.id))
                                                }
                                              }}
                                            />
                                            <label
                                              htmlFor={`mod-excl-${index}-${other.id}`}
                                              className="text-[10px] text-slate-650 dark:text-slate-350 cursor-pointer truncate block"
                                            >
                                              {other.name}
                                            </label>
                                          </div>
                                        )
                                      })}
                                    </div>
                                  </ScrollArea>
                                </FormItem>
                              )}
                            />
                          </div>
                        )}

                        <div className="flex items-center gap-6">
                          <FormField
                            control={form.control}
                            name={`modules.${index}.is_required`}
                            render={({ field }) => (
                              <FormItem className="flex flex-row items-center space-x-2 space-y-0">
                                <FormControl>
                                  <Checkbox
                                    checked={field.value}
                                    onCheckedChange={field.onChange}
                                  />
                                </FormControl>
                                <FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer text-xs">Erforderlich</FormLabel>
                              </FormItem>
                            )}
                          />

                          <FormField
                            control={form.control}
                            name={`modules.${index}.has_quantity`}
                            render={({ field }) => (
                              <FormItem className="flex flex-row items-center space-x-2 space-y-0">
                                <FormControl>
                                  <Checkbox
                                    checked={field.value}
                                    onCheckedChange={field.onChange}
                                  />
                                </FormControl>
                                <FormLabel className="text-slate-900 dark:text-white font-medium cursor-pointer text-xs">Mengeneingabe erlauben</FormLabel>
                              </FormItem>
                            )}
                          />
                        </div>
                      </div>
                    )
                  })}

                  {fields.length === 0 && (
                    <div className="text-center py-6 border-2 border-dashed border-slate-200 dark:border-white/5 rounded-lg text-slate-500 dark:text-slate-400 text-sm">
                      Noch keine Module hinzugefügt.
                    </div>
                  )}

                  <div className="flex justify-end pt-2">
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      className="border-primary/50 text-primary hover:bg-primary/10"
                      onClick={() => append({
                        id: typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).substring(2, 15),
                        name: '',
                        price: 0,
                        is_required: false,
                        has_quantity: false,
                        description: '',
                        requirements: [],
                        exclusions: []
                      })}
                    >
                      <Plus className="w-4 h-4 mr-2" /> Modul hinzufügen
                    </Button>
                  </div>
                </div>
              )}
            </div>

            <DialogFooter className="pt-4 border-t border-slate-200 dark:border-white/10 flex justify-between items-center sm:justify-between">
              <div className="flex gap-2">
                {step > 1 ? (
                  <Button type="button" variant="outline" onClick={() => setStep(prev => prev - 1)}>
                    Zurück
                  </Button>
                ) : (
                  <Button type="button" variant="ghost" onClick={() => setOpen(false)} className="text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
                    Abbrechen
                  </Button>
                )}
              </div>
              <div className="flex gap-2">
                {step < 5 ? (
                  <Button type="button" onClick={nextStep} className="bg-primary hover:bg-primary/90 text-white">
                    Weiter
                  </Button>
                ) : (
                  <Button type="submit" className="bg-primary hover:bg-primary/90 text-white">
                    Speichern
                  </Button>
                )}
              </div>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}