"use client";

import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Calendar } from "@prisma/client";

interface CalendarDialogProps {
  open: boolean;
  onClose: () => void;
  onSave: (calendarData: Partial<Calendar>) => Promise<void>;
}

export function CalendarDialog({ open, onClose, onSave }: CalendarDialogProps) {
  const [name, setName] = useState("");
  const [color, setColor] = useState("#0082c9");
  const [description, setDescription] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      await onSave({ name, color, description });
      resetForm();
    } catch (error) {
      console.error("Erreur lors de la création du calendrier:", error);
    } finally {
      setIsSubmitting(false);
    }
  };

  const resetForm = () => {
    setName("");
    setColor("#0082c9");
    setDescription("");
    onClose();
  };

  return (
    <Dialog open={open} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className='sm:max-w-md'>
        <DialogHeader>
          <DialogTitle>Créer un nouveau calendrier</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit}>
          <div className='space-y-4 py-2'>
            <div className='space-y-2'>
              <Label htmlFor='calendar-name'>Nom</Label>
              <Input
                id='calendar-name'
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder='Nom du calendrier'
                required
              />
            </div>

            <div className='space-y-2'>
              <Label htmlFor='calendar-color'>Couleur</Label>
              <div className='flex items-center gap-4'>
                <Input
                  id='calendar-color'
                  type='color'
                  value={color}
                  onChange={(e) => setColor(e.target.value)}
                  className='w-12 h-12 p-1 cursor-pointer'
                />
                <span className='text-sm font-medium'>{color}</span>
              </div>
            </div>

            <div className='space-y-2'>
              <Label htmlFor='calendar-description'>
                Description (optionnelle)
              </Label>
              <Textarea
                id='calendar-description'
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder='Description du calendrier'
                rows={3}
              />
            </div>
          </div>

          <DialogFooter className='mt-4'>
            <Button
              type='button'
              variant='outline'
              onClick={onClose}
              disabled={isSubmitting}
            >
              Annuler
            </Button>
            <Button type='submit' disabled={!name || isSubmitting}>
              {isSubmitting ? "Création..." : "Créer"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}