/*eslint no-unused-vars: ["error", { "varsIgnorePattern": "NECTLY_.*|proResetPayout|setupCharity|renderConversationHistoryTable|requestStripeInformation|activateSeeker|proSelectSlot|proSelectSlots|activateProfessional|redirectToStripeConnectLink|startCreditCardAuthorization|logoutUser|sendEarlyAccessEmail|initStripePayment|joinMeeting|onLoad|deleteSlots|proCancelMeeting|seekerCancelMeeting|onProTimeSlotSelectChange|onTimeSlotSelectChange|deleteSlot|proDeleteSlot|proDeleteSlots|proSaveSession|seekerSaveSession|proAppointmentsTabClick|seekerAppointmentsTabClick|proSlotsTabClick|seekerSlotsTabClick|reserveSlot|.*UserRole$" }]*/
/*global google Stripe*/
let calendar = null;
let mobileCalendar = null;
let seekerCalendar = null;
let mobileSeekerCalendar = null;
let proCalendar = null;
let mobileProCalendar = null;

function callApi(url, method = 'GET', data = null) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    xhr.open(method, url);

    if (data) {
      xhr.setRequestHeader('Content-Type', 'application/json');
    }

    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve({ status: xhr.status, response: xhr.responseText });
      } else {
        reject({ status: xhr.status, error: xhr.responseText });
      }
    };

    xhr.onerror = function() {
      reject({ status: 0, error: 'Network error occurred' });
    };

    xhr.send(data ? JSON.stringify(data) : null);
  });
}


function convertMonthStringToInt(monthString) {
  const lowerCaseMonth = monthString.toLowerCase();

  switch (lowerCaseMonth) {
    case 'january':
      return 0;
    case 'february':
      return 1;
    case 'march':
      return 2;
    case 'april':
      return 3;
    case 'may':
      return 4;
    case 'june':
      return 5;
    case 'july':
      return 6;
    case 'august':
      return 7;
    case 'september':
      return 8;
    case 'october':
      return 9;
    case 'november':
      return 10;
    case 'december':
      return 11;
    default:
      console.error(`Error: "${monthString}" is not a valid month string.`);
      return -1;
  }
}


function convertIntMonthToString(monthInt) {
  const monthNames = [
    'January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
  ];

  if (monthInt >= 0 && monthInt <= 11) {
    return monthNames[monthInt];
  } else {
    console.error(`Error: "${monthInt}" is not a valid month integer (0-11).`);
    return null;
  }
}


function getMeta(metaName) {
  const metas = document.getElementsByTagName('meta');
  for (let i = 0; i < metas.length; i++) {
    if (metas[i].getAttribute('property') === metaName) {
      return metas[i].getAttribute('content');
    }
  }
  return '';
}


function logoutUser() {
  return callApi('/api/logout', 'POST')
    .then(data => {
      console.log('Logout successful:', data);
      window.location.href = '/';
      return data;
    })
    .catch(error => {
      console.error('Logout failed:', error);
      throw error;
    });
}

function initStripePayment(user_id, user_email) {
    var url = new URL("https://buy.stripe.com/test_28E4gA0aJ4iM0BqaaF7Zu01");
    url.searchParams.append("customer_email", user_email);
    url.searchParams.append("client_reference_id", user_id);
    url.searchParams.append("prefilled_email", user_email);
    window.location.href = url.toString();
}


let resolveLinkDateElements = [];
let linkLastDayInMonth = null;
let activeLinkDayElement = null;
let resolveMobileLinkDateElements = [];
let linkMobileLastDayInMonth = null;
let activeMobileLinkDayElement = null;


function loopLinkDaysInMonth(self, dateEl) {
  const leftArrow = self.context.mainElement.querySelectorAll('[data-vc-arrow="prev"]');
  const rightArrow = self.context.mainElement.querySelectorAll('[data-vc-arrow="prev"]');
  if (leftArrow.length > 0) leftArrow[0].disabled = true;
  if (rightArrow.length > 0) rightArrow[0].disabled = true;
  const btnEl = dateEl.querySelector('[data-vc-date-btn]');
  const btnDate = new Date(dateEl.getAttribute('data-vc-date'));
  if (btnDate.getMonth() !== self.context.selectedMonth) {
    return;
  }
  if (self.context.mainElement.id === linkCalendarElementId) {
    if (activeLinkDayElement === null) {
      const today = new Date();
      if (today.getDate() === btnDate.getDate()) {
        activeLinkDayElement = btnEl;
      }
    }
  } else {
    if (activeMobileLinkDayElement === null) {
      const today = new Date();
      if (today.getDate() === btnDate.getDate()) {
        activeMobileLinkDayElement = btnEl;
      }
    }
  }
  const day = btnEl.innerText;
  if (parseInt(day) === 1) {
    if (self.context.mainElement.id === linkCalendarElementId) {
      resolveLinkDateElements = [dateEl];
      linkLastDayInMonth = getLastDayOfMonth(btnDate.getFullYear(), convertIntMonthToString(btnDate.getMonth()));
    } else {
      resolveMobileLinkDateElements = [dateEl];
      linkMobileLastDayInMonth = getLastDayOfMonth(btnDate.getFullYear(), convertIntMonthToString(btnDate.getMonth()));
    }
  } else {
    if (self.context.mainElement.id === linkCalendarElementId) {
      resolveLinkDateElements.push(dateEl);
    } else {
      resolveMobileLinkDateElements.push(dateEl);
    }
  }

  let endDayToCompare = null;
  if (self.context.mainElement.id === linkCalendarElementId) {
    endDayToCompare = linkLastDayInMonth;
  } else {
    endDayToCompare = linkMobileLastDayInMonth;
  }

  if (endDayToCompare.getDate() === btnDate.getDate()) {
    getCurrentMonth(getLinkPageUserId(), endDayToCompare.toISOString(), function(currentMonth) {
      let dateElements = null;
      if (self.context.mainElement.id === linkCalendarElementId) {
        dateElements = resolveLinkDateElements
      } else {
        dateElements = resolveMobileLinkDateElements
      }
      const busyDaysInMonth = currentMonth.busyDaysInMonth;
      for (const dateEl of dateElements) {
        const btnEl = dateEl.querySelector('[data-vc-date-btn]');
        const btnDate = new Date(dateEl.getAttribute('data-vc-date'));
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        btnDate.setHours(0, 0, 0, 0);
        const day = btnEl.innerText;
        if (btnDate < today) continue;
        if (busyDaysInMonth.indexOf(parseInt(day)) !== -1) {
          setDayElementAsBusy(btnEl);
        }
      }
      if (self.context.mainElement.id === linkCalendarElementId) {
        resolveLinkDateElements = [];
      } else {
        resolveMobileLinkDateElements = [];
      }
      if (leftArrow.length > 0) leftArrow[0].disabled = false;
      if (rightArrow.length > 0) rightArrow[0].disabled = false;
      console.log("Days in month updated")
    },
    function(error) {
      console.log("Error fetching slots:", error);
      if (self.context.mainElement.id === linkCalendarElementId) {
        resolveLinkDateElements = [];
      } else {
        resolveMobileLinkDateElements = [];
      }
      if (leftArrow.length > 0) leftArrow[0].disabled = false;
      if (rightArrow.length > 0) rightArrow[0].disabled = false;
    });
  }
}


function renderLinkCalendar(onChange, refreshSlots, elementId) {
  const { Calendar } = window.VanillaCalendarPro;
  const calendar = new Calendar(
    `#${elementId}`, {
      onCreateDateEls: loopLinkDaysInMonth,
      disableAllDates: true,
      enableDates:[getEnabledDates()],
      firstWeekday: 0,
      type: 'default',
      onClickArrow(self) {
        console.log("Month changed to", self.context.selectedYear, self.context.selectedMonth);
        onChange('month', convertIntMonthToString(self.context.selectedMonth));
      },
      onClickDate(self, pointerEvent) {
        const btnEl = pointerEvent.srcElement;
        console.log("Day clicked", self.context.selectedDates, btnEl);
        if (self.context.mainElement.id === linkCalendarElementId) {
          activeLinkDayElement = btnEl;
        } else {
          activeMobileLinkDayElement = btnEl;
        }
        onChange('value', self.context.selectedDates[0]);
      },
  });
  calendar.init();
  if (refreshSlots) {
    const now = new Date();
    refreshCalendarSlots("link-calendar-slots-list", now);
    refreshSlotsHeader(now);
  }
  return calendar;
}


function onLoad() {
  renderTopMenu();
  renderFooter();
  setupTogglePairs();
  loadFaqToggle();
  initLinkButtonGlowEffect();
  if (typeof google !== 'undefined') {
    google.accounts.id.initialize({
      client_id: "1089541127844-jciirjufc6pli3d0af9o9s8mq4t0qk0d.apps.googleusercontent.com",
      callback: function (response) {console.info('Google Auth Response: ', response);},
      login_uri: "https://nectly.io/google-oauth-redirect",
      ux_mode: "redirect",
      context: "signup"
    });
    google.accounts.id.prompt();
    const signUpButton = document.getElementById("nav-signup");
    if (signUpButton) {
      google.accounts.id.renderButton(
          signUpButton,
          {
              type: "standard",
              shape: "rectangular",
              theme: "outline",
              text: "signin_with",
              size: "large",
              logo_alignment: "left",
              locale: "en",
          }
      );
    }
  }
  if (document.getElementById(earlyAccessElementId)) renderEarlyAccess();
  setupEarlyAccessToggle();
  const calendarElement = document.getElementById(linkCalendarElementId);
  const mobileCalendarElement = document.getElementById(linkCalendarMobileElementId);
  if (calendarElement) {
    calendar = renderLinkCalendar(onCalendarChange, window.innerWidth >= 1024, linkCalendarElementId);
  }
  if (mobileCalendarElement) {
    mobileCalendar = renderLinkCalendar(onMobileCalendarChange, window.innerWidth < 1024, linkCalendarMobileElementId);
  }
  if (mobileCalendarElement || calendarElement) {
    renderTimeZoneString();
  }
  const seekerCalendarElement = document.getElementById(seekerCalendarElementId);
  const mobileSeekerCalendarElement = document.getElementById(seekerCalendarMobileElementId);
  if (seekerCalendarElement) {
    seekerCalendar = renderSeekerCalendar(onSeekerCalendarChange, seekerCalendarElementId);
    seekerRefreshCalendarSlots();
  }
  if (mobileSeekerCalendarElement) {
    mobileSeekerCalendar = renderSeekerCalendar(onMobileSeekerCalendarChange, seekerCalendarMobileElementId);
    seekerRefreshCalendarSlots();
  }
  const proCalendarElement = document.getElementById(proCalendarElementId);
  const mobileProCalendarElement = document.getElementById(proCalendarMobileElementId);
  if (proCalendarElement) {
    proCalendar = renderProCalendar(onProCalendarChange, proCalendarElementId);
    proRefreshCalendarSlots();
  }
  if (mobileProCalendarElement) {
    mobileProCalendar = renderProCalendar(onMobileProCalendarChange, proCalendarMobileElementId);
    proRefreshCalendarSlots();
  }
  if (mobileSeekerCalendarElement || seekerCalendarElement) {
    renderTimeZoneString();
  }
  setupResponsiveMenuToggle();
  setupCancelMeetingToggle();
}


const NECTLY_USER_ROLE_SEEKER = "seeker";
const NECTLY_USER_ROLE_PROFESSIONAL = "professional";
const NECTLY_DAILY_SCHEDULE = "daily";
const NECTLY_WEEKLY_SCHEDULE = "weekly";
const NECTLY_MONTHLY_SCHEDULE = "monthly";
const NECTLY_EXACT_PERIOD_SCHEDULE = "exact_period"
const postReserveSlotElementId = "link-post-reserve-slot";
const linkEmailInputElementId = 'link-calendar-professional-email';
const linkNameInputElementId = 'link-calendar-professional-name';
const earlyAccessElementId = 'early-access';
const seekerCalendarElementId = 'seeker-calendar';
const seekerCalendarMobileElementId = 'seeker-calendar-mobile';
const proCalendarElementId = 'pro-calendar';
const proCalendarMobileElementId = 'pro-calendar-mobile';
const linkCalendarElementId = 'link-calendar';
const linkCalendarMobileElementId = 'link-calendar-mobile';




function getUserRole(onSuccess, onError) {
    return callApi('/api/user/roles')
        .then(data => {
            console.log('User roles:', data);
            if (onSuccess) onSuccess(JSON.parse(data.response));
        })
        .catch(error => {
            console.error('Error fetching user role:', error);
            if (onError) onError(error);
        });
}

function addUserRole(user_role, onSuccess, onError) {
    return callApi('/api/user/roles', 'POST', { role: user_role })
        .then(data => {
            console.log('User role added:', data);
            if (onSuccess) onSuccess(data.response);
        })
        .catch(error => {
            console.error('Error adding user role:', error);
            if (onError) onError(error);
        });
}

function removeUserRole(user_role, onSuccess, onError) {
    return callApi('/api/user/roles', 'DELETE', { role: user_role })
        .then(data => {
            console.log('User role removed:', data);
            if (onSuccess) onSuccess(data.response);
        })
        .catch(error => {
            console.error('Error removing user role:', error);
            if (onError) onError(error);
        });
}


function getCurrentMonth(seeker_id, selectedDate, onSuccess, onError) {
    return callApi(`/api/slots?userId=${seeker_id}&date=${selectedDate}`)
        .then(data => {
            console.log('Current month:', data);
            if (onSuccess) onSuccess(JSON.parse(data.response));
        })
        .catch((error) => {
            console.error('Error fetching current month:', error);
            if (onError) onError(error);
            /*onSuccess(JSON.parse(
`{
    "slots": [
        {
            "startTime": "2023-10-01T09:00:00Z",
            "endTime": "2023-10-01T17:05:00Z",
            "title": "Meeting with John Doe",
            "description": "Discuss project updates and next steps."
        }
    ],
    "busyDaysInMonth": [
        4,
        20,
        25,
        26
    ],
    "seekerFullName": "John Doe"
}`
            ));*/
        });
}


function refreshSlotsHeader(value) {
  const slotsHeader = document.getElementById("link-calendar-picked-date-header");
  if (!slotsHeader) {
    console.error("Element with ID link-calendar-picked-date-header not found.");
    return;
  }
  const selectedDate = value;
  slotsHeader.innerHTML = selectedDate.toLocaleString('en-US', { weekday: 'long', month: 'short', day: 'numeric', hour12: true });
}


function getLastDayOfMonth(year, month) {
  const intMonth = convertMonthStringToInt(month);
  const date = new Date(year, intMonth + 1, 0);
  return date;
}


function onCalendarChange(calendarParameter, value) {
  if (window.innerWidth < 1024) return;
  if (calendarParameter === "value") {
    console.log("Calendar value changed to", value);
    refreshCalendarSlots("link-calendar-slots-list", getCalendarSelectedDate(calendar));
    refreshSlotsHeader(getCalendarSelectedDate(calendar));
  }
  if (calendarParameter === "month") {
    console.log("Calendar month changed to", value);
    resetPostReserveSlotElement();
  }
}


function onMobileCalendarChange(calendarParameter, value) {
  if (window.innerWidth >= 1024) return;
  if (calendarParameter === "value") {
    console.log("Mobile calendar value changed to", value);
    refreshCalendarSlots("link-calendar-slots-list", getCalendarSelectedDate(mobileCalendar));
    refreshSlotsHeader(getCalendarSelectedDate(mobileCalendar));
  }
  if (calendarParameter === "month" && mobileCalendar.month !== value) {
    console.log("Mobile calendar month changed to", value);
    resetPostReserveSlotElement();
  }
}

function toggleConfirmationButton(disabled) {
  document.getElementById(linkEmailInputElementId).disabled  = disabled;
  document.getElementById(linkNameInputElementId).disabled  = disabled;
  document.getElementById("confirmMeetingButton").disabled  = disabled;
}


function getVisibleCalendar() {
  if (window.innerWidth >= 1024) {
    return calendar;
  } else {
    return mobileCalendar;
  }
}


function updateCalendarDays(busyDaysInMonth) {
  console.log("Updating calendar days with busy days:", busyDaysInMonth);
  if (activeLinkDayElement) {
    const day = activeLinkDayElement.innerText;
    if (busyDaysInMonth.indexOf(parseInt(day)) !== -1) {
      setDayElementAsBusy(activeLinkDayElement);
    }
  }
}


function updateMobileCalendarDays(busyDaysInMonth) {
  console.log("Updating calendar days with busy days:", busyDaysInMonth);
  if (activeMobileLinkDayElement) {
    const day = activeMobileLinkDayElement.innerText;
    if (busyDaysInMonth.indexOf(parseInt(day)) !== -1) {
      setDayElementAsBusy(activeMobileLinkDayElement);
    }
  }
}


function refreshCalendarSlots(targetElementId, selectedDate, calledFromPage) {
  function renderSlotFromTo(slot) {
    const startTime = new Date(slot.startTime);
    const endTime = new Date(slot.endTime);
    const fromDate = startTime.toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
    const toDate = endTime.toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
    return `${fromDate} - ${toDate}`;
  }

  function renderSlotRow(slot, message) {
    if (message) {
      const option = document.createElement('option');
      option.value = message;
      option.textContent = message;
      return option;
    }
    const option = document.createElement('option');
    option.value = `${slot.startTime}@${slot.endTime}`;
    option.textContent = renderSlotFromTo(slot);
    return option;
  }

  resetPostReserveSlotElement();

  const slotsElement = document.getElementById(targetElementId);
  if (!slotsElement) {
    console.error(`Element with ID ${targetElementId} not found.`);
    return;
  }
  const seekerId = getLinkPageUserId();
  if (!selectedDate) {
    selectedDate = getCalendarSelectedDate(getVisibleCalendar());
  }
  slotsElement.innerHTML = ""; // Clear existing slots
  getCurrentMonth(seekerId, selectedDate.toISOString(), function(currentMonth) {
    console.log("Fetched slots:", currentMonth.slots);
    updateCalendarDays(currentMonth.busyDaysInMonth);
    updateMobileCalendarDays(currentMonth.busyDaysInMonth);
    document.getElementById("link-welcome-message").innerHTML = `${currentMonth.seekerFullName} has invited you to 20-minute meeting`;
    if (currentMonth.slots?.length === 0) {
      const errorMessage = `
                    <div id="link-post-reserve-slot-no-slots" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <img src="images/app/no-available-slots.svg" alt="No Available Slots Icon" />
                      <h4>No available slots for this day.</h4>
                      <p>Try another date.</p>
                    </div>
`;
      const postReserveSlotElement = document.getElementById(postReserveSlotElementId);
      if (postReserveSlotElement) {
        postReserveSlotElement.innerHTML = errorMessage;
      } else {
        console.error(`Element with ID ${postReserveSlotElementId} not found.`);
      }
      toggleConfirmationButton(true);
      return;
    }
    currentMonth.slots.forEach(slot => {
      slotsElement.appendChild(renderSlotRow(slot));
      toggleConfirmationButton(false);
    });
    if (calledFromPage) {
      calendar.update();
      mobileCalendar.update();
    }
  }, function(error) {
    console.error("Error fetching slots:", error);
    if (error.status === 400 && error.error === "400: Selected date cannot be in the past") {
      selectedDateIsinThePast();
    } else {
      retrievingSlotsFailed()
    }
    toggleConfirmationButton(true);
  });
}


