document.addEventListener('DOMContentLoaded', function () {
  initializeCalendarFunctionality();
}, { once: true });

window.addEventListener('pageshow', function () {
  if (!document.getElementById('calendarDays')) return;
  if (!window.__fbCalendarInit) { initializeCalendarFunctionality(); return; }
  if (typeof window.__fbCalendarRehydrate === 'function') window.__fbCalendarRehydrate();
});

window.initializeCalendarFunctionality = function() {
  if (window.__fbCalendarInit) return;
  window.__fbCalendarInit = true;

  const baseDate = new Date();
  baseDate.setHours(0, 0, 0, 0);
  let isBootstrapping = false;
  let geslotenDagen = [];
  let currentView = 'calendar';
  let latestTimeSlotsRequestId = 0;
  let rehydrateScheduled = false;

  async function loadGeslotenDagen() {
    try {
      const response = await fetch('https://frameblinds.nl/agendas/geslotendagen_showroom.json', { cache: 'no-store' });
      if (response.ok) {
        const data = await response.json();
        if (Array.isArray(data)) {
          geslotenDagen = data;
        }
      }
    } catch (e) {}
  }

  function formatLocalYMD(date) {
    const y = date.getFullYear();
    const m = String(date.getMonth() + 1).padStart(2, '0');
    const d = String(date.getDate()).padStart(2, '0');
    return `${y}-${m}-${d}`;
  }

  function parseLocalYMD(ymd) {
    const [y, m, d] = ymd.split('-').map(Number);
    const dt = new Date(y, m - 1, d);
    dt.setHours(0, 0, 0, 0);
    return dt;
  }

  function isDatumGesloten(date) {
    return geslotenDagen.includes(formatLocalYMD(date));
  }

  function showFridayModal() {
    // Controleer of de modal al bestaat, anders maak hem aan
    let modal = document.getElementById('fridayShowroomModal');
    if (!modal) {
      modal = document.createElement('div');
      modal.id = 'fridayShowroomModal';
      modal.className = 'modal fade';
      modal.setAttribute('tabindex', '-1');
      modal.setAttribute('aria-labelledby', 'fridayShowroomModalLabel');
      modal.setAttribute('aria-hidden', 'true');
      modal.innerHTML = `
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="fridayShowroomModalLabel">Vrijdag - Vrije inloop</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Sluiten"></button>
            </div>
            <div class="modal-body">
              <p class="mb-3">Er hoeft op vrijdag geen afspraak gemaakt te worden. Je bent van harte welkom van <strong>09:00 - 17:00</strong> op de <strong>Zaagmolenlaan 4</strong> in Woerden.</p>
              <p class="text-muted small mb-0">Je kunt gewoon binnenlopen zonder afspraak te maken.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Begrepen</button>
            </div>
          </div>
        </div>
      `;
      document.body.appendChild(modal);
    }
    
    // Toon de modal met Bootstrap
    if (window.bootstrap && typeof window.bootstrap.Modal === 'function') {
      const bsModal = new window.bootstrap.Modal(modal);
      bsModal.show();
    } else {
      // Fallback als Bootstrap nog niet geladen is
      modal.style.display = 'block';
      modal.classList.add('show');
      modal.setAttribute('aria-hidden', 'false');
      const backdrop = document.createElement('div');
      backdrop.className = 'modal-backdrop fade show';
      backdrop.id = 'fridayModalBackdrop';
      document.body.appendChild(backdrop);
      
      // Sluit functionaliteit toevoegen
      const closeBtn = modal.querySelector('.btn-close, .btn-primary');
      if (closeBtn) {
        closeBtn.addEventListener('click', () => {
          modal.style.display = 'none';
          modal.classList.remove('show');
          modal.setAttribute('aria-hidden', 'true');
          const backdropEl = document.getElementById('fridayModalBackdrop');
          if (backdropEl) backdropEl.remove();
        });
      }
    }
  }

  const minDate = new Date(baseDate);
  minDate.setDate(minDate.getDate() + 2);

  let currentDate = new Date(minDate);
  let selectedDate = null;

  const monthNames = ['januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december'];
  const dayNames = ['zondag','maandag','dinsdag','woensdag','donderdag','vrijdag','zaterdag'];

  const APPOINTMENT_STATE_KEY = '__fbAppointmentSelection';
  const APPOINTMENT_STORAGE_KEY = '__fbAppointmentSelectionStorage';

  function getAppointmentState() {
    if (!window[APPOINTMENT_STATE_KEY]) {
      try {
        const stored = sessionStorage.getItem(APPOINTMENT_STORAGE_KEY);
        if (stored) {
          sessionStorage.removeItem(APPOINTMENT_STORAGE_KEY);
          const parsed = JSON.parse(stored);
          if (parsed && parsed.dateYMD) {
            const sameOrigin = parsed.origin && parsed.origin === (window.location.pathname || '');
            if (!sameOrigin) {
              window[APPOINTMENT_STATE_KEY] = {
                dateYMD: parsed.dateYMD,
                time: parsed.time || null,
                dateOnly: !!parsed.dateOnly,
                user: parsed.user || null
              };
            }
          }
        }
      } catch (e) {
        try { sessionStorage.removeItem(APPOINTMENT_STORAGE_KEY); } catch (_) {}
      }
    }
    const state = window[APPOINTMENT_STATE_KEY];
    if (!state || !state.dateYMD) return null;
    return {
      dateYMD: state.dateYMD,
      time: state.time || null,
      dateOnly: !!state.dateOnly,
      user: state.user || null
    };
  }

  function saveAppointmentToCookie(date, time, user) {
    const normalized = new Date(date);
    normalized.setHours(0, 0, 0, 0);
    const state = {
      dateYMD: formatLocalYMD(normalized),
      time: time || null,
      dateOnly: !time,
      user: user || null
    };
    window[APPOINTMENT_STATE_KEY] = state;
    try {
      const payload = { ...state, origin: window.location.pathname || '' };
      sessionStorage.setItem(APPOINTMENT_STORAGE_KEY, JSON.stringify(payload));
    } catch (e) {}
  }

  function loadAppointmentFromCookie() {
    const state = getAppointmentState();
    if (state) {
      selectedDate = parseLocalYMD(state.dateYMD);
      updateSelectedDateDisplay();
      return { has: true, time: state.time, dateOnly: state.dateOnly };
    }
    return { has: false, time: null, dateOnly: false };
  }

  function clearAppointmentCookies() {
    delete window[APPOINTMENT_STATE_KEY];
    document.cookie = 'afspraak_selectedDate=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;SameSite=Lax';
    document.cookie = 'afspraak_selectedTime=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;SameSite=Lax';
    document.cookie = 'afspraak_appointmentComplete=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;SameSite=Lax';
    document.cookie = 'afspraak_dateOnly=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;SameSite=Lax';
    try { sessionStorage.removeItem(APPOINTMENT_STORAGE_KEY); } catch (e) {}
    selectedDate = null;
    updateSelectedDateDisplay();
    document.querySelectorAll('.calendar-day.selected').forEach(el => el.classList.remove('selected'));
    document.querySelectorAll('.time-slot.selected').forEach(el => el.classList.remove('selected'));
    renderTimeSlots(null);
  }

  function isMobile(){ return window.innerWidth < 768; }
  function mondayStartOffset(d){ return (d.getDay() + 6) % 7; }

  function firstVisibleDate(year, month){
    const first = new Date(year, month, 1);
    const offset = mondayStartOffset(first);
    const start = new Date(year, month, 1);
    start.setDate(1 - offset);
    start.setHours(0,0,0,0);
    return start;
  }

  function sameDay(a,b){
    return a.getFullYear()===b.getFullYear() && a.getMonth()===b.getMonth() && a.getDate()===b.getDate();
  }

  function renderCalendar(){
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth();

    const prevBtn = document.getElementById('prevMonth');
    const nextBtn = document.getElementById('nextMonth');

    if(prevBtn){
      const firstOfView = new Date(year, month, 1);
      const firstOfMin  = new Date(minDate.getFullYear(), minDate.getMonth(), 1);
      prevBtn.style.visibility = firstOfView <= firstOfMin ? 'hidden' : 'visible';
    }
    if(nextBtn){ nextBtn.style.visibility = 'visible'; }

    const currentMonthElement = document.getElementById('currentMonth');
    if(currentMonthElement){ currentMonthElement.textContent = `${monthNames[month]} ${year}`; }

    const calendarDays = document.getElementById('calendarDays');
    if(!calendarDays) {
      // Kalender element bestaat nog niet, probeer later opnieuw
      setTimeout(() => {
        if(document.getElementById('calendarDays')) renderCalendar();
      }, 100);
      return;
    }
    
    // Zorg dat kalender altijd wordt gerenderd, ook als panel verborgen is
    calendarDays.innerHTML = '';

    const startDate = firstVisibleDate(year, month);
    const timeSlotsContainer = document.querySelector('.time-slots-container');
    
    // Check of dit een showroom afspraak is
    const isShowroom = 'showroom' === 'showroom';

    for(let i=0;i<35;i++){
      const date = new Date(startDate);
      date.setDate(startDate.getDate() + i);

      const dayEl = document.createElement('div');
      dayEl.className = 'calendar-day';
      dayEl.textContent = date.getDate();

      if(date.getMonth() !== month){
        dayEl.classList.add('other-month');
      }

      const cmpDate = new Date(date);
      cmpDate.setHours(0,0,0,0);
      const closed = isDatumGesloten(cmpDate);
      const isFriday = date.getDay() === 5; // 5 = vrijdag
      const isFridayAndShowroom = isShowroom && isFriday;

      if(cmpDate < minDate){
        dayEl.classList.remove('calendar-day');
        dayEl.classList.add('dayblock','other-month');
        dayEl.style.cursor = 'not-allowed';
        dayEl.style.opacity = '0.4';
      } else if (closed && !isFridayAndShowroom) {
        dayEl.classList.remove('calendar-day');
        dayEl.classList.add('dayblock');
        dayEl.style.cursor = 'not-allowed';
        dayEl.style.opacity = '0.4';
        dayEl.setAttribute('data-bs-toggle', 'tooltip');
        dayEl.setAttribute('data-bs-title', 'Helaas, geen beschikbare tijdsloten op deze dag');
        dayEl.setAttribute('data-bs-placement', 'top');
      } else {
        dayEl.style.cursor = 'pointer';
        dayEl.style.opacity = '1';
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        if(cmpDate.getTime() === today.getTime()) {
          dayEl.classList.add('today');
        }
      }

      if(!(isMobile() && !timeSlotsContainer) && selectedDate && sameDay(date, selectedDate)){
        dayEl.classList.add('selected');
      }

      if (!closed || isFridayAndShowroom) {
        dayEl.addEventListener('click', () => {
          const isFutureOrToday = cmpDate >= minDate;
          if(isFutureOrToday){
            // Als het een vrijdag is bij showroom afspraak, toon modal
            if (isFridayAndShowroom) {
              showFridayModal();
              return;
            }
            
            selectedDate = new Date(date);
            selectedDate.setHours(0,0,0,0);
            updateSelectedDateDisplay();
            saveAppointmentToCookie(selectedDate, null, null);
            document.querySelectorAll('.time-slot.selected').forEach(el => el.classList.remove('selected'));
            
            if (timeSlotsContainer) {
              showTimeSlotsView();
            } else {
              if (isMobile()) {
                // Op mobiel: toon tijdsloten panel na datum selectie
                showTimeSlotsViewMobile();
              } else {
                // Op desktop: render calendar en toon tijdsloten
                renderCalendar();
                renderTimeSlots(selectedDate);
              }
            }
            
            // Update mobiel flow na datum selectie
            if (typeof setupMobileFlow === 'function') {
              setTimeout(() => setupMobileFlow(), 50);
            }
          }
        });
      }

      calendarDays.appendChild(dayEl);
    }

    if (window.bootstrap && typeof window.bootstrap.Tooltip === 'function') {
      const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
      tooltipTriggerList.forEach(function (tooltipTriggerEl) {
        new window.bootstrap.Tooltip(tooltipTriggerEl);
      });
    }
  }

  async function fetchAvailableSlots(dateObj){
    try {
      const dateStr = formatLocalYMD(dateObj);
      const res = await fetch(`https://frameblinds.nl/calendar-fetch.php?date=${encodeURIComponent(dateStr)}&gebruiker=&type=showroom`, { cache: 'no-store' });
      if (!res.ok) return [];
      const data = await res.json();
      if (!Array.isArray(data)) return [];
      return data.filter(s => s && s.available === true && typeof s.start === 'string');
    } catch (e) {
      return [];
    }
  }

  function findFirstAvailableDate() {
    const isShowroom = 'showroom' === 'showroom';
    let checkDate = new Date(minDate);
    checkDate.setHours(0, 0, 0, 0);
    
    // Check maximaal 60 dagen vooruit
    for (let i = 0; i < 60; i++) {
      const testDate = new Date(checkDate);
      testDate.setDate(checkDate.getDate() + i);
      testDate.setHours(0, 0, 0, 0);
      
      const closed = isDatumGesloten(testDate);
      const isFriday = testDate.getDay() === 5;
      const isFridayAndShowroom = isShowroom && isFriday;
      
      if (!closed || isFridayAndShowroom) {
        return testDate;
      }
    }
    return null;
  }

async function renderTimeSlots(dateArg){
  const timeSlots = document.getElementById('timeSlots');
  if(!timeSlots) return;
  timeSlots.innerHTML = '';

  let dateToUse = dateArg instanceof Date ? dateArg : selectedDate;
  
  // Toon tijdsloten container als er een datum is
  const timePlaceholder = document.getElementById('timePlaceholder');
  const timeSelectionSummary = document.getElementById('timeSelectionSummary');
  
  if (dateToUse instanceof Date) {
    // Toon tijdsloten grid
    timeSlots.style.display = 'grid';
    if (timePlaceholder) timePlaceholder.style.display = 'none';
  } else {
    // Verberg tijdsloten grid
    timeSlots.style.display = 'none';
    if (timePlaceholder) timePlaceholder.style.display = 'block';
    if (timeSelectionSummary) timeSelectionSummary.style.display = 'none';
    return;
  }


  const loading = document.createElement('div');
  loading.className = 'time-slot-loading';
  loading.textContent = 'Tijden laden…';
  timeSlots.appendChild(loading);

  const requestId = ++latestTimeSlotsRequestId;
  if (!(dateToUse instanceof Date)) {
    loading.remove();
    const empty = document.createElement('div');
    empty.className = 'time-slot-empty';
    timeSlots.appendChild(empty);
    return;
  }

  // Op desktop: als we de eerste mogelijke datum gebruiken, check of er slots zijn
  // Als er geen slots zijn, probeer de volgende beschikbare datum
  let slots = await fetchAvailableSlots(dateToUse);
  if (requestId !== latestTimeSlotsRequestId) return;
  
  // Op desktop: als er geen slots zijn en we de eerste mogelijke datum gebruiken, zoek verder
  if (!slots.length && !isMobile() && !dateArg && !selectedDate) {
    let nextDate = new Date(dateToUse);
    nextDate.setDate(nextDate.getDate() + 1);
    nextDate.setHours(0, 0, 0, 0);
    
    // Probeer maximaal 30 dagen verder
    for (let i = 0; i < 30; i++) {
      const testDate = new Date(nextDate);
      testDate.setDate(nextDate.getDate() + i);
      testDate.setHours(0, 0, 0, 0);
      
      const closed = isDatumGesloten(testDate);
      const isShowroom = 'showroom' === 'showroom';
      const isFriday = testDate.getDay() === 5;
      const isFridayAndShowroom = isShowroom && isFriday;
      
      if (!closed || isFridayAndShowroom) {
        const testSlots = await fetchAvailableSlots(testDate);
        if (requestId !== latestTimeSlotsRequestId) return;
        if (testSlots.length > 0) {
          dateToUse = testDate;
          slots = testSlots;
          break;
        }
      }
    }
  }

  loading.remove();

  // HIER: weekdag bepalen
  const weekdag = dayNames[dateToUse.getDay()]; // zondag t/m zaterdag

  if (!slots.length) {
    const empty = document.createElement('div');
    empty.className = 'time-slot-empty';

    if (weekdag === 'vrijdag') {
      empty.textContent = 'Op vrijdagen hebben wij vrije inloop van 09:00 tot 17:00. Je hoeft geen afspraak te maken.';
    } else {
      empty.textContent = 'Geen tijden beschikbaar voor deze datum.';
    }

    timeSlots.appendChild(empty);
    return;
  }

  // Limiet van maximaal 15 tijdsloten - willekeurig selecteren als er meer zijn
  let slotsToShow = slots;
  if (slots.length > 15) {
    // Shuffle array en neem eerste 15
    slotsToShow = [...slots].sort(() => Math.random() - 0.5).slice(0, 15);
    // Sorteer daarna op tijd voor betere UX
    slotsToShow.sort((a, b) => {
      const timeA = a.start.split(':').map(Number);
      const timeB = b.start.split(':').map(Number);
      return (timeA[0] * 60 + timeA[1]) - (timeB[0] * 60 + timeB[1]);
    });
  }

    slotsToShow.forEach(s => {
      const time = s.start;
      const user = s.user || null;
      const slot = document.createElement('div');
      slot.className = 'time-slot';
      slot.textContent = time;
      slot.addEventListener('click', () => {
        document.querySelectorAll('.time-slot.selected').forEach(el => el.classList.remove('selected'));
        slot.classList.add('selected');
        saveAppointmentToCookie(selectedDate, time, user);
        if (typeof updateAppointmentSummary === 'function') {
          const selText = document.getElementById('selectedDate')?.textContent || '';
          updateAppointmentSummary(selText, time);
        }
        // Update summary display
        const summaryEl = document.getElementById('selectedDateTime');
        if (summaryEl && selectedDate) {
          const dayNames = ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'];
          const monthNames = ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'];
          const dayName = dayNames[selectedDate.getDay()];
          const day = selectedDate.getDate();
          const month = monthNames[selectedDate.getMonth()];
          summaryEl.textContent = `${dayName} ${day} ${month} om ${time}`;
          const summaryContainer = document.getElementById('timeSelectionSummary');
          if (summaryContainer) summaryContainer.style.display = 'block';
        }
        // Automatisch doorgaan naar volgende stap (gegevens invoeren)
        if(typeof nextStep === 'function'){ 
          setTimeout(() => nextStep(), 500); 
        } else { 
          setTimeout(() => { window.location.href = 'bestellen/meetafspraak?step=2'; }, 500); 
        }
      });
      timeSlots.appendChild(slot);
    });
  }

  function updateSelectedDateDisplay(){
    const el = document.getElementById('selectedDate');
    if(!el) return;
    if (!selectedDate) {
      el.textContent = '';
      return;
    }
    const dayName = dayNames[selectedDate.getDay()];
    const day = selectedDate.getDate();
    const month = monthNames[selectedDate.getMonth()];
    el.textContent = `${dayName} ${day} ${month}`;
  }

  function showTimeSlotsView(){
    const calendarContainer = document.querySelector('.calendar-container');
    const timeSlotsContainer = document.querySelector('.time-slots-container');
    if(!calendarContainer || !timeSlotsContainer) return;
    if (currentView === 'times') return;
    currentView = 'times';
    calendarContainer.style.display = 'none';
    timeSlotsContainer.style.display = 'block';
    renderTimeSlots(selectedDate);
  }

  function showTimeSlotsViewMobile(){
    // Op mobiel: verberg kalender en toon alleen tijdsloten
    const timePlaceholder = document.getElementById('timePlaceholder');
    const timeSlotsEl = document.getElementById('timeSlots');
    const timePanel = document.querySelector('.panel-times');
    const calendarPanel = document.querySelector('.panel-calendar');
    
    if(!timeSlotsEl || !selectedDate) return;
    
    // Verberg kalender panel op mobiel
    if (calendarPanel) {
      calendarPanel.style.display = 'none';
    }
    
    // Toon tijdsloten panel op mobiel
    if (timePanel) {
      timePanel.style.display = 'flex';
    }
    
    if (timePlaceholder) timePlaceholder.style.display = 'none';
    timeSlotsEl.style.display = 'grid';
    
    renderTimeSlots(selectedDate);
  }

  // Sla event listener functies op zodat we ze kunnen verwijderen
  let prevMonthHandler = null;
  let nextMonthHandler = null;

  function bindMonthNavigationButtons() {
    const prevMonthBtn = document.getElementById('prevMonth');
    const nextMonthBtn = document.getElementById('nextMonth');
    
    // Verwijder oude event listeners als ze bestaan
    if (prevMonthBtn && prevMonthHandler) {
      prevMonthBtn.removeEventListener('click', prevMonthHandler);
    }
    if (nextMonthBtn && nextMonthHandler) {
      nextMonthBtn.removeEventListener('click', nextMonthHandler);
    }
    
    // Maak nieuwe event listener functies
    prevMonthHandler = () => {
      currentDate.setMonth(currentDate.getMonth() - 1);
      renderCalendar();
    };
    
    nextMonthHandler = () => {
      currentDate.setMonth(currentDate.getMonth() + 1);
      renderCalendar();
    };
    
    // Bind nieuwe event listeners
    if (prevMonthBtn) {
      prevMonthBtn.addEventListener('click', prevMonthHandler);
      prevMonthBtn.dataset.bound = '1';
    }
    
    if (nextMonthBtn) {
      nextMonthBtn.addEventListener('click', nextMonthHandler);
      nextMonthBtn.dataset.bound = '1';
    }
  }

  function showCalendarView(){
    const calendarContainer = document.querySelector('.calendar-container');
    const timeSlotsContainer = document.querySelector('.time-slots-container');
    if(!calendarContainer || !timeSlotsContainer) return;
    if (currentView === 'calendar') return;
    currentView = 'calendar';
    calendarContainer.style.display = 'block';
    timeSlotsContainer.style.display = 'none';
    bindMonthNavigationButtons();
    renderCalendar();
  }

  function showCalendarViewMobile(){
    // Op mobiel: verberg tijdsloten en toon alleen kalender
    const timePlaceholder = document.getElementById('timePlaceholder');
    const timeSlotsEl = document.getElementById('timeSlots');
    const timePanel = document.querySelector('.panel-times');
    const calendarPanel = document.querySelector('.panel-calendar');
    
    if(!timeSlotsEl) return;
    
    // Toon kalender panel op mobiel
    if (calendarPanel) {
      calendarPanel.style.display = 'flex';
    }
    
    // Verberg tijdsloten panel op mobiel
    if (timePanel) timePanel.style.display = 'none';
    if (timePlaceholder) timePlaceholder.style.display = 'block';
    timeSlotsEl.style.display = 'none';
    
    // Reset selected time (maar behoud datum voor UX)
    document.querySelectorAll('.time-slot.selected').forEach(el => el.classList.remove('selected'));
    
    bindMonthNavigationButtons();
    renderCalendar();
  }

  // Bind event listeners bij initialisatie
  bindMonthNavigationButtons();

  function isVisible(el){
    if (!el) return false;
    const cs = getComputedStyle(el);
    if (cs.display === 'none' || cs.visibility === 'hidden') return false;
    return el.getClientRects().length > 0;
  }

  function scheduleRehydrate(){
    if (rehydrateScheduled) return;
    rehydrateScheduled = true;
    requestAnimationFrame(() => {
      rehydrateScheduled = false;
      const calendarContainer = document.querySelector('.calendar-container') || document.querySelector('.calendar-widget');
      const calendarDays = document.getElementById('calendarDays');
      if (calendarContainer && isVisible(calendarContainer) && calendarDays && calendarDays.childElementCount === 0) {
        currentView = 'calendar';
        renderCalendar();
        updateSelectedDateDisplay();
      }
    });
  }

  function startCalendarObserver(){
    if (window.__fbCalMO) return;
    const target = document.body;
    const mo = new MutationObserver(() => scheduleRehydrate());
    mo.observe(target, { subtree: true, childList: true, attributes: true, attributeFilter: ['style','class'] });
    window.__fbCalMO = mo;
  }

  if(document.getElementById('calendarDays')){
    const timeSlotsContainer = document.querySelector('.time-slots-container');
    if(!timeSlotsContainer && isMobile()){
      const timeSlotsEl = document.getElementById('timeSlots');
      const selDateEl = document.getElementById('selectedDate');
      if(timeSlotsEl) timeSlotsEl.style.display = 'none';
      if(selDateEl) selDateEl.style.display = 'none';
    }

    loadGeslotenDagen().then(() => {
      isBootstrapping = true;
      const cookie = loadAppointmentFromCookie();
      
      // Zorg dat kalender altijd wordt gerenderd, ook als panel verborgen is
      renderCalendar();
      updateSelectedDateDisplay();
      
      // Zorg dat tijdsloten altijd worden geladen, ook als panel verborgen is
      if (!cookie.has || !cookie.dateOnly) {
        // Geen datum gekozen: zorg dat tijdsloten container klaar is
        renderTimeSlots(null);
      }
      
      isBootstrapping = false;

      if (cookie.has) {
        if (document.querySelector('.time-slots-container')) {
          showTimeSlotsView();
        } else if (isMobile()) {
          // Op mobiel: toon tijdsloten view als datum gekozen is
          showTimeSlotsViewMobile();
        } else {
          // Op desktop: render tijdsloten
          renderTimeSlots(selectedDate);
        }
        if (cookie.time) {
          setTimeout(() => {
            document.querySelectorAll('.time-slot').forEach(slot => {
              if (slot.textContent === cookie.time) slot.classList.add('selected');
            });
          }, 150);
        }
      } else {
        // Geen cookie: zorg dat alles klaar is voor eerste selectie
        if (isMobile()) {
          // Op mobiel: zorg dat kalender zichtbaar is en tijdsloten verborgen
          const calendarPanel = document.querySelector('.panel-calendar');
          const timePanel = document.querySelector('.panel-times');
          if (calendarPanel) {
            calendarPanel.style.display = 'flex';
            calendarPanel.removeAttribute('data-hidden');
          }
          if (timePanel) {
            timePanel.style.display = 'none';
            timePanel.removeAttribute('data-visible');
          }
        }
        // Laad lege tijdsloten - zorg dat container bestaat
        const timeSlotsEl = document.getElementById('timeSlots');
        if (timeSlotsEl) {
          renderTimeSlots(null);
        }
      }

      // Setup mobiel flow na alles laden
      if (typeof setupMobileFlow === 'function') {
        setTimeout(() => setupMobileFlow(), 100);
      }
      
      startCalendarObserver();
    });
  }

  window.__fbCalendarRehydrate = function(){
    const cookie = loadAppointmentFromCookie();
    
    // Zorg dat kalender altijd wordt gerenderd
    renderCalendar();
    updateSelectedDateDisplay();
    
    if (cookie.has) {
      if (document.querySelector('.time-slots-container')) {
        showTimeSlotsView();
      } else if (isMobile()) {
        showTimeSlotsViewMobile();
      } else {
        renderTimeSlots(selectedDate);
      }
      if (cookie.time) {
        setTimeout(() => {
          document.querySelectorAll('.time-slot').forEach(slot => {
            if (slot.textContent === cookie.time) slot.classList.add('selected');
          });
        }, 150);
      }
    } else {
      if (isMobile()) {
        // Op mobiel: toon kalender, verberg tijdsloten
        const calendarPanel = document.querySelector('.panel-calendar');
        const timePanel = document.querySelector('.panel-times');
        if (calendarPanel) calendarPanel.style.display = 'flex';
        if (timePanel) timePanel.style.display = 'none';
        renderTimeSlots(null);
      } else {
        showCalendarView();
        renderTimeSlots(null);
      }
    }
    
    // Setup mobiel flow
    if (typeof setupMobileFlow === 'function') {
      setTimeout(() => setupMobileFlow(), 100);
    }
  };

  window.clearAppointmentCookies = clearAppointmentCookies;
  window.saveAppointmentToCookie = saveAppointmentToCookie;
  window.loadAppointmentFromCookie = loadAppointmentFromCookie;
  window.getAppointmentSelection = getAppointmentState;
  window.renderTimeSlots = renderTimeSlots;
  window.showCalendarViewMobile = showCalendarViewMobile;
};