import React from 'react';
import { CalendarCheck } from 'lucide-react';

/**
 * Formate une date en format français avec jour de la semaine
 * @param {string} startDateString - Date de début au format ISO
 * @param {string} endDateString - Date de fin au format ISO (optionnel)
 * @returns {object} Objet contenant la date formatée et le jour
 */
const formatEventDate = (startDateString, endDateString) => {
  if (!startDateString)
    return { formattedDate: '', dayName: '', timeIndicator: '', timeRange: '' };

  try {
    const startDate = new Date(startDateString);
    const endDate = endDateString ? new Date(endDateString) : null;
    const now = new Date();
    const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
    const eventDate = new Date(
      startDate.getFullYear(),
      startDate.getMonth(),
      startDate.getDate()
    );

    // Options pour le formatage de la date
    const dateOptions = {
      day: 'numeric',
      month: 'long',
      year: 'numeric',
    };

    const dayOptions = {
      weekday: 'long',
    };

    const timeOptions = {
      hour: '2-digit',
      minute: '2-digit',
    };

    const formattedDate = startDate.toLocaleDateString('fr-FR', dateOptions);
    const dayName = startDate.toLocaleDateString('fr-FR', dayOptions);

    // Formatage de l'heure
    let timeRange = '';
    if (endDate) {
      const startTime = startDate.toLocaleTimeString('fr-FR', timeOptions);
      const endTime = endDate.toLocaleTimeString('fr-FR', timeOptions);
      timeRange = `${startTime} - ${endTime}`;
    } else {
      timeRange = startDate.toLocaleTimeString('fr-FR', timeOptions);
    }

    // Calcul des jours restants
    const diffTime = eventDate - today;
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    let timeIndicator = '';
    if (diffDays === 0) {
      timeIndicator = "Aujourd'hui";
    } else if (diffDays === 1) {
      timeIndicator = 'Demain';
    } else if (diffDays > 0 && diffDays <= 7) {
      timeIndicator = `Dans ${diffDays} jours`;
    }

    return {
      formattedDate,
      dayName: dayName.charAt(0).toUpperCase() + dayName.slice(1),
      timeIndicator,
      timeRange,
    };
  } catch (error) {
    // logger.error('Erreur lors du formatage de la date:', error);
    return {
      formattedDate: startDateString,
      dayName: '',
      timeIndicator: '',
      timeRange: '',
    };
  }
};

/**
 * Composant EventCard pour afficher les événements à venir
 * @param {string} title - Titre de l'événement
 * @param {string} start - Date de début de l'événement (format ISO)
 * @param {string} end - Date de fin de l'événement (format ISO)
 * @param {string} date - Date de l'événement (pour compatibilité)
 * @param {string} description - Description de l'événement
 * @param {string} type - Type d'événement (optionnel)
 * @returns {JSX.Element} Carte d'événement
 */
const EventCard = ({ title, start, end, date, description, type }) => {
  // Utiliser start si disponible, sinon date pour compatibilité
  const eventDate = start || date;
  const { formattedDate, dayName, timeIndicator, timeRange } = formatEventDate(
    eventDate,
    end
  );

  return (
    <div className="bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-3 hover:shadow-md transition-shadow">
      <div className="flex items-start gap-3">
        <div className="flex-shrink-0 mt-1">
          <CalendarCheck className="text-emerald-500" size={20} />
        </div>
        <div className="flex-1">
          <h4 className="font-medium text-gray-900 mb-1">{title}</h4>
          <div className="flex flex-col text-sm text-gray-500">
            <span className="font-medium text-emerald-600">{dayName}</span>
            <span>{formattedDate}</span>
            {timeRange && (
              <span className="text-xs text-gray-600 mt-1">{timeRange}</span>
            )}
            {timeIndicator && (
              <span className="text-xs text-blue-600 mt-1 font-medium">
                {timeIndicator}
              </span>
            )}
          </div>
          {description && (
            <p className="text-sm mt-2 text-gray-700">{description}</p>
          )}
        </div>
      </div>
    </div>
  );
};

export default EventCard;