"use client"

import { useState, useEffect } from "react"
import { Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

type Seller = {
  id: string
  name: string
  pin: string
}

type SellerDialogProps = {
  seller?: Seller | null
  trigger?: React.ReactNode
  onSuccess: () => void
}

export default function SellerDialog({ seller, trigger, onSuccess }: SellerDialogProps) {
  const [open, setOpen] = useState(false)
  const [loading, setLoading] = useState(false)
  const [name, setName] = useState("")
  const [pin, setPin] = useState("")

  useEffect(() => {
    if (seller) {
      setName(seller.name)
      setPin(seller.pin)
    } else {
      setName("")
      setPin("")
    }
  }, [seller, open])

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

    try {
      const url = seller ? `/api/sellers/${seller.id}` : '/api/sellers'
      const method = seller ? 'PUT' : 'POST'

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

      if (response.ok) {
        setOpen(false)
        onSuccess()
      } else {
        alert("Erreur lors de l'enregistrement du vendeur")
      }
    } catch (error) {
      console.error("Error saving seller:", error)
      alert("Une erreur est survenue")
    } finally {
      setLoading(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        {trigger || (
          <Button className="bg-teal-600 hover:bg-teal-700">
            <Plus className="mr-2 h-4 w-4" />
            Nouveau vendeur
          </Button>
        )}
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <form onSubmit={handleSubmit}>
          <DialogHeader>
            <DialogTitle>{seller ? 'Modifier' : 'Ajouter'} un vendeur</DialogTitle>
            <DialogDescription>
              Créez un profil de vendeur avec un code PIN pour valider les ventes.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="name">Nom complet</Label>
              <Input
                id="name"
                placeholder="Ex: Jean Dupont"
                value={name}
                onChange={(e) => setName(e.target.value)}
                required
              />
            </div>
            <div className="grid gap-2">
              <Label htmlFor="pin">Code PIN (Secret)</Label>
              <Input
                id="pin"
                type="password"
                placeholder="Ex: 1234"
                pattern="[0-9]{4,6}"
                title="Le PIN doit contenir entre 4 et 6 chiffres"
                value={pin}
                onChange={(e) => setPin(e.target.value)}
                required
              />
              <p className="text-[10px] text-muted-foreground italic">
                Ce code sera demandé lors de chaque validation de paiement en caisse.
              </p>
            </div>
          </div>
          <DialogFooter>
            <Button type="submit" disabled={loading}>
              {loading ? 'Enregistrement...' : 'Enregistrer'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}