function getLinkPageUserId() {
  return getMeta('user-id');
}


function selectedDateIsinThePast() {
  const errorMessage = `
                    <div id="link-post-reserve-slot-error" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <p class="error-message"><strong>Selected date cannot be in the past.</strong></p>
                      <p>Don’t worry, just choose another slot to connect.</p>
                    </div>
`;
  const postReserveSlotElement = document.getElementById(postReserveSlotElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = errorMessage;
  } else {
    console.error(`Element with ID ${postReserveSlotElementId} not found.`);
  }
}


function retrievingSlotsFailed() {
  const errorMessage = `
                    <div id="link-post-reserve-slot-error" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <p class="error-message"><strong>Retrieving slots failed.</strong></p>
                      <p>Try to refresh later.</p>
                    </div>
`;
  const postReserveSlotElement = document.getElementById(postReserveSlotElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = errorMessage;
  } else {
    console.error(`Element with ID ${postReserveSlotElementId} not found.`);
  }
}


function onReserveSlotError() {
  const errorMessage = `
                    <div id="link-post-reserve-slot-error" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <p class="error-message"><strong>That time’s no longer available—someone else grabbed it.</strong></p>
                      <p>Don’t worry, just choose another slot to connect.</p>
                    </div>
`;
  const postReserveSlotElement = document.getElementById(postReserveSlotElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = errorMessage;
  } else {
    console.error(`Element with ID ${postReserveSlotElementId} not found.`);
  }
}


function onReserveSlotSuccess() {
  const successMessage = `
                    <div id="link-post-reserve-slot-success" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <img src="images/app/email-sent.svg" alt="Email Sent Icon" />
                      <h4>You’re all set.</h4>
                      <p>Check your inbox for the details—and enjoy the&nbsp;conversation.</p>
                    </div>
`;
  const postReserveSlotElement = document.getElementById(postReserveSlotElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = successMessage;
  } else {
    console.error(`Element with ID ${postReserveSlotElementId} not found.`);
  }
}


function resetPostReserveSlotElement() {
  const postReserveSlotElement = document.getElementById(postReserveSlotElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = "";
  } else {
    console.error(`Element with ID ${postReserveSlotElementId} not found.`);
  }
}


function validateEmail(email) {
  return String(email).toLowerCase().match(
    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  );
}


function reserveSlot(targetElementId) {
  function getLinkType() {
    if (window.location.href.indexOf('/link/') !== -1) {
      return NECTLY_USER_ROLE_PROFESSIONAL;
    } else if (window.location.href.indexOf('/connect/') !== -1) {
      return NECTLY_USER_ROLE_SEEKER;
    }
  }
  const attendee = document.getElementById(linkEmailInputElementId).value;
  const attendeeName = document.getElementById(linkNameInputElementId).value;
  const validAttendee = validateEmail(attendee);
  if (!validAttendee) {
    console.log("Invalid email address:", attendee);
    document.getElementById(linkEmailInputElementId).focus();
    return;
  }
  if (!attendeeName || attendeeName.trim() === "" || attendeeName.length > 60 || attendeeName.indexOf('"') !== -1) {
    console.log("Invalid name:", attendeeName);
    document.getElementById(linkNameInputElementId).focus();
    return;
  }
  const slotsElement = document.getElementById(targetElementId);
  if (!slotsElement) {
    console.error(`Element with ID ${targetElementId} not found.`);
    return;
  }
  const selectedOption = slotsElement.options[slotsElement.selectedIndex];
  if (!selectedOption) {
    console.error("No slot selected.");
    return;
  }
  toggleConfirmationButton(true);
  const startTime = selectedOption.value.split('@')[0];
  const endTime = selectedOption.value.split('@')[1];
  console.log("Reserving slot from", startTime, "to", endTime);
  const reserveSlotBody = {
    "startTime": startTime,
    "endTime": endTime,
    "attendee": attendee,
    "attendeeName": attendeeName,
  }
  if (getLinkType() === NECTLY_USER_ROLE_SEEKER) {
    console.log("Reserve slot body:", reserveSlotBody);
    const seeker_id = getLinkPageUserId();
    console.log("Seeker ID:", seeker_id);
    callApi(`/api/slots?userId=${seeker_id}`, 'POST', reserveSlotBody)
      .then(data => {
          console.log('Current month:', data)
          onReserveSlotSuccess();
      })
      .catch((error) => {
          console.error('Error reserving slot:', error);
          onReserveSlotError();
      });
  } else if (getLinkType() === NECTLY_USER_ROLE_PROFESSIONAL) {
    const professional_id = getLinkPageUserId();
    reserveSlotBody["professionalId"] = professional_id;
    console.log("Professional ID:", professional_id);
    console.log("Reserve professional slot body:", reserveSlotBody);
    callApi(`/api/pro-slots?userId=${professional_id}`, 'POST', reserveSlotBody)
      .then(data => {
          console.log('Current month:', data)
          const body = JSON.parse(data.response);
          var url = new URL("https://buy.stripe.com/test_8x2aEYg9Hg1uesg6Yt7Zu02");
          url.searchParams.append("customer_email", attendee);
          url.searchParams.append("client_reference_id", `${professional_id}---${body.calendarId}---${body.appointmentId}`);
          url.searchParams.append("prefilled_email", attendee);
          window.location.href = url.toString();
      })
      .catch((error) => {
          console.error('Error reserving slot:', error);
          onReserveSlotError();
      });
  }
}


function setupResponsiveMenuToggle() {
  const hamburger = document.getElementById('hamburger-btn');
  const menuWrapper = document.getElementById('menu-items-wrapper');

  if (!hamburger || !menuWrapper) return;

  let isManuallyOpened = false;

  function updateMenuDisplay() {
    if (window.innerWidth > 1024) {
      menuWrapper.classList.add('active');
      hamburger.classList.remove('active');
      isManuallyOpened = false;
    } else {
      if (!isManuallyOpened) {
        menuWrapper.classList.remove('active');
        hamburger.classList.remove('active');
      }
    }
  }

  window.addEventListener('resize', updateMenuDisplay);
  updateMenuDisplay();

  hamburger.addEventListener('click', () => {
    if (window.innerWidth <= 1024) {
      const isActive = hamburger.classList.toggle('active');
      menuWrapper.classList.toggle('active');
      isManuallyOpened = isActive;
    }
  });
}

function setupEarlyAccessToggle() {
  const toggle = document.getElementById('earlyAccessToggle');
  const close = document.getElementById('closeEarlyAccessToggle');
  const content = document.getElementById('earlyAccessContent');

  if (!toggle || !close || !content) return;

  const container = toggle.closest('.early-access-toggle-container');
  if (!container) return;

  toggle.addEventListener('click', () => {
    if (!container.classList.contains('open')) {
      content.style.height = content.scrollHeight + 'px';
      container.classList.add('open');
    }
  });

  close.addEventListener('click', () => {
    content.style.height = '0px';
    container.classList.remove('open');
  });
}



function renderTimeZoneString() {
  const timeZoneString = (new Date()).toLocaleDateString("en-US", {timeZoneName: "long"}).split(', ')[1];
  const innerHTMLString = `
                  <p><strong>Time zone</strong></p>
                  <p>${timeZoneString}</p>
`;
  const timeZoneElement = document.getElementById("time-zone-container");
  if (timeZoneElement) {
    timeZoneElement.innerHTML = innerHTMLString;
  } else {
    console.error("Element with ID time-zone-container not found.");
  }
  const timeZoneMobileElement = document.getElementById("time-zone-container-mobile");
  if (timeZoneMobileElement) {
    timeZoneMobileElement.innerHTML = innerHTMLString;
  } else {
    console.error("Element with ID time-zone-container-mobile not found.");
  }
}


function renderFooter() {
  const footer = document.getElementById('footer');
  if (footer) {
    footer.innerHTML = `
            <div class="footer-content flex flex-center flex-between">
              <div class="footer-logo">
                <img src="images/nectly-logo-inverse.svg" alt="Nectly Logo">
              </div>
              <div class="footer-links flex flex-center gap-2">
                <a href="mailto:hello@nectly.io" id="footer-contact" class="flex flex-center">
                  <img src="images/mail-icon.svg" alt="Contact Icon">
                  Contact Us
                </a>
                <div class="footer-social-links">
                  <p>Follow Us</p>
                  <a href="https://www.linkedin.com/company/nectly" id="footer-linkedin">
                    <img src="images/linkedin-icon.svg" alt="LinkedIn Icon">
                  </a>
                  <a href="https://www.instagram.com/nectly.io" id="footer-instagram">
                    <img src="images/instagram-icon.svg" alt="Instagram Icon">
                  </a>
                </div>
            </div>
          </div>
          <div class="footer-copyright">
            <p class="small-paragraph">© 2025 Nectly. All rights reserved.</p>
            <a href="https://nectly.io/privacy-policy.html" class="small-paragraph">Privacy Policy</a>
            <a href="https://nectly.io/terms-of-service.html" class="small-paragraph">Terms of service</a>
          </div>`;
  } else {
    console.error("Element with ID footer not found.");
  }
}


function renderTopMenu() {
  const topMenu = document.getElementById('menu');
  if (topMenu) {
    const loginIsHidden = getMeta('login-is-hidden');
    const logoutIsHidden = getMeta('logout-is-hidden');
    let hideAvatarMenu = 'style="display:none"';
    if (logoutIsHidden.trim().length === 0) hideAvatarMenu = '';
    let settingsHtml = `
  <a href="/settings.html">
    <span class="icon">
      <svg class="profile-menu-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
        <g clip-path="url(#clip0_277_477)">
          <path d="M12.8597 10.7672L14.6512 11.1757L15.364 8.05207L13.5672 7.64092C13.5272 7.03221 13.3937 6.45287 13.1774 5.91357L14.6138 4.76824L12.6168 2.26398L11.1804 3.40932C10.6972 3.07293 10.1606 2.81129 9.58391 2.63775V0.800941H6.38017V2.63775C5.8035 2.80862 5.26421 3.07293 4.78365 3.40932L3.3473 2.26398L1.35031 4.76824L2.78665 5.91357C2.56773 6.45287 2.43691 7.03488 2.39686 7.64092L0.600098 8.05207L1.31293 11.1757L3.10435 10.7672C3.39803 11.2852 3.77447 11.7524 4.21231 12.1502L3.41405 13.8108L6.30008 15.2017L7.09835 13.5411C7.38668 13.5865 7.68036 13.6186 7.98471 13.6186C8.28907 13.6186 8.58007 13.5892 8.87108 13.5411L9.66935 15.2017L12.5554 13.8108L11.7571 12.1502C12.195 11.7524 12.5714 11.2852 12.8651 10.7672H12.8597Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M7.98239 10.4122C9.30942 10.4122 10.3852 9.33638 10.3852 8.00935C10.3852 6.68232 9.30942 5.60654 7.98239 5.60654C6.65536 5.60654 5.57959 6.68232 5.57959 8.00935C5.57959 9.33638 6.65536 10.4122 7.98239 10.4122Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
        </g>
        <defs>
          <clipPath id="clip0_277_477">
            <rect width="16" height="16" fill="white"/>
          </clipPath>
        </defs>
      </svg>
    </span>
    Settings
  </a>`;
    if (getMeta('dashboard') === 'professional-dashboard.html') settingsHtml = '';
    topMenu.innerHTML = `
                <div class="menu-container">
                    <nav class="menu flex flex-between flex-vertical-center" id="main-nav">
                        <a href="https://nectly.io/" class="flex flex-vertical-center"><img src="images/nectly-logo.svg" alt="Nectly Logo" class="nectly-logo"></a>
                        <button class="hamburger" id="hamburger-btn" aria-label="Toggle menu">
                            <span class="line"></span>
                            <span class="line"></span>
                            <span class="line"></span>
                        </button>
                        <div id="menu-items-wrapper" class="menu-items-wrapper">
                            <div class="menu-items flex flex-center gap-2">
                                <div class="nav-links flex flex-center">
                                    <a href="https://nectly.io/connect-for-opportunities.html" id="nav-connect">
                                        Connect for Opportunities
                                        <svg xmlns="http://www.w3.org/2000/svg" width="211" height="51" viewBox="0 0 211 51" fill="none">
                                            <path d="M6.51001 32.5959C6.51001 32.5959 23.5798 26.4002 51.4008 22.0657C68.0026 19.4799 88.4221 17.5625 111.336 18.0185C128.031 18.3495 146.05 19.9421 164.865 23.4647C178.077 25.938 191.69 29.3544 205.51 33.9512" stroke="#9CFF31" stroke-opacity="0.8" stroke-width="34" stroke-miterlimit="10"/>
                                        </svg>
                                        <div id="nav-connect-animation"></div>
                                    </a>
                                    <a href="https://nectly.io/connect-and-earn.html" id="nav-earn">
                                        Connect & Earn
                                        <svg xmlns="http://www.w3.org/2000/svg" width="163" height="43" viewBox="0 0 163 43" fill="none">
                                            <path d="M5.20996 16.65C5.20996 16.65 20.47 20.81 44.47 23.47C55.61 24.7 68.62 25.61 82.87 25.64C94.24 25.66 106.4 25.11 119.02 23.71C131.63 22.31 144.7 20.05 157.9 16.65" stroke="#283AFF" stroke-opacity="0.4" stroke-width="34" stroke-miterlimit="10"/>
                                        </svg>
                                    </a>
                                    <a href="https://nectly.io/faq.html" id="nav-faq" class="wavy-underline">FAQ</a>
                                </div>
                                <div class="profile-wrapper toggle-pair" ${hideAvatarMenu}>
                                  <div class="account-profile flex flex-vertical-center halfgap" id="profileToggle">
                                    <img src="${getMeta('picture')}" alt="User Avatar" id="account-avatar" class="account-avatar" />
                                    <p id="account-username" class="account-username"><strong>${getMeta('full-name')}</strong></p>
                                    <span class="arrow">▾</span>
                                  </div>
                                  <div class="toggle-a"></div>
                                  <div class="profile-menu-wrapper toggle-b" id="profileMenu">
                                    <div class="profile-menu flex flex-column gap-1">
                                      <a href="/${getMeta('dashboard')}">
                                      <svg class="icon-home" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                        <g clip-path="url(#clip0_277_468)">
                                          <path d="M7.55064 1.12965L1.59953 4.84768C1.35015 5.00354 1.19995 5.27559 1.19995 5.56748V13.5987C1.19995 14.5367 1.96226 15.299 2.90027 15.299H6.30091V11.0482H9.70155V15.299H13.1022C14.0402 15.299 14.8025 14.5367 14.8025 13.5987V5.56748C14.8025 5.27559 14.6523 5.00071 14.4029 4.84768L8.45181 1.12965C8.17693 0.956784 7.82553 0.956784 7.55064 1.12965Z"
                                            stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                                        </g>
                                        <defs>
                                          <clipPath id="clip0_277_468">
                                            <rect width="16" height="16" fill="white"/>
                                          </clipPath>
                                        </defs>
                                      </svg>
                                      Dashboard
                                      </a>
                                      ${settingsHtml}
                                      <a ${logoutIsHidden} href="#signup" id="nav-logout" onclick="logoutUser()">
                                      <svg class="profile-menu-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                        <path d="M11.4997 4.8L14.6997 8L11.4997 11.2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M5.09971 8H14.6997" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                                        <path d="M9.8999 13.6C9.8999 14.4827 9.18257 15.2 8.2999 15.2H3.4999C2.61724 15.2 1.8999 14.4827 1.8999 13.6V2.4C1.8999 1.51734 2.61724 0.800003 3.4999 0.800003H8.2999C9.18257 0.800003 9.8999 1.51734 9.8999 2.4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                                      </svg>
                                      Log out</a>\
                                    </div>
                                  </div>
                                </div>
                                <a ${loginIsHidden} href="#signup" id="nav-signup">Sign up</a>
                                <div class="auth-actions">
                                    <!-- <a href="#login" id="nav-login" class="wavy-underline">
                                        Log in
                                        <svg xmlns="http://www.w3.org/2000/svg" width="66" height="5" viewBox="0 0 66 5" fill="none">
                                            <path d="M0.80957 2.69048L1.00005 2.5C3.20918 0.290862 6.79091 0.290861 9.00005 2.5V2.5C11.2092 4.70914 14.7909 4.70914 17 2.5V2.5C19.2092 0.290861 22.7909 0.290861 25 2.5V2.5C27.2092 4.70914 30.7909 4.70914 33 2.5V2.5C35.2092 0.290861 38.7909 0.290861 41 2.5V2.5C43.2092 4.70914 46.7909 4.70914 49 2.5V2.5C51.2092 0.290861 54.7909 0.290861 57 2.5V2.5C59.2092 4.70914 62.7909 4.70914 65 2.5L65.1905 2.30952" />
                                        </svg>
                                    </a>-->
                                </div>
                            </div>
                        </div>
                    </nav>
                </div>
    `;
    if (document.querySelector('.scroll-container')) {
      topMenu.innerHTML += `
        <div class="app-menu">
          <button>Dashboard</button>
          <button>Availability</button>
          <button>Next Up</button>
        </div>
      `;

      safeInitSwipeSections();
    }
  } else {
    console.error("Element with ID top-menu not found.");
  }
}

