"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const categories = ["Montures", "Verres", "Solaires", "Accessoires", "Lentilles"]

type Product = {
  id: string
  sku: string
  name: string
  category: string
  brand: string | null
  quantity: number
  minStock: number
  purchasePrice: any
  salePrice: any
  isFree?: boolean
}

type ProductDialogProps = {
  product?: Product | null
  trigger?: React.ReactNode
  open?: boolean
  onOpenChange?: (open: boolean) => void
  onSuccess?: () => void
}

export default function ProductDialog({ product, trigger, open: externalOpen, onOpenChange: externalOnOpenChange, onSuccess }: ProductDialogProps) {
  const router = useRouter()
  const [internalOpen, setInternalOpen] = useState(false)
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState({
    sku: "",
    name: "",
    category: "",
    brand: "",
    purchasePrice: "",
    salePrice: "",
    quantity: "",
    minStock: "5",
    isFree: false,
  })

  const isOpen = externalOpen !== undefined ? externalOpen : internalOpen
  const setIsOpen = externalOnOpenChange || setInternalOpen
  const isEdit = !!product

  useEffect(() => {
    if (product) {
      setFormData({
        sku: product.sku,
        name: product.name,
        category: product.category,
        brand: product.brand || "",
        purchasePrice: String(product.purchasePrice),
        salePrice: String(product.salePrice),
        quantity: String(product.quantity),
        minStock: String(product.minStock),
        isFree: !!product.isFree,
      })
    }
  }, [product])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

    try {
      const url = isEdit ? `/api/products/${product.id}` : '/api/products'
      const method = isEdit ? 'PUT' : 'POST'
      
      const response = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...formData,
          purchasePrice: parseFloat(formData.purchasePrice) || 0,
          salePrice: formData.isFree ? 0 : (parseFloat(formData.salePrice) || 0),
          isFree: formData.isFree,
          quantity: parseInt(formData.quantity) || 0,
          minStock: parseInt(formData.minStock) || 5,
        }),
      })

      if (response.ok) {
        setIsOpen(false)
        if (!isEdit) {
          setFormData({
            sku: "",
            name: "",
            category: "",
            brand: "",
            purchasePrice: "",
            salePrice: "",
            quantity: "",
            minStock: "5",
            isFree: false,
          })
        }
        router.refresh()
        onSuccess?.()
      } else {
        const error = await response.json()
        alert(error.error || 'Failed to save product')
      }
    } catch (error) {
      console.error('Error saving product:', error)
      alert('Failed to save product')
    } finally {
      setLoading(false)
    }
  }

  const dialogTrigger = trigger || (
    <Button className="bg-teal-600 hover:bg-teal-700">
      <Plus className="mr-2 h-4 w-4" />
      Nouveau produit
    </Button>
  )

  return (
    <Dialog open={isOpen} onOpenChange={(open) => setIsOpen(open)}>
      <DialogTrigger asChild>
        {dialogTrigger}
      </DialogTrigger>
      <DialogContent className="sm:max-w-[600px]">
        <DialogHeader>
          <DialogTitle>{isEdit ? 'Modifier le produit' : 'Nouveau produit'}</DialogTitle>
          <DialogDescription>
            {isEdit ? 'Modifier les informations du produit' : 'Ajouter un nouveau produit à l\'inventaire'}
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit}>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="grid gap-2">
                <Label htmlFor="sku">SKU</Label>
                <Input 
                  id="sku" 
                  placeholder="Ex: MT-001" 
                  value={formData.sku}
                  onChange={(e) => setFormData({ ...formData, sku: e.target.value })}
                  required 
                />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="name">Nom du produit</Label>
                <Input 
                  id="name" 
                  placeholder="Nom du produit" 
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  required 
                />
              </div>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="grid gap-2">
                <Label htmlFor="category">Catégorie</Label>
                <Select 
                  value={formData.category}
                  onValueChange={(value) => setFormData({ ...formData, category: value })}
                  required
                >
                  <SelectTrigger>
                    <SelectValue placeholder="Sélectionner" />
                  </SelectTrigger>
                  <SelectContent>
                    {categories.map((cat) => (
                      <SelectItem key={cat} value={cat}>{cat}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              <div className="grid gap-2">
                <Label htmlFor="brand">Marque</Label>
                <Input 
                  id="brand" 
                  placeholder="Marque" 
                  value={formData.brand}
                  onChange={(e) => setFormData({ ...formData, brand: e.target.value })}
                />
              </div>
            </div>
            <div className="grid grid-cols-3 gap-4">
              <div className="grid gap-2">
                <Label htmlFor="purchasePrice">Prix d'achat</Label>
                <Input 
                  id="purchasePrice" 
                  type="number" 
                  step="0.01" 
                  placeholder="0" 
                  value={formData.purchasePrice}
                  onChange={(e) => setFormData({ ...formData, purchasePrice: e.target.value })}
                />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="salePrice">Prix de vente</Label>
                <Input 
                  id="salePrice" 
                  type="number" 
                  step="0.01" 
                  placeholder="0" 
                  value={formData.salePrice}
                  onChange={(e) => setFormData({ ...formData, salePrice: e.target.value })}
                />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="quantity">Quantité</Label>
                <Input 
                  id="quantity" 
                  type="number" 
                  placeholder="0" 
                  value={formData.quantity}
                  onChange={(e) => setFormData({ ...formData, quantity: e.target.value })}
                />
              </div>
            </div>
            <div className="grid gap-2">
              <Label htmlFor="minStock">Stock minimum</Label>
              <Input 
                id="minStock" 
                type="number" 
                placeholder="5" 
                value={formData.minStock}
                onChange={(e) => setFormData({ ...formData, minStock: e.target.value })}
              />
            </div>
            <div className="flex items-center gap-2 pt-2">
              <input
                type="checkbox"
                id="isFree"
                checked={formData.isFree}
                onChange={(e) => {
                  const checked = e.target.checked
                  setFormData({ 
                    ...formData, 
                    isFree: checked,
                    salePrice: checked ? "0" : formData.salePrice 
                  })
                }}
                className="h-4 w-4 rounded border-gray-300 text-teal-600 focus:ring-teal-500"
              />
              <Label htmlFor="isFree" className="text-sm font-medium cursor-pointer">
                Marquer comme produit gratuit (Prix de vente 0 DH)
              </Label>
            </div>
          </div>
          <DialogFooter>
            <Button type="submit" className="bg-teal-600 hover:bg-teal-700" disabled={loading}>
              {loading ? 'Enregistrement...' : isEdit ? 'Mettre à jour' : 'Enregistrer'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}