'use client'

import { useState, useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import * as z from 'zod'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Button } from '@/components/ui/button'
import { Textarea } from '@/components/ui/textarea'
import { Switch } from '@/components/ui/switch'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { toast } from 'sonner'
import { Loader2, Save } from 'lucide-react'

const produitFormSchema = z.object({
  reference: z.string().min(1, 'La référence est requise'),
  designation: z.string().min(1, 'La désignation est requise'),
  categorie: z.enum(['MONTURE', 'VERRE', 'LENTILLE', 'ACCESSOIRE']),
  fournisseurId: z.string().optional(),
  prixAchatHT: z.number().min(0, 'Le prix d\'achat doit être positif'),
  prixVenteTTC: z.number().min(0, 'Le prix de vente doit être positif'),
  tva: z.number().min(0).max(100),
  stock: z.number().int().min(0),
  stockMin: z.number().int().min(0),
  emplacement: z.string().optional(),
  marque: z.string().optional(),
  typeMonture: z.enum(['COMPLET', 'NATUREL', 'CERCLAGE']).optional(),
  typeVerre: z.enum(['SIMPLE', 'BIFOCAL', 'PROGRESSIF']).optional(),
  indice: z.number().optional(),
  materiau: z.string().optional(),
  couleur: z.string().optional(),
  dimensions: z.string().optional(),
  description: z.string().optional(),
  codeBarre: z.string().optional(),
  actif: z.boolean().default(true),
})

type ProduitFormValues = z.infer<typeof produitFormSchema>

export interface Fournisseur {
  id: string
  nom: string
}

interface ProduitFormDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  produit?: any
  onSuccess: () => void
}

