MyAiringList - a new web app using the MAL API

// ==UserScript==
// @name         MyAiringList Countdown
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Replaces static airing hours with a live countdown timer showing days, hours, minutes, and seconds until the next episode, with a user-adjustable timezone offset.
// @author       Gemini
// @match        *://myairinglist.vercel.app/MyAiringList/*
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// @run-at       document-idle
// ==/UserScript==
(function() {
    'use strict';

    // --- CONFIGURATION ---
    const DAY_OFFSETS = [1, 2, 3, 4, 5, 6, 0]; // Mon-Sun -> JS Days 1-6, 0
    const DAY_NAMES = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];

    // --- GLOBAL STATE ---
    let timezoneOffsetHours = parseFloat(GM_getValue('timezoneOffsetHours', 0));
    let isUiSetup = false;
    let globalIntervalId = null; // ID for the single central update interval
    const activeCountdownElements = new Set(); // Stores all elements that need updating

    // --- STYLES ---

    GM_addStyle(`
        /* The .airing_hour container is now a block to ensure it fills the available space */
        .airing_hour {
            display: block !important; /* Ensure it behaves like a block element */
            width: 100% !important; /* Force it to take full width of its parent */
            box-sizing: border-box;
        }

        /* Countdown Timer Styles (This is the element replacing the time text) */
        .countdown-timer {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            text-align: center;
            padding: 2px 0;
            color: #d1d5db;
            font-size: 16px;
            display: block;
            min-height: 20px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
            transition: color 0.3s ease;
            width: 100%; /* Ensure the timer itself takes the full width of the .airing_hour parent */
        }
        .countdown-timer.airing-soon {
            color: #fca5a5;
        }
        .countdown-timer.airing-now {
            color: #34d399;
            font-weight: 900;
            animation: pulse 1s infinite alternate;
        }
        .countdown-timer .label {
            font-weight: 400;
            font-size: 0.65em;
            opacity: 0.7;
        }

        @keyframes pulse {
            from { transform: scale(1); opacity: 1; }
            to { transform: scale(1.05); opacity: 0.9; }
        }

        /* Settings UI Styles */
        #gm-settings-toggle {
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 10001;
            padding: 5px 10px;
            background: #3552a1;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        #gm-countdown-settings {
            position: fixed;
            top: 50px;
            right: 10px;
            z-index: 10000;
            background: rgba(30, 30, 30, 0.95);
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            color: #fff;
            font-family: 'Inter', sans-serif;
            border: 1px solid #444;
            display: none;
            /* Added Max Width for better UI control */
            max-width: 250px;
            min-width: 200px;
        }
        #gm-countdown-settings.visible {
            display: block;
        }
    `);


    // --- CORE LOGIC FUNCTIONS ---

    /**
     * Attempts to determine the day index of the column containing the element
     */
    function getAiringColumnIndex(element) {
        let current = element;
        while (current.parentElement) {
            const parent = current.parentElement;
            for (let i = 0; i < DAY_NAMES.length; i++) {
                const day = DAY_NAMES[i];
                if (parent.classList.contains(`${day}_container`)) {
                    return (i === 0) ? 6 : i - 1; // Sun -> 6, Mon -> 0, Tue -> 1, etc.
                }
            }
            current = parent;
            if (current === document.body) break;
        }
        return null;
    }


    /**
     * Calculates the next date/time the show airs, applying the user's timezone offset.
     */
    function getNextAiringDate(targetDay, timeString) {
        const [hours, minutes] = timeString.split(':').map(Number);
        if (isNaN(hours) || isNaN(minutes)) return null;

        const now = new Date();
        const nowDay = now.getDay();
        let daysUntil = targetDay - nowDay;
        if (daysUntil < 0) daysUntil += 7;

        const targetDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + daysUntil, hours, minutes, 0, 0);

        const offsetMilliseconds = timezoneOffsetHours * 60 * 60 * 1000;
        targetDate.setTime(targetDate.getTime() + offsetMilliseconds);

        // If adjusted time is in the past, move to next week.
        if (targetDate.getTime() < now.getTime()) {
            targetDate.setDate(targetDate.getDate() + 7);
        }

        return targetDate;
    }


    /**
     * Logic to update the display for a SINGLE element.
     * This function is now called from the global interval.
     */
    function updateSingleCountdown(element) {
        let distance = element.__targetDate.getTime() - new Date().getTime();
        const countdownSpan = element.querySelector('.countdown-text');

        if (!countdownSpan) {
            activeCountdownElements.delete(element);
            return;
        }

        // If time has passed the buffer, re-initialize the element to find the next week's date.
        if (distance < -(5 * 60 * 1000)) {
            activeCountdownElements.delete(element);
            initializeCountdown(element); // Re-initialize to calculate next week
            return;
        }

        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        const countdownContainer = element.querySelector('.countdown-timer');
        countdownContainer.classList.remove('airing-soon', 'airing-now');

        if (distance <= 0) {
            countdownSpan.innerHTML = 'AIRING NOW!';
            countdownContainer.classList.add('airing-now');
        } else if (distance < (1 * 60 * 60 * 1000)) { // Less than 1 hour
            countdownContainer.classList.add('airing-soon');
            countdownSpan.innerHTML = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')} <span class="label">HRS:MIN:SEC</span>`;
        } else if (days > 0) {
            countdownSpan.innerHTML = `${days}<span class="label">d</span> ${String(hours).padStart(2, '0')}<span class="label">h</span> ${String(minutes).padStart(2, '0')}<span class="label">m</span>`;
        } else {
            countdownSpan.innerHTML = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
        }
    }

    /**
     * The single global function that updates all timers.
     */
    function globalUpdateLoop() {
        if (activeCountdownElements.size === 0) {
            // If no elements, stop the loop to save resources
            if (globalIntervalId) {
                clearInterval(globalIntervalId);
                globalIntervalId = null;
            }
            return;
        }

        // Iterate through all tracked elements and update their display
        activeCountdownElements.forEach(element => {
            updateSingleCountdown(element);
        });
    }

    /**
     * Starts the single central update interval if it's not already running.
     */
    function startGlobalUpdateLoop() {
        if (globalIntervalId === null) {
            // Run every 1000ms (1 second)
            globalIntervalId = setInterval(globalUpdateLoop, 1000);
        }
    }


    /**
     * Sets up the countdown for a single element.
     */
    function initializeCountdown(element) {
        // 1. Get the time string and day index
        const timeString = element.textContent.trim().match(/\d{2}:\d{2}/)?.[0];
        if (!timeString) return;

        const columnIndex = getAiringColumnIndex(element);
        if (columnIndex === null) return;
        const targetDay = DAY_OFFSETS[columnIndex];

        // 2. Calculate the next airing date with offset
        const targetDate = getNextAiringDate(targetDay, timeString);
        if (!targetDate) return;

        // 3. Transform the element's content if not already transformed
        if (!element.querySelector('.countdown-timer')) {
            element.setAttribute('data-original-time', element.textContent.trim());
            element.innerHTML = `<div class="countdown-timer" id="${element.id}_countdown"><span class="countdown-text">...</span></div>`;
        }

        // 4. Track the element for the global update loop
        element.__targetDate = targetDate;
        activeCountdownElements.add(element);

        // 5. Ensure the global update loop is running
        startGlobalUpdateLoop();

        // Run immediately to populate the timer
        updateSingleCountdown(element);
    }


    /**
     * Clears all countdowns (by stopping the global loop) and resets the element tracking.
     */
    function clearAllTimers() {
        if (globalIntervalId) {
            clearInterval(globalIntervalId);
            globalIntervalId = null;
        }
        activeCountdownElements.clear();
    }

    // --- UI SETUP & MAIN EXECUTION ---

    function setupSettingsUI() {
        // --- Settings Panel ---
        const settingsContainer = document.createElement('div');
        settingsContainer.id = 'gm-countdown-settings';
        settingsContainer.innerHTML = `
            <div style="font-size: 13px;">
                <label for="tz-offset" style="display: block; margin-bottom: 5px; font-weight: 600;">
                    Countdown Time Offset (Hours):
                </label>
                <input type="text" id="tz-offset" value="${timezoneOffsetHours.toFixed(1)}" placeholder="e.g. -2 or -2.5"
                    style="
                        width: 100%;
                        padding: 6px;
                        border: 1px solid #555;
                        background: #1e1e1e;
                        color: #fff;
                        border-radius: 4px;
                        text-align: center;
                        font-size: 14px;
                    ">
                <button id="tz-save"
                    style="
                        margin-top: 8px;
                        width: 100%;
                        padding: 8px;
                        background: #3552a1;
                        color: #FFFF;
                        border: none;
                        border-radius: 4px;
                        cursor: pointer;
                        font-weight: 700;
                        transition: background 0.2s;
                    ">
                    Save & Apply Offset
                </button>
                <p style="margin-top: 6px; opacity: 0.8; font-size: 11px;">
                    Offset is added to the site's displayed time. Use negative for earlier times.
                </p>
            </div>
        `;
        document.body.appendChild(settingsContainer);

        // --- Toggle Button ---
        const toggleButton = document.createElement('button');
        toggleButton.id = 'gm-settings-toggle';
        toggleButton.textContent = 'Countdown Settings';
        document.body.appendChild(toggleButton);

        // --- Event Listeners ---

        toggleButton.addEventListener('click', () => {
            settingsContainer.classList.toggle('visible');
        });

        document.getElementById('tz-save').addEventListener('click', () => {
            const input = document.getElementById('tz-offset');
            const newOffset = parseFloat(input.value);
            const button = document.getElementById('tz-save');

            if (!isNaN(newOffset)) {
                GM_setValue('timezoneOffsetHours', newOffset);
                timezoneOffsetHours = newOffset;

                // Clear and re-run main logic
                clearAllTimers();
                main(true);

                input.style.borderColor = '#34d399';
                button.textContent = 'Offset Applied!';
                button.style.backgroundColor = '#10b981';

                setTimeout(() => {
                    button.textContent = 'Save & Apply Offset';
                    button.style.backgroundColor = '#34d399';
                }, 1500);

            } else {
                input.style.borderColor = '#f87171';
                button.textContent = 'Invalid Number!';
                setTimeout(() => {
                    button.textContent = 'Save & Apply Offset';
                }, 1500);
            }
        });
    }


    function main(isReinitialization = false) {
        if (!isReinitialization && !isUiSetup) {
            setupSettingsUI();
            isUiSetup = true;
        }

        const calendarContainer = document.getElementById('calendar_container');
        const scope = calendarContainer || document;

        const airingHourDivs = scope.querySelectorAll('.airing_hour');

        if (airingHourDivs.length === 0) {
            // Safely retry only if the calendar container hasn't been loaded yet.
            if (!isReinitialization) {
                 setTimeout(main, 500);
            }
            return;
        }

        // Initialize any new elements found
        airingHourDivs.forEach(div => {
            if (isReinitialization || !div.querySelector('.countdown-timer')) {
                initializeCountdown(div);
            }
        });

        console.log(`Initialized countdown for ${activeCountdownElements.size} elements with offset ${timezoneOffsetHours} hour(s).`);
    }

    // Start the safe loading process
    main();

})();