n3wt-school/Front-End/src/components/EventModal.js

import { usePlanning } from '@/context/PlanningContext';
import { format } from 'date-fns';
import React from 'react';

export default function EventModal({
  isOpen,
  onClose,
  eventData,
  setEventData,
}) {
  const { addEvent, handleUpdateEvent, handleDeleteEvent, schedules } =
    usePlanning();

  // S'assurer que planning est défini lors du premier rendu
  React.useEffect(() => {
    if (!eventData.planning && schedules.length > 0) {
      setEventData((prev) => ({
        ...prev,
        planning: schedules[0].id,
        color: schedules[0].color,
      }));
    }
  }, [schedules, eventData.planning]);

  if (!isOpen) return null;

  const recurrenceOptions = [
    { value: 'none', label: 'Aucune' },
    { value: 'daily', label: 'Quotidienne' },
    { value: 'weekly', label: 'Hebdomadaire' },
    { value: 'monthly', label: 'Mensuelle' },
    { value: 'custom', label: 'Personnalisée' }, // Nouvelle option
  ];

  const daysOfWeek = [
    { value: 1, label: 'Lun' },
    { value: 2, label: 'Mar' },
    { value: 3, label: 'Mer' },
    { value: 4, label: 'Jeu' },
    { value: 5, label: 'Ven' },
    { value: 6, label: 'Sam' },
    { value: 0, label: 'Dim' },
  ];

  const handleSubmit = (e) => {
    e.preventDefault();

    if (!eventData.planning) {
      alert('Veuillez sélectionner un planning');
      return;
    }

    const selectedSchedule = schedules.find((s) => s.id === eventData.planning);

    if (eventData.id) {
      handleUpdateEvent(eventData.id, {
        ...eventData,
        planning: eventData.planning, // S'assurer que planning est bien défini
        color: eventData.color || selectedSchedule?.color,
      });
    } else {
      addEvent({
        ...eventData,
        id: `event-${Date.now()}`,
        planning: eventData.planning, // S'assurer que planning est bien défini
        color: eventData.color || selectedSchedule?.color,
      });
    }
    onClose();
  };

  const handleDelete = () => {
    if (
      eventData.id &&
      confirm('Êtes-vous sûr de vouloir supprimer cet événement ?')
    ) {
      handleDeleteEvent(eventData.id);
      onClose();
    }
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white p-6 rounded-lg w-full max-w-md">
        <h2 className="text-xl font-semibold mb-4">
          {eventData.id ? "Modifier l'événement" : 'Nouvel événement'}
        </h2>

        <form onSubmit={handleSubmit} className="space-y-4">
          {/* Titre */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Titre
            </label>
            <input
              type="text"
              value={eventData.title || ''}
              onChange={(e) =>
                setEventData({ ...eventData, title: e.target.value })
              }
              className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
              required
            />
          </div>

          {/* Description */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Description
            </label>
            <textarea
              value={eventData.description || ''}
              onChange={(e) =>
                setEventData({ ...eventData, description: e.target.value })
              }
              className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
              rows="3"
            />
          </div>

          {/* Planning */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Planning
            </label>
            <select
              value={eventData.planning || schedules[0]?.id}
              onChange={(e) => {
                const selectedSchedule = schedules.find(
                  (s) => s.id === e.target.value
                );
                setEventData({
                  ...eventData,
                  planning: e.target.value,
                  color: selectedSchedule?.color || '#10b981',
                });
              }}
              className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
              required
            >
              {schedules.map((schedule) => (
                <option key={schedule.id} value={schedule.id}>
                  {schedule.name}
                </option>
              ))}
            </select>
          </div>

          {/* Couleur */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Couleur
            </label>
            <input
              type="color"
              value={
                eventData.color ||
                schedules.find((s) => s.id === eventData.planning)?.color ||
                '#10b981'
              }
              onChange={(e) =>
                setEventData({ ...eventData, color: e.target.value })
              }
              className="w-full h-10 p-1 rounded border"
            />
          </div>

          {/* Récurrence */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Récurrence
            </label>
            <select
              value={eventData.recurrence || 'none'}
              onChange={(e) =>
                setEventData({ ...eventData, recurrence: e.target.value })
              }
              className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
            >
              {recurrenceOptions.map((option) => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          </div>

          {/* Paramètres de récurrence personnalisée */}
          {eventData.recurrence === 'custom' && (
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  Répéter tous les
                </label>
                <div className="flex gap-2">
                  <input
                    type="number"
                    min="1"
                    value={eventData.customInterval || 1}
                    onChange={(e) =>
                      setEventData({
                        ...eventData,
                        customInterval: parseInt(e.target.value) || 1,
                      })
                    }
                    className="w-20 p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  />
                  <select
                    value={eventData.customUnit || 'days'}
                    onChange={(e) =>
                      setEventData({
                        ...eventData,
                        customUnit: e.target.value,
                      })
                    }
                    className="flex-1 p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
                  >
                    <option value="days">Jours</option>
                    <option value="weeks">Semaines</option>
                    <option value="months">Mois</option>
                  </select>
                </div>
              </div>
            </div>
          )}

          {/* Jours de la semaine (pour récurrence hebdomadaire) */}
          {eventData.recurrence === 'weekly' && (
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Jours de répétition
              </label>
              <div className="flex gap-2 flex-wrap">
                {daysOfWeek.map((day) => (
                  <button
                    key={day.value}
                    type="button"
                    onClick={() => {
                      const days = eventData.selectedDays || [];
                      const newDays = days.includes(day.value)
                        ? days.filter((d) => d !== day.value)
                        : [...days, day.value];
                      setEventData({ ...eventData, selectedDays: newDays });
                    }}
                    className={`px-3 py-1 rounded-full text-sm ${
                      (eventData.selectedDays || []).includes(day.value)
                        ? 'bg-emerald-100 text-emerald-800'
                        : 'bg-gray-100 text-gray-600'
                    }`}
                  >
                    {day.label}
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* Date de fin de récurrence */}
          {eventData.recurrence !== 'none' && (
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Fin de récurrence
              </label>
              <input
                type="date"
                value={eventData.recurrenceEnd || ''}
                onChange={(e) =>
                  setEventData({ ...eventData, recurrenceEnd: e.target.value })
                }
                className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
              />
            </div>
          )}

          {/* Dates */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Début
              </label>
              <input
                type="datetime-local"
                value={format(new Date(eventData.start), "yyyy-MM-dd'T'HH:mm")}
                onChange={(e) =>
                  setEventData({
                    ...eventData,
                    start: new Date(e.target.value).toISOString(),
                  })
                }
                className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
                required
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Fin
              </label>
              <input
                type="datetime-local"
                value={format(new Date(eventData.end), "yyyy-MM-dd'T'HH:mm")}
                onChange={(e) =>
                  setEventData({
                    ...eventData,
                    end: new Date(e.target.value).toISOString(),
                  })
                }
                className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
                required
              />
            </div>
          </div>

          {/* Lieu */}
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Lieu
            </label>
            <input
              type="text"
              value={eventData.location || ''}
              onChange={(e) =>
                setEventData({ ...eventData, location: e.target.value })
              }
              className="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-emerald-500"
            />
          </div>

          {/* Boutons */}
          <div className="flex justify-between gap-2 mt-6">
            <div>
              {eventData.id && (
                <button
                  type="button"
                  onClick={handleDelete}
                  className="px-4 py-2 text-red-600 hover:bg-red-50 rounded"
                >
                  Supprimer
                </button>
              )}
            </div>
            <div className="flex gap-2">
              <button
                type="button"
                onClick={onClose}
                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded"
              >
                Annuler
              </button>
              <button
                type="submit"
                className="px-4 py-2 bg-emerald-600 text-white rounded hover:bg-emerald-700"
              >
                {eventData.id ? 'Modifier' : 'Créer'}
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}