CALENDAR JS - CURRENT

// Current date state
let currentMonth = new Date().getMonth(); // 0-based
let currentYear = new Date().getFullYear();

// Timezone functionality
let currentTimezoneOffset = -(new Date().getTimezoneOffset() / 60); // Convert to UTC offset

// Map quarter number to phase name and symbol
const MOON_PHASES = [
  { name: "New Moon", symbol: '<svg> <use href="#moonnew" /> </svg>' },
  {
    name: "First Quarter",
    symbol: '<svg> <use href="#moonfirstquarter" /> </svg>',
  },
  { name: "Full Moon", symbol: '<svg> <use href="#moonfull" /> </svg>' },
  {
    name: "Last Quarter",
    symbol: '<svg> <use href="#moonlastquarter" /> </svg>',
  },
];

// Eclipse symbols by type - customize these as needed
const ECLIPSE_SYMBOLS = {
  lunar: {
    penumbral: '<svg> <use href="#lunarpenumbral" /> </svg>',
    partial: '<svg> <use href="#lunarpartial" /> </svg>',
    total: '<svg> <use href="#lunartotal" /> </svg>',
    default: '<svg> <use href="#lunardefault" /> </svg>',
  },
  solar: {
    partial: '<svg> <use href="#solarpartial" /> </svg>',
    annular: '<svg> <use href="#solarannular" /> </svg>',
    total: '<svg> <use href="#solartotal" /> </svg>',
    hybrid: '<svg> <use href="#solarhybrid" /> </svg>',
    default: '<svg> <use href="#solardefault" /> </svg>',
  },
};

// Location and astronomy functionality
let currentLocation = { lat: 0, lon: 0, isUTC: true }; // Default to UTC (lat/lon 0,0)

function updateTimezoneDisplay() {
  const display = document.getElementById("timezoneDisplay");
  const sign = currentTimezoneOffset >= 0 ? "+" : "";
  display.textContent = `UTC${sign}${currentTimezoneOffset}`;
}

function adjustTimezone(direction) {
  const newOffset = currentTimezoneOffset + direction;

  // Limit timezone offset to valid range: -12 to +14
  if (newOffset >= -12 && newOffset <= 14) {
    currentTimezoneOffset = newOffset;
    updateTimezoneDisplay();
    renderCalendar();
  }
}

// Helper function to convert UTC time to selected timezone
function convertToSelectedTimezone(utcDate) {
  // Apply the timezone offset
  const adjustment = currentTimezoneOffset * 60 * 60 * 1000;
  const adjustedTimestamp = utcDate.getTime() + adjustment;
  const adjustedDate = new Date(adjustedTimestamp);

  // Use UTC methods to get the correct date parts
  const result = {
    day: adjustedDate.getUTCDate(),
    month: adjustedDate.getUTCMonth(),
    year: adjustedDate.getUTCFullYear(),
    timestamp: adjustedTimestamp,
    originalDate: adjustedDate,
  };

  return result;
}

// Add this function to trigger the fade animation
function triggerCalendarFade() {
  const calendarWrapper = document.querySelector(".calendar-wrapper");

  // Remove the class if it exists (to restart animation)
  calendarWrapper.classList.remove("fade-in");

  // Force a reflow to ensure the class removal is processed
  calendarWrapper.offsetHeight;

  // Add the class to trigger the animation
  calendarWrapper.classList.add("fade-in");
}

