/**
 * family-calendar.js
 * Distinction congés / modes de garde + modif/suppression locales.
 */
document.addEventListener("DOMContentLoaded", () => {
  const CONGE_TYPES = ["OFF_CAROLE", "EXTRA_OFF_CAROLE"];
  const GUARDE_TYPES = ["CENTRE", "AVIS"];
  const PEP_TYPES = ["PEP_SICK"];
  const MODIFIABLE_TYPES = [...CONGE_TYPES, ...GUARDE_TYPES, ...PEP_TYPES];

  class FamilyCalendar {
    constructor() {
      this.planningBody = document.getElementById("planningBody");
      this.selectionMenu = document.getElementById("selectionMenu");
      this.schoolHolidaysTableBody = document.querySelector(
        "#schoolHolidaysTable tbody"
      );
      this.monthCalendar = document.getElementById("fc-month-calendar");
      this.monthSelectionMenu = document.getElementById(
        "fc-month-selectionMenu"
      );
      // Initialiser avec septembre (mois 8, car 0-indexé) pour l'année scolaire
      this.currentMonth = new Date();
      const currentMonthIndex = this.currentMonth.getMonth();
      // Si on est avant septembre, on affiche l'année scolaire précédente
      if (currentMonthIndex < 8) {
        this.currentMonth.setFullYear(this.currentMonth.getFullYear() - 1);
      }
      this.currentMonth.setMonth(8); // Septembre
      this.currentMonth.setDate(1); // Premier jour du mois
      this.viewMode = "1month"; // "1month", "2months", "year"

      if (!this.planningBody || !this.selectionMenu) {
        console.error("planningBody ou selectionMenu manquant");
        return;
      }

      this.isSelecting = false;
      this.selectedCells = [];
      this.monthSelectedCells = [];
      this.isMonthSelecting = false;
      this.dbEvents = [];
      this.fixedEvents = [];
      this.events = [];
      this.menuJustOpened = false;
      this.leaves = [];

      this.init();
      window.cal = this;
    }

    // ================== INIT ==================
    async init() {
      this.setupEventListeners();
      this.weeks = this.generateWeeksStructure();

      this.dbEvents = this.loadDbEvents();
      this.fixedEvents = await this.fetchPublicAndSchoolHolidays();
      this.events = [...this.dbEvents, ...this.fixedEvents];
      this.leaves = await this.fetchLeaves();

      // Nouveau : set des jours fériés (dates ISO)
      this.publicHolidayDates = new Set(
        this.fixedEvents
          .filter((e) => e.type === "PUBLIC_HOLIDAY")
          .map((e) => e.date)
      );

      this.reprocessAndRender();
      this.renderMonthCalendar();
    }

    loadDbEvents() {
      if (typeof serverData !== "undefined" && Array.isArray(serverData)) {
        return serverData.map((evt) => ({
          id: evt.id,
          date: evt.event_date,
          type: evt.event_type,
          duration: parseFloat(evt.duration),
          person_id: evt.person_id,
        }));
      }
      return [];
    }

    async fetchLeaves() {
      try {
        const res = await fetch(
          "/modules/family-calendar/includes/api/get-leaves.php"
        );
        if (!res.ok) {
          throw new Error("Erreur HTTP " + res.status);
        }
        const data = await res.json();
        return data.leaves || [];
      } catch (err) {
        console.error("Erreur lors du chargement des congés Alex/Laia :", err);
        return [];
      }
    }

    async fetchPublicAndSchoolHolidays() {
      // 1. Jours fériés (fixes)
      const publicHolidays = [
        { date: "2025-11-01", type: "PUBLIC_HOLIDAY", duration: 1 },
        { date: "2025-11-11", type: "PUBLIC_HOLIDAY", duration: 1 },
        { date: "2025-12-25", type: "PUBLIC_HOLIDAY", duration: 1 },
        { date: "2026-01-01", type: "PUBLIC_HOLIDAY", duration: 1 },
        { date: "2026-04-06", type: "PUBLIC_HOLIDAY", duration: 1 },
        { date: "2026-05-01", type: "PUBLIC_HOLIDAY", duration: 1 },
        { date: "2026-05-08", type: "PUBLIC_HOLIDAY", duration: 1 },
        { date: "2026-05-14", type: "PUBLIC_HOLIDAY", duration: 1 },
        { date: "2026-05-25", type: "PUBLIC_HOLIDAY", duration: 1 },
      ].map((e, idx) => ({
        id: `ph-${idx}`,
        ...e,
      }));

      // 2. Vacances scolaires (API)
      const schoolHolidayEvents = [];
      let holidayRecords = [];

      try {
        const response = await fetch(
          "https://data.education.gouv.fr/api/explore/v2.1/catalog/datasets/fr-en-calendrier-scolaire/records?where=annee_scolaire='2025-2026' AND zones LIKE '%Zone C%'&limit=100"
        );
        const schoolHolidaysData = await response.json();
        holidayRecords = schoolHolidaysData.results || [];

        holidayRecords.forEach((record, index) => {
          let current = new Date(record.start_date);
          let end = new Date(record.end_date);

          while (current < end) {
            const isoDate = `${current.getFullYear()}-${String(
              current.getMonth() + 1
            ).padStart(2, "0")}-${String(current.getDate()).padStart(2, "0")}`;

            schoolHolidayEvents.push({
              id: `sh-${isoDate}-${index}`,
              date: isoDate,
              type: "VACANCES_SCOLAIRES",
              duration: 1,
            });

            current.setDate(current.getDate() + 1);
          }
        });

        // Remplir le tableau HTML des vacances
        this.renderSchoolHolidaysTable(holidayRecords);
      } catch (error) {
        console.error("Impossible de charger les vacances scolaires.", error);
      }

      // 3. Retourne tous les événements "fixes"
      return [...publicHolidays, ...schoolHolidayEvents];
    }

    generateWeeksStructure() {
      const weeks = [];
      const start = new Date(2025, 8, 1); // 1er septembre 2025
      const end = new Date(2026, 7, 31); // 31 août 2026
      let current = new Date(start);

      // Remonter au lundi le plus proche <= start
      while (current.getDay() !== 1) current.setDate(current.getDate() - 1);

      while (current <= end) {
        const monday = new Date(current);

        // C’est CETTE date qui doit servir de référence pour le mois
        const weekMonthDate = monday;

        const weekData = {
          id: `${monday.getFullYear()}-W${getWeekOfYear(monday)}`,
          monthKey: `${weekMonthDate.getFullYear()}-${String(
            weekMonthDate.getMonth() + 1
          ).padStart(2, "0")}`,
          monthName: getMonthNameFr(weekMonthDate.getMonth()),
          weekLabel: `W${getWeekOfYear(monday)}`,
          dayDates: {},
          dayFlags: {},
        };

        ["mon", "tue", "wed", "thu", "fri"].forEach((dayKey, index) => {
          const dayDate = new Date(monday);
          dayDate.setDate(monday.getDate() + index);
          weekData.dayDates[dayKey] = dayDate;
          weekData.dayFlags[dayKey] = { eventsOnDay: [] };
        });

        weeks.push(weekData);
        current.setDate(current.getDate() + 7);
      }

      // Juste pour verrouiller l’ordre si un jour tu modifies current ailleurs
      weeks.sort((a, b) => a.dayDates.mon - b.dayDates.mon);

      return weeks;
    }

    reprocessAndRender() {
      this.reprocessEvents();
      this.renderTable();
      this.updateGlobalSummary();
      this.renderMonthCalendar();
    }

    reprocessEvents() {
      this.weeks.forEach((w) => {
        w.totals = {
          offCarole: 0,
          extraOffCarole: 0,
          centre: 0,
          avis: 0,
          pepSick: 0,
          presencePep: 0,
        };
        Object.values(w.dayFlags).forEach((df) => (df.eventsOnDay = []));
      });

      this.events.forEach((evt) => {
        const evtDate = new Date(evt.date + "T00:00:00");
        const week = this.weeks.find(
          (w) => evtDate >= w.dayDates.mon && evtDate <= w.dayDates.fri
        );
        if (!week) return;

        const dayKey = Object.keys(week.dayDates).find(
          (k) => week.dayDates[k].toDateString() === evtDate.toDateString()
        );
        if (dayKey) {
          week.dayFlags[dayKey].eventsOnDay.push(evt);
        }

        const dur = parseFloat(evt.duration) || 1;
        switch (evt.type) {
          case "OFF_CAROLE":
            week.totals.offCarole += dur;
            break;
          case "EXTRA_OFF_CAROLE":
            week.totals.extraOffCarole += dur;
            break;
          case "CENTRE":
            week.totals.centre += dur;
            break;
          case "AVIS":
            week.totals.avis += dur;
            break;
          case "PEP_SICK":
            week.totals.pepSick += dur;
            break;
        }
      });

      // Calcul présence Pep par semaine
      this.weeks.forEach((w) => {
        // Calcul du nombre de jours potentiels d'accueil Pep dans la semaine
        let workingDays = 0;
        ["mon", "tue", "wed", "thu", "fri"].forEach((dayKey) => {
          const d = w.dayDates[dayKey];
          const isoDate = `${d.getFullYear()}-${String(
            d.getMonth() + 1
          ).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;

          const isPublicHoliday =
            this.publicHolidayDates && this.publicHolidayDates.has(isoDate);

          if (!isPublicHoliday) {
            workingDays++;
          }
        });

        const absencesPep =
          (w.totals.offCarole || 0) +
          (w.totals.extraOffCarole || 0) +
          (w.totals.pepSick || 0);

        w.totals.presencePep = Math.max(0, workingDays - absencesPep);
        w.totals.workingDays = workingDays; // si tu veux l'afficher un jour
      });
    }

    updateGlobalSummary() {
      const summaryDiv = document.getElementById("globalSummary");
      if (!summaryDiv) return;

      const allEvents = this.dbEvents || [];

      const totalOff = allEvents
        .filter((e) => e.type === "OFF_CAROLE")
        .reduce((sum, e) => sum + Number(e.duration || 1), 0);

      const totalExtraOff = allEvents
        .filter((e) => e.type === "EXTRA_OFF_CAROLE")
        .reduce((sum, e) => sum + Number(e.duration || 1), 0);

      const totalPepSick = allEvents
        .filter((e) => e.type === "PEP_SICK")
        .reduce((sum, e) => sum + Number(e.duration || 1), 0);

      // Calculer les jours ouvrés & présence Pep sur l'année scolaire
      let totalWorkingDays = 0;
      let totalPresencePep = 0;

      // On parcourt l'année scolaire en mois, en réutilisant calculateMonthTotals
      const start = new Date(2025, 8, 1); // 1 sept 2025
      const end = new Date(2026, 7, 31); // 31 août 2026

      const current = new Date(start);
      while (current <= end) {
        const y = current.getFullYear();
        const m = current.getMonth();
        const monthTotals = this.calculateMonthTotals(y, m);

        totalWorkingDays += monthTotals.workingDays || 0;
        totalPresencePep += monthTotals.presencePep || 0;

        // Passer au 1er du mois suivant
        current.setMonth(current.getMonth() + 1);
        current.setDate(1);
      }

      summaryDiv.innerHTML = `
    <p><strong>Off Carole :</strong> ${totalOff} jours</p>
    <p><strong>Extra Off Carole :</strong> ${totalExtraOff} jours</p>
    <p><strong>Pep malade :</strong> ${totalPepSick} jours</p>
    <p><strong>Jours potentiels d'accueil Pep (année scolaire, hors fériés) :</strong> ${totalWorkingDays}</p>
    <p><strong>Présence Pep (année scolaire) :</strong> ${totalPresencePep} jours</p>
  `;
    }

    renderSchoolHolidaysTable(holidayRecords) {
      if (!this.schoolHolidaysTableBody) return;
      this.schoolHolidaysTableBody.innerHTML = "";

      const uniqueHolidays = new Map();
      holidayRecords.forEach((r) =>
        uniqueHolidays.set(`${r.start_date}|${r.end_date}`, r)
      );

      [...uniqueHolidays.values()]
        .sort((a, b) => new Date(a.start_date) - new Date(b.start_date))
        .forEach((record) => {
          const tr = document.createElement("tr");
          const startDate = new Date(record.start_date);
          const endDate = new Date(record.end_date);
          tr.innerHTML = `
            <td>${record.description}</td>
            <td>${startDate.toLocaleDateString("fr-FR")}</td>
            <td>${endDate.toLocaleDateString("fr-FR")}</td>
            <td>${record.zones}</td>
          `;
          this.schoolHolidaysTableBody.appendChild(tr);
        });
    }

    renderTable() {
      this.planningBody.innerHTML = "";
      const monthSpans = this.weeks.reduce(
        (acc, w) => ({ ...acc, [w.monthKey]: (acc[w.monthKey] || 0) + 1 }),
        {}
      );
      const monthRowRendered = {};
      const formatTotal = (total) =>
        total > 0 ? (Number.isInteger(total) ? total : total.toFixed(1)) : "";

      this.weeks.forEach((week) => {
        const tr = document.createElement("tr");

        // Mois
        if (!monthRowRendered[week.monthKey]) {
          monthRowRendered[week.monthKey] = true;
          const tdMonth = document.createElement("td");
          tdMonth.rowSpan = monthSpans[week.monthKey] || 1;
          tdMonth.textContent = week.monthName;
          tdMonth.classList.add("col-month");
          tr.appendChild(tdMonth);
        }

        // Semaine
        const tdWeek = document.createElement("td");
        tdWeek.textContent = week.weekLabel;
        tdWeek.classList.add("col-month");
        tr.appendChild(tdWeek);

        // Jours Lundi–Vendredi
        ["mon", "tue", "wed", "thu", "fri"].forEach((dayKey) => {
          const td = document.createElement("td");
          td.classList.add("col-day");

          const dayDate = week.dayDates[dayKey];
          td.dataset.date = `${dayDate.getFullYear()}-${String(
            dayDate.getMonth() + 1
          ).padStart(2, "0")}-${String(dayDate.getDate()).padStart(2, "0")}`;
          td.textContent = `${String(dayDate.getDate()).padStart(
            2,
            "0"
          )}/${String(dayDate.getMonth() + 1).padStart(2, "0")}`;

          let hasGarde = false;
          let gardeType = null;
          let hasPepSick = false;

          week.dayFlags[dayKey].eventsOnDay.forEach((evt) => {
            const classMap = {
              VACANCES_SCOLAIRES: "fc-day--school-holiday",
              PUBLIC_HOLIDAY: "fc-day--public-holiday",
              OFF_CAROLE: "fc-day--off-carole",
              EXTRA_OFF_CAROLE: "fc-day--extra-off-carole",
              // pas de couleur pour PEP_SICK dans l'hebdo
            };

            if (classMap[evt.type]) {
              td.classList.add(classMap[evt.type]);
            }

            if (GUARDE_TYPES.includes(evt.type)) {
              hasGarde = true;
              gardeType = evt.type;
            }

            if (evt.type === "PEP_SICK") {
              hasPepSick = true;
            }
          });

          if (hasGarde) {
            td.classList.add("fc-day--has-guard");
            if (gardeType === "CENTRE") td.classList.add("fc-day--centre");
            if (gardeType === "AVIS") td.classList.add("fc-day--avis");
          }

          if (hasPepSick) {
            const pepSpan = document.createElement("span");
            pepSpan.className = "fc-pep-sick-emoji";
            pepSpan.textContent = "🤒";
            td.appendChild(pepSpan);
          }

          // Congés Alex/Laia
          const isoDate = td.dataset.date;
          const leavesOnDay = this.leaves.filter(
            (lv) => lv.leave_date === isoDate
          );

          if (leavesOnDay.length > 0) {
            const container = document.createElement("div");
            container.className = "fc-leaves-label-container";

            const hasAlex = leavesOnDay.some((lv) => lv.person_id === 2);
            const hasLaia = leavesOnDay.some((lv) => lv.person_id === 3);

            if (hasAlex) {
              const alexSpan = document.createElement("span");
              alexSpan.className = "fc-leaves-label";
              alexSpan.textContent = "AF";
              container.appendChild(alexSpan);
            }

            if (hasLaia) {
              const laiaSpan = document.createElement("span");
              laiaSpan.className = "fc-leaves-label";
              laiaSpan.textContent = "LM";
              container.appendChild(laiaSpan);
            }

            td.appendChild(container);
          }

          tr.appendChild(td);
        });

        // Totaux
        const tdOff = document.createElement("td");
        tdOff.textContent = formatTotal(week.totals.offCarole);
        tdOff.classList.add("col-total");
        tr.appendChild(tdOff);

        const tdExtra = document.createElement("td");
        tdExtra.textContent = formatTotal(week.totals.extraOffCarole);
        tdExtra.classList.add("col-total");
        tr.appendChild(tdExtra);

        const tdCentre = document.createElement("td");
        tdCentre.textContent = formatTotal(week.totals.centre);
        tdCentre.classList.add("col-total");
        tr.appendChild(tdCentre);

        const tdAvis = document.createElement("td");
        tdAvis.textContent = formatTotal(week.totals.avis);
        tdAvis.classList.add("col-total");
        tr.appendChild(tdAvis);

        const tdPepSick = document.createElement("td");
        tdPepSick.textContent = formatTotal(week.totals.pepSick);
        tdPepSick.classList.add("col-total");
        tr.appendChild(tdPepSick);

        const tdPresencePep = document.createElement("td");
        tdPresencePep.textContent = formatTotal(week.totals.presencePep);
        tdPresencePep.classList.add("col-total");
        tr.appendChild(tdPresencePep);

        // 6 colonnes ALEX
        for (let i = 0; i < 6; i++) {
          const td = document.createElement("td");
          td.textContent = "";
          td.classList.add("col-alex-sub");
          tr.appendChild(td);
        }

        // 6 colonnes LAIA
        for (let i = 0; i < 6; i++) {
          const td = document.createElement("td");
          td.textContent = "";
          td.classList.add("col-laia-sub");
          tr.appendChild(td);
        }

        this.planningBody.appendChild(tr);
      });
    }

    // ================== INTERACTIONS ==================
    setupEventListeners() {
      this.planningBody.addEventListener("mousedown", (e) =>
        this.handleMouseDown(e)
      );
      document.addEventListener("mousemove", (e) => this.handleMouseMove(e));
      document.addEventListener("mouseup", (e) => this.handleMouseUp(e));
      document.addEventListener(
        "click",
        (e) => this.handleClickOutsideMenu(e),
        true
      );
      this.selectionMenu.addEventListener("click", (e) =>
        this.handleMenuClick(e)
      );

      // Événements pour le calendrier mensuel
      if (this.monthCalendar) {
        this.monthCalendar.addEventListener("mousedown", (e) =>
          this.handleMonthMouseDown(e)
        );
        document.addEventListener("mousemove", (e) =>
          this.handleMonthMouseMove(e)
        );
        document.addEventListener("mouseup", (e) => this.handleMonthMouseUp(e));
        if (this.monthSelectionMenu) {
          // Gestion add / add-single / delete / update sur le calendrier mensuel
          this.monthSelectionMenu.addEventListener("click", (e) =>
            this.handleMonthMenuClick(e)
          );
        }
      }

      // Navigation du calendrier mensuel
      const prevBtn = document.getElementById("fc-prev-month");
      const nextBtn = document.getElementById("fc-next-month");
      if (prevBtn) {
        prevBtn.addEventListener("click", () => this.navigateMonth(-1));
      }
      if (nextBtn) {
        nextBtn.addEventListener("click", () => this.navigateMonth(1));
      }

      // Boutons de changement de vue
      const viewButtons = document.querySelectorAll(".fc-view-button");
      viewButtons.forEach((btn) => {
        btn.addEventListener("click", (e) => {
          const view = e.target.dataset.view;
          this.setViewMode(view);
        });
      });
    }

    handleMouseDown(e) {
      console.log("handleMouseDown raw target:", e.target);

      const cell = e.target.closest("#planningTable td[data-date]");
      console.log("handleMouseDown cell:", cell);

      if (!cell) return;

      e.preventDefault();

      this.clearSelection();
      this.isSelecting = true;

      cell.classList.add("fc-day--selected");
      this.selectedCells = [cell];

      console.log(
        "handleMouseDown after select, selectedCells =",
        this.selectedCells
      );
    }

    handleMouseMove(e) {
      if (!this.isSelecting) return;

      const cell = e.target.closest("#planningTable td[data-date]");
      if (!cell) return;

      if (!this.selectedCells.includes(cell)) {
        cell.classList.add("fc-day--selected");
        this.selectedCells.push(cell);
      }
    }

    handleMouseUp(e) {
      console.log(
        "handleMouseUp called, selectedCells.length =",
        this.selectedCells.length
      );

      if (!this.isSelecting) {
        return;
      }

      this.isSelecting = false;

      if (this.selectedCells.length === 0) return;

      if (this.selectedCells.length === 1) {
        // Cas 1 jour : logique habituelle
        const date = this.selectedCells[0].dataset.date;
        const eventsOnDay = this.events.filter(
          (evt) => evt.date === date && MODIFIABLE_TYPES.includes(evt.type)
        );
        const conge = eventsOnDay.find((ev) => CONGE_TYPES.includes(ev.type));
        const garde = eventsOnDay.find((ev) => GUARDE_TYPES.includes(ev.type));
        const pep = eventsOnDay.find((ev) => PEP_TYPES.includes(ev.type));

        if (!conge && !garde && !pep) {
          this.showAddMenu(e);
        } else {
          this.showEditMenuForDay(e, { conge, garde, pep, date });
        }

        return;
      }

      // ===== Multi-jours =====
      const selectedDates = this.selectedCells.map((c) => c.dataset.date);
      const eventsOnDates = this.events.filter(
        (evt) =>
          selectedDates.includes(evt.date) &&
          MODIFIABLE_TYPES.includes(evt.type)
      );

      const conges = eventsOnDates.filter((ev) =>
        CONGE_TYPES.includes(ev.type)
      );
      const gardes = eventsOnDates.filter((ev) =>
        GUARDE_TYPES.includes(ev.type)
      );

      const uniqueCongeTypes = new Set(conges.map((c) => c.type));
      const uniqueGardeTypes = new Set(gardes.map((g) => g.type));

      const allDatesHaveConge =
        conges.length === selectedDates.length && uniqueCongeTypes.size === 1;
      const allDatesHaveGarde =
        gardes.length === selectedDates.length && uniqueGardeTypes.size === 1;

      console.log("Multi-jours:");
      console.log("selectedDates:", selectedDates);
      console.log("eventsOnDates:", eventsOnDates);
      console.log("conges:", conges);
      console.log("gardes:", gardes);
      console.log("uniqueCongeTypes:", Array.from(uniqueCongeTypes));
      console.log("uniqueGardeTypes:", Array.from(uniqueGardeTypes));
      console.log("allDatesHaveConge:", allDatesHaveConge);
      console.log("allDatesHaveGarde:", allDatesHaveGarde);

      if (allDatesHaveConge || allDatesHaveGarde) {
        const bulkInfo = {
          selectedDates,
          conges,
          gardes,
          congeType: allDatesHaveConge ? conges[0].type : null,
          gardeType: allDatesHaveGarde ? gardes[0].type : null,
        };
        this.showBulkMenu(e, bulkInfo);
      } else {
        this.showAddMenu(e);
      }
    }

    showBulkMenu(e, bulkInfo) {
      const { selectedDates, conges, gardes, congeType, gardeType } = bulkInfo;
      const nbDays = selectedDates.length;

      let html =
        '<div class="fc-menu-section"><strong>Actions multi-jours</strong></div>';

      if (congeType) {
        const oppositeConge =
          congeType === "OFF_CAROLE" ? "EXTRA_OFF_CAROLE" : "OFF_CAROLE";
        html += `
      <div class="fc-menu-section"><strong>Congés Carole (${nbDays} jours)</strong></div>
      <button
        data-action="bulk-update-conge"
        data-new-type="${oppositeConge}"
        data-target="conge"
      >
        Remplacer ${congeType.replace(/_/g, " ")} par ${oppositeConge.replace(
          /_/g,
          " "
        )} sur ${nbDays} jours
      </button>
      <button
        data-action="bulk-delete-conge"
        data-target="conge"
      >
        Supprimer le congé sur ${nbDays} jours
      </button>
    `;
      }

      if (gardeType) {
        const oppositeGarde = gardeType === "CENTRE" ? "AVIS" : "CENTRE";
        html += `
      <div class="fc-menu-section"><strong>Mode de garde (${nbDays} jours)</strong></div>
      <button
        data-action="bulk-update-garde"
        data-new-type="${oppositeGarde}"
        data-target="garde"
      >
        Remplacer ${gardeType} par ${oppositeGarde} sur ${nbDays} jours
      </button>
      <button
        data-action="bulk-delete-garde"
        data-target="garde"
      >
        Supprimer le mode de garde sur ${nbDays} jours
      </button>
    `;
      }

      this.selectionMenu.innerHTML = html;
      // On stocke bulkInfo pour réutilisation dans handleMenuClick
      this._currentBulkInfo = bulkInfo;
      this.positionAndShowMenu(e);
    }

    handleClickOutsideMenu(e) {
      if (this.menuJustOpened) {
        this.menuJustOpened = false;
        return;
      }
      if (
        this.selectionMenu &&
        this.selectionMenu.style.display === "block" &&
        !this.selectionMenu.contains(e.target)
      ) {
        this.clearSelection();
      }
      if (
        this.monthSelectionMenu &&
        this.monthSelectionMenu.style.display === "block" &&
        !this.monthSelectionMenu.contains(e.target)
      ) {
        this.clearMonthSelection();
      }
    }

    clearSelection() {
      this.selectionMenu.style.display = "none";
      this.selectedCells.forEach((cell) =>
        cell.classList.remove("fc-day--selected")
      );
      this.selectedCells = [];
    }

    showAddMenu(e) {
      this.selectionMenu.innerHTML = `
        <div class="fc-menu-section"><strong>Ajouter</strong></div>
        <button data-action="add" data-type="OFF_CAROLE" data-person="Carole">Off Carole</button>
        <button data-action="add" data-type="EXTRA_OFF_CAROLE" data-person="Carole">Extra Off Carole</button>
        <div class="fc-menu-section"><strong>Mode de Garde</strong></div>
        <button data-action="add" data-type="CENTRE">Centre</button>
        <button data-action="add" data-type="AVIS">Avis</button>
        <div class="fc-menu-section"><strong>Pep</strong></div>
        <button data-action="add" data-type="PEP_SICK">Pep malade</button>
      `;
      this.positionAndShowMenu(e);
    }

    showEditMenuForDay(e, { conge, garde, pep, date }) {
      console.log(
        "[EDIT MENU] pour date",
        date,
        "conge =",
        conge,
        "garde =",
        garde
      );

      // --- Section congé Carole ---
      let congeSection = "";
      if (conge) {
        const oppositeConge =
          conge.type === "OFF_CAROLE" ? "EXTRA_OFF_CAROLE" : "OFF_CAROLE";
        congeSection = `
      <div class="fc-menu-section"><strong>Congé Carole</strong></div>
      <button data-action="update" data-event-id="${
        conge.id
      }" data-new-type="${oppositeConge}">
        Remplacer par ${oppositeConge.replace(/_/g, " ")}
      </button>
      <button data-action="delete" data-event-id="${conge.id}">
        Supprimer le congé
      </button>
    `;
      } else {
        congeSection = `
      <div class="fc-menu-section"><strong>Ajouter un congé</strong></div>
      <button data-action="add-single" data-type="OFF_CAROLE" data-date="${date}" data-person="Carole">
        Off Carole
      </button>
      <button data-action="add-single" data-type="EXTRA_OFF_CAROLE" data-date="${date}" data-person="Carole">
        Extra Off Carole
      </button>
    `;
      }

      // --- Section mode de garde ---
      let gardeSection = "";
      if (garde) {
        const oppositeGarde = garde.type === "CENTRE" ? "AVIS" : "CENTRE";
        gardeSection = `
      <div class="fc-menu-section"><strong>Mode de garde</strong></div>
      <button data-action="update" data-event-id="${garde.id}" data-new-type="${oppositeGarde}">
        Remplacer par ${oppositeGarde}
      </button>
      <button data-action="delete" data-event-id="${garde.id}">
        Supprimer le mode de garde
      </button>
    `;
      } else {
        gardeSection = `
      <div class="fc-menu-section"><strong>Ajouter mode de garde</strong></div>
      <button data-action="add-single" data-type="CENTRE" data-date="${date}">
        Centre
      </button>
      <button data-action="add-single" data-type="AVIS" data-date="${date}">
        Avis
      </button>
    `;
      }

      // --- Section Pep malade ---
      let pepSection = "";
      if (pep) {
        pepSection = `
      <div class="fc-menu-section"><strong>Pep</strong></div>
      <button data-action="delete" data-event-id="${pep.id}">
        Supprimer "Pep malade"
      </button>
    `;
      } else {
        pepSection = `
      <div class="fc-menu-section"><strong>Pep</strong></div>
      <button data-action="add-single" data-type="PEP_SICK" data-date="${date}">
        Marquer Pep malade
      </button>
    `;
      }

      // --- Section congés Alex / Laia ---
      console.log(
        "[EDIT MENU] this.leaves length =",
        (this.leaves || []).length
      );

      const leavesOnDay = (this.leaves || []).filter(
        (lv) => lv.leave_date === date
      );
      console.log("[EDIT MENU] leavesOnDay =", leavesOnDay);

      let leavesSection = `
    <div class="fc-menu-section"><strong>Congés Alex / Laia</strong></div>
    <button data-action="add-leave" data-date="${date}" data-person-id="2" data-leave-type="CP">
      Alex - CP
    </button>
    <button data-action="add-leave" data-date="${date}" data-person-id="2" data-leave-type="JRA">
      Alex - JRA
    </button>
    <button data-action="add-leave" data-date="${date}" data-person-id="2" data-leave-type="JA">
      Alex - JA
    </button>
    <button data-action="add-leave" data-date="${date}" data-person-id="3" data-leave-type="CP">
      Laia - CP
    </button>
    <button data-action="add-leave" data-date="${date}" data-person-id="3" data-leave-type="JRA">
      Laia - JRA
    </button>
    <button data-action="add-leave" data-date="${date}" data-person-id="3" data-leave-type="JA">
      Laia - JA
    </button>
  `;

      if (leavesOnDay.length > 0) {
        leavesSection += `
      <button data-action="delete-leaves-day" data-date="${date}">
        Supprimer les congés Alex/Laia ce jour-là
      </button>
    `;
      }

      const fullHtml = congeSection + gardeSection + pepSection + leavesSection;
      console.log("[EDIT MENU] full menu HTML length =", fullHtml.length);

      this.selectionMenu.innerHTML = fullHtml;
      this.positionAndShowMenu(e);
    }

    positionAndShowMenu(e) {
      const wrapper = document.getElementById("planningTable-wrapper");
      const rect = wrapper.getBoundingClientRect();

      this.selectionMenu.style.display = "block";

      // Position relative au wrapper, pas à la page
      this.selectionMenu.style.left = `${e.clientX - rect.left + 5}px`;
      this.selectionMenu.style.top = `${e.clientY - rect.top + 5}px`;

      // Empêcher la fermeture immédiate par handleClickOutsideMenu
      this.menuJustOpened = true;
      setTimeout(() => {
        this.menuJustOpened = false;
      }, 0);
    }

    async handleMenuClick(e) {
      const button = e.target.closest("button[data-action]");
      if (!button) return;

      const { action, eventId, newType, type, person, date } = button.dataset;

      // === BULK ACTIONS (multi-jours) ============================================
      if (
        action === "bulk-update-conge" ||
        action === "bulk-delete-conge" ||
        action === "bulk-update-garde" ||
        action === "bulk-delete-garde"
      ) {
        if (!this._currentBulkInfo) {
          this.clearSelection();
          return;
        }

        const bulkInfo = this._currentBulkInfo;
        const target = button.dataset.target; // "conge" ou "garde"

        let events = [];
        if (target === "conge") {
          events = bulkInfo.conges;
        } else if (target === "garde") {
          events = bulkInfo.gardes;
        }

        const eventIds = events.map((ev) => ev.id);
        this.clearSelection();
        this._currentBulkInfo = null;

        try {
          let payload;
          if (
            action === "bulk-delete-conge" ||
            action === "bulk-delete-garde"
          ) {
            payload = {
              action: "bulk_delete",
              event_ids: eventIds,
            };
          } else {
            const bulkNewType = button.dataset.newType;
            payload = {
              action: "bulk_update",
              event_ids: eventIds,
              new_type: bulkNewType,
            };
          }

          const res = await fetch(
            "/modules/family-calendar/includes/api/manage-event.php",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify(payload),
            }
          );
          if (!res.ok) {
            const errData = await res.json().catch(() => ({}));
            throw new Error(errData.message || "Erreur HTTP " + res.status);
          }

          const resEvents = await fetch(
            "/modules/family-calendar/includes/api/get-events.php"
          );
          if (!resEvents.ok) {
            throw new Error("Erreur lors du rechargement des événements.");
          }
          const dataEvents = await resEvents.json();

          this.dbEvents = dataEvents.events || [];
          this.events = [...this.dbEvents, ...this.fixedEvents];

          this.reprocessAndRender();
          this.renderMonthCalendar();
        } catch (err) {
          console.error("Erreur bulk:", err);
          alert("Erreur lors de l'action multi-jours: " + err.message);
        }

        return;
      }

      // === AJOUT D'UN CONGÉ ALEX/LAIA SUR UNE SEULE DATE ==========================
      if (action === "add-leave") {
        const leaveDate = date;
        const personId = parseInt(button.dataset.personId, 10);
        const leaveType = button.dataset.leaveType;

        if (!leaveDate || !personId || !leaveType) {
          this.clearSelection();
          return;
        }

        const newLeave = {
          date: leaveDate,
          person_id: personId,
          leave_type: leaveType,
          duration: 1.0,
        };

        this.clearSelection();

        try {
          const response = await fetch(
            "/modules/family-calendar/includes/api/save-leaves.php",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify([newLeave]),
            }
          );
          if (!response.ok) {
            throw new Error("Erreur HTTP " + response.status);
          }

          // Recharger les congés
          this.leaves = await this.fetchLeaves();
          this.reprocessAndRender();
          this.renderMonthCalendar();
        } catch (err) {
          console.error(err);
          alert("Erreur lors de l'ajout de congé Alex/Laia.");
        }

        return;
      }

      // === SUPPRIMER TOUS LES CONGÉS ALEX/LAIA D'UN JOUR ==========================
      if (action === "delete-leaves-day") {
        const leaveDate = date;
        if (!leaveDate) {
          this.clearSelection();
          return;
        }

        this.clearSelection();

        try {
          const response = await fetch(
            "/modules/family-calendar/includes/api/manage-leaf.php",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ action: "delete_day", date: leaveDate }),
            }
          );
          if (!response.ok) {
            const errData = await response.json().catch(() => ({}));
            throw new Error(
              errData.message || "Erreur HTTP " + response.status
            );
          }

          this.leaves = await this.fetchLeaves();
          this.reprocessAndRender();
          this.renderMonthCalendar();
        } catch (err) {
          console.error(err);
          alert(
            "Erreur lors de la suppression des congés Alex/Laia pour ce jour: " +
              err.message
          );
        }

        return;
      }

      // === AJOUT MULTI-JOURS (sélection de plusieurs cellules) ===================
      if (action === "add") {
        const selectedDates = this.selectedCells.map((c) => c.dataset.date);
        const existingOnDates = this.dbEvents.filter((evt) =>
          selectedDates.includes(evt.date)
        );

        // Contrôles métier : pas de double congé / pas de double mode de garde
        if (CONGE_TYPES.includes(type)) {
          const hasCongeConflict = existingOnDates.some((evt) =>
            CONGE_TYPES.includes(evt.type)
          );
          if (hasCongeConflict) {
            alert(
              "Impossible d'ajouter un congé : au moins une date a déjà un congé (Off/Extra Off)."
            );
            this.clearSelection();
            return;
          }
        } else if (GUARDE_TYPES.includes(type)) {
          const hasGardeConflict = existingOnDates.some((evt) =>
            GUARDE_TYPES.includes(evt.type)
          );
          if (hasGardeConflict) {
            alert(
              "Impossible d'ajouter un mode de garde : au moins une date a déjà Centre/Avis."
            );
            this.clearSelection();
            return;
          }
        }

        const newEvents = this.selectedCells.map((cell) => ({
          date: cell.dataset.date,
          type,
          person,
          duration: 1.0,
        }));

        this.clearSelection();

        try {
          const response = await fetch(
            "/modules/family-calendar/includes/api/save-events.php",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify(newEvents),
            }
          );
          if (!response.ok) {
            throw new Error("Erreur HTTP " + response.status);
          }

          // Resync DB events
          const resEvents = await fetch(
            "/modules/family-calendar/includes/api/get-events.php"
          );
          if (!resEvents.ok) {
            throw new Error("Erreur lors du rechargement des événements.");
          }
          const dataEvents = await resEvents.json();

          this.dbEvents = dataEvents.events || [];
          this.events = [...this.dbEvents, ...this.fixedEvents];

          this.reprocessAndRender();
        } catch (err) {
          console.error(err);
          alert("Erreur lors de l'ajout.");
        }

        return;
      }

      // === AJOUT SUR UNE SEULE DATE (menu combiné d'un jour) =====================
      if (action === "add-single") {
        const targetDate = date;
        const existingOnDate = this.dbEvents.filter(
          (evt) => evt.date === targetDate
        );

        if (CONGE_TYPES.includes(type)) {
          const hasCongeConflict = existingOnDate.some((evt) =>
            CONGE_TYPES.includes(evt.type)
          );
          if (hasCongeConflict) {
            alert("Un congé existe déjà ce jour-là.");
            this.clearSelection();
            return;
          }
        } else if (GUARDE_TYPES.includes(type)) {
          const hasGardeConflict = existingOnDate.some((evt) =>
            GUARDE_TYPES.includes(evt.type)
          );
          if (hasGardeConflict) {
            alert("Un mode de garde existe déjà ce jour-là.");
            this.clearSelection();
            return;
          }
        }

        const newEvent = {
          date: targetDate,
          type,
          person,
          duration: 1.0,
        };

        this.clearSelection();

        try {
          const response = await fetch(
            "/modules/family-calendar/includes/api/save-events.php",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify([newEvent]),
            }
          );
          if (!response.ok) {
            throw new Error("Erreur HTTP " + response.status);
          }

          const resEvents = await fetch(
            "/modules/family-calendar/includes/api/get-events.php"
          );
          if (!resEvents.ok) {
            throw new Error("Erreur lors du rechargement des événements.");
          }
          const dataEvents = await resEvents.json();

          this.dbEvents = dataEvents.events || [];
          this.events = [...this.dbEvents, ...this.fixedEvents];

          this.reprocessAndRender();
        } catch (err) {
          console.error(err);
          alert("Erreur lors de l'ajout.");
        }

        return;
      }

      // === SUPPRESSION SIMPLE ====================================================
      if (action === "delete") {
        if (!eventId) {
          console.warn("Bouton delete sans eventId, action ignorée.");
          this.clearSelection();
          return;
        }

        this.clearSelection();

        try {
          const response = await fetch(
            "/modules/family-calendar/includes/api/manage-event.php",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ action: "delete", event_id: eventId }),
            }
          );
          if (!response.ok) {
            const errData = await response.json().catch(() => ({}));
            throw new Error(
              errData.message || "Erreur HTTP " + response.status
            );
          }

          const resEvents = await fetch(
            "/modules/family-calendar/includes/api/get-events.php"
          );
          if (!resEvents.ok) {
            throw new Error("Erreur lors du rechargement des événements.");
          }
          const dataEvents = await resEvents.json();

          this.dbEvents = dataEvents.events || [];
          this.events = [...this.dbEvents, ...this.fixedEvents];

          this.reprocessAndRender();
        } catch (err) {
          console.error(err);
          alert("Erreur lors de la suppression : " + err.message);
        }

        return;
      }

      // === MODIFICATION SIMPLE ===================================================
      if (action === "update") {
        console.log("[UPDATE] click sur bouton update", { eventId, newType });

        if (!eventId) {
          console.warn("Bouton update sans eventId, action ignorée.");
          this.clearSelection();
          return;
        }

        this.clearSelection();

        try {
          const response = await fetch(
            "/modules/family-calendar/includes/api/manage-event.php",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                action: "update",
                event_id: eventId,
                new_type: newType,
              }),
            }
          );
          if (!response.ok) {
            const errData = await response.json().catch(() => ({}));
            throw new Error(
              errData.message || "Erreur HTTP " + response.status
            );
          }

          const resEvents = await fetch(
            "/modules/family-calendar/includes/api/get-events.php"
          );
          if (!resEvents.ok) {
            throw new Error("Erreur lors du rechargement des événements.");
          }
          const dataEvents = await resEvents.json();

          this.dbEvents = dataEvents.events || [];
          this.events = [...this.dbEvents, ...this.fixedEvents];

          this.reprocessAndRender();
        } catch (err) {
          console.error("[UPDATE] Erreur lors de la modification :", err);
          alert("Erreur lors de la modification : " + err.message);
        }

        return;
      }
    }

    async manageEvent(payload) {
      try {
        const response = await fetch(
          "/modules/family-calendar/includes/api/manage-event.php",
          {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(payload),
          }
        );
        if (!response.ok) {
          const errData = await response.json().catch(() => ({}));
          throw new Error(errData.message || "Erreur HTTP " + response.status);
        }

        const resEvents = await fetch(
          "/modules/family-calendar/includes/api/get-events.php"
        );
        if (!resEvents.ok) {
          throw new Error("Erreur lors du rechargement des événements.");
        }
        const dataEvents = await resEvents.json();

        this.dbEvents = dataEvents.events || [];
        this.events = [...this.dbEvents, ...this.fixedEvents];

        this.reprocessAndRender();
        this.renderMonthCalendar();
      } catch (error) {
        console.error("Erreur manageEvent :", error);
        alert("Erreur: " + error.message);
      }
    }

    // ================== CALENDRIER MENSUEL ==================
    setViewMode(mode) {
      this.viewMode = mode;
      // Mettre à jour les boutons actifs
      document.querySelectorAll(".fc-view-button").forEach((btn) => {
        btn.classList.remove("fc-view-button--active");
        if (btn.dataset.view === mode) {
          btn.classList.add("fc-view-button--active");
        }
      });
      this.renderMonthCalendar();
    }

    navigateMonth(direction) {
      if (this.viewMode === "year") {
        // Navigation par année scolaire : on avance/recul d'un an,
        // en gardant currentMonth fixé sur septembre
        const year = this.currentMonth.getFullYear() + direction;
        this.currentMonth = new Date(year, 8, 1); // 8 = septembre
      } else {
        // Navigation simple par mois (1 ou 2 mois)
        const year = this.currentMonth.getFullYear();
        const month = this.currentMonth.getMonth() + direction;

        // new Date gère automatiquement le dépassement (ex: 2025, 12 => jan 2026)
        this.currentMonth = new Date(year, month, 1);
      }

      this.renderMonthCalendar();
    }

    renderMonthCalendar() {
      if (!this.monthCalendar) return;

      // Mettre à jour le titre selon le mode
      const monthTitle = document.getElementById("fc-current-month-year");
      if (monthTitle) {
        const year = this.currentMonth.getFullYear();
        const month = this.currentMonth.getMonth();

        // Calcul de l'année scolaire à partir du mois courant
        const schoolYearStart = month >= 8 ? year : year - 1;
        const schoolYearEnd = schoolYearStart + 1;

        if (this.viewMode === "year") {
          // Année scolaire complète
          monthTitle.textContent = `Année scolaire ${schoolYearStart}–${schoolYearEnd}`;
        } else if (this.viewMode === "2months") {
          const monthName = getMonthNameFr(month);
          const next = new Date(year, month + 1, 1);
          const nextMonthIndex = next.getMonth();
          const nextYear = next.getFullYear();
          const nextMonthName = getMonthNameFr(nextMonthIndex);

          monthTitle.textContent = `${monthName} ${year} – ${nextMonthName} ${nextYear} (${schoolYearStart}–${schoolYearEnd})`;
        } else {
          // Vue 1 mois
          const monthName = getMonthNameFr(month);
          monthTitle.textContent = `${monthName} ${year} (${schoolYearStart}–${schoolYearEnd})`;
        }
      }

      // Appeler la fonction appropriée selon le mode
      if (this.viewMode === "year") {
        this.renderYearView();
      } else if (this.viewMode === "2months") {
        this.renderTwoMonthsView();
      } else {
        this.renderSingleMonthView();
      }
    }

    renderSingleMonthView() {
      const year = this.currentMonth.getFullYear();
      const month = this.currentMonth.getMonth();
      const calendarHTML = this.generateMonthHTML(year, month);
      const summaryHTML = this.generateMonthSummaryHTML(year, month);
      this.monthCalendar.innerHTML = calendarHTML + summaryHTML;
    }

    calculateMonthTotals(year, month) {
      const lastDay = new Date(year, month + 1, 0);
      const totals = {
        offCarole: 0,
        extraOffCarole: 0,
        centre: 0,
        avis: 0,
        pepSick: 0,
        presencePep: 0,
        workingDays: 0, // jours potentiels d'accueil Pep
      };

      for (let day = 1; day <= lastDay.getDate(); day++) {
        const date = new Date(year, month, day);
        const dayOfWeek = date.getDay(); // 0=dim, 6=sam

        if (dayOfWeek === 0 || dayOfWeek === 6) {
          continue; // on saute samedi/dimanche
        }

        const isoDate = `${year}-${String(month + 1).padStart(2, "0")}-${String(
          day
        ).padStart(2, "0")}`;

        // Si jour férié, ce n'est PAS un jour potentiel d'accueil Pep
        const isPublicHoliday =
          this.publicHolidayDates && this.publicHolidayDates.has(isoDate);

        if (!isPublicHoliday) {
          totals.workingDays++;
        }

        // Événements de base (pf_events) pour ce jour
        const dayEvents = this.dbEvents.filter((evt) => evt.date === isoDate);

        dayEvents.forEach((evt) => {
          const dur = parseFloat(evt.duration) || 1;
          switch (evt.type) {
            case "OFF_CAROLE":
              totals.offCarole += dur;
              break;
            case "EXTRA_OFF_CAROLE":
              totals.extraOffCarole += dur;
              break;
            case "CENTRE":
              totals.centre += dur;
              break;
            case "AVIS":
              totals.avis += dur;
              break;
            case "PEP_SICK":
              totals.pepSick += dur;
              break;
          }
        });
      }

      const absencesPep =
        (totals.offCarole || 0) +
        (totals.extraOffCarole || 0) +
        (totals.pepSick || 0);

      totals.presencePep = Math.max(0, totals.workingDays - absencesPep);

      return totals;
    }

    generateMonthSummaryHTML(year, month) {
      const totals = this.calculateMonthTotals(year, month);
      const formatTotal = (total) =>
        total > 0 ? (Number.isInteger(total) ? total : total.toFixed(1)) : "0";

      const monthLabel = `${getMonthNameFr(month)} ${year}`;

      return `
    <div class="fc-month-summary-inline">
      <table>
        <thead>
          <tr>
            <th>Mois</th>
            <th>Jours ouvrés</th>
            <th># Off Carole</th>
            <th># Extra off Carole</th>
            <th># Pep malade</th>
            <th># Présence Pep</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>${monthLabel}</td>
            <td>${formatTotal(totals.workingDays)}</td>
            <td>${formatTotal(totals.offCarole)}</td>
            <td>${formatTotal(totals.extraOffCarole)}</td>
            <td>${formatTotal(totals.pepSick)}</td>
            <td>${formatTotal(totals.presencePep)}</td>
          </tr>
        </tbody>
      </table>
    </div>
  `;
    }

    renderMonthSummary() {
      const summaryDiv = document.getElementById("fc-month-summary");
      if (!summaryDiv) return;

      let html = '<div class="fc-summary-table-wrapper">';
      html += '<table class="fc-summary-table">';
      html += "<thead><tr>";
      html += "<th>Mois</th>";
      html += "<th># Off Carole</th>";
      html += "<th># Extra off Carole</th>";
      html += "<th># Centre</th>";
      html += "<th># Avis</th>";
      html += "</tr></thead><tbody>";

      const formatTotal = (total) =>
        total > 0 ? (Number.isInteger(total) ? total : total.toFixed(1)) : "";

      if (this.viewMode === "year") {
        // Afficher tous les mois de l'année scolaire
        const year = this.currentMonth.getFullYear();
        const schoolYearMonths = [];
        for (let month = 8; month < 12; month++) {
          schoolYearMonths.push({ year, month });
        }
        for (let month = 0; month < 8; month++) {
          schoolYearMonths.push({ year: year + 1, month });
        }

        schoolYearMonths.forEach(({ year: monthYear, month }) => {
          const totals = this.calculateMonthTotals(monthYear, month);
          html += "<tr>";
          html += `<td>${getMonthNameFr(month)} ${monthYear}</td>`;
          html += `<td>${formatTotal(totals.offCarole)}</td>`;
          html += `<td>${formatTotal(totals.extraOffCarole)}</td>`;
          html += `<td>${formatTotal(totals.centre)}</td>`;
          html += `<td>${formatTotal(totals.avis)}</td>`;
          html += "</tr>";
        });

        // Ligne de total
        const yearTotals = schoolYearMonths.reduce(
          (acc, { year: monthYear, month }) => {
            const totals = this.calculateMonthTotals(monthYear, month);
            acc.offCarole += totals.offCarole;
            acc.extraOffCarole += totals.extraOffCarole;
            acc.centre += totals.centre;
            acc.avis += totals.avis;
            return acc;
          },
          { offCarole: 0, extraOffCarole: 0, centre: 0, avis: 0 }
        );
        html += '<tr class="fc-summary-total-row">';
        html += `<td><strong>Total ${year}-${year + 1}</strong></td>`;
        html += `<td><strong>${formatTotal(
          yearTotals.offCarole
        )}</strong></td>`;
        html += `<td><strong>${formatTotal(
          yearTotals.extraOffCarole
        )}</strong></td>`;
        html += `<td><strong>${formatTotal(yearTotals.centre)}</strong></td>`;
        html += `<td><strong>${formatTotal(yearTotals.avis)}</strong></td>`;
        html += "</tr>";
      } else if (this.viewMode === "2months") {
        // Afficher les 2 mois
        const year = this.currentMonth.getFullYear();
        const month = this.currentMonth.getMonth();
        const nextMonth = month + 1;
        const nextYear = nextMonth > 11 ? year + 1 : year;
        const nextMonthIndex = nextMonth > 11 ? 0 : nextMonth;

        // Premier mois
        const totals1 = this.calculateMonthTotals(year, month);
        html += "<tr>";
        html += `<td>${getMonthNameFr(month)} ${
          month >= 8 ? year : year + 1
        }</td>`;
        html += `<td>${formatTotal(totals1.offCarole)}</td>`;
        html += `<td>${formatTotal(totals1.extraOffCarole)}</td>`;
        html += `<td>${formatTotal(totals1.centre)}</td>`;
        html += `<td>${formatTotal(totals1.avis)}</td>`;
        html += "</tr>";

        // Deuxième mois
        const totals2 = this.calculateMonthTotals(nextYear, nextMonthIndex);
        html += "<tr>";
        html += `<td>${getMonthNameFr(nextMonthIndex)} ${
          nextMonthIndex >= 8 ? nextYear : nextYear + 1
        }</td>`;
        html += `<td>${formatTotal(totals2.offCarole)}</td>`;
        html += `<td>${formatTotal(totals2.extraOffCarole)}</td>`;
        html += `<td>${formatTotal(totals2.centre)}</td>`;
        html += `<td>${formatTotal(totals2.avis)}</td>`;
        html += "</tr>";

        // Ligne de total
        const combinedTotals = {
          offCarole: totals1.offCarole + totals2.offCarole,
          extraOffCarole: totals1.extraOffCarole + totals2.extraOffCarole,
          centre: totals1.centre + totals2.centre,
          avis: totals1.avis + totals2.avis,
        };
        html += '<tr class="fc-summary-total-row">';
        html += "<td><strong>Total</strong></td>";
        html += `<td><strong>${formatTotal(
          combinedTotals.offCarole
        )}</strong></td>`;
        html += `<td><strong>${formatTotal(
          combinedTotals.extraOffCarole
        )}</strong></td>`;
        html += `<td><strong>${formatTotal(
          combinedTotals.centre
        )}</strong></td>`;
        html += `<td><strong>${formatTotal(combinedTotals.avis)}</strong></td>`;
        html += "</tr>";
      } else {
        // Afficher 1 mois
        const year = this.currentMonth.getFullYear();
        const month = this.currentMonth.getMonth();
        const totals = this.calculateMonthTotals(year, month);
        html += "<tr>";
        html += `<td>${getMonthNameFr(month)} ${
          month >= 8 ? year : year + 1
        }</td>`;
        html += `<td>${formatTotal(totals.offCarole)}</td>`;
        html += `<td>${formatTotal(totals.extraOffCarole)}</td>`;
        html += `<td>${formatTotal(totals.centre)}</td>`;
        html += `<td>${formatTotal(totals.avis)}</td>`;
        html += "</tr>";
      }

      html += "</tbody></table>";
      html += "</div>";
      summaryDiv.innerHTML = html;
    }

    renderTwoMonthsView() {
      const year = this.currentMonth.getFullYear();
      const month = this.currentMonth.getMonth();
      const nextMonth = month + 1;
      const nextYear = nextMonth > 11 ? year + 1 : year;
      const nextMonthIndex = nextMonth > 11 ? 0 : nextMonth;

      let html = '<div class="fc-two-months-container">';

      // Premier mois
      html += `<div class="fc-month-container">`;
      html += `<div class="fc-month-title">${getMonthNameFr(month)} ${
        month >= 8 ? year : year + 1
      }</div>`;
      html += this.generateMonthHTML(year, month);
      html += this.generateMonthSummaryHTML(year, month);
      html += `</div>`;

      // Deuxième mois
      html += `<div class="fc-month-container">`;
      html += `<div class="fc-month-title">${getMonthNameFr(nextMonthIndex)} ${
        nextMonthIndex >= 8 ? nextYear : nextYear + 1
      }</div>`;
      html += this.generateMonthHTML(nextYear, nextMonthIndex);
      html += this.generateMonthSummaryHTML(nextYear, nextMonthIndex);
      html += `</div>`;

      html += "</div>";
      this.monthCalendar.innerHTML = html;
    }

    renderYearView() {
      const year = this.currentMonth.getFullYear();
      let html = '<div class="fc-year-container">';
      const schoolYearMonths = [];
      for (let month = 8; month < 12; month++) {
        schoolYearMonths.push({ year, month });
      }
      for (let month = 0; month < 8; month++) {
        schoolYearMonths.push({ year: year + 1, month });
      }

      schoolYearMonths.forEach(({ year: monthYear, month }) => {
        html += `<div class="fc-year-month">`;
        html += `<div class="fc-year-month-title">${getMonthNameFr(
          month
        )} ${monthYear}</div>`;
        html += this.generateMonthHTML(monthYear, month);
        html += this.generateMonthSummaryHTML(monthYear, month);
        html += `</div>`;
      });
      html += "</div>";
      this.monthCalendar.innerHTML = html;
    }

    generateMonthHTML(year, month) {
      // Premier jour du mois et dernier jour
      const firstDay = new Date(year, month, 1);
      const lastDay = new Date(year, month + 1, 0);
      const daysInMonth = lastDay.getDate();
      // Calculer le premier lundi du mois (ou avant si le 1er n'est pas un lundi)
      const firstDayOfWeek =
        firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1; // Lundi = 0
      const startDayOfWeek = firstDayOfWeek; // 0 = Lundi, 4 = Vendredi

      // Noms des jours (uniquement semaine : Lun-Ven)
      const dayNames = ["Lun", "Mar", "Mer", "Jeu", "Ven"];

      let html = '<table class="fc-month-table"><thead><tr>';
      dayNames.forEach((day) => {
        html += `<th>${day}</th>`;
      });
      html += "</tr></thead><tbody>";

      // Jours du mois précédent (si nécessaire) - seulement les jours de semaine
      let dayCount = 0;
      html += "<tr>";
      // On ne remplit que jusqu'à vendredi (5 jours max)
      const daysToFill = Math.min(startDayOfWeek, 5);
      for (let i = 0; i < daysToFill; i++) {
        html += '<td class="fc-day--other-month"></td>';
        dayCount++;
      }

      // Jours du mois actuel (uniquement lundi à vendredi)
      for (let day = 1; day <= daysInMonth; day++) {
        const date = new Date(year, month, day);
        const dayOfWeek = date.getDay(); // 0 = Dimanche, 1 = Lundi, ..., 6 = Samedi

        // Ignorer les samedi (6) et dimanche (0)
        if (dayOfWeek === 0 || dayOfWeek === 6) {
          continue;
        }

        // Nouvelle ligne chaque lundi (quand dayCount est un multiple de 5)
        if (dayCount > 0 && dayCount % 5 === 0) {
          html += "</tr><tr>";
        }

        const isoDate = `${year}-${String(month + 1).padStart(2, "0")}-${String(
          day
        ).padStart(2, "0")}`;

        // Trouver les événements pour ce jour
        const dayEvents = this.events.filter((evt) => evt.date === isoDate);

        let classes = "fc-month-day";
        let hasGarde = false;
        let gardeType = null;
        let hasPepSick = false; // <- ajouté

        dayEvents.forEach((evt) => {
          const classMap = {
            VACANCES_SCOLAIRES: "fc-day--school-holiday",
            PUBLIC_HOLIDAY: "fc-day--public-holiday",
            OFF_CAROLE: "fc-day--off-carole",
            EXTRA_OFF_CAROLE: "fc-day--extra-off-carole",
            // PEP_SICK: "fc-day--pep-sick",
          };

          if (classMap[evt.type]) {
            classes += " " + classMap[evt.type];
          }

          if (GUARDE_TYPES.includes(evt.type)) {
            hasGarde = true;
            gardeType = evt.type;
          }

          if (evt.type === "PEP_SICK") {
            hasPepSick = true;
          }
        });

        if (hasGarde) {
          classes += " fc-day--has-guard";
          if (gardeType === "CENTRE") classes += " fc-day--centre";
          if (gardeType === "AVIS") classes += " fc-day--avis";
        }

        // Construire la cellule avec indicateur congés Alex/Laia
        // (on génère un TD "manuel" pour pouvoir inclure le conteneur)
        const leavesOnDay = this.leaves.filter(
          (lv) => lv.leave_date === isoDate
        );

        let cellInnerHTML = `${day}`;

        if (hasPepSick) {
          cellInnerHTML += `<span class="fc-pep-sick-emoji">🤒</span>`;
        }

        if (leavesOnDay.length > 0) {
          const hasAlex = leavesOnDay.some((lv) => lv.person_id === 2); // Alex
          const hasLaia = leavesOnDay.some((lv) => lv.person_id === 3); // Laia

          let leavesHtml = `<div class="fc-leaves-label-container">`;
          if (hasAlex) leavesHtml += `<span class="fc-leaves-label">AF</span>`;
          if (hasLaia) leavesHtml += `<span class="fc-leaves-label">LM</span>`;
          leavesHtml += `</div>`;

          cellInnerHTML += leavesHtml;
        }

        html += `<td class="${classes}" data-date="${isoDate}">${cellInnerHTML}</td>`;
        dayCount++;
      }

      // Jours du mois suivant (pour compléter la dernière ligne) - seulement jusqu'à vendredi
      const remainingDays = 5 - (dayCount % 5);
      if (remainingDays < 5 && remainingDays > 0) {
        for (let i = 0; i < remainingDays; i++) {
          html += '<td class="fc-day--other-month"></td>';
        }
      }
      html += "</tr></tbody></table>";

      return html;
    }

    handleMonthMouseDown(e) {
      const cell = e.target.closest("td[data-date]");
      if (!cell) return;
      e.preventDefault();
      this.clearMonthSelection();

      this.isMonthSelecting = true;
      cell.classList.add("fc-day--selected");
      this.monthSelectedCells.push(cell);
    }

    handleMonthMouseMove(e) {
      if (!this.isMonthSelecting) return;
      const cell = e.target.closest("td[data-date]");
      if (cell && !this.monthSelectedCells.includes(cell)) {
        cell.classList.add("fc-day--selected");
        this.monthSelectedCells.push(cell);
      }
    }

    handleMonthMouseUp(e) {
      if (!this.isMonthSelecting) return;
      this.isMonthSelecting = false;
      if (this.monthSelectedCells.length === 0) return;

      if (this.monthSelectedCells.length === 1) {
        // Cas 1 jour : logique habituelle
        const date = this.monthSelectedCells[0].dataset.date;
        const eventsOnDay = this.events.filter(
          (evt) => evt.date === date && MODIFIABLE_TYPES.includes(evt.type)
        );
        const conge = eventsOnDay.find((e) => CONGE_TYPES.includes(e.type));
        const garde = eventsOnDay.find((e) => GUARDE_TYPES.includes(e.type));
        const pep = eventsOnDay.find((e) => PEP_TYPES.includes(e.type));
        if (!conge && !garde && !pep) {
          this.showMonthAddMenu(e);
        } else {
          this.showMonthEditMenuForDay(e, { conge, garde, pep, date });
        }
        return;
      }

      // ===== Multi-jours : tentative de bulk edit =====
      const selectedDates = this.monthSelectedCells.map((c) => c.dataset.date);
      const eventsOnDates = this.events.filter(
        (evt) =>
          selectedDates.includes(evt.date) &&
          MODIFIABLE_TYPES.includes(evt.type)
      );

      const conges = eventsOnDates.filter((ev) =>
        CONGE_TYPES.includes(ev.type)
      );
      const gardes = eventsOnDates.filter((ev) =>
        GUARDE_TYPES.includes(ev.type)
      );

      const uniqueCongeTypes = new Set(conges.map((c) => c.type));
      const uniqueGardeTypes = new Set(gardes.map((g) => g.type));

      const allDatesHaveConge =
        conges.length === selectedDates.length && uniqueCongeTypes.size === 1;
      const allDatesHaveGarde =
        gardes.length === selectedDates.length && uniqueGardeTypes.size === 1;

      if (allDatesHaveConge || allDatesHaveGarde) {
        const bulkInfo = {
          selectedDates,
          conges,
          gardes,
          congeType: allDatesHaveConge ? conges[0].type : null,
          gardeType: allDatesHaveGarde ? gardes[0].type : null,
        };
        this.showMonthBulkMenu(e, bulkInfo);
      } else {
        this.showMonthAddMenu(e);
      }
    }

    clearMonthSelection() {
      if (this.monthSelectionMenu) {
        this.monthSelectionMenu.style.display = "none";
      }
      this.monthSelectedCells.forEach((cell) =>
        cell.classList.remove("fc-day--selected")
      );
      this.monthSelectedCells = [];
    }

    showMonthAddMenu(e) {
      if (!this.monthSelectionMenu) return;
      this.monthSelectionMenu.innerHTML = `
        <div class="fc-menu-section"><strong>Ajouter</strong></div>
        <button data-action="add" data-type="OFF_CAROLE" data-person="Carole">Off Carole</button>
        <button data-action="add" data-type="EXTRA_OFF_CAROLE" data-person="Carole">Extra Off Carole</button>
        <div class="fc-menu-section"><strong>Mode de Garde</strong></div>
        <button data-action="add" data-type="CENTRE">Centre</button>
        <button data-action="add" data-type="AVIS">Avis</button>
        <div class="fc-menu-section"><strong>Pep</strong></div>
        <button data-action="add" data-type="PEP_SICK">Pep malade</button>
      `;
      this.positionAndShowMonthMenu(e);
    }

    showMonthEditMenuForDay(e, { conge, garde, pep, date }) {
      if (!this.monthSelectionMenu) return;

      // --- Section congé Carole ---
      let congeSection = "";
      if (conge) {
        const oppositeConge =
          conge.type === "OFF_CAROLE" ? "EXTRA_OFF_CAROLE" : "OFF_CAROLE";
        congeSection = `
      <div class="fc-menu-section"><strong>Congé Carole</strong></div>
      <button data-action="update" data-event-id="${
        conge.id
      }" data-new-type="${oppositeConge}">
        Remplacer par ${oppositeConge.replace(/_/g, " ")}
      </button>
      <button data-action="delete" data-event-id="${conge.id}">
        Supprimer le congé
      </button>
    `;
      } else {
        congeSection = `
      <div class="fc-menu-section"><strong>Ajouter un congé</strong></div>
      <button data-action="add-single" data-type="OFF_CAROLE" data-date="${date}" data-person="Carole">
        Off Carole
      </button>
      <button data-action="add-single" data-type="EXTRA_OFF_CAROLE" data-date="${date}" data-person="Carole">
        Extra Off Carole
      </button>
    `;
      }

      // --- Section mode de garde ---
      let gardeSection = "";
      if (garde) {
        const oppositeGarde = garde.type === "CENTRE" ? "AVIS" : "CENTRE";
        gardeSection = `
      <div class="fc-menu-section"><strong>Mode de garde</strong></div>
      <button data-action="update" data-event-id="${garde.id}" data-new-type="${oppositeGarde}">
        Remplacer par ${oppositeGarde}
      </button>
      <button data-action="delete" data-event-id="${garde.id}">
        Supprimer le mode de garde
      </button>
    `;
      } else {
        gardeSection = `
      <div class="fc-menu-section"><strong>Ajouter mode de garde</strong></div>
      <button data-action="add-single" data-type="CENTRE" data-date="${date}">
        Centre
      </button>
      <button data-action="add-single" data-type="AVIS" data-date="${date}">
        Avis
      </button>
    `;
      }

      // --- Section Pep malade ---
      let pepSection = "";
      if (pep) {
        pepSection = `
      <div class="fc-menu-section"><strong>Pep</strong></div>
      <button data-action="delete" data-event-id="${pep.id}">
        Supprimer "Pep malade"
      </button>
    `;
      } else {
        pepSection = `
      <div class="fc-menu-section"><strong>Pep</strong></div>
      <button data-action="add-single" data-type="PEP_SICK" data-date="${date}">
        Marquer Pep malade
      </button>
    `;
      }

      // --- Section congés Alex / Laia ---
      const leavesOnDay = (this.leaves || []).filter(
        (lv) => lv.leave_date === date
      );

      let leavesSection = `
    <div class="fc-menu-section"><strong>Congés Alex / Laia</strong></div>
    <button data-action="add-leave" data-date="${date}" data-person-id="2" data-leave-type="CP">
      Alex - CP
    </button>
    <button data-action="add-leave" data-date="${date}" data-person-id="2" data-leave-type="JRA">
      Alex - JRA
    </button>
    <button data-action="add-leave" data-date="${date}" data-person-id="2" data-leave-type="JA">
      Alex - JA
    </button>
    <button data-action="add-leave" data-date="${date}" data-person-id="3" data-leave-type="CP">
      Laia - CP
    </button>
    <button data-action="add-leave" data-date="${date}" data-person-id="3" data-leave-type="JRA">
      Laia - JRA
    </button>
    <button data-action="add-leave" data-date="${date}" data-person-id="3" data-leave-type="JA">
      Laia - JA
    </button>
  `;

      if (leavesOnDay.length > 0) {
        leavesSection += `
      <button data-action="delete-leaves-day" data-date="${date}">
        Supprimer les congés Alex/Laia ce jour-là
      </button>
    `;
      }

      // --- Assemblage du menu ---
      this.monthSelectionMenu.innerHTML =
        congeSection + gardeSection + pepSection + leavesSection;
      this.positionAndShowMonthMenu(e);
    }

    showMonthBulkMenu(e, bulkInfo) {
      if (!this.monthSelectionMenu) return;

      const { selectedDates, conges, gardes, congeType, gardeType } = bulkInfo;
      const nbDays = selectedDates.length;

      let html =
        '<div class="fc-menu-section"><strong>Actions multi-jours</strong></div>';

      if (congeType) {
        const oppositeConge =
          congeType === "OFF_CAROLE" ? "EXTRA_OFF_CAROLE" : "OFF_CAROLE";
        html += `
      <div class="fc-menu-section"><strong>Congés Carole (${nbDays} jours)</strong></div>
      <button
        data-action="bulk-update-conge"
        data-new-type="${oppositeConge}"
        data-target="conge"
      >
        Remplacer ${congeType.replace(/_/g, " ")} par ${oppositeConge.replace(
          /_/g,
          " "
        )} sur ${nbDays} jours
      </button>
      <button
        data-action="bulk-delete-conge"
        data-target="conge"
      >
        Supprimer le congé sur ${nbDays} jours
      </button>
    `;
      }

      if (gardeType) {
        const oppositeGarde = gardeType === "CENTRE" ? "AVIS" : "CENTRE";
        html += `
      <div class="fc-menu-section"><strong>Mode de garde (${nbDays} jours)</strong></div>
      <button
        data-action="bulk-update-garde"
        data-new-type="${oppositeGarde}"
        data-target="garde"
      >
        Remplacer ${gardeType} par ${oppositeGarde} sur ${nbDays} jours
      </button>
      <button
        data-action="bulk-delete-garde"
        data-target="garde"
      >
        Supprimer le mode de garde sur ${nbDays} jours
      </button>
    `;
      }

      this.monthSelectionMenu.innerHTML = html;
      // On réutilise la même propriété que pour le planning hebdo :
      this._currentBulkInfo = bulkInfo;
      this.positionAndShowMonthMenu(e);
    }

    positionAndShowMonthMenu(e) {
      if (!this.monthSelectionMenu) return;
      const wrapper =
        document.querySelector(".fc-month-calendar-wrapper") || document.body;
      const rect = wrapper.getBoundingClientRect();

      this.monthSelectionMenu.style.display = "block";
      this.monthSelectionMenu.style.left = `${e.clientX - rect.left + 5}px`;
      this.monthSelectionMenu.style.top = `${e.clientY - rect.top + 5}px`;

      this.menuJustOpened = true;
      setTimeout(() => {
        this.menuJustOpened = false;
      }, 0);
    }

    async handleMonthMenuClick(e) {
      const button = e.target.closest("button[data-action]");
      if (!button) return;

      const { action, eventId, newType, type, person, date } = button.dataset;

      // Réutiliser la même logique que handleMenuClick mais avec monthSelectedCells
      if (action === "add") {
        const selectedDates = this.monthSelectedCells.map(
          (c) => c.dataset.date
        );
        const existingOnDates = this.dbEvents.filter((evt) =>
          selectedDates.includes(evt.date)
        );

        if (CONGE_TYPES.includes(type)) {
          const hasCongeConflict = existingOnDates.some((evt) =>
            CONGE_TYPES.includes(evt.type)
          );
          if (hasCongeConflict) {
            alert(
              "Impossible d'ajouter un congé : au moins une date a déjà un congé (Off/Extra Off)."
            );
            this.clearMonthSelection();
            return;
          }
        } else if (GUARDE_TYPES.includes(type)) {
          const hasGardeConflict = existingOnDates.some((evt) =>
            GUARDE_TYPES.includes(evt.type)
          );
          if (hasGardeConflict) {
            alert(
              "Impossible d'ajouter un mode de garde : au moins une date a déjà Centre/Avis."
            );
            this.clearMonthSelection();
            return;
          }
        }

        const newEvents = this.monthSelectedCells.map((cell) => ({
          date: cell.dataset.date,
          type,
          person,
          duration: 1.0,
        }));

        this.clearMonthSelection();

        try {
          const response = await fetch(
            "/modules/family-calendar/includes/api/save-events.php",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify(newEvents),
            }
          );
          if (!response.ok) {
            throw new Error("Erreur HTTP " + response.status);
          }

          const resEvents = await fetch(
            "/modules/family-calendar/includes/api/get-events.php"
          );
          if (!resEvents.ok) {
            throw new Error("Erreur lors du rechargement des événements.");
          }
          const dataEvents = await resEvents.json();

          this.dbEvents = dataEvents.events || [];
          this.events = [...this.dbEvents, ...this.fixedEvents];

          this.reprocessAndRender();
          this.renderMonthCalendar();
        } catch (err) {
          console.error(err);
          alert("Erreur lors de l'ajout.");
        }
        return;
      }

      if (action === "add-single") {
        const targetDate = date;
        const existingOnDate = this.dbEvents.filter(
          (evt) => evt.date === targetDate
        );

        if (CONGE_TYPES.includes(type)) {
          const hasCongeConflict = existingOnDate.some((evt) =>
            CONGE_TYPES.includes(evt.type)
          );
          if (hasCongeConflict) {
            alert("Un congé existe déjà ce jour-là.");
            this.clearMonthSelection();
            return;
          }
        } else if (GUARDE_TYPES.includes(type)) {
          const hasGardeConflict = existingOnDate.some((evt) =>
            GUARDE_TYPES.includes(evt.type)
          );
          if (hasGardeConflict) {
            alert("Un mode de garde existe déjà ce jour-là.");
            this.clearMonthSelection();
            return;
          }
        }

        const newEvent = {
          date: targetDate,
          type,
          person,
          duration: 1.0,
        };

        this.clearMonthSelection();

        try {
          const response = await fetch(
            "/modules/family-calendar/includes/api/save-events.php",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify([newEvent]),
            }
          );
          if (!response.ok) {
            throw new Error("Erreur HTTP " + response.status);
          }

          const resEvents = await fetch(
            "/modules/family-calendar/includes/api/get-events.php"
          );
          if (!resEvents.ok) {
            throw new Error("Erreur lors du rechargement des événements.");
          }
          const dataEvents = await resEvents.json();

          this.dbEvents = dataEvents.events || [];
          this.events = [...this.dbEvents, ...this.fixedEvents];

          this.reprocessAndRender();
          this.renderMonthCalendar();
        } catch (err) {
          console.error(err);
          alert("Erreur lors de l'ajout.");
        }
        return;
      }

      if (action === "delete") {
        if (!eventId) {
          this.clearMonthSelection();
          return;
        }

        this.clearMonthSelection();

        try {
          const response = await fetch(
            "/modules/family-calendar/includes/api/manage-event.php",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ action: "delete", event_id: eventId }),
            }
          );
          if (!response.ok) {
            const errData = await response.json().catch(() => ({}));
            throw new Error(
              errData.message || "Erreur HTTP " + response.status
            );
          }

          const resEvents = await fetch(
            "/modules/family-calendar/includes/api/get-events.php"
          );
          if (!resEvents.ok) {
            throw new Error("Erreur lors du rechargement des événements.");
          }
          const dataEvents = await resEvents.json();

          this.dbEvents = dataEvents.events || [];
          this.events = [...this.dbEvents, ...this.fixedEvents];

          this.reprocessAndRender();
          this.renderMonthCalendar();
        } catch (err) {
          console.error(err);
          alert("Erreur lors de la suppression : " + err.message);
        }
        return;
      }

      if (action === "update") {
        if (!eventId) {
          this.clearMonthSelection();
          return;
        }

        this.clearMonthSelection();

        try {
          const response = await fetch(
            "/modules/family-calendar/includes/api/manage-event.php",
            {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                action: "update",
                event_id: eventId,
                new_type: newType,
              }),
            }
          );
          if (!response.ok) {
            const errData = await response.json().catch(() => ({}));
            throw new Error(
              errData.message || "Erreur HTTP " + response.status
            );
          }

          const resEvents = await fetch(
            "/modules/family-calendar/includes/api/get-events.php"
          );
          if (!resEvents.ok) {
            throw new Error("Erreur lors du rechargement des événements.");
          }
          const dataEvents = await resEvents.json();

          this.dbEvents = dataEvents.events || [];
          this.events = [...this.dbEvents, ...this.fixedEvents];

          this.reprocessAndRender();
          this.renderMonthCalendar();
        } catch (err) {
          console.error("[UPDATE] Erreur lors de la modification :", err);
          alert("Erreur lors de la modification : " + err.message);
        }
        return;
      }
    }
  }

  function getWeekOfYear(date) {
    const d = new Date(
      Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())
    );
    d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
    const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
    return Math.ceil(((d - yearStart) / 86400000 + 1) / 7);
  }

  function getMonthNameFr(monthIndex) {
    return (
      [
        "Janvier",
        "Fevrier",
        "Mars",
        "Avril",
        "Mai",
        "Juin",
        "Juillet",
        "Aout",
        "Septembre",
        "Octobre",
        "Novembre",
        "Decembre",
      ][monthIndex] || ""
    );
  }

  new FamilyCalendar();
});