MAD-Platform/components/CalendrierTrajets.tsx

'use client';

import { useState, useEffect } from 'react';
import { DndContext, DragEndEvent, DragOverlay, DragStartEvent, useDraggable, useDroppable } from '@dnd-kit/core';
import { CSS } from '@dnd-kit/utilities';
import TrajetDetailModal from './TrajetDetailModal';
import { useNotification } from './NotificationProvider';
import { getParticipationRef } from '@/lib/participation-ref';

interface Trajet {
  id: string;
  date: string;
  adresseDepart: string;
  adresseArrivee: string;
  commentaire?: string | null;
  statut: string;
  participations?: { id: string }[];
  adherent: {
    id: string;
    nom: string;
    prenom: string;
    telephone: string;
    email: string;
  };
  chauffeur?: {
    id: string;
    nom: string;
    prenom: string;
    telephone: string;
  } | null;
}

interface CalendrierTrajetsProps {
  refreshTrigger?: number;
}

// Composant draggable pour un événement de trajet
function DraggableTrajetEvent({ trajet, onClick }: { trajet: Trajet; onClick: (e: React.MouseEvent, trajet: Trajet) => void }) {
  // Empêcher le drag pour les trajets annulés ou validés
  const canDrag = trajet.statut !== 'Annulé' && trajet.statut !== 'Validé' && trajet.statut !== 'Terminé';
  
  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
    id: trajet.id,
    data: { trajet },
    disabled: !canDrag,
  });

  const style = {
    transform: CSS.Translate.toString(transform),
    opacity: isDragging ? 0.5 : 1,
  };

  const getStatutStyle = (statut: string) => {
    switch (statut) {
      case 'Validé':
        return {
          bg: 'bg-purple-500',
          text: 'text-white',
          border: 'border-purple-600',
        };
      case 'Terminé':
        return {
          bg: 'bg-green-500',
          text: 'text-white',
          border: 'border-green-600',
        };
      case 'En cours':
        return {
          bg: 'bg-blue-500',
          text: 'text-white',
          border: 'border-blue-600',
        };
      case 'Annulé':
        return {
          bg: 'bg-red-500',
          text: 'text-white',
          border: 'border-red-600',
        };
      default:
        return {
          bg: 'bg-lblue',
          text: 'text-white',
          border: 'border-lblue',
        };
    }
  };

  const formatTime = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
  };

  const styleObj = getStatutStyle(trajet.statut);

  return (
    <button
      ref={setNodeRef}
      style={style}
      {...listeners}
      {...attributes}
      onClick={(e) => onClick(e, trajet)}
      className={`text-[9px] sm:text-[10px] px-1 sm:px-1.5 py-0.5 rounded border ${styleObj.bg} ${styleObj.text} ${styleObj.border} font-semibold truncate w-full text-left transition-all flex items-center gap-0.5 sm:gap-1 ${canDrag ? 'hover:shadow-md cursor-grab active:cursor-grabbing' : 'cursor-default opacity-75'} ${isDragging ? 'opacity-50' : ''}`}
      title={`${trajet.adherent.prenom} ${trajet.adherent.nom} - ${trajet.chauffeur ? `${trajet.chauffeur.prenom} ${trajet.chauffeur.nom}` : 'Sans chauffeur'} - ${trajet.statut}`}
    >
      <span className="font-bold text-[8px] sm:text-[9px]">
        {trajet.chauffeur
          ? `${trajet.chauffeur.prenom.charAt(0)}${trajet.chauffeur.nom.charAt(0)}`
          : '?'}
      </span>
      <span className="opacity-90 hidden sm:inline">•</span>
      <span className="opacity-90 truncate">{formatTime(trajet.date)}</span>
    </button>
  );
}