function renderEarlyAccess() {
  const earlyAccess = document.getElementById(earlyAccessElementId);
  if (!earlyAccess) {
    console.error('Element with ID early-access not found.');
    return;
  }

  earlyAccess.innerHTML = `
    <div class="early-access-menu">
      <div class="early-access-toggle-container">
      <div id="earlyAccessToggle" class="menu-toggle flex flex-center halfgap">
        <h4>Get Early Access</h4>
        <div class="early-access-toggle-icon">
          <img src="images/app/cursor-icon.svg" alt="Cursor Icon" />
        </div>
      </div>
      <div id="earlyAccessContent" class="early-access-content flex flex-column gap-1">
        <div id="closeEarlyAccessToggle" class="close-early-access-toggle">
          <img src="images/app/close-button.svg" alt="Close Icon" />
        </div>
        <h4>Try it first. Shape what’s next.</h4>
        <p>We’re launching soon—but a few curious minds get early access. Join our beta, test it out, and help us make Nectly even better.</p>
        <h5>Join the Beta Waitlist</h5>
          <div class="flex gap-1">
            <p>Your role:</p>
            <div class="flex flex-center quartergap">
              <input id="earlySeekerCheckBox" type="checkbox" id="earlyAccessRoleSeeker" name="earlyAccessRoleSeeker" value="seeker">
              <label for="earlyAccessRoleSeeker">Seeker</label>
            </div>
            <div class="flex flex-center quartergap">
              <input id="earlyProfessionalCheckBox" type="checkbox" id="earlyAccessRoleProfessional" name="earlyAccessRoleProfessional" value="professional">
              <label for="earlyAccessRoleProfessional">Professional</label>
            </div>
          </div>
        <div class="refer-card-form flex halfgap">
          <input id="earlyAccessEmail" class="early-access-custom-select" type="email" name="email" placeholder="E-mail" required />
          <button id="earlyAccessButton" type="submit" class="flex flex-center primary-button primary-button-blue" onclick="sendEarlyAccessEmail('44975c66-699a-441a-b97f-167406f7e033')">
            Send
          </button>
        </div>
        <div id="earlyAccessResultMessage" class="flex flex-column gap-2"></div>
      </div>
    </div>
  `;
}


const earlyAccessEmailElementId = "earlyAccessEmail";
const earlyAccessResultMessageElementId = "earlyAccessResultMessage";
const earlySeekerCheckBoxElementId = "earlySeekerCheckBox";
const earlyProfessionalCheckBoxElementId = "earlyProfessionalCheckBox";
const earlyAccessButtonElementId = "earlyAccessButton";


function sendEarlyAccessEmail(earlyAccessSecret) {
  const successMessage = `
                    <div id="seeker-post-reserve-slot-success" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <h4>You’re on the list—thank you!</h4>
                      <p>We’ll be in touch soon with early access details. Can’t wait to see where your first Nectly conversation takes you.</p>
                    </div>
`;
  const errorMessage = `
                    <div id="seeker-post-reserve-slot-error" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <p class="error-message"><strong>Joining the Beta Waitlist failed.</strong></p>
                      <p>Try again later.</p>
                    </div>
`;

  const earlyAccessResultMessageElement = document.getElementById(earlyAccessResultMessageElementId);
  if (!earlyAccessResultMessageElement) {
    console.error(`Element with ID ${earlyAccessResultMessageElementId} not found.`);
    return;
  }

  const attendee = document.getElementById(earlyAccessEmailElementId).value;
  const validAttendee = validateEmail(attendee);
  if (!validAttendee) {
    console.log("Invalid email address:", attendee);
    document.getElementById(earlyAccessEmailElementId).focus();
    return;
  }

  const earlyAccessRoleSeeker = document.getElementById(earlySeekerCheckBoxElementId).checked;
  const earlyAccessRoleProfessional = document.getElementById(earlyProfessionalCheckBoxElementId).checked;

  if (!earlyAccessRoleSeeker && !earlyAccessRoleProfessional) {
    console.log("No role selected.");
    earlyAccessRoleSeeker.focus();
    return;
  }

  const earlyAccessButtonElement = document.getElementById(earlyAccessButtonElementId);
  if (!earlyAccessButtonElement) {
    console.error(`Element with ID ${earlyAccessButtonElementId} not found.`);
    return;
  }

  earlyAccessButtonElement.disabled = true;

  callApi(`/api/early-access`, 'POST', {
    "email": attendee,
    "role": earlyAccessRoleSeeker ? "seeker" : "professional",
    "secret": earlyAccessSecret
  }).then(data => {
        earlyAccessResultMessageElement.innerHTML = successMessage;
        console.error('Early access email sent successfully:', data);
    })
    .catch((error) => {
        earlyAccessResultMessageElement.innerHTML = errorMessage;
        console.error('Error sending early access email:', error);
    })
}


function getProCurrentDate(selectedDate, timezone, onSuccess, onError) {
  return callApi(`/api/professional-slots?date=${selectedDate}&tzOffsetInMinutes=${timezone}`)
      .then(data => {
          console.log('Current month:', data);
          if (onSuccess) onSuccess(JSON.parse(data.response));
      })
      .catch((error) => {
          console.error('Error fetching current month:', error);
          if (onError) onError(error);
      });
}


function getSeekerCurrentDate(selectedDate, timezone, onSuccess, onError) {
  return callApi(`/api/seeker-slots?date=${selectedDate}&tzOffsetInMinutes=${timezone}`)
      .then(data => {
          console.log('Current month:', data);
          if (onSuccess) onSuccess(JSON.parse(data.response));
      })
      .catch((error) => {
          console.error('Error fetching current month:', error);
          if (onError) onError(error);
          /*onSuccess(JSON.parse(
`{
    "freeSlots": [
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T08:00:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T08:20:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T08:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T08:50:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T09:00:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T09:20:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T09:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T09:50:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T10:00:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T10:20:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T10:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T10:50:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T11:00:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T11:20:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T11:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T11:50:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T12:00:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T12:20:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T12:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T12:50:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T13:00:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T13:20:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T13:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T13:50:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T14:00:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T14:20:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T14:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T14:50:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T15:00:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T15:20:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T15:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T15:50:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T16:00:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T16:20:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T16:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T16:50:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T17:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T17:50:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T18:00:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T18:20:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T18:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T18:50:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T19:00:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T19:20:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-29T19:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-29T19:50:00+02:00"
        }
    ],
    "createdSlots": [],
    "appointments": [
        {
            "createdAt": "2025-05-23T10:56:48.423125+00:00",
            "attendees": [
                "zeman.silvie@gmail.com"
            ],
            "appointmentId": "826ac3a9-61cd-43c8-a45f-6dbd35e2d83b",
            "description": null,
            "startTime": "2025-05-29T17:00:00+02:00",
            "location": "",
            "endTime": "2025-05-29T17:20:00+02:00",
            "title": ""
        },
        {
            "createdAt": "2025-05-27T16:15:46.941689+00:00",
            "attendees": [
                "tvavra1@gmail.com"
            ],
            "appointmentId": "b2757583-55ca-44bf-8411-9fe7ebd3603a",
            "description": null,
            "startTime": "2025-05-30T15:30:00+02:00",
            "location": "https://meet.google.com/xww-krkr-mso",
            "endTime": "2025-05-30T15:50:00+02:00",
            "title": ""
        },
        {
            "createdAt": "2025-05-23T17:57:37.550312+00:00",
            "attendees": [
                "jakub@zeman.wtf"
            ],
            "appointmentId": "57d3199f-320a-44a3-9969-a664e4b20ea3",
            "description": null,
            "startTime": "2025-05-30T17:00:00+02:00",
            "location": "https://meet.google.com/uok-toqp-iqm",
            "endTime": "2025-05-30T17:20:00+02:00",
            "title": ""
        },
        {
            "createdAt": "2025-05-23T16:40:39.399717+00:00",
            "attendees": [
                "jakub@zeman.wtf"
            ],
            "appointmentId": "819860f3-8afb-46c7-9543-2aaad2723027",
            "description": null,
            "startTime": "2025-05-30T17:30:00+02:00",
            "location": "https://meet.google.com/vvj-avvn-oop",
            "endTime": "2025-05-30T17:50:00+02:00",
            "title": ""
        }
    ],
    "createdSlotsToDate": [],
    "createdSlotsToday": [],
    "allCreatedSlots": [
        {
            "slotType": "exact_period",
            "startTime": "2025-05-30T16:00:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-30T16:20:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-30T16:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-30T16:50:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-31T12:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-31T12:50:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-05-31T15:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-05-31T15:50:00+02:00"
        },
        {
            "slotType": "exact_period",
            "startTime": "2025-06-18T13:30:00+02:00",
            "title": "",
            "repeatCount": "-1",
            "endTime": "2025-06-18T13:50:00+02:00"
        }
    ],
    "appointmentsToDate": [
        {
            "createdAt": "2025-05-27T16:15:46.941689+00:00",
            "attendees": [
                "tvavra1@gmail.com"
            ],
            "appointmentId": "b2757583-55ca-44bf-8411-9fe7ebd3603a",
            "description": null,
            "startTime": "2025-05-30T15:30:00+02:00",
            "location": "https://meet.google.com/xww-krkr-mso",
            "endTime": "2025-05-30T15:50:00+02:00",
            "title": ""
        },
        {
            "createdAt": "2025-05-23T17:57:37.550312+00:00",
            "attendees": [
                "jakub@zeman.wtf"
            ],
            "appointmentId": "57d3199f-320a-44a3-9969-a664e4b20ea3",
            "description": null,
            "startTime": "2025-05-30T17:00:00+02:00",
            "location": "https://meet.google.com/uok-toqp-iqm",
            "endTime": "2025-05-30T17:20:00+02:00",
            "title": ""
        },
        {
            "createdAt": "2025-05-23T16:40:39.399717+00:00",
            "attendees": [
                "jakub@zeman.wtf"
            ],
            "appointmentId": "819860f3-8afb-46c7-9543-2aaad2723027",
            "description": null,
            "startTime": "2025-05-30T17:30:00+02:00",
            "location": "https://meet.google.com/vvj-avvn-oop",
            "endTime": "2025-05-30T17:50:00+02:00",
            "title": ""
        }
    ],
    "appointmentsToday": [],
    "appointmentsInMonth": [
        29,
        30
    ],
    "slotsInMonth": [
        30,
        31
    ],
    "countOfPaidSessions": 86,
    "countOfUsedSession": 0,
    "paymentMethodSet": true
}`
          ));*/
      });
}


const postReserveSlotSeekerElementId = 'seeker-post-reserve-slot';
const seekerNewSessionDateSelect = 'seeker-date-slots-list';
const seekerNewSessionTimeSelect = 'seeker-calendar-slots-list';
const confirmMeetingButtonElementId = 'confirmMeetingButton';
const seekerAppointmentListElementId = 'seeker-appointment-list-container';
const seekerSlotsListElementId = 'seeker-slots-list-container';
const sessionBalanceSummaryElementId = 'session-balance-summary';
const seekerNoAppointmentsElementId = 'seeker-no-appointments';
const seekerNoSlotsElementId = 'seeker-no-slots';
const seekerTodayAppointmentsElementId = "seeker-today-appointments";
const seekerTodaySlotsElementId = "seeker-today-slots";
const seekerAppointmentsElementId = "seeker-appointments";
const seekerSlotsElementId = "seeker-slots";
const seekerAppointmentsDateTabElementId = "seeker-appointments-date-tab";
const seekerAppointmentsAllTabElementId = "seeker-appointments-all-tab";
const seekerSlotsDateTabElementId = "seeker-slots-date-tab";
const seekerSlotsAllTabElementId = "seeker-slots-all-tab";
const seekerRecurringSelectionElementId = "seeker-reccuring-selection";
const seekerBalanceProgressBarElementId = "session-balance-progress-bar";
const seekerSetupYourAccountMessageElementId = "seeker-setup-your-account-message";
const seekerSetPaymentMethodElementId = "seeker-set-payment-method";
const seekerAddYourAvailabilityElementId = "seeker-add-your-availability";
const seekerShareLinkElementId = "seeker-share-link";

const postReserveSlotProElementId = 'pro-post-reserve-slot';
const proNewSessionDateSelect = 'pro-date-slots-list';
const proNewSessionTimeSelect = 'pro-calendar-slots-list';
const proAppointmentListElementId = 'pro-appointment-list-container';
const proSlotsListElementId = 'pro-slots-list-container';
const proNoAppointmentsElementId = 'pro-no-appointments';
const proNoSlotsElementId = 'pro-no-slots';
const proTodayAppointmentsElementId = "pro-today-appointments";
const proTodaySlotsElementId = "pro-today-slots";
const proAppointmentsElementId = "pro-appointments";
const proSlotsElementId = "pro-slots";
const proAppointmentsDateTabElementId = "pro-appointments-date-tab";
const proAppointmentsAllTabElementId = "pro-appointments-all-tab";
const proSlotsDateTabElementId = "pro-slots-date-tab";
const proSlotsAllTabElementId = "pro-slots-all-tab";
const proRecurringSelectionElementId = "pro-reccuring-selection";
const proSetPaymentMethodStripeElementId = "pro-set-payment-method-stripe";
const proSetPaymentMethodStripeOrElementId = "pro-set-payment-method-or";
const proSetPaymentMethodCharityElementId = "pro-set-payment-method-charity";
const proLinkElementId = "pro-link";
const proShareLinkElementId = "pro-share-link";
const proSetupYourAccountMessageElementId = "pro-setup-your-account-message";
const proEarningsElementId = "pro-earnings";
const proAddYourAvailabilityElementId = "pro-add-your-availability";


function resetSeekerSetup() {
  const seekerSetupYourAccountMessageElement = document.getElementById(seekerSetupYourAccountMessageElementId);
  if (seekerSetupYourAccountMessageElement) {
    seekerSetupYourAccountMessageElement.innerHTML = "";
    seekerSetupYourAccountMessageElement.className = "";
  }
  const seekerSetPaymentMethodElement = document.getElementById(seekerSetPaymentMethodElementId);
  if (seekerSetPaymentMethodElement) {
    seekerSetPaymentMethodElement.innerHTML = "";
    seekerSetPaymentMethodElement.className = "";
  }
  const seekerAddYourAvailabilityElement = document.getElementById(seekerAddYourAvailabilityElementId);
  if (seekerAddYourAvailabilityElement) {
    seekerAddYourAvailabilityElement.innerHTML = "";
    seekerAddYourAvailabilityElement.className = "";
  }
  const seekerShareLinkElement = document.getElementById(seekerShareLinkElementId);
  if (seekerShareLinkElement) {
    seekerShareLinkElement.innerHTML = "";
    seekerShareLinkElement.className = "";
  }
}


function resetProSetup() {
  const proSetPaymentMethodStripeElement = document.getElementById(proSetPaymentMethodStripeElementId);
  if (proSetPaymentMethodStripeElement) {
    proSetPaymentMethodStripeElement.innerHTML = "";
    proSetPaymentMethodStripeElement.className = "";
  }
  const proSetPaymentMethodStripeOrElement = document.getElementById(proSetPaymentMethodStripeOrElementId);
  if (proSetPaymentMethodStripeOrElement) {
    proSetPaymentMethodStripeOrElement.innerHTML = "";
    proSetPaymentMethodStripeOrElement.className = "";
  }
  const proSetPaymentMethodCharityElement = document.getElementById(proSetPaymentMethodCharityElementId);
  if (proSetPaymentMethodCharityElement) {
    proSetPaymentMethodCharityElement.innerHTML = "";
    proSetPaymentMethodCharityElement.className = "";
  }
  const proSetupYourAccountMessageElement = document.getElementById(proSetupYourAccountMessageElementId);
  if (proSetupYourAccountMessageElement) {
    proSetupYourAccountMessageElement.innerHTML = "";
    proSetupYourAccountMessageElement.className = "";
  }
  const proAddYourAvailabilityElement = document.getElementById(proAddYourAvailabilityElementId);
  if (proAddYourAvailabilityElement) {
    proAddYourAvailabilityElement.innerHTML = "";
    proAddYourAvailabilityElement.className = "";
  }
  const proLinkElement = document.getElementById(proLinkElementId);
  if (proLinkElement) {
    proLinkElement.innerHTML = "";
    proLinkElement.className = "";
  }
  const proShareLinkElement = document.getElementById(proShareLinkElementId);
  if (proShareLinkElement) {
    proShareLinkElement.innerHTML = "";
    proShareLinkElement.className = "";
  }
}


function renderProPaymentMethodElement(index) {
  const proSetPaymentMethodStripeElement = document.getElementById(proSetPaymentMethodStripeElementId);
  if (proSetPaymentMethodStripeElement) {
    let indexHeader = "";
    if (index > 0) {
      indexHeader = `<h4 class="numbered-list-item flex flex-center">${index}A</h4>`;
    }
    proSetPaymentMethodStripeElement.className = "setup-account-container flex flex-column halfgap";
    proSetPaymentMethodStripeElement.innerHTML = `
                    <div class="flex flex-row flex-vertical-center halfgap">
                      ${indexHeader}
                      <h4 class="color-electric-blue">Get Paid to Your Account</h4>
                    </div>
                    <div class="flex flex-row flex-vertical-bottom">
                      <div class="flex flex-column gap-1 setup-account-container-content">
                        <p class="small-paragraph">Receive payment for your time — choose direct deposit to your bank.</p>
                        <button class="flex flex-center primary-button" onclick="redirectToStripeConnectLink()">Set Your Payout Method</button>
                      </div>
                      <div class="nectly-button-image-container">
                        <img class="setup-account-container-payment-image" src="images/connect-for-opportunities/how-it-works-1-desktop.svg" alt="Hand with card" />
                      </div>
                    </div>
    `;
  } else {
    console.error(`Element with ID ${proSetPaymentMethodStripeElementId} not found.`);
  }
  const proSetPaymentMethodStripeOrElement = document.getElementById(proSetPaymentMethodStripeOrElementId);
  if (proSetPaymentMethodStripeOrElement) {
    proSetPaymentMethodStripeOrElement.className = "text-center";
    proSetPaymentMethodStripeOrElement.innerHTML = `<strong>OR</strong>`;
  } else {
    console.error(`Element with ID ${proSetPaymentMethodStripeOrElementId} not found.`);
  }

  const proSetPaymentMethodCharityElement = document.getElementById(proSetPaymentMethodCharityElementId);
  if (proSetPaymentMethodCharityElement) {
    let indexHeader = "";
    if (index > 0) {
      indexHeader = `<h4 class="numbered-list-item flex flex-center">${index}B</h4>`;
    }
    proSetPaymentMethodCharityElement.className = "setup-account-container flex flex-column halfgap";
    proSetPaymentMethodCharityElement.innerHTML = `
                    <div class="flex flex-row flex-vertical-center halfgap">
                      ${indexHeader}
                      <h4 class="color-electric-blue">Donate to Stand Up To Cancer</h4>
                    </div>
                    <div class="flex flex-column halfgap setup-account-container-content">
                      <p class="notification-message small-paragraph text-center">All your session payouts will go to Stand Up To Cancer. You’re turning conversations into real contribution—with no extra steps.<br><br>
                        You can update this anytime under <a href="#" onclick="return requestPayoutMethodInformation();"><strong>Account → Payout methods</strong></a>.<br><br>
                        <strong>Thank you for using your time to do something extraordinary.</strong></p>
                      <button class="flex flex-center primary-button background-electric-blue color-white" onclick="setupCharity('StandupToCancer')">Got it</button>
                    </div>
    `;
  } else {
    console.error(`Element with ID ${proSetPaymentMethodCharityElementId} not found.`);
  }
}


