'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([]),
})

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 router = useRouter()

  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 || [],
      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={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 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">
                <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="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 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>

                <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 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>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>

                <Separator className="bg-slate-200 dark: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({
                        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>

                  {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 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-200 dark: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-slate-900 dark:text-white">Modulname</FormLabel>
                                <FormControl>
                                  <Input placeholder="z.B. Cloud Storage" className="bg-slate-100 dark:bg-white/10 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={`modules.${index}.price`}
                            render={({ field }) => (
                              <FormItem>
                                <FormLabel className="text-slate-900 dark:text-white">Aufpreis (€)</FormLabel>
                                <FormControl>
                                  <Input type="number" step="0.01" className="bg-slate-100 dark:bg-white/10 border-slate-200 dark:border-white/10 text-slate-900 dark:text-white placeholder:text-slate-500" {...field} />
                                </FormControl>
                                <FormMessage />
                              </FormItem>
                            )}
                          />
                        </div>

                        <div className="grid grid-cols-2 gap-4 border border-slate-200 dark:border-white/10 rounded-lg p-3 bg-slate-100 dark:bg-black/20">
                          {/* Requirements Selection Matrix */}
                          <FormField
                            control={form.control}
                            name={`modules.${index}.requirements`}
                            render={({ field: reqField }) => (
                              <div className="space-y-2">
                                <FormLabel className="text-slate-900 dark:text-white text-xs font-semibold">Benötigt Module</FormLabel>
                                <ScrollArea className="h-28 border border-slate-200 dark:border-white/5 rounded p-2 bg-slate-50 dark:bg-white/5">
                                  {otherModules.length === 0 ? (
                                    <p className="text-[10px] text-slate-500 italic">Keine anderen Module vorhanden.</p>
                                  ) : (
                                    <div className="space-y-1.5">
                                      {otherModules.map(other => {
                                        const checked = (reqField.value || []).includes(other.id)
                                        return (
                                          <div key={other.id} className="flex items-center space-x-2">
                                            <Checkbox
                                              id={`req-${index}-${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={`req-${index}-${other.id}`}
                                              className="text-xs text-slate-700 dark:text-slate-300 cursor-pointer select-none truncate block max-w-[180px]"
                                              title={other.name}
                                            >
                                              {other.name}
                                            </label>
                                          </div>
                                        )
                                      })}
                                    </div>
                                  )}
                                </ScrollArea>
                              </div>
                            )}
                          />

                          {/* Exclusions Selection Matrix */}
                          <FormField
                            control={form.control}
                            name={`modules.${index}.exclusions`}
                            render={({ field: exclField }) => (
                              <div className="space-y-2">
                                <FormLabel className="text-slate-900 dark:text-white text-xs font-semibold">Schließt aus</FormLabel>
                                <ScrollArea className="h-28 border border-slate-200 dark:border-white/5 rounded p-2 bg-slate-50 dark:bg-white/5">
                                  {otherModules.length === 0 ? (
                                    <p className="text-[10px] text-slate-500 italic">Keine anderen Module vorhanden.</p>
                                  ) : (
                                    <div className="space-y-1.5">
                                      {otherModules.map(other => {
                                        const checked = (exclField.value || []).includes(other.id)
                                        return (
                                          <div key={other.id} className="flex items-center space-x-2">
                                            <Checkbox
                                              id={`excl-${index}-${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={`excl-${index}-${other.id}`}
                                              className="text-xs text-slate-700 dark:text-slate-300 cursor-pointer select-none truncate block max-w-[180px]"
                                              title={other.name}
                                            >
                                              {other.name}
                                            </label>
                                          </div>
                                        )
                                      })}
                                    </div>
                                  )}
                                </ScrollArea>
                              </div>
                            )}
                          />
                        </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>
            </div>

            <DialogFooter className="pt-4 border-t border-slate-200 dark:border-white/10">
              <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>
              <Button type="submit" className="bg-primary hover:bg-primary/90 text-white">Speichern</Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}
