import React, { useEffect, useState } from 'react';
import { usePlanning, PlanningModes } from '@/context/PlanningContext';
import WeekView from '@/components/Calendar/WeekView';
import MonthView from '@/components/Calendar/MonthView';
import YearView from '@/components/Calendar/YearView';
import PlanningView from '@/components/Calendar/PlanningView';
import DayView from '@/components/Calendar/DayView';
import ToggleView from '@/components/ToggleView';
import { ChevronLeft, ChevronRight, Plus, ChevronDown } from 'lucide-react';
import {
  format,
  addWeeks,
  addMonths,
  addYears,
  addDays,
  subWeeks,
  subMonths,
  subYears,
  subDays,
  getWeek,
  setMonth,
  setYear,
} from 'date-fns';
import { fr } from 'date-fns/locale';
import { AnimatePresence, motion } from 'framer-motion'; // Ajouter cet import
import logger from '@/utils/logger';

const Calendar = ({ modeSet, onDateClick, onEventClick, planningClassName = '', onOpenDrawer = () => {} }) => {
  const {
    currentDate,
    setCurrentDate,
    viewType,
    setViewType,
    events,
    hiddenSchedules,
    planningMode,
    parentView
  } = usePlanning();
  const [visibleEvents, setVisibleEvents] = useState([]);
  const [showDatePicker, setShowDatePicker] = useState(false);
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < 768);
    check();
    window.addEventListener('resize', check);
    return () => window.removeEventListener('resize', check);
  }, []);

  // Ajouter ces fonctions pour la gestion des mois et années
  const months = Array.from({ length: 12 }, (_, i) => ({
    value: i,
    label: format(new Date(2024, i, 1), 'MMMM', { locale: fr }),
  }));

  const years = Array.from({ length: 10 }, (_, i) => ({
    value: new Date().getFullYear() - 5 + i,
    label: new Date().getFullYear() - 5 + i,
  }));

  const handleMonthSelect = (monthIndex) => {
    setCurrentDate(setMonth(currentDate, monthIndex));
    setShowDatePicker(false);
  };

  const handleYearSelect = (year) => {
    setCurrentDate(setYear(currentDate, year));
    setShowDatePicker(false);
  };

  useEffect(() => {
    // S'assurer que le filtrage est fait au niveau parent
    const filtered = events?.filter(
      (event) => !hiddenSchedules.includes(event.planning)
    );
    setVisibleEvents(filtered);
    logger.debug('Events filtrés:', filtered); // Debug
  }, [events, hiddenSchedules]);

  const navigateDate = (direction) => {
    const getNewDate = () => {
      const effectiveView = isMobile ? 'day' : viewType;
      switch (effectiveView) {
        case 'day':
          return direction === 'next'
            ? addDays(currentDate, 1)
            : subDays(currentDate, 1);
        case 'week':
          return direction === 'next'
            ? addWeeks(currentDate, 1)
            : subWeeks(currentDate, 1);
        case 'month':
          return direction === 'next'
            ? addMonths(currentDate, 1)
            : subMonths(currentDate, 1);
        case 'year':
          return direction === 'next'
            ? addYears(currentDate, 1)
            : subYears(currentDate, 1);
        default:
          return currentDate;
      }
    };

    setCurrentDate(getNewDate());
  };

  return (
    <div className="flex-1 flex flex-col">
      {/* Header uniquement sur desktop */}
      <div className="hidden md:flex items-center justify-between p-4 bg-white sticky top-0 z-30 border-b shadow-sm h-[64px]">
        <>
            {planningMode === PlanningModes.PLANNING && (
              <div className="flex items-center gap-4">
                <button
                  onClick={() => setCurrentDate(new Date())}
                  className="px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors"
                >
                  Aujourd&apos;hui
                </button>
                <button onClick={() => navigateDate('prev')} className="p-2 hover:bg-gray-100 rounded-full">
                  <ChevronLeft className="w-5 h-5" />
                </button>
                <div className="relative">
                  <button
                    onClick={() => setShowDatePicker(!showDatePicker)}
                    className="flex items-center gap-1 px-2 py-1 hover:bg-gray-100 rounded-md"
                  >
                    <h2 className="text-xl font-semibold">
                      {format(currentDate, viewType === 'year' ? 'yyyy' : 'MMMM yyyy', { locale: fr })}
                    </h2>
                    <ChevronDown className="w-4 h-4" />
                  </button>
                  {showDatePicker && (
                    <div className="absolute top-full left-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-50 w-64">
                      {viewType !== 'year' && (
                        <div className="p-2 border-b">
                          <div className="grid grid-cols-3 gap-1">
                            {months.map((month) => (
                              <button key={month.value} onClick={() => handleMonthSelect(month.value)} className="p-2 text-sm hover:bg-gray-100 rounded-md">
                                {month.label}
                              </button>
                            ))}
                          </div>
                        </div>
                      )}
                      <div className="p-2">
                        <div className="grid grid-cols-3 gap-1">
                          {years.map((year) => (
                            <button key={year.value} onClick={() => handleYearSelect(year.value)} className="p-2 text-sm hover:bg-gray-100 rounded-md">
                              {year.label}
                            </button>
                          ))}
                        </div>
                      </div>
                    </div>
                  )}
                </div>
                <button onClick={() => navigateDate('next')} className="p-2 hover:bg-gray-100 rounded-full">
                  <ChevronRight className="w-5 h-5" />
                </button>
              </div>
            )}

            <div className="flex-1 flex justify-center">
              {((planningMode === PlanningModes.PLANNING || planningMode === PlanningModes.CLASS_SCHEDULE) && viewType === 'week' && !parentView) && (
                <div className="flex items-center gap-1 text-sm font-medium text-gray-600">
                  <span>Semaine</span>
                  <span className="px-2 py-1 bg-gray-100 rounded-md">
                    {getWeek(currentDate, { weekStartsOn: 1 })}
                  </span>
                </div>
              )}
              {parentView && (
                <span className="px-2 py-1 bg-gray-100 rounded-md text-base font-semibold">
                  {planningClassName}
                </span>
              )}
            </div>

            <div className="flex items-center gap-4">
              {planningMode === PlanningModes.PLANNING && (
                <ToggleView viewType={viewType} setViewType={setViewType} />
              )}
              {(planningMode === PlanningModes.PLANNING || (planningMode === PlanningModes.CLASS_SCHEDULE && !parentView)) && (
                <button
                  onClick={onDateClick}
                  className="w-10 h-10 flex items-center justify-center bg-emerald-600 text-white rounded-full hover:bg-emerald-700 shadow-md transition-colors"
                >
                  <Plus className="w-5 h-5" />
                </button>
              )}
            </div>
        </>
      </div>

      {/* Contenu scrollable */}
      <div className="flex-1 max-h-[calc(100vh-192px)] overflow-hidden">
        <AnimatePresence mode="wait">
          {isMobile && (
            <motion.div
              key="day"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.2 }}
              className="h-full flex flex-col"
            >
              <DayView
                onDateClick={onDateClick}
                onEventClick={onEventClick}
                events={visibleEvents}
                onOpenDrawer={onOpenDrawer}
              />
            </motion.div>
          )}
          {!isMobile && viewType === 'week' && (
            <motion.div
              key="week"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.2 }}
              className="h-full flex flex-col"
            >
              <WeekView
                onDateClick={onDateClick}
                onEventClick={onEventClick}
                events={visibleEvents}
              />
            </motion.div>
          )}
          {!isMobile && viewType === 'month' && (
            <motion.div
              key="month"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.2 }}
            >
              <MonthView
                onDateClick={onDateClick}
                onEventClick={onEventClick}
                events={visibleEvents}
              />
            </motion.div>
          )}
          {!isMobile && viewType === 'year' && (
            <motion.div
              key="year"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.2 }}
            >
              <YearView onDateClick={onDateClick} events={visibleEvents} />
            </motion.div>
          )}
          {!isMobile && viewType === 'planning' && (
            <motion.div
              key="planning"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.2 }}
            >
              <PlanningView
                onEventClick={onEventClick}
                events={visibleEvents}
              />
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </div>
  );
};

export default Calendar;