CALENDAR JS - BACKUP

// 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.getElementById("moonPhasesToggle").addEventListener("change", function () {
    const calendarWrapper = document.querySelector(".calendar-wrapper");
    const moonElements = document.querySelectorAll(".calendar-wrapper .moon");
    const eclipseElements = document.querySelectorAll(
        ".calendar-wrapper .solar-eclipse, .calendar-wrapper .lunar-eclipse"
    );

    if (this.checked) {
        // Show moon phases
        calendarWrapper.classList.remove("moon-phases-hidden");
        moonElements.forEach((el) => {
            el.style.display = "block";
            el.classList.add("fade-in");
        });
        // Re-trigger fade-in for eclipses as they move down
        eclipseElements.forEach((el) => {
            el.classList.remove("fade-in");
            // Force reflow
            el.offsetHeight;
            el.classList.add("fade-in");
        });
    } else {
        // Hide moon phases
        calendarWrapper.classList.add("moon-phases-hidden");
        moonElements.forEach((el) => {
            el.style.display = "none";
            el.classList.remove("fade-in");
        });
        // Re-trigger fade-in for eclipses as they move up
        eclipseElements.forEach((el) => {
            el.classList.remove("fade-in");
            // Force reflow
            el.offsetHeight;
            el.classList.add("fade-in");
        });
    }
});

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");
        }
    });
});