// Find all principal moon phases in the given month
function getPrincipalMoonPhasesLocal(year, month) {
  const phases = [];

  // Search a wider range to catch moon phases that might appear in different days due to timezone
  const searchStartUTC = new Date(Date.UTC(year, month, 1, 0, 0, 0));
  searchStartUTC.setUTCDate(searchStartUTC.getUTCDate() - 2);

  const searchEndUTC = new Date(Date.UTC(year, month + 1, 0, 23, 59, 59));
  searchEndUTC.setUTCDate(searchEndUTC.getUTCDate() + 2);

  try {
    let q = Astronomy.SearchMoonQuarter(searchStartUTC);
    let iterations = 0;
    const maxIterations = 50;

    while (q && iterations < maxIterations) {
      const phaseUTC = q.time.date;

      // Stop searching if we're way past our end date
      if (phaseUTC > searchEndUTC) {
        break;
      }

      // Use the corrected conversion approach
      const phaseConverted = convertToSelectedTimezone(phaseUTC);

      // Check if moon phase falls in target month
      if (phaseConverted.year === year && phaseConverted.month === month) {
        const phaseData = {
          day: phaseConverted.day,
          month: phaseConverted.month + 1,
          year: phaseConverted.year,
          quarter: q.quarter,
          name: MOON_PHASES[q.quarter].name,
          symbol: MOON_PHASES[q.quarter].symbol,
          exactTime: phaseConverted.originalDate,
        };

        phases.push(phaseData);
      }

      try {
        q = Astronomy.NextMoonQuarter(q);
      } catch (e) {
        break;
      }
      iterations++;
    }
  } catch (e) {
    console.warn("Error finding moon phases:", e);
  }

  return phases;
}

// Find solar eclipses in the given month
function getSolarEclipsesLocal(year, month) {
  const eclipses = [];

  // Search a wider range
  const searchStartUTC = new Date(Date.UTC(year, month, 1, 0, 0, 0));
  searchStartUTC.setUTCDate(searchStartUTC.getUTCDate() - 2);

  const searchEndUTC = new Date(Date.UTC(year, month + 1, 0, 23, 59, 59));
  searchEndUTC.setUTCDate(searchEndUTC.getUTCDate() + 2);

  try {
    let eclipse = Astronomy.SearchGlobalSolarEclipse(searchStartUTC);
    let iterations = 0;
    const maxIterations = 50;

    while (eclipse && iterations < maxIterations) {
      const eclipseUTC = eclipse.peak.date;

      if (eclipseUTC > searchEndUTC) {
        break;
      }

      // Use the corrected conversion approach
      const eclipseConverted = convertToSelectedTimezone(eclipseUTC);

      // Check if eclipse falls in target month
      if (eclipseConverted.year === year && eclipseConverted.month === month) {
        let typeDescription = "";
        switch (eclipse.kind) {
          case "partial":
            typeDescription = "Partial Solar Eclipse";
            break;
          case "annular":
            typeDescription = "Annular Solar Eclipse";
            break;
          case "total":
            typeDescription = "Total Solar Eclipse";
            break;
          case "hybrid":
            typeDescription = "Hybrid Solar Eclipse";
            break;
          default:
            typeDescription = "Solar Eclipse";
        }

        const eclipseData = {
          day: eclipseConverted.day,
          month: eclipseConverted.month + 1,
          year: eclipseConverted.year,
          type: "solar",
          kind: eclipse.kind,
          description: typeDescription,
          exactTime: eclipseConverted.originalDate,
        };

        eclipses.push(eclipseData);
      }

      try {
        eclipse = Astronomy.NextGlobalSolarEclipse(eclipse.peak);
      } catch (e) {
        break;
      }
      iterations++;
    }
  } catch (e) {
    console.warn("Error finding solar eclipses:", e);
  }

  return eclipses;
}