function renderProLinkElement(index, paymentAccountEligibleForPayout) {
  const proLinkElement = document.getElementById(proLinkElementId);
  if (proLinkElement) {
    proLinkElement.className = "setup-account-container flex flex-column halfgap";
    if (index > 0) {
      proLinkElement.innerHTML = `
                    <div class="flex flex-row flex-vertical-center halfgap">
                      <h4 class="numbered-list-item flex flex-center">${index}</h4>
                      <h4 class="color-electric-blue">Your link becomes active!</h4>
                    </div>
                    <p class="small-paragraph">Once payment method is set, you’ll see your personal Nectly link activated here—ready to share.</p>
                    <button disabled=true id="nectly-link-button" class="flex flex-center halfgap" style="background-color: #CCCCCC;">
                      <img src="images/app/nectly-icon-disabled.svg" alt="Nectly Link Icon" />
                      Copy your Nectly link
                      <img src="images/app/link-icon.svg" alt="Link Icon" />
                    </button>
      `;
    } else {
      if (paymentAccountEligibleForPayout) {
        proLinkElement.className = "setup-account-container flex flex-column halfgap";
        proLinkElement.innerHTML = `
          <button ${getMeta('buttons-disabled')} id="nectly-link-button" class="flex flex-center halfgap glow-button-wrapper" onclick="window.navigator.clipboard.writeText('${getMeta('professional-link')}');">
            <img src="images/app/nectly-icon.svg" alt="Nectly Link Icon" />
            <div class="nectly-link-text flex flex-column gap-2">
              <p class="primary-text"><strong>Copy your Nectly link</strong></p>
              <p class="secondary-text"><strong>Copied!</strong><br>Now go make it happen.</p>
            </div>
            <img src="images/app/link-icon.svg" alt="Link Icon"/>
            <div class="wrapper">
              <div class="one"></div>
              <div class="two"></div>
              <div class="threee"></div>
              <div class="four"></div>
            </div>
          </button>
          <p class="box-paragraph"><i>Add it to LinkedIn. Share it in DMs. Link it on your site. Wherever you connect, your Nectly link helps you say yes — on your terms, with zero friction.</i></p>
        `;

        setupNectlyLinkButtonAnimation();
      } else {
        proLinkElement.innerHTML = `
                    <p class="small-paragraph">Your payment method is set but not eligible for payouts. Please <a href="#" onclick="return requestStripeInformation();">login</a> to your Stripe account and finish the onboarding process.</p>
                    <button disabled=true id="nectly-link-button" class="flex flex-center halfgap" style="background-color: #CCCCCC;">
                      <img src="images/app/nectly-icon-disabled.svg" alt="Nectly Link Icon" />
                      Copy your Nectly link
                      <img src="images/app/link-icon.svg" alt="Link Icon" />
                    </button>
        `;
      }
    }
  } else {
    console.error(`Element with ID ${proLinkElementId} not found.`);
  }
}


function renderProShareLinkElement(index) {
  const proShareLinkElement = document.getElementById(proShareLinkElementId);
  if (proShareLinkElement) {
    let indexHeader = "";
    if (index > 0) {
      indexHeader = `<h4 class="numbered-list-item flex flex-center">${index}</h4>`;
    }
    proShareLinkElement.className = "setup-account-container flex flex-column halfgap";
    proShareLinkElement.innerHTML = `
                    <div class="flex flex-row flex-vertical-center halfgap">
                      ${indexHeader}
                      <h4 class="color-electric-blue">Share Your Link Everywhere You Connect</h4>
                    </div>
                    <div class="flex flex-row flex-vertical-bottom">
                      <div class="flex flex-column halfgap setup-account-container-content">
                        <p class="small-paragraph">Post it on LinkedIn, add it to your email signature, and let others know you’re ready for serious conversations—paid or donated.</p>
                      </div>
                      <div class="nectly-button-image-container">
                        <img class="setup-account-container-nectly-button-image" src="images/app/hand-with-nectly-button.svg" alt="Hand with Nectly Button" />
                      </div>
                    </div>
    `;
  } else {
    console.error(`Element with ID ${proShareLinkElementId} not found.`);
  }
}


function getVisibleProCalendar() {
  if (window.innerWidth >= 1024) {
    return proCalendar || mobileProCalendar;
  } else {
    return mobileProCalendar || proCalendar;
  }
}


function proSlotsFailed() {
  const errorMessage = `
                    <div id="pro-post-reserve-slot-error" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <p class="error-message"><strong>Retrieving slots failed.</strong></p>
                      <p>Try to refresh later.</p>
                    </div>
`;
  const postReserveSlotElement = document.getElementById(postReserveSlotProElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = errorMessage;
  } else {
    console.error(`Element with ID ${postReserveSlotProElementId} not found.`);
  }
}


function getVisibleSeekerCalendar() {
  if (window.innerWidth >= 1024) {
    return seekerCalendar || mobileSeekerCalendar;
  } else {
    return mobileSeekerCalendar || seekerCalendar;
  }
}

let resolveProDateElements = [];
let proLastDayInMonth = null;
let activeProDayElement = null;

function loopProDaysInMonth(self, dateEl) {
  const tzOffset = (new Date()).getTimezoneOffset();
  const leftArrow = self.context.mainElement.querySelectorAll('[data-vc-arrow="prev"]');
  const rightArrow = self.context.mainElement.querySelectorAll('[data-vc-arrow="prev"]');
  if (leftArrow.length > 0) leftArrow[0].disabled = true;
  if (rightArrow.length > 0) rightArrow[0].disabled = true;
  const btnEl = dateEl.querySelector('[data-vc-date-btn]');
  const btnDate = new Date(dateEl.getAttribute('data-vc-date'));
  btnDate.setTime(btnDate.getTime() + tzOffset * 60000);
  if (btnDate.getMonth() !== self.context.selectedMonth) {
    return;
  }
  if (activeProDayElement === null) {
    const today = new Date();
    if (today.getDate() === btnDate.getDate()) {
      activeProDayElement = btnEl;
    }
  }
  const day = btnEl.innerText;
  if (parseInt(day) === 1) {
    resolveProDateElements = [dateEl];
    proLastDayInMonth = getLastDayOfMonth(btnDate.getFullYear(), convertIntMonthToString(btnDate.getMonth()));
  } else {
    resolveProDateElements.push(dateEl);
  }

  if (proLastDayInMonth.getDate() === btnDate.getDate()) {
    getProCurrentDate(proLastDayInMonth.toISOString(), proLastDayInMonth.getTimezoneOffset(), function(currentDay) {
      const busyDaysInMonth = mergeAppointmentsAndSlots(currentDay);
      for (const dateEl of resolveProDateElements) {
        const btnEl = dateEl.querySelector('[data-vc-date-btn]');
        const btnDate = new Date(dateEl.getAttribute('data-vc-date'));
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        btnDate.setHours(0, 0, 0, 0);
        const day = btnEl.innerText;
        if (btnDate < today) continue;
        if (busyDaysInMonth.indexOf(parseInt(day)) !== -1) {
          setDayElementAsBusy(btnEl);
        }
      }
      resolveProDateElements = [];
      if (leftArrow.length > 0) leftArrow[0].disabled = false;
      if (rightArrow.length > 0) rightArrow[0].disabled = false;
      console.log("Days in month updated")
    },
    function(error) {
      console.log("Error fetching slots:", error);
      resolveProDateElements = [];
      if (leftArrow.length > 0) leftArrow[0].disabled = false;
      if (rightArrow.length > 0) rightArrow[0].disabled = false;
    });
  }
}


function renderProCalendar(onChange, elementId) {
  const { Calendar } = window.VanillaCalendarPro;
  const calendar = new Calendar(
    `#${elementId}`, {
      onCreateDateEls: loopProDaysInMonth,
      disableAllDates: true,
      enableDates:[getEnabledDates()],
      firstWeekday: 0,
      type: 'default',
      onClickArrow(self) {
        console.log("Month changed to", self.context.selectedYear, self.context.selectedMonth);
        onChange('month', convertIntMonthToString(self.context.selectedMonth));
      },
      onClickDate(self, pointerEvent) {
        const btnEl = pointerEvent.srcElement;
        console.log("Day clicked", self.context.selectedDates, btnEl);
        activeProDayElement = btnEl;
        onChange('value', self.context.selectedDates[0]);
      },
  });
  calendar.init();
  return calendar;
}


function updateProCalendarDays(busyDaysInMonth) {
  console.log("Updating calendar days with busy days:", busyDaysInMonth);
  if (activeProDayElement) {
    const day = activeProDayElement.innerText;
    if (busyDaysInMonth.indexOf(parseInt(day)) !== -1) {
      setDayElementAsBusy(activeProDayElement);
    }
  }
}


function onProCalendarChange(calendarParameter, value) {
  if (calendarParameter === "value") {
    console.log("Calendar value changed to", value);
    resetProAppointmentListContainer();
    proRefreshCalendarSlots();
  }
  if (calendarParameter === "month") {
    console.log("Calendar month changed to", value);
  }
}


function onMobileProCalendarChange(calendarParameter, value) {
  if (calendarParameter === "value") {
    console.log("Professional Mobile calendar value changed to", value);
    resetProAppointmentListContainer();
    proRefreshCalendarSlots();
  }
  if (calendarParameter === "month") {
    console.log("Professional Mobile calendar month changed to", value);
  }
}


function renderProSetupAvailabilityElement(index) {
  const proAddYourAvailabilityElement = document.getElementById(proAddYourAvailabilityElementId);
  if (proAddYourAvailabilityElement) {
    proAddYourAvailabilityElement.className = "setup-account-container flex flex-column halfgap";
    proAddYourAvailabilityElement.innerHTML = `
                    <div class="flex flex-row flex-vertical-center halfgap">
                      <h4 class="numbered-list-item flex flex-center">${index}</h4>
                      <h4 class="color-electric-blue">Add your availability</h4>
                    </div>
                    <div class="flex flex-row flex-vertical-bottom">
                      <div class="flex flex-column halfgap setup-account-container-content">
                        <p class="small-paragraph">Pick the times you’re open for conversations—your link will handle the rest.</p>
                      </div>
                      <div class="nectly-button-image-container">
                        <img class="setup-account-container-availability-image" src="images/app/hand-with-calendar.svg" alt="Hand with Calendar" />
                      </div>
                    </div>
    `;
  } else {
    console.error(`Element with ID ${proAddYourAvailabilityElementId} not found.`);
  }
}


function renderProSetup(currentDay) {
  resetProSetup();
  let countOfSetupSteps = 0;
  if (currentDay.allCreatedSlots.length === 0) countOfSetupSteps++;
  if (!currentDay.paymentAccount && !currentDay.charityPayout) countOfSetupSteps++;

  if (countOfSetupSteps === 0) {
    renderProLinkElement(0, currentDay.paymentAccountEligibleForPayout);
  } else {
    const proSetupYourAccountMessageElement = document.getElementById(proSetupYourAccountMessageElementId);
    if (proSetupYourAccountMessageElement) {
      proSetupYourAccountMessageElement.innerHTML = `<strong>Setup your Account</strong>`;
    } else {
      console.error(`Element with ID ${proSetupYourAccountMessageElementId} not found.`);
    }
    let index = 1;
    if (!currentDay.paymentAccount && !currentDay.charityPayout) renderProPaymentMethodElement(index++);
    if (currentDay.allCreatedSlots.length === 0) renderProSetupAvailabilityElement(index++);
    renderProLinkElement(index++, currentDay.paymentAccountEligibleForPayout);
    renderProShareLinkElement(index++);
  }
}


function proRenderEarnings(payouts) {
  const proEarningsElement = document.getElementById(proEarningsElementId);
  if (proEarningsElement) {
    const inReview = `
                <div class="setup-account-container flex flex-column halfgap">
                  <h4>In Review</h4>
                  <p class="price">$${payouts.inReview}</p>
                  <p class="box-paragraph"><i>This session wrapped recently—your payout will be released within the hour.</i></p>
                </div>
    `;
    const availableToWithdraw = `
                <div class="setup-account-container flex flex-column halfgap background-electric-blue color-white no-border">
                  <h4>Available to Withdraw</h4>
                  <p class="price">$${payouts.availableToWithdraw}</p>
                  <p class="box-paragraph"><i>These funds are all yours.</i></p>
                  <button id="update-payment-button" class="flex flex-center primary-button">Withdraw Now</button>
                </div>
    `;
    const totalEarnings = `
                <div class="setup-account-container flex flex-column halfgap background-neon-green no-border">
                  <h4>Total Earned with Nectly</h4>
                  <p class="price">$${payouts.earned}</p>
                  <p class="box-paragraph half-width"><i>You’ve turned time into impact.</i></p>
                  <div class="flex flex-row halfgap flex-vertical-center background-white fund-container">
                    <img src="images/app/funder.svg" alt="Funder" class="funder" />
                    <div class="flex title-icon-container background-light-blue">
                      <img src="images/app/present-icon.svg" alt="Payment Card Icon" />
                    </div>
                    <p class="price color-electric-blue">$60</p>
                    <i class="small-paragraph">paid out to Funds</i>
                  </div>
                  <button id="view-transaction-history-button" class="flex flex-vertical-center link-button">View Transaction history</button>
                  <!-- $60 donated through your sessions -->
                </div>
    `;
    let earnings = "";
    earnings += totalEarnings;
    earnings += inReview;
    /*if (parseFloat(payouts.inReview).toFixed(2) > 0) {
      earnings += inReview;
    }*/
    if (parseFloat(payouts.availableToWithdraw).toFixed(2) > 0) {
      earnings += availableToWithdraw;
    }
    /*if (parseFloat(payouts.earned).toFixed(2) > 0) {
      earnings += totalEarnings;
    }*/
    if (earnings.length > 0) {
      proEarningsElement.innerHTML = `
                  <p><strong>Your Nectly Earnings</strong></p>
                  ${earnings}
      `;
    }
  } else {
    console.error(`Element with ID ${proEarningsElementId} not found.`);
  }
}


function renderProAvailableSessions(currentDay) {
  const timeSelect =  document.getElementById(proNewSessionTimeSelect);
  timeSelect.innerHTML = "";
  currentDay.freeSlots.forEach(
    slot => {
      timeSelect.appendChild(
        new Option(renderSlotFromTo(slot), `${slot.startTime}@${slot.endTime}`)
      );
    }
  );
}


function proRefreshCalendarSlots(calledFromPage) {
  function resetNewSessionElement() {
    document.getElementById(proNewSessionDateSelect).innerHTML = `<option value="" disabled selected hidden>Date</option>`;
    document.getElementById(proNewSessionTimeSelect).innerHTML = `<option value="" disabled selected hidden>Time</option>`;
  }

  function renderNewSessionDate() {
    const selectedDate = getCalendarSelectedDate(getVisibleProCalendar());
    const stringDate = selectedDate.toLocaleString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
    document.getElementById(proNewSessionDateSelect).innerHTML = `<option value="" disabled selected hidden>${stringDate}</option>`;
  }

  function renderToday() {
    const selectedDate = getCalendarSelectedDate(getVisibleProCalendar());
    const stringToday = selectedDate.toLocaleString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
    const appointmentsTodayElemnet = document.getElementById(proTodayAppointmentsElementId);
    if (appointmentsTodayElemnet) {
      appointmentsTodayElemnet.innerHTML = stringToday;
    } else {
      console.error(`Element with ID ${proTodayAppointmentsElementId} not found.`);
    }
    const slotsTodayElemnet = document.getElementById(proTodaySlotsElementId);
    if (slotsTodayElemnet) {
      slotsTodayElemnet.innerHTML = stringToday;
    } else {
      console.error(`Element with ID ${proTodaySlotsElementId} not found.`);
    }
  }

  renderToday();
  proPostCreateSlot();
  resetNewSessionElement();
  const selectedDate = getCalendarSelectedDate(getVisibleProCalendar());
  getProCurrentDate(selectedDate.toISOString(), selectedDate.getTimezoneOffset(), function(currentDay) {
    console.log("Current day status:", currentDay);
    proRenderEarnings(currentDay.payouts);
    renderProSetup(currentDay);
    renderProAppointmentList(currentDay);
    renderProSlotsList(currentDay);
    renderNewSessionDate();
    renderProAvailableSessions(currentDay);
    updateProCalendarDays(mergeAppointmentsAndSlots(currentDay));
    if (currentDay.freeSlots.length > 0) {
      toggleSeekerConfirmationButton(false);
    } else {
      toggleSeekerConfirmationButton(true);
    }
    if (calledFromPage) {
      getVisibleProCalendar().update();
    }
  }, function(error) {
    console.error("Error fetching slots:", error);
    proSlotsFailed();
    toggleSeekerConfirmationButton(true);
  });
}


function proAppointmentsTabClick(clickedElement) {
  const activeAppointmentList = getActiveProAppointmentList();
  if (activeAppointmentList) {
    activeAppointmentList.classList.remove('active');
  }
  clickedElement.classList.add('active');
  proRefreshCalendarSlots();
}


function proSlotsTabClick(clickedElement) {
  const activeSlotList = getActiveProSlotList();
  if (activeSlotList) {
    activeSlotList.classList.remove('active');
  }
  clickedElement.classList.add('active');
  proRefreshCalendarSlots();
}