export function ProduitFormDialog({
  open,
  onOpenChange,
  produit,
  onSuccess,
}: ProduitFormDialogProps) {
  const [loading, setLoading] = useState(false)
  const [fournisseurs, setFournisseurs] = useState<Fournisseur[]>([])
  const [loadingFournisseurs, setLoadingFournisseurs] = useState(false)

  const form = useForm<ProduitFormValues>({
    resolver: zodResolver(produitFormSchema),
    defaultValues: {
      reference: '',
      designation: '',
      categorie: 'MONTURE',
      fournisseurId: '',
      prixAchatHT: 0,
      prixVenteTTC: 0,
      tva: 20,
      stock: 0,
      stockMin: 5,
      emplacement: '',
      marque: '',
      typeMonture: undefined,
      typeVerre: undefined,
      indice: undefined,
      materiau: '',
      couleur: '',
      dimensions: '',
      description: '',
      codeBarre: '',
      actif: true,
    },
  })

  const categorie = form.watch('categorie')

  useEffect(() => {
    if (open) {
      fetchFournisseurs()
      if (produit) {
        form.reset({
          reference: produit.reference || '',
          designation: produit.designation || '',
          categorie: produit.categorie || 'MONTURE',
          fournisseurId: produit.fournisseurId || '',
          prixAchatHT: produit.prixAchatHT || 0,
          prixVenteTTC: produit.prixVenteTTC || 0,
          tva: produit.tva || 20,
          stock: produit.stock || 0,
          stockMin: produit.stockMin || 5,
          emplacement: produit.emplacement || '',
          marque: produit.marque || '',
          typeMonture: produit.typeMonture || undefined,
          typeVerre: produit.typeVerre || undefined,
          indice: produit.indice || undefined,
          materiau: produit.materiau || '',
          couleur: produit.couleur || '',
          dimensions: produit.dimensions || '',
          description: produit.description || '',
          codeBarre: produit.codeBarre || '',
          actif: produit.actif !== undefined ? produit.actif : true,
        })
      } else {
        form.reset()
      }
    }
  }, [open, produit, form])

  const fetchFournisseurs = async () => {
    try {
      setLoadingFournisseurs(true)
      const response = await fetch('/api/fournisseurs')
      if (!response.ok) throw new Error('Failed to fetch suppliers')

      const data = await response.json()
      setFournisseurs(data)
    } catch (error) {
      console.error('Error fetching fournisseurs:', error)
    } finally {
      setLoadingFournisseurs(false)
    }
  }

  const onSubmit = async (data: ProduitFormValues) => {
    try {
      setLoading(true)

      const url = produit
        ? `/api/produits/${produit.id}`
        : '/api/produits'

      const method = produit ? 'PUT' : 'POST'

      const response = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      })

      if (!response.ok) {
        const error = await response.json()
        throw new Error(error.message || 'Failed to save product')
      }

      toast.success(produit ? 'Produit mis à jour avec succès' : 'Produit créé avec succès')
      onOpenChange(false)
      onSuccess()
    } catch (error: any) {
      console.error('Error saving produit:', error)
      toast.error(error.message || 'Erreur lors de l\'enregistrement du produit')
    } finally {
      setLoading(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>
            {produit ? 'Modifier le Produit' : 'Nouveau Produit'}
          </DialogTitle>
          <DialogDescription>
            {produit
              ? 'Modifiez les informations du produit existant'
              : 'Remplissez les informations pour créer un nouveau produit'}
          </DialogDescription>
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <Tabs defaultValue="general" className="w-full">
              <TabsList className="grid w-full grid-cols-4">
                <TabsTrigger value="general">Général</TabsTrigger>
                <TabsTrigger value="pricing">Tarification</TabsTrigger>
                <TabsTrigger value="stock">Stock</TabsTrigger>
                <TabsTrigger value="details">Détails</TabsTrigger>
              </TabsList>

              <TabsContent value="general" className="space-y-4 pt-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <FormField
                    control={form.control}
                    name="reference"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Référence *</FormLabel>
                        <FormControl>
                          <Input placeholder="EX: MNT-001" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="designation"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Désignation *</FormLabel>
                        <FormControl>
                          <Input placeholder="Nom du produit" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="categorie"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Catégorie *</FormLabel>
                        <Select onValueChange={field.onChange} defaultValue={field.value}>
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="Sélectionner une catégorie" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectItem value="MONTURE">Monture</SelectItem>
                            <SelectItem value="VERRE">Verre</SelectItem>
                            <SelectItem value="LENTILLE">Lentille</SelectItem>
                            <SelectItem value="ACCESSOIRE">Accessoire</SelectItem>
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="fournisseurId"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Fournisseur</FormLabel>
                        <Select
                          onValueChange={field.onChange}
                          defaultValue={field.value}
                          value={field.value}
                        >
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="Sélectionner un fournisseur" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectItem value="none">Aucun fournisseur</SelectItem>
                            {loadingFournisseurs ? (
                              <SelectItem value="loading" disabled>
                                Chargement...
                              </SelectItem>
                            ) : (
                              fournisseurs.map((f) => (
                                <SelectItem key={f.id} value={f.id}>
                                  {f.nom}
                                </SelectItem>
                              ))
                            )}
                          </SelectContent>
                        </Select>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="marque"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Marque</FormLabel>
                        <FormControl>
                          <Input placeholder="Marque du produit" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="codeBarre"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Code-barres</FormLabel>
                        <FormControl>
                          <Input placeholder="Code-barres (EAN13)" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="description"
                    render={({ field }) => (
                      <FormItem className="md:col-span-2">
                        <FormLabel>Description</FormLabel>
                        <FormControl>
                          <Textarea
                            placeholder="Description détaillée du produit..."
                            className="min-h-[100px]"
                            {...field}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>

                <FormField
                  control={form.control}
                  name="actif"
                  render={({ field }) => (
                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
                      <div className="space-y-0.5">
                        <FormLabel className="text-base">Produit actif</FormLabel>
                        <FormDescription>
                          Ce produit sera visible et disponible à la vente
                        </FormDescription>
                      </div>
                      <FormControl>
                        <Switch
                          checked={field.value}
                          onCheckedChange={field.onChange}
                        />
                      </FormControl>
                    </FormItem>
                  )}
                />
              </TabsContent>

              <TabsContent value="pricing" className="space-y-4 pt-4">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <FormField
                    control={form.control}
                    name="prixAchatHT"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Prix Achat HT (€) *</FormLabel>
                        <FormControl>
                          <Input
                            type="number"
                            step="0.01"
                            {...field}
                            onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="prixVenteTTC"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Prix Vente TTC (€) *</FormLabel>
                        <FormControl>
                          <Input
                            type="number"
                            step="0.01"
                            {...field}
                            onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="tva"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>TVA (%)</FormLabel>
                        <FormControl>
                          <Input
                            type="number"
                            step="0.1"
                            {...field}
                            onChange={(e) => field.onChange(parseFloat(e.target.value) || 0)}
                          />
                        </FormControl>
                        <FormDescription>Taux de TVA applicable</FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>

                {form.watch('prixAchatHT') > 0 && form.watch('prixVenteTTC') > 0 && (
                  <div className="p-4 bg-muted rounded-lg">
                    <p className="text-sm font-medium">Marge estimée:</p>
                    <p className="text-2xl font-bold text-green-600">
                      {new Intl.NumberFormat('fr-FR', {
                        style: 'currency',
                        currency: 'EUR',
                      }).format(
                        form.watch('prixVenteTTC') /
                          (1 + form.watch('tva') / 100) -
                          form.watch('prixAchatHT')
                      )}
                    </p>
                    <p className="text-xs text-gray-500 mt-1">
                      {(
                        ((form.watch('prixVenteTTC') /
                          (1 + form.watch('tva') / 100) -
                          form.watch('prixAchatHT')) /
                          form.watch('prixAchatHT')) *
                        100
                      ).toFixed(1)}
                      {'% de marge'}
                    </p>
                  </div>
                )}
              </TabsContent>

              <TabsContent value="stock" className="space-y-4 pt-4">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <FormField
                    control={form.control}
                    name="stock"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Stock actuel *</FormLabel>
                        <FormControl>
                          <Input
                            type="number"
                            {...field}
                            onChange={(e) => field.onChange(parseInt(e.target.value) || 0)}
                          />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="stockMin"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Stock minimum *</FormLabel>
                        <FormControl>
                          <Input
                            type="number"
                            {...field}
                            onChange={(e) => field.onChange(parseInt(e.target.value) || 0)}
                          />
                        </FormControl>
                        <FormDescription>
                          Alerte quand le stock est inférieur
                        </FormDescription>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="emplacement"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Emplacement</FormLabel>
                        <FormControl>
                          <Input placeholder="EX: Rayon A, Étagère 2" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
              </TabsContent>

              <TabsContent value="details" className="space-y-4 pt-4">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {categorie === 'MONTURE' && (
                    <>
                      <FormField
                        control={form.control}
                        name="typeMonture"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>Type de monture</FormLabel>
                            <Select
                              onValueChange={field.onChange}
                              defaultValue={field.value}
                              value={field.value}
                            >
                              <FormControl>
                                <SelectTrigger>
                                  <SelectValue placeholder="Sélectionner" />
                                </SelectTrigger>
                              </FormControl>
                              <SelectContent>
                                <SelectItem value="COMPLET">Complet</SelectItem>
                                <SelectItem value="NATUREL">Naturel</SelectItem>
                                <SelectItem value="CERCLAGE">Cerclage</SelectItem>
                              </SelectContent>
                            </Select>
                            <FormMessage />
                          </FormItem>
                        )}
                      />

                      <FormField
                        control={form.control}
                        name="dimensions"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>Dimensions</FormLabel>
                            <FormControl>
                              <Input placeholder="EX: 54-18-140" {...field} />
                            </FormControl>
                            <FormDescription>
                              Largeur-Pont-Branches (mm)
                            </FormDescription>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                    </>
                  )}

                  {categorie === 'VERRE' && (
                    <>
                      <FormField
                        control={form.control}
                        name="typeVerre"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>Type de verre</FormLabel>
                            <Select
                              onValueChange={field.onChange}
                              defaultValue={field.value}
                              value={field.value}
                            >
                              <FormControl>
                                <SelectTrigger>
                                  <SelectValue placeholder="Sélectionner" />
                                </SelectTrigger>
                              </FormControl>
                              <SelectContent>
                                <SelectItem value="SIMPLE">Simple foyer</SelectItem>
                                <SelectItem value="BIFOCAL">Bifocal</SelectItem>
                                <SelectItem value="PROGRESSIF">Progressif</SelectItem>
                              </SelectContent>
                            </Select>
                            <FormMessage />
                          </FormItem>
                        )}
                      />

                      <FormField
                        control={form.control}
                        name="indice"
                        render={({ field }) => (
                          <FormItem>
                            <FormLabel>Indice de réfraction</FormLabel>
                            <FormControl>
                              <Input
                                type="number"
                                step="0.01"
                                placeholder="EX: 1.5, 1.6, 1.67"
                                {...field}
                                onChange={(e) => field.onChange(parseFloat(e.target.value) || undefined)}
                              />
                            </FormControl>
                            <FormMessage />
                          </FormItem>
                        )}
                      />
                    </>
                  )}

                  <FormField
                    control={form.control}
                    name="materiau"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Matériau</FormLabel>
                        <FormControl>
                          <Input placeholder="EX: Acétate, Métal, Titane" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />

                  <FormField
                    control={form.control}
                    name="couleur"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Couleur</FormLabel>
                        <FormControl>
                          <Input placeholder="EX: Noir, Rouge, Bleu marine" {...field} />
                        </FormControl>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
              </TabsContent>
            </Tabs>

            <DialogFooter>
              <Button
                type="button"
                variant="outline"
                onClick={() => onOpenChange(false)}
                disabled={loading}
              >
                Annuler
              </Button>
              <Button type="submit" disabled={loading}>
                {loading ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Enregistrement...
                  </>
                ) : (
                  <>
                    <Save className="mr-2 h-4 w-4" />
                    Enregistrer
                  </>
                )}
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}