// Find lunar eclipses in the given month
function getLunarEclipsesLocal(year, month) {
  const eclipses = [];

  // Search a wider range
  const searchStartUTC = new Date(Date.UTC(year, month, 1, 0, 0, 0));
  searchStartUTC.setUTCDate(searchStartUTC.getUTCDate() - 2);

  const searchEndUTC = new Date(Date.UTC(year, month + 1, 0, 23, 59, 59));
  searchEndUTC.setUTCDate(searchEndUTC.getUTCDate() + 2);

  try {
    let eclipse = Astronomy.SearchLunarEclipse(searchStartUTC);
    let iterations = 0;
    const maxIterations = 50;

    while (eclipse && iterations < maxIterations) {
      const eclipseUTC = eclipse.peak.date;

      if (eclipseUTC > searchEndUTC) {
        break;
      }

      // Use the corrected conversion approach
      const eclipseConverted = convertToSelectedTimezone(eclipseUTC);

      // Check if eclipse falls in target month
      if (eclipseConverted.year === year && eclipseConverted.month === month) {
        let typeDescription = "";
        switch (eclipse.kind) {
          case "penumbral":
            typeDescription = "Penumbral Lunar Eclipse";
            break;
          case "partial":
            typeDescription = "Partial Lunar Eclipse";
            break;
          case "total":
            typeDescription = "Total Lunar Eclipse";
            break;
          default:
            typeDescription = "Lunar Eclipse";
        }

        const eclipseData = {
          day: eclipseConverted.day,
          month: eclipseConverted.month + 1,
          year: eclipseConverted.year,
          type: "lunar",
          kind: eclipse.kind,
          description: typeDescription,
          exactTime: eclipseConverted.originalDate,
        };

        eclipses.push(eclipseData);
      }

      try {
        eclipse = Astronomy.NextLunarEclipse(eclipse.peak);
      } catch (e) {
        break;
      }
      iterations++;
    }
  } catch (e) {
    console.warn("Error finding lunar eclipses:", e);
  }

  return eclipses;
}

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

  document.getElementById(
    "monthYear"
  ).textContent = `${monthNames[currentMonth]} ${currentYear}`;

  const firstDay = new Date(currentYear, currentMonth, 1).getDay();
  const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

  // Get all principal phases for this month (in selected timezone)
  const phases = getPrincipalMoonPhasesLocal(currentYear, currentMonth);
  // Map day -> phase info
  const phaseByDay = {};
  for (const p of phases) {
    phaseByDay[p.day] = p;
  }

  // Get eclipses for this month
  const solarEclipses = getSolarEclipsesLocal(currentYear, currentMonth);
  const lunarEclipses = getLunarEclipsesLocal(currentYear, currentMonth);
  const allEclipses = [...solarEclipses, ...lunarEclipses];

  // Map day -> eclipse info
  const eclipseByDay = {};
  for (const e of allEclipses) {
    if (!eclipseByDay[e.day]) {
      eclipseByDay[e.day] = [];
    }
    eclipseByDay[e.day].push(e);
  }

  let date = 1;
  const calendarBody = document.getElementById("calendarBody");
  calendarBody.innerHTML = "";

  for (let i = 0; i < 6; i++) {
    const row = document.createElement("tr");

    for (let j = 0; j < 7; j++) {
      const cell = document.createElement("td");

      if (i === 0 && j < firstDay) {
        cell.textContent = "";
      } else if (date > daysInMonth) {
        cell.textContent = "";
      } else {
        let cellContent = `<div><strong>${date}</strong>`;

        // Add moon phase if present
        if (phaseByDay[date]) {
          const { name, symbol } = phaseByDay[date];
          cellContent += `<span class="moon" data-phase="${name}" title="${name}">${symbol}</span></div>`;

          // Add eclipses if present on the same day as moon phase
          if (eclipseByDay[date]) {
            for (const eclipse of eclipseByDay[date]) {
              const eclipseSymbol =
                ECLIPSE_SYMBOLS[eclipse.type][eclipse.kind] ||
                ECLIPSE_SYMBOLS[eclipse.type].default;
              const eclipseClass =
                eclipse.type === "solar" ? "solar-eclipse" : "lunar-eclipse";
              const tooltipClass =
                eclipse.type === "solar"
                  ? "solar-eclipse-tooltip"
                  : "lunar-eclipse-tooltip";

              cellContent += `<span class="${eclipseClass}" title="${eclipse.description}">${eclipseSymbol}<span class="${tooltipClass}">${eclipse.description}</span></span>`;
            }
          }
        } else if (eclipseByDay[date]) {
          // Add eclipses if present but no moon phase
          for (const eclipse of eclipseByDay[date]) {
            const eclipseSymbol =
              ECLIPSE_SYMBOLS[eclipse.type][eclipse.kind] ||
              ECLIPSE_SYMBOLS[eclipse.type].default;
            const eclipseClass =
              eclipse.type === "solar" ? "solar-eclipse" : "lunar-eclipse";
            const tooltipClass =
              eclipse.type === "solar"
                ? "solar-eclipse-tooltip"
                : "lunar-eclipse-tooltip";

            cellContent += `<span class="${eclipseClass}" title="${eclipse.description}">${eclipseSymbol}<span class="${tooltipClass}">${eclipse.description}</span></span>`;
          }
        }

        cell.innerHTML = cellContent;
        date++;
      }

      row.appendChild(cell);
    }

    calendarBody.appendChild(row);

    if (date > daysInMonth) break;
  }

  // Apply hemisphere setting to the newly rendered calendar
  handleHemisphereChange();

  // Trigger the fade animation
  triggerCalendarFade();

  // Apply current toggle states
  document
    .getElementById("moonPhasesToggle")
    .dispatchEvent(new Event("change"));
  document
    .getElementById("lunarEclipsesToggle")
    .dispatchEvent(new Event("change"));
  document
    .getElementById("solarEclipsesToggle")
    .dispatchEvent(new Event("change"));
}