function proCancelMeeting(appointmentId) {
  console.log("Cancelling meeting:", appointmentId);
  return callApi(`/api/appointment/${appointmentId}`, 'DELETE')
      .then(data => {
          console.log('Appointment cancelled:', data)
          proRefreshCalendarSlots();
      })
      .catch((error) => {
          console.log('Error cancelling appointment:', error);
          proRefreshCalendarSlots();
      });
}


function proSelectSlot(startTime, endTime) {
  console.log("Deleting slot from", startTime, "to", endTime)
  return callApi(`/api/professional-slots?startTime=${encodeURIComponent(startTime)}&endTime=${encodeURIComponent(endTime)}`, 'DELETE')
      .then(data => {
          console.log(`Slot deleted ${startTime}-${endTime}:`, data);
          proRefreshCalendarSlots();
      })
      .catch((error) => {
          console.log(`Slot delete failed ${startTime}-${endTime}:`, error);
          proRefreshCalendarSlots();
      });
}


function proSelectSlots(params) {
  let promises = [];
  let idx = 0;
  function deleteOneSlot(slot) {
    return callApi(`/api/professional-slots?startTime=${encodeURIComponent(slot.startTime)}&endTime=${encodeURIComponent(slot.endTime)}`, 'DELETE')
      .then(data => {
          console.log(`Slot deleted`, data);
          idx += 1;
          if (params.length > idx) {
            promises.push(deleteOneSlot(params[idx]));
          } else {
            Promise.all(promises).then((values) => {
              console.log('All slots deleted:', values);
              proRefreshCalendarSlots();
            });
          }
      })
      .catch((error) => {
          console.log(`Slot delete failed`, error);
          idx += 1;
          if (params.length > idx) {
            promises.push(deleteOneSlot(params[idx]));
          } else {
            Promise.all(promises).then((values) => {
              console.log('All slots deleted:', values);
              proRefreshCalendarSlots();
            });
          }
      });
  }
  console.log("Deleting slots:", params);
  if (params.length > idx) {
    promises.push(deleteOneSlot(params[0]));
  }
}


function renderProSlotsList(currentDay) {
  function agregateSlotsByDate(slots) {
    const slotsByDate = new Map();
    slots.forEach(slot => {
      const slotDate = new Date(slot.startTime);
      const dateKey = `${slotDate.getFullYear()}-${String(slotDate.getMonth() + 1).padStart(2, '0')}-${String(slotDate.getDate()).padStart(2, '0')}`;
      if (!slotsByDate.has(dateKey)) {
        slotsByDate.set(dateKey, []);
      }
      slotsByDate.get(dateKey).push(slot);
    });
    return slotsByDate;
  }
  function displayMaxThreeTimeSlots(slots) {
    let ret = [];
    const loopEnd = Math.min(...[3, slots.length]);
    for (let i = 0; i < loopEnd; i++) {
      const fromTime = (new Date(slots[i].startTime)).toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
      const toTime =  (new Date(slots[i].endTime)).toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
      ret.push(`${fromTime} – ${toTime}`);
    }
    return ret.join('; ')
  }
  function renderSlotsDetail(slots) {
    let ret = "";
    slots.forEach(slot => {
      const fromTime = (new Date(slot.startTime)).toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
      const toTime =  (new Date(slot.endTime)).toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
      ret += `
                            <li id="available-slot-item-time" class="flex flex-row flex-center flex-between">
                              ${fromTime} – ${toTime}
                              <img id="proSelectSlot" src="images/app/delete-icon.svg" alt="Delete Icon" onclick="proSelectSlot('${slot.startTime}', '${slot.endTime}')" />
                            </li>
      `;
    });
    return ret;
  }
  function composeOnclickParameters(slots) {
    return JSON.stringify(slots);
  }

  const slotsListElement = document.getElementById(proSlotsListElementId);
  if (!slotsListElement) {
    console.error(`Element with ID ${proSlotsListElementId} not found.`);
  }
  const slotsTabElement = getActiveProSlotList();
  if (!slotsTabElement) {
    console.error('No active slots tab found.');
    return;
  }
  let workWithSlots;
  if (slotsTabElement.id === proSlotsDateTabElementId) {
    workWithSlots = currentDay.createdSlotsToDate;
  } else if (slotsTabElement.id === proSlotsAllTabElementId) {
    workWithSlots = currentDay.allCreatedSlots;
  } else {
    workWithSlots = currentDay.createdSlotsToday;
  }
  if (workWithSlots.length === 0) {
    slotsListElement.innerHTML = "";
    proRenderNoSlots();
    return;
  }
  const slotsByDate = agregateSlotsByDate(workWithSlots);
  let innerHTML = "";
  slotsByDate.forEach((slots, date) => {
    innerHTML += '<div class="available-slot-list-item flex flex-column toggle-pair">';
    innerHTML += `
                        <div class="available-slot-list-item-header flex flex-column quartergap">
                          <p id="slot-item-title">
                            ${date.toLocaleString('en-US', { weekday: 'long', month: 'short', day: 'numeric' })}
                          </p>
                          <p id="availableslot-item-times" class="available-slot-item-times small-paragraph toggle-panel toggle-a">
                            ${displayMaxThreeTimeSlots(slots)}...
                          </p>
                        </div>
    `;
    innerHTML += `
                        <div class="available-slot-list-item-settings flex flex-column halfgap toggle-panel toggle-b">
                          <ul>
                            ${renderSlotsDetail(slots)}
                          </ul>
                          <button type="button" class="delete-all-slots-button cancel-meeting-button flex flex-center color-pink quartergap" onclick='proSelectSlots(${composeOnclickParameters(slots)})')>
                            <img src="images/app/cancel-icon.svg" alt="Cancel Meeting Icon" />
                            <strong>Delete all slots</strong>
                          </button>
                        </div>
    `;
    innerHTML += '</div>';
  });
  slotsListElement.innerHTML = innerHTML;
}


function onProTimeSlotSelectChange() {
  const selectedDate = getCalendarSelectedDate(getVisibleProCalendar());
  proPostCreateSlot();
  getProCurrentDate(selectedDate.toISOString(), selectedDate.getTimezoneOffset(), function(currentDay) {
    console.log("Current day status:", currentDay);
    renderProSetup(currentDay);
    updateProCalendarDays(mergeAppointmentsAndSlots(currentDay));
    getVisibleProCalendar().update();
    renderProAppointmentList(currentDay);
    renderSeekerSlotsList(currentDay);
    if (currentDay.freeSlots.length > 0) {
      const timeSelect =  document.getElementById(proNewSessionTimeSelect);
      if (!timeSelect) {
        console.error(`Element with ID ${proNewSessionTimeSelect} not found.`);
        return;
      }
      if (currentDay.freeSlots.length !== timeSelect.options.length) {
        updateProCalendarDays(mergeAppointmentsAndSlots(currentDay));
      }
      toggleSeekerConfirmationButton(false);
    } else {
      updateProCalendarDays(mergeAppointmentsAndSlots(currentDay));
      toggleSeekerConfirmationButton(true);
    }
  }, function(error) {
    console.error("Error fetching professional's slots:", error);
    if (error.status === 400 && error.error === "400: Selected date cannot be in the past") {
      proSelectedDateIsinThePast();
    } else {
      proSlotsFailed();
    }
    toggleSeekerConfirmationButton(true);
  });
}


function proSaveSession(slotType, repeatCount) {
  const subject = '';
  const timeSelect =  document.getElementById(proNewSessionTimeSelect);
  if (!timeSelect) {
    console.error(`Element with ID ${proNewSessionTimeSelect} not found.`);
    return;
  }
  const selectedOption = timeSelect.options[timeSelect.selectedIndex];
  if (!selectedOption) {
    console.error("No slot selected.");
    return;
  }
  toggleSeekerConfirmationButton(true);
  const startTime = selectedOption.value.split('@')[0];
  const endTime = selectedOption.value.split('@')[1];
  console.log("Reserving session from", startTime, "to", endTime);
  const reserveSlotBody = {
    "startTime": startTime,
    "endTime": endTime,
    "title": subject,
    "slotType": slotType || getProRecurringValue(),
    "repeatCount": repeatCount || -1,  // TODO: implement in UI
  }
  const pro_id = getLinkPageUserId();
  console.log("Professional ID:", pro_id);
  console.log("Reserve slot body:", reserveSlotBody);
  callApi(`/api/professional-slots`, 'POST', reserveSlotBody)
        .then(data => {
            console.log('Current month:', data)
            onProTimeSlotSelectChange();
            onReserveProSlotSuccess();
        })
        .catch((error) => {
            console.error('Error saving professional session:', error);
            if (error.status === 400) {
              if (error.error === "400: Selected date cannot be in the past") { proSelectedDateIsinThePast(); }
              else if (error.error === "400: Slot is too soon for booking") { proSlotIsTooSoon(); }
              else { onReserveProSlotError(); }
            } else {
              onReserveProSlotError();
            }
        });
}


function getProRecurringValue() {
  const recurringSelect = document.getElementById(proRecurringSelectionElementId);
  if (!recurringSelect) {
    console.error(`Element with ID ${proRecurringSelectionElementId} not found.`);
    return null;
  }
  let selectedOption = null;
  for (const child of recurringSelect.children) {
    if (child.children[0].checked === true) {
      selectedOption = child.children[0];
      break;
    }
  }
  if (!selectedOption) {
    console.error("No recurring selected.");
    return null;
  }
  return selectedOption.value;
}


function renderProAppointmentList(currentDay) {
  const appointmentListElement = document.getElementById(proAppointmentListElementId);
  if (!appointmentListElement) {
    console.error(`Element with ID ${proAppointmentListElementId} not found.`);
  }
  const appointmentsTabElement = getActiveProAppointmentList();
  if (!appointmentsTabElement) {
    console.error('No active appointments tab found.');
    return;
  }
  let workWithAppointments;
  if (appointmentsTabElement.id === proAppointmentsDateTabElementId) {
    workWithAppointments = currentDay.appointmentsToDate;
  } else if (appointmentsTabElement.id === proAppointmentsAllTabElementId) {
    workWithAppointments = currentDay.appointments;
  } else {
    workWithAppointments = currentDay.appointmentsToday;
  }
  if (workWithAppointments.length === 0) {
    appointmentListElement.innerHTML = "";
    proRenderNoAppointments();
    return;
  }
  let innerHTML = "";
  workWithAppointments.forEach(
    (appointment) => {
      let subject = "";
      if (appointment.title) {
        subject = `
                    <p id="slot-item-subject">
                      ${appointment.title}
                    </p>
        `;
      }
      innerHTML += `
                <div class="slot-list-item flex flex-column">

                  <div class="slot-list-item-header flex flex-column quartergap padding-1">
                    <p id="slot-item-title">
                      Conversation with <strong>${appointment.attendees.join(', ')}</strong>
                    </p>
                  ${subject}
                    <p id="slot-item-date" class="slot-item-date">
                      ${renderAppointmentDate(appointment)}
                    </p>
                  </div>

                  <!--
                  <div id="slot-item-edit-icon" class="flex flex-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                      <g clip-path="url(#clip0_135_650)">
                        <path d="M4.68622 13.0637H0.936218V9.31375L8.87622 1.37625C9.46122 0.79125 10.4112 0.79125 10.9987 1.37625L12.6262 3.00375C13.2112 3.58875 13.2112 4.53875 12.6262 5.12625L4.68622 13.0662V13.0637Z" stroke="#283AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M8.43622 13.0638H12.9362" stroke="#283AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                      </g>
                      <defs>
                        <clipPath id="clip0_135_650">
                          <rect width="13.6275" height="13.6275" fill="white" transform="translate(0.186157 0.186279)"/>
                        </clipPath>
                      </defs>
                    </svg>
                  </div>
                  -->
                  <div class="slot-list-item-settings">
                    <div class="meeting-controls">
                      <div class="meeting-button-container flex flex-column gap-1">
                        <button id="joinMeetingButton" type="submit" class="primary-button flex flex-center" onclick="joinMeeting('${appointment.location}')">
                          Join Conversation
                        </button>
                        <button id="cancelMeetingButton" type="button" class="cancel-meeting-button flex flex-center color-pink quartergap" onclick="proCancelMeeting('${appointment.appointmentId}')">
                          <img src="images/app/cancel-icon.svg" alt="Cancel Meeting Icon" />
                          <strong>Cancel Conversation</strong>
                        </button>
                      </div>

                      <div id="cancel-conversation-window" class="cancel-conversation-window flex flex-column halfgap padding-1">
                        <p class="color-pink text-center"><strong>Cancel this conversation?</strong></p>
                        <p class="small-paragraph text-center">This will cancel your confirmed session with <strong>XY(gmail@gmail.com)</strong>.<br><br>
                          They’ll be notified right away.
                        </p>
                        <div class="flex custom-select-wrapper">
                          <textarea id="pro-cancel-message"class="custom-select" type="text" name="cancel-message" rows="2" placeholder="Message (optional)" /></textarea>
                        </div>
                        <label class="flex halfgap xsmall-paragraph">
                          <input type="checkbox" name="remove-slot" value="remove-slot">
                          <i>Also remove this time slot from my calendar</i>
                        </label>
                        <button id="cancelMeetingConfirmationButton" type="submit" class="primary-pink-button flex flex-center full-width">
                          Cancel Conversation
                        </button>
                        <button id="cancelMeetingDeclineButton" type="button" class="cancel-meeting-button flex flex-center color-electric-blue quartergap">
                          <strong>Decline</strong>
                        </button>
                      </div>
                    </div>
                  </div>

                </div>
`;
    });
  appointmentListElement.innerHTML = innerHTML;

  setupCancelMeetingToggle();
}


function resetProAppointmentListContainer() {
  const appointmentListElement = document.getElementById(proAppointmentListElementId);
  if (appointmentListElement) {
    appointmentListElement.innerHTML = "";
  } else {
    console.error(`Element with ID ${proAppointmentListElementId} not found.`);
  }
}


function getActiveProSlotList() {
  const slotsElement = document.getElementById(proSlotsElementId);
  if (slotsElement) {
    for (const child of slotsElement.children) {
      if (child.classList.contains('active')) {
        return child;
      }
    }
  } else {
    console.error(`Element with ID ${proSlotsElementId} not found.`);
    return null;
  }
}

function getActiveProAppointmentList() {
  const appointmentsElement = document.getElementById(proAppointmentsElementId);
  if (appointmentsElement) {
    for (const child of appointmentsElement.children) {
      if (child.classList.contains('active')) {
        return child;
      }
    }
  } else {
    console.error(`Element with ID ${proAppointmentsElementId} not found.`);
    return null;
  }
}


function proPostCreateSlot() {
  const postReserveSlotElement = document.getElementById(postReserveSlotProElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = "";
  } else {
    console.error(`Element with ID ${postReserveSlotProElementId} not found.`);
  }
  const noAppointmentsElement = document.getElementById(proNoAppointmentsElementId);
  if (noAppointmentsElement) {
    noAppointmentsElement.innerHTML = "";
  } else {
    console.error(`Element with ID ${proNoAppointmentsElementId} not found.`)
  }
  const noSlotsElement = document.getElementById(proNoSlotsElementId);
  if (noSlotsElement) {
    noSlotsElement.innerHTML = "";
  } else {
    console.error(`Element with ID ${proNoSlotsElementId} not found.`)
  }
}


function proRenderNoSlots() {
  const noSlotsElement = document.getElementById(proNoSlotsElementId);
  if (noSlotsElement) {
    noSlotsElement.innerHTML = "";
    noSlotsElement.innerHTML = `
                        <img src="images/connect-for-opportunities/how-it-works-3.svg" alt="Calendar Icon" />
                        <h4 class="text-center color-electric-blue">No time slots added yet</h4>
                        <p class="text-center">Choose the times you’re available, and they’ll appear here ready to book.</p>
    `;
  } else {
    console.error(`Element with ID ${proNoSlotsElementId} not found.`);
  }
}


function proRenderNoAppointments() {
  const noAppointmentsElement = document.getElementById(proNoAppointmentsElementId);
  if (noAppointmentsElement) {
    noAppointmentsElement.innerHTML = "";
    noAppointmentsElement.innerHTML = `
                        <img src="images/app/no-available-slots.svg" alt="No Booked Time Slots Icon" />
                        <h4 class="text-center color-electric-blue">No conversations booked yet</h4>
                        <p class="text-center">Once someone books time with you, it’ll appear here. Until then, share your link to start the right conversations — on your terms.</p>
    `;
  } else {
    console.error(`Element with ID ${proNoAppointmentsElementId} not found.`);
  }
}


function onReserveProSlotError() {
  const errorMessage = `
                    <div id="pro-post-reserve-slot-error" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <p class="error-message"><strong>That time’s no longer available.</strong></p>
                      <p>Don’t worry, just choose another time for the session.</p>
                    </div>
`;
  const postReserveSlotElement = document.getElementById(postReserveSlotProElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = errorMessage;
  } else {
    console.error(`Element with ID ${postReserveSlotProElementId} not found.`);
  }
}


function onReserveProSlotSuccess() {
  const successMessage = `
                    <div id="pro-post-reserve-slot-success" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <img src="images/app/email-sent.svg" alt="Email Sent Icon" />
                      <h4>You’re all set.</h4>
                      <p>Your session slot is reserved.</p>
                    </div>
`;
  const postReserveSlotElement = document.getElementById(postReserveSlotProElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = successMessage;
  } else {
    console.error(`Element with ID ${postReserveSlotProElementId} not found.`);
  }
}


function proSelectedDateIsinThePast() {
  const errorMessage = `
                    <div id="pro-post-reserve-slot-error" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <p class="error-message"><strong>Selected date cannot be in the past.</strong></p>
                      <p>Don’t worry, just choose another slot to create the session.</p>
                    </div>
`;
  const postReserveSlotElement = document.getElementById(postReserveSlotProElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = errorMessage;
  } else {
    console.error(`Element with ID ${postReserveSlotProElementId} not found.`);
  }
}


function proSlotIsTooSoon() {
  const errorMessage = `
                    <div id="pro-post-reserve-slot-error" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <p class="error-message"><strong>Selected slot is to soon in the future.</strong></p>
                      <p>Don’t worry, just choose another slot to create the session.</p>
                    </div>
`;
  const postReserveSlotElement = document.getElementById(postReserveSlotProElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = errorMessage;
  } else {
    console.error(`Element with ID ${postReserveSlotProElementId} not found.`);
  }
}


