// ==UserScript==
// @name         Is it Down? (Updated)
// @version      0.5.0
// @namespace    https://greasyfork.org/en/users/113783-klattering
// @description  Pulls from TrackerStatus API and displays status on redacted.ch
// @match        https://redacted.ch/*
// @grant        GM.xmlHttpRequest
// @license MIT
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    const Settings = {
        position: 'fixed',
        placement: 'top',
        isKuro: false,
        showIfStable: false,
        checkInterval: 300000 // Check every 5 minutes
    };

    const styles = `
        .tracker-status {
            position: fixed;
            z-index: 9999;
            box-sizing: border-box;
            width: 100%;
            display: none;
            padding: 0.25rem;
            top: 0;
            left: 0;
        }
        .tracker-status--unstable { background-color: #a00e0e; }
        .tracker-status--stable { background-color: #056b00; }
        .tracker-status__message {
            color: white;
            text-align: center;
            font-weight: bold;
            margin: 0;
        }
        .tracker-status__link {
            color: white;
            text-decoration: underline;
        }
        body {
            transition: margin-top 0.3s ease;
        }
    `;

    function createStatusElement() {
        const trackerStatus = document.createElement('div');
        trackerStatus.className = 'tracker-status';

        const message = document.createElement('p');
        message.className = 'tracker-status__message';

        trackerStatus.appendChild(message);
        document.body.prepend(trackerStatus);

        const styleElement = document.createElement('style');
        styleElement.textContent = styles;
        document.head.appendChild(styleElement);

        return trackerStatus;
    }

    function updateStatus(trackerStatus) {
        GM.xmlHttpRequest({
            method: 'POST',
            url: 'https://red.trackerstatus.info/api/all/',
            headers: {
                "X-Requested-With": "XMLHttpRequest"
            },
            onload: function(response) {
                if (response.status >= 200 && response.status < 400) {
                    const services = JSON.parse(response.responseText);
                    const downServices = Object.entries(services).filter(service => service[1].Status === '0');

                    const messageElement = trackerStatus.querySelector('.tracker-status__message');

                    if (downServices.length > 0) {
                        trackerStatus.classList.add('tracker-status--unstable');
                        trackerStatus.classList.remove('tracker-status--stable');
                        trackerStatus.style.display = 'block';

                        const downServiceNames = downServices.map(service => service[0]);
                        const serviceText = downServiceNames.length > 1 ?
                            `${downServiceNames.slice(0, -1).join(', ')} and ${downServiceNames.slice(-1)} are` :
                            `${downServiceNames[0]} is`;

                        messageElement.innerHTML = `The ${serviceText} currently experiencing technical difficulties. <a class="tracker-status__link" href="https://red.trackerstatus.info">More info</a>`;
                    } else {
                        trackerStatus.classList.add('tracker-status--stable');
                        trackerStatus.classList.remove('tracker-status--unstable');
                        messageElement.textContent = 'All systems go.';
                        trackerStatus.style.display = Settings.showIfStable ? 'block' : 'none';
                    }

                    adjustPageLayout(trackerStatus);
                } else {
                    console.error('Error fetching tracker status');
                }
            },
            onerror: function(error) {
                console.error('Error fetching tracker status:', error);
            }
        });
    }

    function adjustPageLayout(trackerStatus) {
        const statusHeight = trackerStatus.offsetHeight;
        if (trackerStatus.style.display !== 'none') {
            document.body.style.marginTop = `${statusHeight}px`;
        } else {
            document.body.style.marginTop = '0';
        }
    }

    const trackerStatus = createStatusElement();
    updateStatus(trackerStatus);
    setInterval(() => updateStatus(trackerStatus), Settings.checkInterval);

    // Adjust layout on window resize
    window.addEventListener('resize', () => adjustPageLayout(trackerStatus));
})();