function handleHemisphereChange() {
  const isNorth = document.getElementById("northRadio").checked;

  // Get all moon symbols
  const moonElements = document.querySelectorAll(".moon[data-phase]");

  moonElements.forEach((moon) => {
    const phase = moon.getAttribute("data-phase");

    if (phase === "First Quarter") {
      moon.innerHTML = isNorth ? MOON_PHASES[1].symbol : MOON_PHASES[3].symbol;
    } else if (phase === "Last Quarter") {
      moon.innerHTML = isNorth ? MOON_PHASES[3].symbol : MOON_PHASES[1].symbol;
    }
    // New Moon and Full Moon remain unchanged
  });

  // Update legend symbols as well
  const legendFirstQuarter = document.getElementById("legend-first-quarter");
  const legendLastQuarter = document.getElementById("legend-last-quarter");

  if (legendFirstQuarter) {
    legendFirstQuarter.innerHTML = isNorth
      ? MOON_PHASES[1].symbol
      : MOON_PHASES[3].symbol;
  }
  if (legendLastQuarter) {
    legendLastQuarter.innerHTML = isNorth
      ? MOON_PHASES[3].symbol
      : MOON_PHASES[1].symbol;
  }
}

function requestPreciseLocation() {
  const btn = document.getElementById("preciseLocationBtn");
  const status = document.getElementById("locationStatus");

  if (!navigator.geolocation) {
    updateLocationStatus(
      "error",
      "Geolocation is not supported by this browser."
    );
    return;
  }

  // Update UI to show we're requesting location
  btn.disabled = true;
  btn.textContent = "🔍 Getting Location...";
  updateLocationStatus("info", "Requesting your location...");

  navigator.geolocation.getCurrentPosition(
    function (position) {
      // Success!
      currentLocation = {
        lat: position.coords.latitude,
        lon: position.coords.longitude,
        isUTC: false,
        accuracy: position.coords.accuracy,
      };

      // Update UI
      btn.textContent = "✅ Location Set";
      btn.disabled = false;

      const accuracy = Math.round(position.coords.accuracy);
      updateLocationStatus(
        "success",
        `Location set! Accuracy: ±${accuracy}m. Times are now location-specific.`
      );

      // Show coordinates
      const coordsDisplay = document.getElementById("coordinatesDisplay");
      if (coordsDisplay) {
        coordsDisplay.textContent = `Coordinates: ${currentLocation.lat.toFixed(
          4
        )}°, ${currentLocation.lon.toFixed(4)}°`;
      }

      // Recalculate times with precise location
      calculateSunMoonTimes();
    },
    function (error) {
      // Error handling
      let errorMsg = "Location request failed: ";
      switch (error.code) {
        case error.PERMISSION_DENIED:
          errorMsg += "Permission denied. You can still use UTC times.";
          break;
        case error.POSITION_UNAVAILABLE:
          errorMsg += "Location unavailable. Using UTC times.";
          break;
        case error.TIMEOUT:
          errorMsg += "Request timed out. Using UTC times.";
          break;
        default:
          errorMsg += "Unknown error. Using UTC times.";
          break;
      }

      updateLocationStatus("warning", errorMsg);
      btn.textContent = "📍 Try Again";
      btn.disabled = false;
    },
    {
      enableHighAccuracy: true,
      timeout: 10000,
      maximumAge: 600000, // Cache for 10 minutes
    }
  );
}