// Composant droppable pour une cellule de jour
function DroppableDayCell({ 
  date, 
  children, 
  isToday, 
  isSelected, 
  onDateClick 
}: { 
  date: Date; 
  children: React.ReactNode;
  isToday: boolean;
  isSelected: boolean;
  onDateClick: (date: Date) => void;
}) {
  // Créer un ID basé sur les composants de date pour éviter les problèmes de fuseau horaire
  const dayId = `day-${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
  
  const { setNodeRef, isOver } = useDroppable({
    id: dayId,
    data: { date },
  });

  return (
    <button
      ref={setNodeRef}
      onClick={() => onDateClick(date)}
      className={`h-12 sm:h-20 md:h-24 p-1 sm:p-1.5 md:p-2 rounded-md sm:rounded-lg border sm:border-2 transition-all flex flex-col items-center sm:items-stretch active:scale-95 sm:active:scale-100 ${
        isSelected
          ? 'border-lblue bg-lblue/10 sm:border-2'
          : isToday
          ? 'border-lblue bg-lblue/5 sm:border-2'
          : isOver
          ? 'border-lgreen bg-lgreen/20 sm:border-2'
          : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
      }`}
    >
      {children}
    </button>
  );
}

export default function CalendrierTrajets({ refreshTrigger }: CalendrierTrajetsProps) {
  const { showNotification } = useNotification();
  const [trajets, setTrajets] = useState<Trajet[]>([]);
  const [loading, setLoading] = useState(true);
  const [currentDate, setCurrentDate] = useState(new Date());
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
  const [selectedTrajets, setSelectedTrajets] = useState<Trajet[]>([]);
  const [selectedTrajet, setSelectedTrajet] = useState<Trajet | null>(null);
  const [activeId, setActiveId] = useState<string | null>(null);
  const [draggedTrajet, setDraggedTrajet] = useState<Trajet | null>(null);

  const month = currentDate.getMonth();
  const year = currentDate.getFullYear();

  const firstDayOfMonth = new Date(year, month, 1);
  const lastDayOfMonth = new Date(year, month + 1, 0);
  const daysInMonth = lastDayOfMonth.getDate();
  const startingDayOfWeek = firstDayOfMonth.getDay();

  // Ajuster pour que lundi soit le premier jour (0 = lundi)
  const adjustedStartingDay = startingDayOfWeek === 0 ? 6 : startingDayOfWeek - 1;

  useEffect(() => {
    fetchTrajets(true);
  }, [currentDate, refreshTrigger]);

  const fetchTrajets = async (showLoading = true) => {
    if (showLoading) {
      setLoading(true);
    }
    try {
      const startDate = new Date(year, month, 1).toISOString();
      const endDate = new Date(year, month + 1, 0, 23, 59, 59).toISOString();
      
      const response = await fetch(
        `/api/trajets?startDate=${startDate}&endDate=${endDate}`
      );
      if (response.ok) {
        const data = await response.json();
        setTrajets(data);
        
        // Mettre à jour la liste des trajets du jour sélectionné après le fetch
        if (selectedDate) {
          const trajetsDuJour = data.filter((t: Trajet) => {
            const trajetDate = new Date(t.date);
            return (
              trajetDate.getDate() === selectedDate.getDate() &&
              trajetDate.getMonth() === selectedDate.getMonth() &&
              trajetDate.getFullYear() === selectedDate.getFullYear()
            );
          });
          setSelectedTrajets(trajetsDuJour);
        }
      } else {
        console.error('Erreur lors de la récupération des trajets:', response.statusText);
      }
    } catch (error) {
      console.error('Erreur lors du chargement des trajets:', error);
      // Ne pas vider les trajets en cas d'erreur
    } finally {
      if (showLoading) {
        setLoading(false);
      }
    }
  };

  const getTrajetsForDate = (date: Date): Trajet[] => {
    // Utiliser les composants de date directement pour éviter les problèmes de fuseau horaire
    const targetYear = date.getFullYear();
    const targetMonth = date.getMonth();
    const targetDay = date.getDate();
    
    return trajets.filter((trajet) => {
      const trajetDate = new Date(trajet.date);
      return (
        trajetDate.getFullYear() === targetYear &&
        trajetDate.getMonth() === targetMonth &&
        trajetDate.getDate() === targetDay
      );
    });
  };

  const handleDateClick = (date: Date) => {
    setSelectedDate(date);
    const trajetsDuJour = getTrajetsForDate(date);
    setSelectedTrajets(trajetsDuJour);
  };

  const handleTrajetClick = (e: React.MouseEvent, trajet: Trajet) => {
    e.stopPropagation(); // Empêcher le clic sur la date
    setSelectedTrajet(trajet);
  };

  const handleDragStart = (event: DragStartEvent) => {
    setActiveId(event.active.id as string);
    const trajet = event.active.data.current?.trajet as Trajet;
    setDraggedTrajet(trajet);
  };

  const handleDragEnd = async (event: DragEndEvent) => {
    const { active, over } = event;
    setActiveId(null);
    setDraggedTrajet(null);

    if (!over || !active.data.current?.trajet) {
      return;
    }

    const trajet = active.data.current.trajet as Trajet;
    
    // Vérifier que le trajet peut être déplacé
    if (trajet.statut === 'Annulé' || trajet.statut === 'Validé' || trajet.statut === 'Terminé') {
      return;
    }

    const targetDayId = over.id as string;

    // Extraire la date de la cible (format: "day-2026-01-23")
    if (typeof targetDayId === 'string' && targetDayId.startsWith('day-')) {
      const dateStr = targetDayId.replace('day-', '');
      const [year, month, day] = dateStr.split('-').map(Number);
      
      // Vérifier que les composants de date sont valides
      if (isNaN(year) || isNaN(month) || isNaN(day)) {
        return;
      }

      // Conserver l'heure du trajet original, changer seulement la date
      const originalDate = new Date(trajet.date);
      
      // Créer la nouvelle date avec les composants locaux pour correspondre exactement au calendrier
      // Note: month - 1 car les mois sont indexés à partir de 0 en JavaScript
      // On crée la date directement avec l'heure originale mais la date cible
      // Pour éviter les problèmes de fuseau horaire, on crée d'abord à midi puis on ajuste
      const newDate = new Date(year, month - 1, day, 12, 0, 0, 0);
      newDate.setHours(originalDate.getHours(), originalDate.getMinutes(), originalDate.getSeconds(), originalDate.getMilliseconds());

      // Vérifier que la date a changé
      const originalDateOnly = new Date(originalDate.getFullYear(), originalDate.getMonth(), originalDate.getDate());
      const newDateOnly = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate());
      
      if (originalDateOnly.getTime() === newDateOnly.getTime()) {
        return; // Même jour, pas besoin de mettre à jour
      }

      // Mettre à jour le trajet
      try {
        const response = await fetch(`/api/trajets/${trajet.id}`, {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            date: newDate.toISOString(),
          }),
        });

        if (response.ok) {
          const targetDateFormatted = new Date(newDate).toLocaleDateString('fr-FR', {
            day: 'numeric',
            month: 'long',
            year: 'numeric',
          });
          showNotification('success', `Trajet déplacé vers le ${targetDateFormatted}`);
          // Utiliser fetchTrajets sans loading pour éviter de vider les trajets pendant le chargement
          await fetchTrajets(false);
        } else {
          const error = await response.json();
          showNotification('error', error.error || 'Erreur lors du déplacement du trajet');
        }
      } catch (error) {
        console.error('Erreur lors du déplacement:', error);
        showNotification('error', 'Erreur lors du déplacement du trajet');
      }
    }
  };

  const goToPreviousMonth = () => {
    setCurrentDate(new Date(year, month - 1, 1));
  };

  const goToNextMonth = () => {
    setCurrentDate(new Date(year, month + 1, 1));
  };

  const goToToday = () => {
    setCurrentDate(new Date());
  };

  const formatDate = (date: Date) => {
    return date.toLocaleDateString('fr-FR', {
      weekday: 'long',
      day: 'numeric',
      month: 'long',
      year: 'numeric',
    });
  };

  const formatTime = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
  };

  const days = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
  const calendarDays = [];

  // Ajouter les jours vides du début
  for (let i = 0; i < adjustedStartingDay; i++) {
    calendarDays.push(null);
  }

  // Ajouter les jours du mois
  for (let day = 1; day <= daysInMonth; day++) {
    calendarDays.push(new Date(year, month, day));
  }

  const mobileDays = ['L', 'M', 'M', 'J', 'V', 'S', 'D'];

  const getStatutDotColor = (statut: string) => {
    switch (statut) {
      case 'Validé': return 'bg-purple-500';
      case 'Terminé': return 'bg-green-500';
      case 'En cours': return 'bg-blue-500';
      case 'Annulé': return 'bg-red-500';
      default: return 'bg-lblue';
    }
  };

  return (
    <div className="bg-white rounded-lg shadow-sm p-3 sm:p-6 min-w-0 overflow-hidden">
      {/* En-tête du calendrier */}
      <div className="flex items-center justify-between mb-4 sm:mb-6">
        <h2 className="text-base sm:text-xl font-semibold text-gray-900 capitalize">
          {currentDate.toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' })}
        </h2>
        <div className="flex items-center gap-1.5 sm:gap-2">
          <button
            onClick={goToPreviousMonth}
            className="p-2 rounded-lg hover:bg-gray-100 transition-colors active:bg-gray-200"
            title="Mois précédent"
          >
            <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
          </button>
          <button
            onClick={goToToday}
            className="px-3 py-1.5 sm:px-4 sm:py-2 text-xs sm:text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors active:bg-gray-300"
          >
            Aujourd&apos;hui
          </button>
          <button
            onClick={goToNextMonth}
            className="p-2 rounded-lg hover:bg-gray-100 transition-colors active:bg-gray-200"
            title="Mois suivant"
          >
            <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </button>
        </div>
      </div>

      {loading ? (
        <div className="text-center py-6 sm:py-8 text-sm text-gray-500">Chargement...</div>
      ) : (
        <>
          {/* Grille du calendrier avec drag and drop */}
          <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
            <div className="grid grid-cols-7 gap-0.5 sm:gap-2 mb-4 sm:mb-6">
              {/* En-têtes des jours - version courte sur mobile */}
              {days.map((day, i) => (
                <div key={day} className="text-center text-xs sm:text-xs md:text-sm font-semibold text-gray-500 py-1 sm:py-2">
                  <span className="sm:hidden">{mobileDays[i]}</span>
                  <span className="hidden sm:inline">{day}</span>
                </div>
              ))}

              {/* Jours du calendrier */}
              {calendarDays.map((date, index) => {
                if (!date) {
                  return <div key={`empty-${index}`} className="h-12 sm:h-24" />;
                }

                const trajetsDuJour = getTrajetsForDate(date);
                const isToday =
                  date.getDate() === new Date().getDate() &&
                  date.getMonth() === new Date().getMonth() &&
                  date.getFullYear() === new Date().getFullYear();
                const isSelected = !!(
                  selectedDate &&
                  date.getDate() === selectedDate.getDate() &&
                  date.getMonth() === selectedDate.getMonth() &&
                  date.getFullYear() === selectedDate.getFullYear()
                );

                return (
                  <DroppableDayCell
                    key={date.toISOString()}
                    date={date}
                    isToday={isToday}
                    isSelected={isSelected}
                    onDateClick={handleDateClick}
                  >
                    {/* Numéro du jour */}
                    <div className={`text-xs sm:text-sm font-medium mb-0.5 sm:mb-1 ${
                      isToday ? 'text-lblue font-bold' : 'text-gray-900'
                    }`}>
                      {date.getDate()}
                    </div>

                    {/* Mobile: indicateurs de points colorés */}
                    {trajetsDuJour.length > 0 && (
                      <>
                        <div className="flex items-center justify-center gap-0.5 flex-wrap sm:hidden">
                          {trajetsDuJour.length <= 3 ? (
                            trajetsDuJour.map((t) => (
                              <span key={t.id} className={`w-1.5 h-1.5 rounded-full ${getStatutDotColor(t.statut)}`} />
                            ))
                          ) : (
                            <>
                              <span className={`w-1.5 h-1.5 rounded-full ${getStatutDotColor(trajetsDuJour[0].statut)}`} />
                              <span className="text-[9px] font-bold text-gray-500 leading-none">{trajetsDuJour.length}</span>
                            </>
                          )}
                        </div>

                        {/* Desktop: pastilles d'événements comme avant */}
                        <div className="hidden sm:flex sm:flex-col space-y-0.5 sm:space-y-1 flex-1 overflow-hidden">
                          {trajetsDuJour.slice(0, 2).map((trajet) => (
                            <DraggableTrajetEvent
                              key={trajet.id}
                              trajet={trajet}
                              onClick={handleTrajetClick}
                            />
                          ))}
                          {trajetsDuJour.length > 2 && (
                            <div className="text-[10px] text-gray-500 font-semibold text-center pt-0.5">
                              +{trajetsDuJour.length - 2}
                            </div>
                          )}
                        </div>
                      </>
                    )}
                  </DroppableDayCell>
                );
              })}
            </div>

            {/* Overlay pour l'élément en cours de drag */}
            <DragOverlay>
              {draggedTrajet ? (
                <div className="text-[10px] px-2 py-1 rounded-lg border-2 bg-lblue text-white border-lblue font-semibold flex items-center gap-1 shadow-2xl transform rotate-2">
                  <span className="font-bold">
                    {draggedTrajet.chauffeur
                      ? `${draggedTrajet.chauffeur.prenom.charAt(0)}${draggedTrajet.chauffeur.nom.charAt(0)}`
                      : '?'}
                  </span>
                  <span>•</span>
                  <span>{formatTime(draggedTrajet.date)}</span>
                </div>
              ) : null}
            </DragOverlay>
          </DndContext>

          {/* Détails des trajets du jour sélectionné */}
          {selectedDate && selectedTrajets.length > 0 && (
            <div className="mt-4 sm:mt-6 pt-4 sm:pt-6 border-t border-gray-200">
              <h3 className="text-sm sm:text-lg font-semibold text-gray-900 mb-3 sm:mb-4">
                Trajets du{' '}
                <span className="hidden sm:inline">{formatDate(selectedDate)}</span>
                <span className="sm:hidden">
                  {selectedDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}
                </span>
              </h3>
              <div className="space-y-2 sm:space-y-3">
                {selectedTrajets.map((trajet) => {
                  const getStatutColor = (statut: string) => {
                    switch (statut) {
                      case 'Validé':
                        return 'bg-purple-100 text-purple-700 border-purple-200';
                      case 'Terminé':
                        return 'bg-green-100 text-green-700 border-green-200';
                      case 'En cours':
                        return 'bg-blue-100 text-blue-700 border-blue-200';
                      case 'Annulé':
                        return 'bg-red-100 text-red-700 border-red-200';
                      default:
                        return 'bg-gray-100 text-gray-700 border-gray-200';
                    }
                  };

                  return (
                    <button
                      key={trajet.id}
                      onClick={() => setSelectedTrajet(trajet)}
                      className="w-full p-3 sm:p-4 bg-gray-50 rounded-lg border border-gray-200 hover:border-gray-300 hover:shadow-sm transition-all text-left active:bg-gray-100"
                    >
                      <div className="flex items-start justify-between gap-2">
                        <div className="flex-1 min-w-0">
                          {/* Header: nom + heure + statut */}
                          <div className="flex items-center gap-2 mb-2 flex-wrap">
                            <span className="text-sm font-semibold text-gray-900">
                              {trajet.adherent.prenom} {trajet.adherent.nom}
                            </span>
                            <span className="px-1.5 py-0.5 text-[10px] sm:text-xs font-medium rounded bg-lblue/10 text-lblue">
                              {formatTime(trajet.date)}
                            </span>
                            <span
                              className={`px-1.5 py-0.5 text-[10px] sm:text-xs font-medium rounded border ${getStatutColor(trajet.statut)}`}
                            >
                              {trajet.statut}
                            </span>
                            {trajet.participations?.[0] && (
                              <span className="px-1.5 py-0.5 text-[10px] sm:text-xs font-mono font-medium rounded bg-lblue/10 text-lblue" title="Référence de prescription">
                                {getParticipationRef(trajet.participations[0].id)}
                              </span>
                            )}
                          </div>
                          {/* Adresses */}
                          <div className="text-xs sm:text-sm text-gray-600 mb-1 break-words">
                            <span className="font-medium">De:</span> {trajet.adresseDepart}
                          </div>
                          <div className="text-xs sm:text-sm text-gray-600 break-words">
                            <span className="font-medium">A:</span> {trajet.adresseArrivee}
                          </div>
                          {/* Chauffeur */}
                          {trajet.chauffeur ? (
                            <div className="flex items-center gap-1.5 mt-2">
                              <svg className="w-3.5 h-3.5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                              </svg>
                              <span className="text-xs font-medium text-gray-700">
                                {trajet.chauffeur.prenom} {trajet.chauffeur.nom}
                              </span>
                            </div>
                          ) : (
                            <div className="flex items-center gap-1.5 mt-2">
                              <svg className="w-3.5 h-3.5 text-orange-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                              </svg>
                              <span className="text-xs text-orange-600 font-medium">
                                Sans chauffeur
                              </span>
                            </div>
                          )}
                          {trajet.commentaire && (
                            <div className="mt-1.5 text-xs text-gray-500 italic line-clamp-2 break-words">
                              {trajet.commentaire}
                            </div>
                          )}
                        </div>
                        <svg className="w-4 h-4 text-gray-400 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                        </svg>
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          {selectedDate && selectedTrajets.length === 0 && (
            <div className="mt-4 sm:mt-6 pt-4 sm:pt-6 border-t border-gray-200 text-center text-xs sm:text-sm text-gray-500">
              Aucun trajet prévu pour le{' '}
              <span className="hidden sm:inline">{formatDate(selectedDate)}</span>
              <span className="sm:hidden">
                {selectedDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}
              </span>
            </div>
          )}
        </>
      )}

      {/* Modal de détails du trajet */}
      {selectedTrajet && (
        <TrajetDetailModal
          trajet={selectedTrajet}
          onClose={() => setSelectedTrajet(null)}
          onUpdate={() => {
            fetchTrajets();
            setSelectedTrajet(null);
          }}
        />
      )}
    </div>
  );
}