import { useState, useEffect } 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,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/Components/ui/dialog";
import { Pencil, Save } from "lucide-react";
import { format } from "date-fns";
import { fr } from "date-fns/locale";

interface EditDrawModalProps {
  history: any[];
  onUpdateLocal?: (id: string, updated: any) => void;
}

export function EditDrawModal({ history, onUpdateLocal }: EditDrawModalProps) {
  const [open, setOpen] = useState(false);
  const [selectedDrawId, setSelectedDrawId] = useState<string>("");
  const [date, setDate] = useState("");
  const [firstNumbers, setFirstNumbers] = useState("");
  const [lastNumbers, setLastNumbers] = useState("");
  const [isSaving, setIsSaving] = useState(false);

  // Populate form when a draw is selected
  useEffect(() => {
    if (selectedDrawId) {
      const draw = history.find(d => (d.db_id?.toString() === selectedDrawId || d.drawNo?.toString() === selectedDrawId));
      if (draw) {
        setDate(draw.raw_date || "");
        setFirstNumbers(draw.first ? draw.first.join(" ") : "");
        setLastNumbers(draw.last ? draw.last.join(" ") : "");
      }
    } else {
      setDate("");
      setFirstNumbers("");
      setLastNumbers("");
    }
  }, [selectedDrawId, history]);

  // Reset when modal opens
  useEffect(() => {
    if (open) {
      setSelectedDrawId(history.length > 0 ? (history[0].db_id || history[0].drawNo).toString() : "");
    }
  }, [open, history]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!selectedDrawId) return;

    const draw = history.find(d => (d.db_id?.toString() === selectedDrawId || d.drawNo?.toString() === selectedDrawId));
    if (!draw) return;

    if (!draw.db_id) {
      if (onUpdateLocal) {
        onUpdateLocal(selectedDrawId, {
          raw_date: date,
          date: date ? new Date(date).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }) : draw.date,
          first: firstNumbers.split(' ').map(Number).filter(n => !Number.isNaN(n)),
          last: lastNumbers.split(' ').map(Number).filter(n => !Number.isNaN(n))
        });
      }
      setOpen(false);
      return;
    }

    setIsSaving(true);
    
    router.put(`/draws/${draw.db_id}`, {
      date,
      first_numbers: firstNumbers,
      last_numbers: lastNumbers
    }, {
      onSuccess: () => {
        setOpen(false);
        setIsSaving(false);
      },
      onError: () => {
        setIsSaving(false);
      }
    });
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" className="gap-2 bg-blue-50 text-blue-600 border-blue-200 hover:bg-blue-100 hover:text-blue-700">
          <Pencil className="h-4 w-4" />
          Modifier
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Modifier un tirage</DialogTitle>
          <DialogDescription>
            Sélectionnez un tirage dans l'historique pour le modifier.
          </DialogDescription>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="grid gap-4 py-4">
          <div className="grid gap-2">
            <Label htmlFor="edit-draw-select">Sélectionner un tirage</Label>
            <select
              id="edit-draw-select"
              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
              value={selectedDrawId}
              onChange={(e) => setSelectedDrawId(e.target.value)}
              required
            >
              {history.length === 0 ? (
                <option value="" disabled>-- Aucun tirage --</option>
              ) : (
                <option value="" disabled>-- Choisir un tirage --</option>
              )}
              {history.map((draw) => (
                <option key={draw.db_id || draw.drawNo} value={draw.db_id || draw.drawNo}>
                  {draw.date} - Numéros : {draw.first ? draw.first.join('-') : ''} {!draw.db_id ? "(Non enregistré)" : ""}
                </option>
              ))}
            </select>
          </div>
          
          <div className="grid gap-2">
            <Label htmlFor="edit-date">Date du tirage</Label>
            <Input
              id="edit-date"
              type="date"
              value={date}
              onChange={(e) => setDate(e.target.value)}
              required
              disabled={!selectedDrawId}
            />
          </div>

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

          <div className="grid gap-2">
            <Label htmlFor="edit-last-numbers">5 Derniers Numéros (Machine)</Label>
            <Input
              id="edit-last-numbers"
              placeholder="Ex: 5 81 34 19 70"
              value={lastNumbers}
              onChange={(e) => setLastNumbers(e.target.value)}
              disabled={!selectedDrawId}
            />
          </div>
          
          <Button 
            type="submit" 
            className="mt-4 gap-2 bg-blue-600 hover:bg-blue-700" 
            disabled={isSaving || !selectedDrawId}
          >
            <Save className="h-4 w-4" />
            {isSaving ? "Enregistrement..." : "Enregistrer les modifications"}
          </Button>
        </form>
      </DialogContent>
    </Dialog>
  );
}