function updateLocationStatus(type, message) {
  const status = document.getElementById("locationStatus");
  if (status) {
    status.className = `location-status status-${type}`;
    status.textContent = message;
  }
}

function calculateSunMoonTimes() {
  console.log("calculateSunMoonTimes called");

  // Make sure Astronomy library is loaded
  if (typeof Astronomy === "undefined") {
    console.error("Astronomy library not loaded");
    return;
  }

  console.log("Astronomy library is loaded, currentLocation:", currentLocation);

  const today = new Date();
  console.log("Today:", today);

  try {
    const observer = new Astronomy.Observer(
      currentLocation.lat,
      currentLocation.lon,
      0
    );
    console.log("Observer created:", observer);

    // Check what Direction constants are available
    console.log("Available Astronomy constants:", Object.keys(Astronomy));

    // Try different ways to access Direction constants
    let riseDirection, setDirection;

    if (Astronomy.Direction) {
      console.log("Direction object:", Astronomy.Direction);
      riseDirection = Astronomy.Direction.Rise;
      setDirection = Astronomy.Direction.Set;
    } else {
      // Try direct constants
      riseDirection = Astronomy.Rise || 1;
      setDirection = Astronomy.Set || -1;
    }

    console.log(
      "Rise direction:",
      riseDirection,
      "Set direction:",
      setDirection
    );

    // Calculate sunrise/sunset
    console.log("Calculating sunrise...");
    const sunrise = Astronomy.SearchRiseSet(
      Astronomy.Body.Sun,
      observer,
      riseDirection,
      today,
      1
    );
    console.log("Sunrise result:", sunrise);

    console.log("Calculating sunset...");
    const sunset = Astronomy.SearchRiseSet(
      Astronomy.Body.Sun,
      observer,
      setDirection,
      today,
      1
    );
    console.log("Sunset result:", sunset);

    // Calculate moonrise/moonset
    console.log("Calculating moonrise...");
    const moonrise = Astronomy.SearchRiseSet(
      Astronomy.Body.Moon,
      observer,
      riseDirection,
      today,
      1
    );
    console.log("Moonrise result:", moonrise);

    console.log("Calculating moonset...");
    const moonset = Astronomy.SearchRiseSet(
      Astronomy.Body.Moon,
      observer,
      setDirection,
      today,
      1
    );
    console.log("Moonset result:", moonset);

    // Update the horizontal bar display
    const sunriseEl = document.getElementById("sunriseTime");
    const sunsetEl = document.getElementById("sunsetTime");
    const moonriseEl = document.getElementById("moonriseTime");
    const moonsetEl = document.getElementById("moonsetTime");

    if (sunriseEl)
      sunriseEl.textContent = sunrise ? formatTime(sunrise.date) : "None";
    if (sunsetEl)
      sunsetEl.textContent = sunset ? formatTime(sunset.date) : "None";
    if (moonriseEl)
      moonriseEl.textContent = moonrise ? formatTime(moonrise.date) : "None";
    if (moonsetEl)
      moonsetEl.textContent = moonset ? formatTime(moonset.date) : "None";

    // Update timezone note in the bar
    const timezoneNote = document.getElementById("timezoneNote");
    if (timezoneNote) {
      if (currentLocation.isUTC) {
        timezoneNote.textContent = "UTC Times";
      } else {
        timezoneNote.textContent = `Local Times (${currentLocation.lat.toFixed(
          1
        )}°, ${currentLocation.lon.toFixed(1)}°)`;
      }
    }
  } catch (error) {
    console.error("Detailed astronomy calculation error:", error);
    console.error("Error stack:", error.stack);

    // Show error in horizontal bar
    const sunriseEl = document.getElementById("sunriseTime");
    const sunsetEl = document.getElementById("sunsetTime");
    const moonriseEl = document.getElementById("moonriseTime");
    const moonsetEl = document.getElementById("moonsetTime");

    if (sunriseEl) sunriseEl.textContent = "Error";
    if (sunsetEl) sunsetEl.textContent = "Error";
    if (moonriseEl) moonriseEl.textContent = "Error";
    if (moonsetEl) moonsetEl.textContent = "Error";
  }
}