function refreshSessionBalanceSummary(countOfPaidSessions, countOfUsedSession) {
  const summaryElement = document.getElementById(sessionBalanceSummaryElementId);
  if (summaryElement) {
    summaryElement.innerHTML = `<i>Remaining: ${countOfPaidSessions - countOfUsedSession} of ${countOfPaidSessions} sessions</i>`;
  } else {
    console.error(`Element with ID ${sessionBalanceSummaryElementId} not found.`);
  }
  const progressBar = document.getElementById(seekerBalanceProgressBarElementId);
  if (progressBar) {
    progressBar.style.width = `${((countOfPaidSessions - countOfUsedSession) / countOfPaidSessions) * 100}%`;
  } else {
    console.error(`Element with ID ${seekerBalanceProgressBarElementId} not found.`);
  }
}

function seekerSlotsFailed() {
  const errorMessage = `
                    <div id="seeker-post-reserve-slot-error" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <p class="error-message"><strong>Retrieving slots failed.</strong></p>
                      <p>Try to refresh later.</p>
                    </div>
`;
  const postReserveSlotElement = document.getElementById(postReserveSlotSeekerElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = errorMessage;
  } else {
    console.error(`Element with ID ${postReserveSlotSeekerElementId} not found.`);
  }
}


function seekerNoMoreAvailableSlots() {
  const errorMessage = `
                    <div id="seeker-post-reserve-slot-no-slots" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <img src="images/app/no-available-slots.svg" alt="No Available Slots Icon" />
                      <h4>All pre-paid sessions are booked already.</h4>
                      <p>Add more sessions to continue.</p>
                    </div>
`;
  const postReserveSlotElement = document.getElementById(postReserveSlotSeekerElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = errorMessage;
  } else {
    console.error(`Element with ID ${postReserveSlotSeekerElementId} not found.`);
  }
}


function getCalendarSelectedDate(cal) {
  if (cal.context.selectedDates.length > 0) {
    return new Date(cal.context.selectedDates[0]);
  }
  return new Date();
}


function getEnabledDates() {
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  const yyyy = today.getFullYear();
  const mm = String(today.getMonth() + 1).padStart(2, '0');
  const dd = String(today.getDate()).padStart(2, '0');
  return `${yyyy}-${mm}-${dd}:2099-12-31`
}


let resolveSeekerDateElements = [];
let seekerLastDayInMonth = null;
let activeSeekerDayElement = null;


function setDayElementAsBusy(btnEl) {
  btnEl.style.backgroundColor = "#EBFFD6";
}


function loopSeekerDaysInMonth(self, dateEl) {
  const tzOffset = (new Date()).getTimezoneOffset();
  const leftArrow = self.context.mainElement.querySelectorAll('[data-vc-arrow="prev"]');
  const rightArrow = self.context.mainElement.querySelectorAll('[data-vc-arrow="prev"]');
  if (leftArrow.length > 0) leftArrow[0].disabled = true;
  if (rightArrow.length > 0) rightArrow[0].disabled = true;
  const btnEl = dateEl.querySelector('[data-vc-date-btn]');
  const btnDate = new Date(dateEl.getAttribute('data-vc-date'));
  btnDate.setTime(btnDate.getTime() + tzOffset * 60000);
  if (btnDate.getMonth() !== self.context.selectedMonth) {
    return;
  }
  if (activeSeekerDayElement === null) {
    const today = new Date();
    if (today.getDate() === btnDate.getDate()) {
      activeSeekerDayElement = btnEl;
    }
  }
  const day = btnEl.innerText;
  if (parseInt(day) === 1) {
    resolveSeekerDateElements = [dateEl];
    seekerLastDayInMonth = getLastDayOfMonth(btnDate.getFullYear(), convertIntMonthToString(btnDate.getMonth()));
  } else {
    resolveSeekerDateElements.push(dateEl);
  }

  if (seekerLastDayInMonth.getDate() === btnDate.getDate()) {
    getSeekerCurrentDate(seekerLastDayInMonth.toISOString(), seekerLastDayInMonth.getTimezoneOffset(), function(currentDay) {
      const busyDaysInMonth = mergeAppointmentsAndSlots(currentDay);
      for (const dateEl of resolveSeekerDateElements) {
        const btnEl = dateEl.querySelector('[data-vc-date-btn]');
        const btnDate = new Date(dateEl.getAttribute('data-vc-date'));
        const today = new Date();
        today.setHours(0, 0, 0, 0);
        btnDate.setHours(0, 0, 0, 0);
        const day = btnEl.innerText;
        if (btnDate < today) continue;
        if (busyDaysInMonth.indexOf(parseInt(day)) !== -1) {
          setDayElementAsBusy(btnEl);
        }
      }
      resolveSeekerDateElements = [];
      if (leftArrow.length > 0) leftArrow[0].disabled = false;
      if (rightArrow.length > 0) rightArrow[0].disabled = false;
      console.log("Days in month updated")
    },
    function(error) {
      console.log("Error fetching slots:", error);
      resolveSeekerDateElements = [];
      if (leftArrow.length > 0) leftArrow[0].disabled = false;
      if (rightArrow.length > 0) rightArrow[0].disabled = false;
    });
  }
}


function renderSeekerChooseHowYouPayElement(index) {
  const seekerSetPaymentMethodElement = document.getElementById(seekerSetPaymentMethodElementId);
  if (seekerSetPaymentMethodElement) {
    seekerSetPaymentMethodElement.className = "setup-account-container flex flex-column halfgap";
    seekerSetPaymentMethodElement.innerHTML = `
                    <div class="flex flex-row flex-vertical-center halfgap">
                      <h4 class="numbered-list-item flex flex-center">${index}</h4>
                      <h4 class="color-electric-blue">Choose how you’ll pay</h4>
                    </div>
                    <div class="flex flex-row flex-vertical-bottom">
                      <div class="flex flex-column halfgap setup-account-container-content">
                        <p class="small-paragraph">Set up your payment—either Pay-As-You-Go or Preload Sessions.</p>
                        <button class="flex flex-center primary-button" onclick='startCreditCardAuthorization("${getMeta('stripe-public-key')}")'>Set Your Payment Method</button>
                      </div>
                      <div class="nectly-button-image-container">
                        <img class="setup-account-container-payment-image" src="images/connect-for-opportunities/how-it-works-1-desktop.svg" alt="Hand with card" />
                      </div>
                    </div>
    `;
  } else {
    console.error(`Element with ID ${seekerSetPaymentMethodElementId} not found.`);
  }
}


function renderSeekerSetupAvailabilityElement(index) {
  const seekerAddYourAvailabilityElement = document.getElementById(seekerAddYourAvailabilityElementId);
  if (seekerAddYourAvailabilityElement) {
    seekerAddYourAvailabilityElement.className = "setup-account-container flex flex-column halfgap";
    seekerAddYourAvailabilityElement.innerHTML = `
                    <div class="flex flex-row flex-vertical-center halfgap">
                      <h4 class="numbered-list-item flex flex-center">${index}</h4>
                      <h4 class="color-electric-blue">Add your availability</h4>
                    </div>
                    <div class="flex flex-row flex-vertical-bottom">
                      <div class="flex flex-column halfgap setup-account-container-content">
                        <p class="small-paragraph">Pick the times you’re open for conversations—your link will handle the rest.</p>
                      </div>
                      <div class="nectly-button-image-container">
                        <img class="setup-account-container-availability-image" src="images/app/hand-with-calendar.svg" alt="Hand with Calendar" />
                      </div>
                    </div>
    `;
  } else {
    console.error(`Element with ID ${seekerAddYourAvailabilityElementId} not found.`);
  }
}


function renderSeekerLinkElement(index) {
  const seekerShareLinkElement = document.getElementById(seekerShareLinkElementId);
  if (seekerShareLinkElement) {
    if (index > 0) {
      seekerShareLinkElement.className = "setup-account-container flex flex-column halfgap";
      seekerShareLinkElement.innerHTML = `
                <div class="setup-account-container flex flex-column halfgap">
                  <div class="flex flex-row flex-vertical-center halfgap">
                    <h4 class="numbered-list-item flex flex-center">${index}</h4>
                    <h4 class="color-electric-blue">Your link becomes active!</h4>
                  </div>
                  <p class="small-paragraph">Once payment and availability are set, you’ll see your personal Nectly link activated here—ready to share.</p>
                  <button disabled=true  id="nectly-link-button" class="flex flex-center halfgap" style="background-color: #CCCCCC;">
                    <img src="images/app/nectly-icon-disabled.svg" alt="Nectly Link Icon" />
                    Copy your Nectly link
                    <img src="images/app/link-icon.svg" alt="Link Icon" />
                  </button>
                </div>
    `;
    } else {
      seekerShareLinkElement.className = "setup-account-container flex flex-column halfgap";
      seekerShareLinkElement.innerHTML = `
        <button ${getMeta('buttons-disabled')} id="nectly-link-button" class="flex flex-center halfgap glow-button-wrapper" onclick="window.navigator.clipboard.writeText('${getMeta('seeker-link')}');">
          <img src="images/app/nectly-icon.svg" alt="Nectly Link Icon" />
          <div class="nectly-link-text flex flex-column gap-2">
            <p class="primary-text"><strong>Copy your Nectly link</strong></p>
            <p class="secondary-text"><strong>Copied!</strong><br>Now go make it happen.</p>
          </div>
          <img src="images/app/link-icon.svg" alt="Link Icon"/>
          <div class="wrapper">
            <div class="one"></div>
            <div class="two"></div>
            <div class="threee"></div>
            <div class="four"></div>
          </div>
        </button>
        <p class="box-paragraph"><i>Share it in outreach messages, LinkedIn, or email. It shows your calendar and handles payment automatically.</i></p>
      `;
      setupNectlyLinkButtonAnimation();
    }
  }
}


function renderSeekerSetup(currentDay) {
  resetSeekerSetup();
  let countOfSetupSteps = 0;
  if (currentDay.allCreatedSlots.length === 0) countOfSetupSteps++;
  if (!currentDay.paymentMethodSet) countOfSetupSteps++;

  if (countOfSetupSteps === 0) {
    renderSeekerLinkElement(0);
  } else {
    const seekerSetupYourAccountMessageElement = document.getElementById(seekerSetupYourAccountMessageElementId);
    if (seekerSetupYourAccountMessageElement) {
      seekerSetupYourAccountMessageElement.innerHTML = `<strong>Setup your Account</strong>`;
    } else {
      console.error(`Element with ID ${seekerSetupYourAccountMessageElementId} not found.`);
    }
    let index = 1;
    if (!currentDay.paymentMethodSet) renderSeekerChooseHowYouPayElement(index++);
    if (currentDay.allCreatedSlots.length === 0) renderSeekerSetupAvailabilityElement(index++);
    renderSeekerLinkElement(index++);
  }
}


function renderSeekerCalendar(onChange, elementId) {
  const { Calendar } = window.VanillaCalendarPro;
  const calendar = new Calendar(
    `#${elementId}`, {
      onCreateDateEls: loopSeekerDaysInMonth,
      disableAllDates: true,
      enableDates:[getEnabledDates()],
      firstWeekday: 0,
      type: 'default',
      onClickArrow(self) {
        console.log("Month changed to", self.context.selectedYear, self.context.selectedMonth);
        onChange('month', convertIntMonthToString(self.context.selectedMonth));
      },
      onClickDate(self, pointerEvent) {
        const btnEl = pointerEvent.srcElement;
        console.log("Day clicked", self.context.selectedDates, btnEl);
        activeSeekerDayElement = btnEl;
        onChange('value', self.context.selectedDates[0]);
      },
  });
  calendar.init();
  return calendar;
}


function mergeAppointmentsAndSlots(currentDay) {
  const appointments = new Set(currentDay.appointmentsInMonth);
  const slots = new Set(currentDay.slotsInMonth);
  const busyDaysInMonth = new Set([...appointments, ...slots]);
  return Array.from(busyDaysInMonth);
}


function updateSeekerCalendarDays(busyDaysInMonth) {
  console.log("Updating calendar days with busy days:", busyDaysInMonth);
  if (activeSeekerDayElement) {
    const day = activeSeekerDayElement.innerText;
    if (busyDaysInMonth.indexOf(parseInt(day)) !== -1) {
      setDayElementAsBusy(activeSeekerDayElement);
    }
  }
}


function onSeekerCalendarChange(calendarParameter, value) {
  if (calendarParameter === "value") {
    console.log("Calendar value changed to", value);
    resetAppointmentListContainer();
    seekerRefreshCalendarSlots();
  }
  if (calendarParameter === "month") {
    console.log("Calendar month changed to", value);
  }
}


function onMobileSeekerCalendarChange(calendarParameter, value) {
  if (calendarParameter === "value") {
    console.log("Seeker Mobile calendar value changed to", value);
    resetAppointmentListContainer();
    seekerRefreshCalendarSlots();
  }
  if (calendarParameter === "month") {
    console.log("Seeker Mobile calendar month changed to", value);
  }
}


function renderSlotFromTo(slot) {
  const startTime = new Date(slot.startTime);
  const endTime = new Date(slot.endTime);
  const fromDate = startTime.toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
  const toDate = endTime.toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
  return `${fromDate} - ${toDate}`;
}


function renderAvailableSessions(currentDay) {
  const timeSelect =  document.getElementById(seekerNewSessionTimeSelect);
  timeSelect.innerHTML = "";
  currentDay.freeSlots.forEach(
    slot => {
      timeSelect.appendChild(
        new Option(renderSlotFromTo(slot), `${slot.startTime}@${slot.endTime}`)
      );
    }
  );
}


function getActiveSeekerAppointmentList() {
  const appointmentsElement = document.getElementById(seekerAppointmentsElementId);
  if (appointmentsElement) {
    for (const child of appointmentsElement.children) {
      if (child.classList.contains('active')) {
        return child;
      }
    }
  } else {
    console.error(`Element with ID ${seekerAppointmentsElementId} not found.`);
    return null;
  }
}


function getActiveSeekerSlotList() {
  const slotsElement = document.getElementById(seekerSlotsElementId);
  if (slotsElement) {
    for (const child of slotsElement.children) {
      if (child.classList.contains('active')) {
        return child;
      }
    }
  } else {
    console.error(`Element with ID ${seekerSlotsElementId} not found.`);
    return null;
  }
}


function seekerAppointmentsTabClick(clickedElement) {
  const activeAppointmentList = getActiveSeekerAppointmentList();
  if (activeAppointmentList) {
    activeAppointmentList.classList.remove('active');
  }
  clickedElement.classList.add('active');
  seekerRefreshCalendarSlots();
}


function seekerSlotsTabClick(clickedElement) {
  const activeSlotList = getActiveSeekerSlotList();
  if (activeSlotList) {
    activeSlotList.classList.remove('active');
  }
  clickedElement.classList.add('active');
  seekerRefreshCalendarSlots();
}


function seekerRefreshCalendarSlots(calledFromPage) {
  function resetNewSessionElement() {
    document.getElementById(seekerNewSessionDateSelect).innerHTML = `<option value="" disabled selected hidden>Date</option>`;
    document.getElementById(seekerNewSessionTimeSelect).innerHTML = `<option value="" disabled selected hidden>Time</option>`;
  }

  function renderNewSessionDate() {
    const selectedDate = getCalendarSelectedDate(getVisibleSeekerCalendar());
    const stringDate = selectedDate.toLocaleString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
    document.getElementById(seekerNewSessionDateSelect).innerHTML = `<option value="" disabled selected hidden>${stringDate}</option>`;
  }

  function renderToday() {
    const selectedDate = getCalendarSelectedDate(getVisibleSeekerCalendar());
    const stringToday = selectedDate.toLocaleString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
    const appointmentsTodayElemnet = document.getElementById(seekerTodayAppointmentsElementId);
    if (appointmentsTodayElemnet) {
      appointmentsTodayElemnet.innerHTML = stringToday;
    } else {
      console.error(`Element with ID ${seekerTodayAppointmentsElementId} not found.`);
    }
    const slotsTodayElemnet = document.getElementById(seekerTodaySlotsElementId);
    if (slotsTodayElemnet) {
      slotsTodayElemnet.innerHTML = stringToday;
    } else {
      console.error(`Element with ID ${seekerTodaySlotsElementId} not found.`);
    }
  }

  renderToday();
  resetSeekerPostCreateSlot();
  resetNewSessionElement();
  const selectedDate = getCalendarSelectedDate(getVisibleSeekerCalendar());
  getSeekerCurrentDate(selectedDate.toISOString(), selectedDate.getTimezoneOffset(), function(currentDay) {
    console.log("Current day status:", currentDay);
    renderSeekerSetup(currentDay);
    renderSeekerAppointmentList(currentDay);
    renderSeekerSlotsList(currentDay);
    renderNewSessionDate();
    if (!currentDay.paymentMethodSet && currentDay.countOfPaidSessions <= currentDay.countOfUsedSession) {
      seekerNoMoreAvailableSlots();
      toggleSeekerConfirmationButton(true);
      return;
    }
    updateSeekerCalendarDays(mergeAppointmentsAndSlots(currentDay));
    renderAvailableSessions(currentDay);
    if (currentDay.freeSlots.length > 0) {
      toggleSeekerConfirmationButton(false);
    } else {
      toggleSeekerConfirmationButton(true);
    }
    refreshSessionBalanceSummary(currentDay.countOfPaidSessions, currentDay.countOfUsedSession);
    if (calledFromPage) {
      getVisibleSeekerCalendar().update();
    }
  }, function(error) {
    console.error("Error fetching slots:", error);
    seekerSlotsFailed();
    toggleSeekerConfirmationButton(true);
  });
}


function toggleSeekerConfirmationButton(disabled) {
  document.getElementById(confirmMeetingButtonElementId).disabled  = disabled;
}


function resetSeekerPostCreateSlot() {
  const postReserveSlotElement = document.getElementById(postReserveSlotSeekerElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = "";
  } else {
    console.error(`Element with ID ${postReserveSlotSeekerElementId} not found.`);
  }
  const noAppointmentsElement = document.getElementById(seekerNoAppointmentsElementId);
  if (noAppointmentsElement) {
    noAppointmentsElement.innerHTML = "";
  } else {
    console.error(`Element with ID ${seekerNoAppointmentsElementId} not found.`)
  }
  const noSlotsElement = document.getElementById(seekerNoSlotsElementId);
  if (noSlotsElement) {
    noSlotsElement.innerHTML = "";
  } else {
    console.error(`Element with ID ${seekerNoSlotsElementId} not found.`)
  }
}


