'use client'

import { useState } from 'react'
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({
  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),
  requirements: z.string().optional().default(''), // Will be converted to array
  exclusions: z.string().optional().default(''), // Will be converted to array
})

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'),
  modules: z.array(moduleSchema).default([]),
})

type ProductFormValues = z.infer<typeof productSchema>

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

  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',
      modules: product?.modules?.map(m => ({
        name: m.name,
        description: m.description || '',
        price: m.price,
        is_required: false,
        requirements: m.requirements?.join(', ') || '',
        exclusions: m.exclusions?.join(', ') || '',
      })) || [],
    },
  })

  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,
        requirements: m.requirements ? m.requirements.split(',').map(s => s.trim()).filter(Boolean) : [],
        exclusions: m.exclusions ? m.exclusions.split(',').map(s => s.trim()).filter(Boolean) : [],
      }))

      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()
    } catch (error) {
      console.error('Error saving product:', error)
    }
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <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-[700px] max-h-[90vh] overflow-hidden flex flex-col glass-dark border-white/10 text-white shadow-2xl">
        <DialogHeader>
          <DialogTitle className="text-2xl font-bold">
            {product ? 'Produkt bearbeiten' : 'Neues Produkt erstellen'}
          </DialogTitle>
          <DialogDescription className="text-slate-300">
            Definieren Sie das Basisprodukt und fügen Sie optionale oder erforderliche Module hinzu.
          </DialogDescription>
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 flex-1 overflow-hidden flex flex-col">
            <ScrollArea className="flex-1 max-h-[60vh] pr-4">
              <div className="space-y-6 py-4">
                <div className="grid grid-cols-2 gap-4">
                  <FormField
                    control={form.control}
                    name="name"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel className="text-white">Produktname</FormLabel>
                        <FormControl>
                          <Input placeholder="z.B. Basic ERP" className="bg-white/5 border-white/10 text-white" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="base_price"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel className="text-white">Basispreis (€)</FormLabel>
                        <FormControl>
                          <Input type="number" step="0.01" className="bg-white/5 border-white/10 text-white" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>

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

                <FormField
                  control={form.control}
                  name="billing_interval"
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="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-white'
                                : 'border-white/10 bg-white/5 text-slate-400 hover:bg-white/10'
                            }`}
                          >
                            <span className="text-lg">{opt.icon}</span>
                            {opt.label}
                          </button>
                        ))}
                      </div>
                      <FormMessage />
                    </FormItem>
                  )}
                />

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

                <Separator className="bg-white/10" />

                <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>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      className="border-primary/50 text-primary hover:bg-primary/10"
                      onClick={() => append({ name: '', price: 0, is_required: false, description: '', requirements: '', exclusions: '' })}
                    >
                      <Plus className="w-4 h-4 mr-2" /> Modul hinzufügen
                    </Button>
                  </div>

                  {fields.map((field, index) => (
                    <div key={field.id} className="p-4 rounded-lg bg-white/5 border border-white/10 space-y-4 relative group">
                      <Button
                        type="button"
                        variant="ghost"
                        size="icon"
                        className="absolute top-2 right-2 h-8 w-8 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity"
                        onClick={() => remove(index)}
                      >
                        <X className="h-4 w-4" />
                      </Button>

                      <div className="grid grid-cols-2 gap-4">
                        <FormField
                          control={form.control}
                          name={`modules.${index}.name`}
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel className="text-white">Modulname</FormLabel>
                              <FormControl>
                                <Input placeholder="z.B. Cloud Storage" className="bg-white/10 border-white/10 text-white placeholder:text-slate-400" {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        <FormField
                          control={form.control}
                          name={`modules.${index}.price`}
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel className="text-white">Aufpreis (€)</FormLabel>
                              <FormControl>
                                <Input type="number" step="0.01" className="bg-white/10 border-white/10 text-white" {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                      </div>

                      <div className="grid grid-cols-2 gap-4">
                        <FormField
                          control={form.control}
                          name={`modules.${index}.requirements`}
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel className="text-white">Benötigt (IDs, kommagetrennt)</FormLabel>
                              <FormControl>
                                <Input placeholder="UUIDs..." className="bg-white/10 border-white/10 text-xs text-white" {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                        <FormField
                          control={form.control}
                          name={`modules.${index}.exclusions`}
                          render={({ field }) => (
                            <FormItem>
                              <FormLabel className="text-white">Schließt aus (IDs, kommagetrennt)</FormLabel>
                              <FormControl>
                                <Input placeholder="UUIDs..." className="bg-white/10 border-white/10 text-xs text-white" {...field} />
                              </FormControl>
                              <FormMessage />
                            </FormItem>
                          )}
                        />
                      </div>

                      <div className="flex items-center space-x-2">
                        <FormField
                          control={form.control}
                          name={`modules.${index}.is_required`}
                          render={({ field }) => (
                            <FormItem className="flex flex-row items-start space-x-3 space-y-0">
                              <FormControl>
                                <Checkbox
                                  checked={field.value}
                                  onCheckedChange={field.onChange}
                                />
                              </FormControl>
                              <div className="space-y-1 leading-none">
                                <FormLabel className="text-white">Erforderlich</FormLabel>
                              </div>
                            </FormItem>
                          )}
                        />
                      </div>
                    </div>
                  ))}
                  
                  {fields.length === 0 && (
                    <div className="text-center py-6 border-2 border-dashed border-white/5 rounded-lg text-slate-400 text-sm">
                      Noch keine Module hinzugefügt.
                    </div>
                  )}
                </div>
              </div>
            </ScrollArea>

            <DialogFooter className="pt-4 border-t border-white/10">
              <Button type="button" variant="ghost" onClick={() => setOpen(false)}>Abbrechen</Button>
              <Button type="submit" className="bg-primary hover:bg-primary/90">Speichern</Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}