import { useState } from "react";
import { router } from "@inertiajs/react";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/Components/ui/dialog";
import { PlusCircle, Save } from "lucide-react";
import { usePage } from "@inertiajs/react";

export function AddDrawModal() {
  const { drawNames } = usePage().props as any;
  const names = drawNames || [];
  
  const [open, setOpen] = useState(false);
  const [name, setName] = useState(names[0] || "");
  const [date, setDate] = useState(() => new Date().toISOString().split('T')[0]);
  const [firstNumbers, setFirstNumbers] = useState("");
  const [lastNumbers, setLastNumbers] = useState("");
  const [isSaving, setIsSaving] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setIsSaving(true);
    
    router.post("/draws", {
      name,
      date,
      first_numbers: firstNumbers,
      last_numbers: lastNumbers
    }, {
      onSuccess: () => {
        setOpen(false);
        setDate(new Date().toISOString().split('T')[0]);
        setFirstNumbers("");
        setLastNumbers("");
        setIsSaving(false);
      },
      onError: () => {
        setIsSaving(false);
      }
    });
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="default" className="gap-2 bg-green-600 hover:bg-green-700 text-white">
          <PlusCircle className="h-4 w-4" />
          Enregistrer un tirage
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Ajouter un tirage manuel</DialogTitle>
          <DialogDescription>
            Saisissez les résultats manuellement pour un tirage spécifique.
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="grid gap-4 py-4">
          <div className="grid gap-2">
            <Label htmlFor="manual-name">Nom du tirage</Label>
            <select
              id="manual-name"
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
            >
              {names.map((drawName: string) => (
                <option key={drawName} value={drawName}>{drawName}</option>
              ))}
            </select>
          </div>
          
          <div className="grid gap-2">
            <Label htmlFor="date">Date du tirage</Label>
            <Input
              id="date"
              type="date"
              value={date}
              onChange={(e) => setDate(e.target.value)}
              required
            />
          </div>

          <div className="grid gap-2">
            <Label htmlFor="first-numbers">5 Premiers Numéros (séparés par un espace)</Label>
            <Input
              id="first-numbers"
              placeholder="Ex: 12 47 8 63 29"
              value={firstNumbers}
              onChange={(e) => setFirstNumbers(e.target.value)}
              required
            />
          </div>

          <div className="grid gap-2">
            <Label htmlFor="last-numbers">5 Derniers Numéros (séparés par un espace)</Label>
            <Input
              id="last-numbers"
              placeholder="Ex: 5 81 34 19 70"
              value={lastNumbers}
              onChange={(e) => setLastNumbers(e.target.value)}
              required
            />
          </div>

          <DialogFooter>
            <Button type="submit" disabled={isSaving} className="gap-2">
              {isSaving ? "Enregistrement..." : "Enregistrer"}
              {!isSaving && <Save className="h-4 w-4" />}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}