function getRecurringValue() {
  const recurringSelect = document.getElementById(seekerRecurringSelectionElementId);
  if (!recurringSelect) {
    console.error(`Element with ID ${seekerRecurringSelectionElementId} not found.`);
    return null;
  }
  let selectedOption = null;
  for (const child of recurringSelect.children) {
    if (child.children[0].checked === true) {
      selectedOption = child.children[0];
      break;
    }
  }
  if (!selectedOption) {
    console.error("No recurring selected.");
    return null;
  }
  return selectedOption.value;
}


function seekerSaveSession(slotType, repeatCount) {
  const subject = '';
  const timeSelect =  document.getElementById(seekerNewSessionTimeSelect);
  if (!timeSelect) {
    console.error(`Element with ID ${seekerNewSessionTimeSelect} not found.`);
    return;
  }
  const selectedOption = timeSelect.options[timeSelect.selectedIndex];
  if (!selectedOption) {
    console.error("No slot selected.");
    return;
  }
  toggleSeekerConfirmationButton(true);
  const startTime = selectedOption.value.split('@')[0];
  const endTime = selectedOption.value.split('@')[1];
  console.log("Reserving session from", startTime, "to", endTime);
  const reserveSlotBody = {
    "startTime": startTime,
    "endTime": endTime,
    "title": subject,
    "slotType": slotType || getRecurringValue(),
    "repeatCount": repeatCount || -1,  // TODO: implement in UI
  }
  const seeker_id = getLinkPageUserId();
  console.log("Seeker ID:", seeker_id);
  console.log("Reserve slot body:", reserveSlotBody);
  callApi(`/api/seeker-slots`, 'POST', reserveSlotBody)
        .then(data => {
            console.log('Current month:', data)
            onTimeSlotSelectChange();
            onReserveSeekerSlotSuccess();
        })
        .catch((error) => {
            console.error('Error saving seeker session:', error);
            if (error.status === 400) {
              if (error.error === "400: Selected date cannot be in the past") { seekerSelectedDateIsinThePast(); }
              else if (error.error === "400: Slot is too soon for booking") { seekerSlotIsTooSoon(); }
              else { onReserveSeekerSlotError(); }
            } else {
              onReserveSeekerSlotError();
            }
        });
}


function onReserveSeekerSlotError() {
  const errorMessage = `
                    <div id="seeker-post-reserve-slot-error" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <p class="error-message"><strong>That time’s no longer available.</strong></p>
                      <p>Don’t worry, just choose another time for the session.</p>
                    </div>
`;
  const postReserveSlotElement = document.getElementById(postReserveSlotSeekerElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = errorMessage;
  } else {
    console.error(`Element with ID ${postReserveSlotSeekerElementId} not found.`);
  }
}


function onReserveSeekerSlotSuccess() {
  const successMessage = `
                    <div id="seeker-post-reserve-slot-success" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <img src="images/app/email-sent.svg" alt="Email Sent Icon" />
                      <h4>You’re all set.</h4>
                      <p>Your session slot is reserved.</p>
                    </div>
`;
  const postReserveSlotElement = document.getElementById(postReserveSlotSeekerElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = successMessage;
  } else {
    console.error(`Element with ID ${postReserveSlotSeekerElementId} not found.`);
  }
}


function seekerSelectedDateIsinThePast() {
  const errorMessage = `
                    <div id="seeker-post-reserve-slot-error" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <p class="error-message"><strong>Selected date cannot be in the past.</strong></p>
                      <p>Don’t worry, just choose another slot to create the session.</p>
                    </div>
`;
  const postReserveSlotElement = document.getElementById(postReserveSlotSeekerElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = errorMessage;
  } else {
    console.error(`Element with ID ${postReserveSlotSeekerElementId} not found.`);
  }
}


function seekerSlotIsTooSoon() {
  const errorMessage = `
                    <div id="seeker-post-reserve-slot-error" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <p class="error-message"><strong>Selected slot is to soon in the future.</strong></p>
                      <p>Don’t worry, just choose another slot to create the session.</p>
                    </div>
`;
  const postReserveSlotElement = document.getElementById(postReserveSlotSeekerElementId);
  if (postReserveSlotElement) {
    postReserveSlotElement.innerHTML = errorMessage;
  } else {
    console.error(`Element with ID ${postReserveSlotSeekerElementId} not found.`);
  }
}


function onTimeSlotSelectChange() {
  const selectedDate = getCalendarSelectedDate(getVisibleSeekerCalendar());
  resetSeekerPostCreateSlot();
  getSeekerCurrentDate(selectedDate.toISOString(), selectedDate.getTimezoneOffset(), function(currentDay) {
    renderSeekerSetup(currentDay);
    updateSeekerCalendarDays(mergeAppointmentsAndSlots(currentDay));
    getVisibleSeekerCalendar().update();
    console.log("Current day status:", currentDay);
    if (!currentDay.paymentMethodSet && currentDay.countOfPaidSessions <= currentDay.countOfUsedSession) {
      seekerNoMoreAvailableSlots();
      toggleSeekerConfirmationButton(true);
      return;
    }
    renderSeekerAppointmentList(currentDay);
    renderSeekerSlotsList(currentDay);
    if (currentDay.freeSlots.length > 0) {
      const timeSelect =  document.getElementById(seekerNewSessionTimeSelect);
      if (!timeSelect) {
        console.error(`Element with ID ${seekerNewSessionTimeSelect} not found.`);
        return;
      }
      if (currentDay.freeSlots.length !== timeSelect.options.length) {
        renderAvailableSessions(currentDay);
      }
      toggleSeekerConfirmationButton(false);
    } else {
      renderAvailableSessions(currentDay);
      toggleSeekerConfirmationButton(true);
    }
  }, function(error) {
    console.error("Error fetching seeker's slots:", error);
    if (error.status === 400 && error.error === "400: Selected date cannot be in the past") {
      seekerSelectedDateIsinThePast();
    } else {
      seekerSlotsFailed();
    }
    toggleSeekerConfirmationButton(true);
  });
}


function resetAppointmentListContainer() {
  const appointmentListElement = document.getElementById(seekerAppointmentListElementId);
  if (appointmentListElement) {
    appointmentListElement.innerHTML = "";
  } else {
    console.error(`Element with ID ${seekerAppointmentListElementId} not found.`);
  }
}


function renderAppointmentDate(appointment) {
  const appointmentStart = new Date(appointment.startTime);
  const appointmentEnd = new Date(appointment.endTime);
  const fromTime = appointmentStart.toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
  const toTime = appointmentEnd.toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
  const day = appointmentStart.toLocaleString('en-US', { weekday: 'long', month: 'short', day: 'numeric', hour12: true });
  return `${fromTime} – ${toTime} | ${day}`;
}


function renderNoAppointments() {
  const noAppointmentsElement = document.getElementById(seekerNoAppointmentsElementId);
  if (noAppointmentsElement) {
    noAppointmentsElement.innerHTML = "";
    noAppointmentsElement.innerHTML = `
                        <img src="images/app/no-available-slots.svg" alt="No Booked Time Slots Icon" />
                        <h4 class="text-center color-electric-blue">No conversations booked yet</h4>
                        <p class="text-center">Once an expert books time with you, it’ll appear here. Until then, keep sharing your link to start the right conversations.</p>
    `;
  } else {
    console.error(`Element with ID ${seekerNoAppointmentsElementId} not found.`);
  }
}

function renderSeekerAppointmentList(currentDay) {
  const appointmentListElement = document.getElementById(seekerAppointmentListElementId);
  if (!appointmentListElement) {
    console.error(`Element with ID ${seekerAppointmentListElementId} not found.`);
  }
  const appointmentsTabElement = getActiveSeekerAppointmentList();
  if (!appointmentsTabElement) {
    console.error('No active appointments tab found.');
    return;
  }
  let workWithAppointments;
  if (appointmentsTabElement.id === seekerAppointmentsDateTabElementId) {
    workWithAppointments = currentDay.appointmentsToDate;
  } else if (appointmentsTabElement.id === seekerAppointmentsAllTabElementId) {
    workWithAppointments = currentDay.appointments;
  } else {
    workWithAppointments = currentDay.appointmentsToday;
  }
  if (workWithAppointments.length === 0) {
    appointmentListElement.innerHTML = "";
    renderNoAppointments();
    return;
  }
  let innerHTML = "";
  workWithAppointments.forEach(
    (appointment) => {
      let subject = "";
      if (appointment.title) {
        subject = `
                    <p id="slot-item-subject">
                      ${appointment.title}
                    </p>
        `;
      }
      innerHTML += `
                <div class="slot-list-item flex flex-column">

                  <div class="slot-list-item-header flex flex-column quartergap padding-1">
                    <p id="slot-item-title">
                      Conversation with <strong>${appointment.attendees.join(', ')}</strong>
                    </p>
                  ${subject}
                    <p id="slot-item-date" class="slot-item-date">
                      ${renderAppointmentDate(appointment)}
                    </p>
                  </div>

                  <!--
                  <div id="slot-item-edit-icon" class="flex flex-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                      <g clip-path="url(#clip0_135_650)">
                        <path d="M4.68622 13.0637H0.936218V9.31375L8.87622 1.37625C9.46122 0.79125 10.4112 0.79125 10.9987 1.37625L12.6262 3.00375C13.2112 3.58875 13.2112 4.53875 12.6262 5.12625L4.68622 13.0662V13.0637Z" stroke="#283AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M8.43622 13.0638H12.9362" stroke="#283AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                      </g>
                      <defs>
                        <clipPath id="clip0_135_650">
                          <rect width="13.6275" height="13.6275" fill="white" transform="translate(0.186157 0.186279)"/>
                        </clipPath>
                      </defs>
                    </svg>
                  </div>
                  -->
                  <div class="slot-list-item-settings">
                    <div class="meeting-controls">
                      <div class="meeting-button-container flex flex-column gap-1">
                        <button id="joinMeetingButton" type="submit" class="primary-button flex flex-center" onclick="joinMeeting('${appointment.location}')">
                          Join Conversation
                        </button>
                        <button id="cancelMeetingButton" type="button" class="cancel-meeting-button flex flex-center color-pink quartergap" onclick="seekerCancelMeeting('${appointment.appointmentId}')">
                          <img src="images/app/cancel-icon.svg" alt="Cancel Meeting Icon" />
                          <strong>Cancel Conversation</strong>
                        </button>
                      </div>

                      <div id="cancel-conversation-window" class="cancel-conversation-window flex flex-column halfgap padding-1">
                        <p class="color-pink text-center"><strong>Cancel this conversation?</strong></p>
                        <p class="small-paragraph text-center">This will cancel your confirmed session with <strong>XY(gmail@gmail.com)</strong>.<br><br>
                          They’ll be notified right away.
                        </p>
                        <div class="flex custom-select-wrapper">
                          <textarea id="seeker-cancel-message"class="custom-select" type="text" name="cancel-message" rows="2" placeholder="Message (optional)" /></textarea>
                        </div>
                        <label class="flex halfgap xsmall-paragraph">
                          <input type="checkbox" name="remove-slot" value="remove-slot">
                          <i>Also remove this time slot from my calendar</i>
                        </label>
                        <button id="cancelMeetingConfirmationButton" type="submit" class="primary-pink-button flex flex-center full-width">
                          Cancel Conversation
                        </button>
                        <button id="cancelMeetingDeclineButton" type="button" class="cancel-meeting-button flex flex-center color-electric-blue quartergap">
                          <strong>Decline</strong>
                        </button>
                      </div>
                    </div>
                  </div>

                </div>
`;
    });
  appointmentListElement.innerHTML = innerHTML;

  setupCancelMeetingToggle();
}


function renderNoSlots() {
  const noSlotsElement = document.getElementById(seekerNoSlotsElementId);
  if (noSlotsElement) {
    let textBelow = 'Choose the times you’re available, and they’ll appear here—ready for experts to book.';
    if (window.location.href.indexOf("professional-dashboard.html") !== -1) {
      textBelow = 'Choose the times you’re available, and they’ll appear here—ready to book.';
    }
    noSlotsElement.innerHTML = "";
    noSlotsElement.innerHTML = `
                        <img src="images/connect-for-opportunities/how-it-works-3.svg" alt="Calendar Icon" />
                        <h4 class="text-center color-electric-blue">No time slots added yet</h4>
                        <p class="text-center">${textBelow}</p>
    `;

  } else {
    console.error(`Element with ID ${seekerNoSlotsElementId} not found.`);
  }
}


function renderSeekerSlotsList(currentDay) {
  function agregateSlotsByDate(slots) {
    const slotsByDate = new Map();
    slots.forEach(slot => {
      const slotDate = new Date(slot.startTime);
      const dateKey = `${slotDate.getFullYear()}-${String(slotDate.getMonth() + 1).padStart(2, '0')}-${String(slotDate.getDate()).padStart(2, '0')}`;
      if (!slotsByDate.has(dateKey)) {
        slotsByDate.set(dateKey, []);
      }
      slotsByDate.get(dateKey).push(slot);
    });
    return slotsByDate;
  }
  function displayMaxThreeTimeSlots(slots) {
    let ret = [];
    const loopEnd = Math.min(...[3, slots.length]);
    for (let i = 0; i < loopEnd; i++) {
      const fromTime = (new Date(slots[i].startTime)).toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
      const toTime =  (new Date(slots[i].endTime)).toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
      ret.push(`${fromTime} – ${toTime}`);
    }
    return ret.join('; ')
  }
  function renderSlotsDetail(slots) {
    let ret = "";
    slots.forEach(slot => {
      const fromTime = (new Date(slot.startTime)).toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
      const toTime =  (new Date(slot.endTime)).toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true });
      ret += `
                            <li id="available-slot-item-time" class="flex flex-row flex-center flex-between">
                              ${fromTime} – ${toTime}
                              <img id="deleteSlot" src="images/app/delete-icon.svg" alt="Delete Icon" onclick="deleteSlot('${slot.startTime}', '${slot.endTime}')" />
                            </li>
      `;
    });
    return ret;
  }
  function composeOnclickParameters(slots) {
    return JSON.stringify(slots);
  }

  const slotsListElement = document.getElementById(seekerSlotsListElementId);
  if (!slotsListElement) {
    console.error(`Element with ID ${seekerSlotsListElementId} not found.`);
  }
  const slotsTabElement = getActiveSeekerSlotList();
  if (!slotsTabElement) {
    console.error('No active slots tab found.');
    return;
  }
  let workWithSlots;
  if (slotsTabElement.id === seekerSlotsDateTabElementId) {
    workWithSlots = currentDay.createdSlotsToDate;
  } else if (slotsTabElement.id === seekerSlotsAllTabElementId) {
    workWithSlots = currentDay.allCreatedSlots;
  } else {
    workWithSlots = currentDay.createdSlotsToday;
  }
  if (workWithSlots.length === 0) {
    slotsListElement.innerHTML = "";
    renderNoSlots();
    return;
  }
  const slotsByDate = agregateSlotsByDate(workWithSlots);
  let innerHTML = '';
  slotsByDate.forEach((slots, date) => {
    innerHTML += '<div class="available-slot-list-item flex flex-column toggle-pair">';
    innerHTML += `
                        <div class="available-slot-list-item-header flex flex-column quartergap">
                          <p id="slot-item-title">
                            ${date.toLocaleString('en-US', { weekday: 'long', month: 'short', day: 'numeric' })}
                          </p>
                          <p id="availableslot-item-times" class="available-slot-item-times small-paragraph toggle-panel toggle-a">
                            ${displayMaxThreeTimeSlots(slots)}...
                          </p>
                        </div>
    `;
    innerHTML += `
                        <div class="available-slot-list-item-settings flex flex-column halfgap toggle-panel toggle-b">
                          <ul>
                            ${renderSlotsDetail(slots)}
                          </ul>
                          <button type="button" class="delete-all-slots-button cancel-meeting-button flex flex-center color-pink quartergap" onclick='deleteSlots(${composeOnclickParameters(slots)})')>
                            <img src="images/app/cancel-icon.svg" alt="Cancel Meeting Icon" />
                            <strong>Delete all slots</strong>
                          </button>
                        </div>
    `;
    innerHTML += '</div>';
  });
  slotsListElement.innerHTML = innerHTML;
}

function joinMeeting(meetingUrl) {
  console.log("Joining meeting:", meetingUrl);
  window.open(meetingUrl, '_blank');
}


function seekerCancelMeeting(appointmentId) {
  console.log("Cancelling meeting:", appointmentId);
  return callApi(`/api/appointment/${appointmentId}`, 'DELETE')
      .then(data => {
          console.log('Appointment cancelled:', data)
          seekerRefreshCalendarSlots();
      })
      .catch((error) => {
          console.log('Error cancelling appointment:', error);
          seekerRefreshCalendarSlots();
      });
}


function deleteSlot(startTime, endTime) {
  console.log("Deleting slot from", startTime, "to", endTime)
  return callApi(`/api/seeker-slots?startTime=${encodeURIComponent(startTime)}&endTime=${encodeURIComponent(endTime)}`, 'DELETE')
      .then(data => {
          console.log(`Slot deleted ${startTime}-${endTime}:`, data);
          seekerRefreshCalendarSlots();
      })
      .catch((error) => {
          console.log(`Slot delete failed ${startTime}-${endTime}:`, error);
          seekerRefreshCalendarSlots();
      });
}


function deleteSlots(params) {
  let promises = [];
  let idx = 0;
  function deleteOneSlot(slot) {
    return callApi(`/api/seeker-slots?startTime=${encodeURIComponent(slot.startTime)}&endTime=${encodeURIComponent(slot.endTime)}`, 'DELETE')
      .then(data => {
          console.log(`Slot deleted`, data);
          idx += 1;
          if (params.length > idx) {
            promises.push(deleteOneSlot(params[idx]));
          } else {
            Promise.all(promises).then((values) => {
              console.log('All slots deleted:', values);
              seekerRefreshCalendarSlots();
            });
          }
      })
      .catch((error) => {
          console.log(`Slot delete failed`, error);
          idx += 1;
          if (params.length > idx) {
            promises.push(deleteOneSlot(params[idx]));
          } else {
            Promise.all(promises).then((values) => {
              console.log('All slots deleted:', values);
              seekerRefreshCalendarSlots();
            });
          }
      });
  }
  console.log("Deleting slots:", params);
  if (params.length > idx) {
    promises.push(deleteOneSlot(params[0]));
  }
}