// Alternative approach if the above doesn't work
function calculateSunMoonTimesAlternative() {
  console.log("calculateSunMoonTimesAlternative called");

  if (typeof Astronomy === "undefined") {
    console.error("Astronomy library not loaded");
    return;
  }

  const today = new Date();

  try {
    const observer = new Astronomy.Observer(
      currentLocation.lat,
      currentLocation.lon,
      0
    );

    // Try using numeric constants directly (common in some versions)
    // 1 = Rise, -1 = Set (or vice versa depending on library version)

    console.log("Trying with numeric direction constants...");

    let sunrise, sunset, moonrise, moonset;

    try {
      sunrise = Astronomy.SearchRiseSet(
        Astronomy.Body.Sun,
        observer,
        1,
        today,
        1
      );
      sunset = Astronomy.SearchRiseSet(
        Astronomy.Body.Sun,
        observer,
        -1,
        today,
        1
      );
      moonrise = Astronomy.SearchRiseSet(
        Astronomy.Body.Moon,
        observer,
        1,
        today,
        1
      );
      moonset = Astronomy.SearchRiseSet(
        Astronomy.Body.Moon,
        observer,
        -1,
        today,
        1
      );
    } catch (e1) {
      console.log("Trying reversed numeric constants...");
      // Try reversed if the first attempt fails
      sunrise = Astronomy.SearchRiseSet(
        Astronomy.Body.Sun,
        observer,
        -1,
        today,
        1
      );
      sunset = Astronomy.SearchRiseSet(
        Astronomy.Body.Sun,
        observer,
        1,
        today,
        1
      );
      moonrise = Astronomy.SearchRiseSet(
        Astronomy.Body.Moon,
        observer,
        -1,
        today,
        1
      );
      moonset = Astronomy.SearchRiseSet(
        Astronomy.Body.Moon,
        observer,
        1,
        today,
        1
      );
    }

    // Update display
    const sunriseEl = document.getElementById("sunriseTime");
    const sunsetEl = document.getElementById("sunsetTime");
    const moonriseEl = document.getElementById("moonriseTime");
    const moonsetEl = document.getElementById("moonsetTime");

    if (sunriseEl)
      sunriseEl.textContent = sunrise ? formatTime(sunrise.date) : "None";
    if (sunsetEl)
      sunsetEl.textContent = sunset ? formatTime(sunset.date) : "None";
    if (moonriseEl)
      moonriseEl.textContent = moonrise ? formatTime(moonrise.date) : "None";
    if (moonsetEl)
      moonsetEl.textContent = moonset ? formatTime(moonset.date) : "None";

    const timezoneNote = document.getElementById("timezoneNote");
    if (timezoneNote) {
      if (currentLocation.isUTC) {
        timezoneNote.textContent = "UTC Times";
      } else {
        timezoneNote.textContent = `Local Times (${currentLocation.lat.toFixed(
          1
        )}°, ${currentLocation.lon.toFixed(1)}°)`;
      }
    }

    console.log("Alternative calculation completed successfully");
  } catch (error) {
    console.error("Alternative calculation failed:", error);

    // Show error in display
    ["sunriseTime", "sunsetTime", "moonriseTime", "moonsetTime"].forEach(
      (id) => {
        const el = document.getElementById(id);
        if (el) el.textContent = "Error";
      }
    );
  }
}

function formatTime(date) {
  // Format as HH:MM UTC
  return date.toISOString().substr(11, 5) + " UTC";
}

function initCalendar() {
  // Initialize timezone display
  updateTimezoneDisplay();

  renderCalendar();

  // Add event listeners for navigation
  document.getElementById("yearPrev").addEventListener("click", () => {
    currentYear--;
    renderCalendar();
  });

  document.getElementById("yearNext").addEventListener("click", () => {
    currentYear++;
    renderCalendar();
  });

  document.getElementById("monthPrev").addEventListener("click", () => {
    currentMonth--;
    if (currentMonth < 0) {
      currentMonth = 11;
      currentYear--;
    }
    renderCalendar();
  });

  document.getElementById("monthNext").addEventListener("click", () => {
    currentMonth++;
    if (currentMonth > 11) {
      currentMonth = 0;
      currentYear++;
    }
    renderCalendar();
  });

  document.getElementById("resetButton").addEventListener("click", () => {
    const now = new Date();
    currentMonth = now.getMonth();
    currentYear = now.getFullYear();
    renderCalendar();
  });

  // Timezone control event listeners
  document
    .getElementById("timezonePrev")
    .addEventListener("click", () => adjustTimezone(-1));
  document
    .getElementById("timezoneNext")
    .addEventListener("click", () => adjustTimezone(1));

  // Timezone reset button
  document
    .getElementById("timezoneResetButton")
    .addEventListener("click", () => {
      currentTimezoneOffset = -(new Date().getTimezoneOffset() / 60);
      updateTimezoneDisplay();
      renderCalendar();
    });

  // Hemisphere change listeners
  document
    .getElementById("northRadio")
    .addEventListener("change", handleHemisphereChange);
  document
    .getElementById("southRadio")
    .addEventListener("change", handleHemisphereChange);

  // Set up the precise location button
  const preciseLocationBtn = document.getElementById("preciseLocationBtn");
  if (preciseLocationBtn) {
    preciseLocationBtn.addEventListener("click", requestPreciseLocation);
  }

  // Calculate initial UTC times
  calculateSunMoonTimes();
}

initCalendar();

// Toggle visibility functionality
document;
/* --- Replace the last 3 event listeners in calendar.js with this code --- */

// Toggle visibility functionality
document
  .getElementById("moonPhasesToggle")
  .addEventListener("change", function () {
    document
      .querySelector(".calendar-wrapper")
      .classList.toggle("moon-phases-hidden", !this.checked);
  });

document
  .getElementById("lunarEclipsesToggle")
  .addEventListener("change", function () {
    document
      .querySelector(".calendar-wrapper")
      .classList.toggle("lunar-eclipses-hidden", !this.checked);
  });

document
  .getElementById("solarEclipsesToggle")
  .addEventListener("change", function () {
    document
      .querySelector(".calendar-wrapper")
      .classList.toggle("solar-eclipses-hidden", !this.checked);
  });

document
  .getElementById("lunarEclipsesToggle")
  .addEventListener("change", function () {
    const lunarEclipses = document.querySelectorAll(
      ".calendar-wrapper .lunar-eclipse"
    );
    lunarEclipses.forEach((el) => {
      if (this.checked) {
        el.style.display = "inline";
        el.classList.add("fade-in");
      } else {
        el.style.display = "none";
        el.classList.remove("fade-in");
      }
    });
  });

document
  .getElementById("solarEclipsesToggle")
  .addEventListener("change", function () {
    const solarEclipses = document.querySelectorAll(
      ".calendar-wrapper .solar-eclipse"
    );
    solarEclipses.forEach((el) => {
      if (this.checked) {
        el.style.display = "inline";
        el.classList.add("fade-in");
      } else {
        el.style.display = "none";
        el.classList.remove("fade-in");
      }
    });
  });