const paymentElementId = 'stripe-payment-element';
const paymentSubmitElementId = 'stripe-payment-submit';
const paymentFormElementId = 'stripe-payment-form';
const paymentErrorElementId = 'stripe-error-message';
const popupWrapperElementId = 'payment-popup-wrapper';


function startCreditCardAuthorization(stripePublicKey) {
  const stripe = new Stripe(stripePublicKey);
  const elements = stripe.elements({
    mode: 'setup',
    currency: 'usd',
  });
  const paymentElement = elements.create('payment', { layout: 'accordion'});
  paymentElement.mount(`#${paymentElementId}`);
  const submitBtn = document.getElementById(paymentSubmitElementId);
  submitBtn.style.visibility = 'visible';
  const handleError = (error) => {
    const paymentErrorElement = document.getElementById(paymentErrorElementId);
    paymentErrorElement.innerHTML = error.message;
    submitBtn.disabled = false;
  }
  const popupWrapper = document.getElementById(popupWrapperElementId);
  popupWrapper.style.visibility = 'visible';
  popupWrapper.style.opacity = '1';
  const form = document.getElementById(paymentFormElementId);
  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    if (submitBtn.disabled) {
      return;
    }
    submitBtn.disabled = true;
    const {error: submitError} = await elements.submit();
    if (submitError) {
      handleError(submitError);
      return;
    }
    callApi('/api/stripe-subscription', 'POST')
      .then(data => {
        console.log('Stripe subscription successful:', data);
        const response = JSON.parse(data.response);
        stripe.confirmSetup({
          elements: elements,
          clientSecret: response.clientSecretForFirstPayment,
          confirmParams: {
            return_url: 'https://nectly.io/seekers-dashboard.html',
          },
          redirect: 'always'
        }).then((result) => {
          if(result.error) {
            handleError(result.error);
            console.error('Payment failed:', result.error);
          } else {
            console.log('Payment subscription successful:', result);
          }
        });
      })
      .catch(error => {
        console.error('Stripe subscription failed:', error);
    });
  });
}

function closePaymentPopup() {
  const popupWrapper = document.getElementById("payment-popup-wrapper");
  popupWrapper.style.visibility = 'hidden';
  popupWrapper.style.opacity = '0';
}


const closePaymentPopupElement = document.getElementById("close-payment-popup");
if (closePaymentPopupElement) closePaymentPopupElement.addEventListener("click", function(event) {
  event.preventDefault();
  closePaymentPopup();
});

document.addEventListener("keydown", function(event) {
  if (event.key === "Escape") {
    closePaymentPopup();
  }
});

const paymentPopupWrapperElement = document.getElementById("payment-popup-wrapper");
if (paymentPopupWrapperElement) paymentPopupWrapperElement.addEventListener("click", function(event) {
  const form = document.querySelector(".popup-form");
  if (!form.contains(event.target)) {
    closePaymentPopup();
  }
});


function redirectToStripeConnectLink() {
  callApi('/api/stripe-connect/get-account-link', 'GET')
      .then(data => {
        console.log('Get Stripe Connect Link successful:', data);
        const response = JSON.parse(data.response);
        window.location.href = response.link;
      })
      .catch(error => {
        console.error('Stripe subscription failed:', error);
    });
}

function setupCharity(charityPayoutType) {
  const body = {
    "charityPayoutType": charityPayoutType
  };
  callApi('/api/professional-setup-charity', 'POST', body)
      .then(data => {
        console.log('Setup charity successful:', data);
        proRefreshCalendarSlots();
      })
      .catch(error => {
        console.error('Setup charity failed:', error);
    });
}

function proResetPayout() {
  const postReserveSlotElement = document.getElementById('account-settings-save-result');
  const successMessage = `
                    <div id="pro-post-reserve-slot-success" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <h4>Payout methods reset successfully.</h4>
                    </div>
  `;
  const failedMessage = `
                    <div id="pro-post-reserve-slot-success" class="link-post-reserve-slot-content flex flex-column quartergap">
                      <h4>Failed to reset your payout methods.</h4>
                    </div>
  `;
  callApi('/api/professional-reset-payouts', 'DELETE')
      .then(data => {
        console.log('Professional payout reset successful:', data);
        postReserveSlotElement.innerHTML = successMessage;
      })
      .catch(error => {
        console.error('Professional payout reset failed:', error);
        postReserveSlotElement.innerHTML = failedMessage;
    });
}

function requestStripeInformation() {
  callApi('/api/stripe-connect/request-information', 'GET')
      .then(data => {
        console.log('Get Stripe Connect Link successful:', data);
        const response = JSON.parse(data.response);
        window.open(response.requestInformationLink, '_blank').focus();
      })
      .catch(error => {
        console.error('Stripe subscription failed:', error);
    });
  return false;
}


function activateProfessional() {
  addUserRole(NECTLY_USER_ROLE_PROFESSIONAL);
  window.location = '/professional-dashboard.html';
}


function activateSeeker() {
  addUserRole(NECTLY_USER_ROLE_SEEKER);
  window.location = '/seekers-dashboard.html';
}


const conversationHistoryTableElementId = 'conversation-history-table';
let conversationHistoryPages = [];
let conversationHistoryIndex = -1;


function renderConversationHistoryTable(action) {
/*
{
  "items": [
    {"startTime": "2025-05-29T19:30:00+02:00", "seeker": true, "professional": true, "type": "paid", "amount": "$30.00"},
    {"startTime": "2025-05-29T20:30:00+02:00", "seeker": true, "professional": true, "type": "paid", "amount": "$30.00"}
  ],
  "nextToken": "next-token-id"
}
*/
  function clearConversationHistoryTable(conversationHistoryTableElement) {
    conversationHistoryTableElement.replaceChildren();
    conversationHistoryTableElement.innerHTML = "";
  }
  function renderTableHeader(conversationHistoryTableElement) {
    const headerElement = document.createElement('div');
    headerElement.innerHTML = `
                          <p>Start time and date</p>
                          <p>Seeker</p>
                          <p>Professional</p>
                          <p>Payment status</p>
    `;
    headerElement.className = "conversation-history-table-header";
    conversationHistoryTableElement.appendChild(headerElement);
  }
  function renderNoConversation(conversationHistoryTableElement) {
    const emptyMessageElement = document.createElement('div');
    emptyMessageElement.className = "conversation-history-status-container flex flex-column gap-1";
    emptyMessageElement.innerHTML = `
                          <img src="images/app/no-conversations-illustration.svg" alt="No Conversations Illustration" />
                          <h4 class="text-center color-electric-blue">No past conversations yet.</h4>
                          <p class="text-center">Once you’ve had a few, they’ll appear here—your personal history of&nbsp;meaningful, 20-minute connections.</p>
    `;
    conversationHistoryTableElement.appendChild(emptyMessageElement);
  }
  function renderTableItem(conversationHistoryTableElement, item) {
    const startTime = new Date(item.startTime);
    let seeker = 'No';
    let seekerClass = 'system-status no';
    if (item.seeker) {
      seeker = 'Yes'
      seekerClass = 'system-status yes';
    }
    const rowElement = document.createElement('div');
    let professional = 'No';
    let professionalClass = 'system-status no';
    if (item.professional) {
      professional = 'Yes';
      professionalClass = 'system-status yes';
    }
    let paymentStatus = 'Unpaid';
    let paymentStatusClass = 'system-status unpaid';
    if (item.type === 'paid') {
      paymentStatus = 'Paid ' + item.amount;
      paymentStatusClass = 'system-status paid';
    }
    if (item.type === 'charity') {
      paymentStatus = 'For charity';
      paymentStatusClass = 'system-status charity';
    }
    rowElement.innerHTML = `
                          <p>${startTime.toLocaleString('en-US', { hour: '2-digit', minute: '2-digit', hour12: true })}</p>
                          <p class="${seekerClass}">${seeker}</p>
                          <p class="${professionalClass}">${professional}</p>
                          <p class="${paymentStatusClass}">${paymentStatus}</p>
    `;
    rowElement.className = "conversation-history-table-row";
    conversationHistoryTableElement.appendChild(rowElement);
  }
  function renderPagination(conversationHistoryTableElement, historyPage) {
    if (historyPage.nextToken) {
      const paginationElement = document.createElement('div');
      paginationElement.className = "pagination";
      if (conversationHistoryIndex <= 0) {
        paginationElement.innerHTML = `
                          <button class="page-btn prev inactive"><p>Previous</p></button>
                          <button class="page-btn next active" onclick="renderConversationHistoryTable('next')"><p>Next</p></button>
        `;
      } else {
        paginationElement.innerHTML = `
                          <button class="page-btn prev active" onclick="renderConversationHistoryTable('prev')"><p>Previous</p></button>
                          <button class="page-btn next active" onclick="renderConversationHistoryTable('next')"><p>Next</p></button>
        `;
      }
      conversationHistoryTableElement.appendChild(paginationElement);
    } else if (conversationHistoryIndex > 0) {
      const paginationElement = document.createElement('div');
      paginationElement.className = "pagination";
      paginationElement.innerHTML = `
                          <button class="page-btn prev active" onclick="renderConversationHistoryTable('prev')"><p>Previous</p></button>
                          <button class="page-btn next inactive"><p>Next</p></button>
      `;
      conversationHistoryTableElement.appendChild(paginationElement);
    } else {
      const paginationElement = document.createElement('div');
      paginationElement.className = "pagination";
      paginationElement.innerHTML = `
                          <button class="page-btn prev inactive"><p>Previous</p></button>
                          <button class="page-btn next inactive"><p>Next</p></button>
      `;
      conversationHistoryTableElement.appendChild(paginationElement);
    }
  }
  function renderTable(conversationHistoryTableElement, historyPage) {
    clearConversationHistoryTable(conversationHistoryTableElement);
    if (historyPage.items.length === 0) {
      renderNoConversation(conversationHistoryTableElement);
      return;
    }
    renderTableHeader(conversationHistoryTableElement);
    historyPage.items.forEach(item => {
      renderTableItem(conversationHistoryTableElement, item);
    });
    renderPagination(conversationHistoryTableElement, historyPage);
  }

  const conversationHistoryTableElement = document.getElementById(conversationHistoryTableElementId);
  if (!conversationHistoryTableElement) {
    console.error(`Element with ID ${conversationHistoryTableElementId} not found.`);
    return;
  }

  if (action === 'init') {
    callApi('/api/conversation/history', 'GET')
        .then(data => {
          console.log('Get conversation history successful:', data);
          const historyPage = JSON.parse(data.response);
          conversationHistoryPages = [historyPage];
          conversationHistoryIndex = 0;
          renderTable(conversationHistoryTableElement, historyPage);
        })
        .catch(error => {
          console.error('Get conversation history failed:', error);
      });
  }
  if (action === 'next' && conversationHistoryIndex === conversationHistoryPages.length - 1) {
    callApi(`/api/conversation/history&nextToken=${conversationHistoryPages[conversationHistoryIndex].nextToken}`, 'GET')
        .then(data => {
          console.log('Get conversation history successful:', data);
          const historyPage = JSON.parse(data.response);
          conversationHistoryPages.push(historyPage);
          conversationHistoryIndex += 1;
          renderTable(conversationHistoryTableElement, historyPage);
        })
        .catch(error => {
          console.error('Get conversation history failed:', error);
      });
  }
  if (action === 'next' && conversationHistoryIndex < conversationHistoryPages.length - 1) {
    conversationHistoryIndex += 1;
    const historyPage = conversationHistoryPages[conversationHistoryIndex];
    renderTable(conversationHistoryTableElement, historyPage);
  }
  if (action === 'prev') {
    if (conversationHistoryIndex > 0) conversationHistoryIndex -= 1;
    const historyPage = conversationHistoryPages[conversationHistoryIndex];
    renderTable(conversationHistoryTableElement, historyPage);
  }
}

function initLinkButtonGlowEffect() {
  const wrapper = document.querySelector('.glow-button-wrapper');

  if (wrapper) {
    wrapper.addEventListener('mousemove', (e) => {
      const rect = wrapper.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const angle = Math.atan2(y - rect.height / 2, x - rect.width / 2) * (180 / Math.PI);
      const deg = (angle + 360) % 360;

      wrapper.style.setProperty('--start', deg);
      wrapper.style.setProperty('--active', 1);
    });

    wrapper.addEventListener('mouseleave', () => {
      wrapper.style.setProperty('--active', 0);
    });
  }
}

const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.tab-content');

    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        const tabId = tab.getAttribute('data-tab');

        tabs.forEach(t => t.classList.remove('active'));
        tab.classList.add('active');

        contents.forEach(c => {
          c.classList.toggle('active', c.getAttribute('data-content') === tabId);
        });
      });
    });


    function setupCancelMeetingToggle() {
      document.querySelectorAll('.slot-list-item').forEach(item => {
        const cancelBtn = item.querySelector('#cancelMeetingButton');
        const confirmBtn = item.querySelector('#cancelMeetingConfirmationButton');
        const declineBtn = item.querySelector('#cancelMeetingDeclineButton');
        const cancelWindow = item.querySelector('#cancel-conversation-window');
        const meetingContainer = item.querySelector('.meeting-button-container');

        if (!cancelBtn || !confirmBtn || !declineBtn || !cancelWindow || !meetingContainer) return;

        // Init styles
        cancelWindow.style.height = "0px";
        cancelWindow.style.opacity = "0";
        cancelWindow.style.padding = "0";
        cancelWindow.style.overflow = "hidden";
        cancelWindow.style.transition = "height 0.3s ease, opacity 0.3s ease, padding 0.3s ease";

        meetingContainer.style.transition = "height 0.3s ease, padding 0.3s ease";

        // OPEN: Cancel Conversation
        cancelBtn.addEventListener("click", () => {
          item.classList.add("cancel-active");

          const contentHeight = cancelWindow.scrollHeight;

          cancelWindow.style.height = contentHeight + "px";
          cancelWindow.style.opacity = "1";
          cancelWindow.style.padding = "1rem";

          meetingContainer.style.height = "0px";
        });

        // CLOSE: Confirm or Decline
        const resetView = () => {
          item.classList.remove("cancel-active");

          cancelWindow.style.height = "0px";
          cancelWindow.style.opacity = "0";
          cancelWindow.style.padding = "0";

          meetingContainer.style.height = "";
          meetingContainer.style.padding = "";
        };

        confirmBtn.addEventListener("click", resetView);
        declineBtn.addEventListener("click", resetView);
      });
    }


    function setupTogglePairs() {
      document.querySelectorAll('.toggle-pair').forEach(pair => {
        const a = pair.querySelector('.toggle-a');
        const b = pair.querySelector('.toggle-b');
        if (!a || !b) return;

        a.style.height = a.scrollHeight + 'px';

        pair.addEventListener('mouseenter', () => {
          a.style.height = '0px';
          a.style.opacity = '0';

          b.style.height = b.scrollHeight + 'px';
          b.style.opacity = '1';
        });

        pair.addEventListener('mouseleave', () => {
          a.style.height = a.scrollHeight + 'px';
          a.style.opacity = '1';

          b.style.height = '0px';
          b.style.opacity = '0';
        });
      });
    }


    new ResizeObserver(entries => {
      for (let entry of entries) {
        const container = entry.target;
        const { width, height } = entry.contentRect;

        if (width > height) {
          container.classList.add('row-layout');
          container.classList.remove('column-layout');
        } else {
          container.classList.add('column-layout');
          container.classList.remove('row-layout');
        }
      }
    });


    function loadFaqToggle() {
      const toggles = document.querySelectorAll('.faq-toggle');
      if (!toggles) return;

      toggles.forEach(btn => {
        btn.addEventListener('click', () => {
          const expanded = btn.getAttribute('aria-expanded') === 'true';
          const content = document.getElementById(btn.getAttribute('aria-controls'));
          const icon = btn.querySelector('.faq-icon');

          btn.setAttribute('aria-expanded', String(!expanded));
          icon.textContent = expanded ? '+' : '–';
          content.classList.toggle('open', !expanded);
        });
      });

      // delayed auto-toggle (to be safe after scroll & layout)
      setTimeout(() => {
        const hash = location.hash.slice(1);
        if (!hash) return;

        const section = document.getElementById(hash);
        if (!section) return;

        const autoBtn = section.querySelector('.faq-toggle');
        if (autoBtn && autoBtn.getAttribute('aria-expanded') === 'false') {
          autoBtn.click();
        }
      }, 200);
    }

    function initSwipeSections() {
      const menu = document.querySelector('.app-menu');
      const container = document.querySelector('.scroll-container');

      if (!menu || !container) return;

      const buttons = menu.querySelectorAll('button');

      function scrollToIndex(index) {
        const containerWidth = container.clientWidth;
        container.scrollTo({
          left: index * containerWidth,
          behavior: 'smooth',
        });
      }

      function updateActiveButton() {
        const index = Math.round(container.scrollLeft / container.clientWidth);
        buttons.forEach((btn, i) => {
          btn.classList.toggle('active', i === index);
        });
      }

      buttons.forEach((button, index) => {
        button.addEventListener('click', () => {
          scrollToIndex(index);
        });
      });

      container.addEventListener('scroll', () => {
        updateActiveButton();
      });

      // Nastaviť správny button na začiatku
      updateActiveButton();
    }

    function safeInitSwipeSections(attempt = 0) {
      const menus = document.querySelectorAll('.app-menu');
      const containers = document.querySelectorAll('.scroll-container');

      if (menus.length > 0 && containers.length > 0) {
        // overíme, či už majú kontajnery nenulovú šírku
        const allReady = Array.from(containers).every((c) => c.clientWidth > 0);
        if (allReady) {
          initSwipeSections();
        } else if (attempt < 20) {
          setTimeout(() => safeInitSwipeSections(attempt + 1), 100); // opakuj max. 20x
        }
      } else if (attempt < 20) {
        setTimeout(() => safeInitSwipeSections(attempt + 1), 100);
      }
    }

let isAnimating = false;

function setupNectlyLinkButtonAnimation() {
  const button = document.getElementById('nectly-link-button');
  if (!button) return;

  if (button.dataset.animationInitialized === 'true') return;
  button.dataset.animationInitialized = 'true';

  button.addEventListener('click', () => {
    if (isAnimating) return;

    isAnimating = true;
    button.classList.add('clicked');

    setTimeout(() => {
      button.classList.remove('clicked');
      button.classList.add('returning');

      setTimeout(() => {
        button.classList.remove('returning');
        isAnimating = false;
      }, 300);
    }, 3000);
  });
}