/**
 * spritpreise.js - gemeinsame Steuerungslogik für alle Spritpreise-Seiten
 * (index.php UND jahresstatistik.php, siehe Chat 01.08.2026) - Jahres-
 * Navigation (nur jahresstatistik.php), AJAX-Nachladen der Panels sowie
 * der Zeilenumbruch der Preisspannen neben den Panel-Überschriften.
 * Ausgelagert statt in jeder Seite dupliziert, damit beide Seiten immer
 * dasselbe Verhalten haben.
 *
 * Erwartet vor dem Einbinden gesetzte globale Variablen (siehe jeweilige
 * PHP-Seite):
 *   window.SPRIT_MODUS         - "tage" (index.php, rollierende
 *                                 Kurzzeitansicht) oder "jahr"
 *                                 (jahresstatistik.php, mit Jahres-Nav)
 *   window.SPRIT_TAGE          - nur im "tage"-Modus: Fenstergröße (z.B. 30)
 *   window.SPRIT_MIN_JAHR, window.SPRIT_AKTUELLES_JAHR, window.SPRIT_JAHR
 *                               - nur im "jahr"-Modus
 *
 * Lädt automatisch die Panels, die auf der jeweiligen Seite tatsächlich
 * vorhanden sind: "panel-preise" nur auf index.php, "panel-diesel"/
 * "panel-e10"/"panel-e5" auf beiden Seiten.
 */

// Steuert den Zeilenumbruch der Preisspanne neben den Panel-Überschriften:
// passen Star- und Esso-Teil samt Trenner ("|") in eine Zeile, bleiben sie
// zusammen; sonst wird der Trenner ausgeblendet und der Esso-Teil bricht in
// eine eigene Zeile um (aufgerufen aus sprit_preisspanne_skript() in
// charts.php und beim Fenster-Resize unten).
window.spritPreisspanneLayout = function (el) {
    var star = el.querySelector('.preis-star');
    var esso = el.querySelector('.preis-esso');
    var trenner = el.querySelector('.preis-trenner');
    if (!star || !esso || !trenner) { return; }
    trenner.style.display = 'inline';
    esso.style.display = 'inline';
    var verfuegbar = el.clientWidth;
    var benoetigt = star.offsetWidth + trenner.offsetWidth + esso.offsetWidth;
    if (verfuegbar > 0 && benoetigt > verfuegbar) {
        trenner.style.display = 'none';
        esso.style.display = 'block';
    }
};

(function () {
    var MODUS = window.SPRIT_MODUS || 'jahr';
    var TAGE = window.SPRIT_TAGE;
    var MIN_JAHR = window.SPRIT_MIN_JAHR;
    var AKTUELLES_JAHR = window.SPRIT_AKTUELLES_JAHR;
    var angezeigtesJahr = window.SPRIT_JAHR;

    // Ersetzt den Inhalt eines Containers per fetch()-Ergebnis und führt
    // dabei enthaltene <script>-Tags aus (siehe Wetter-Vorbild).
    function setzeHtmlMitSkripten(ziel, html) {
        ziel.classList.remove('hinweis');
        ziel.style.display = '';
        ziel.style.alignItems = '';
        ziel.style.justifyContent = '';
        ziel.innerHTML = html;
        var alte = ziel.querySelectorAll('script');
        for (var i = 0; i < alte.length; i++) {
            var neu = document.createElement('script');
            neu.textContent = alte[i].textContent;
            alte[i].replaceWith(neu);
        }
    }

    function ladePanel(name, ziel, zusatzParam) {
        if (!ziel) { return; }
        var url = 'panel.php?panel=' + encodeURIComponent(name) + (zusatzParam || '');
        fetch(url)
            .then(function (r) { return r.text(); })
            .then(function (html) { setzeHtmlMitSkripten(ziel, html); })
            .catch(function () { ziel.textContent = 'Fehler beim Laden.'; });
    }

    // Liefert den Zeitraum-Parameter fürs Nachladen der drei Diagramme:
    // "&tage=30" im Kurzzeit-Modus, "&jahr=2026" im Jahres-Modus.
    function zeitraumQuery() {
        return (MODUS === 'tage') ? ('&tage=' + TAGE) : ('&jahr=' + angezeigtesJahr);
    }

    function ladeDiagramme() {
        var q = zeitraumQuery();
        ladePanel('diesel', document.getElementById('panel-diesel'), q);
        ladePanel('e10', document.getElementById('panel-e10'), q);
        ladePanel('e5', document.getElementById('panel-e5'), q);
    }

    // --- Jahres-Navigation (nur im "jahr"-Modus relevant) ---
    function renderJahrNav(jahr) {
        var nav = document.getElementById('jahr-nav');
        if (!nav) { return; }
        var html = '';
        html += (jahr > MIN_JAHR)
            ? '<a href="?jahr=' + (jahr - 1) + '" data-jahr="' + (jahr - 1) + '">&larr; ' + (jahr - 1) + '</a>'
            : '<span class="gesperrt">&larr;</span>';
        html += '<span class="jahr-titel">' + jahr + '</span>';
        html += (jahr < AKTUELLES_JAHR)
            ? '<a href="?jahr=' + (jahr + 1) + '" data-jahr="' + (jahr + 1) + '">' + (jahr + 1) + ' &rarr;</a>'
            : '<span class="gesperrt">&rarr;</span>';
        nav.innerHTML = html;
    }

    // Ein Jahreswechsel laedt ALLE DREI Diagramme neu (Diesel/E10/E5),
    // im Gegensatz zum Wetter-Vorbild mit nur einem Verlaufs-Panel.
    function ladeJahr(jahr) {
        angezeigtesJahr = jahr;
        ['diesel', 'e10', 'e5'].forEach(function (kraftstoff) {
            var jahrSpan = document.getElementById('jahr-' + kraftstoff);
            if (jahrSpan) { jahrSpan.textContent = jahr; }
        });
        renderJahrNav(jahr);
        ladeDiagramme();
        if (window.history && history.pushState) {
            var url = new URL(window.location.href);
            url.searchParams.set('jahr', jahr);
            history.pushState({ jahr: jahr }, '', url);
        }
    }

    if (MODUS === 'jahr') {
        var jahrNav = document.getElementById('jahr-nav');
        if (jahrNav) {
            jahrNav.addEventListener('click', function (e) {
                var a = e.target.closest && e.target.closest('a[data-jahr]');
                if (!a) { return; }
                e.preventDefault();
                ladeJahr(parseInt(a.getAttribute('data-jahr'), 10));
            });
        }
        window.addEventListener('popstate', function (e) {
            var jahr = (e.state && e.state.jahr) ? e.state.jahr : AKTUELLES_JAHR;
            ladeJahr(jahr);
        });
        renderJahrNav(angezeigtesJahr);
    }

    // Lädt alle auf der jeweiligen Seite vorhandenen Panels neu ("preise"
    // gibt es nur auf index.php, ladePanel() prueft selbst ob das
    // Ziel-Element existiert) - gemeinsame Grundlage für den ersten Aufbau,
    // das Pull-to-Refresh und das automatische Auffrischen weiter unten.
    function alleAktualisieren() {
        ladePanel('preise', document.getElementById('panel-preise'));
        ladeDiagramme();
    }

    alleAktualisieren();

    // Bei Fenster-/Orientierungswechsel den Zeilenumbruch der Preisspannen
    // neu berechnen (siehe window.spritPreisspanneLayout oben).
    var groessenAenderungTimer = null;
    window.addEventListener('resize', function () {
        clearTimeout(groessenAenderungTimer);
        groessenAenderungTimer = setTimeout(function () {
            ['preis-diesel', 'preis-e10', 'preis-e5'].forEach(function (id) {
                var el = document.getElementById(id);
                if (el) { window.spritPreisspanneLayout(el); }
            });
        }, 150);
    });

    // Pull-to-Refresh (Runterziehen am oberen Rand erzwingt ein Neuladen
    // der Daten), periodisches Auto-Refresh und Refresh beim erneuten
    // Sichtbarwerden der Seite (siehe Chat 01.08.2026: "durch runterziehen
    // eine aktualisierung erzwingen ... auch sonst sollen sie sich
    // regelmäßig selbst auffrischen ... vor allem wenn man sie neu öffnet").
    // Lädt hier bewusst NUR die Panel-Daten per fetch() neu (kein
    // location.reload() wie beim alten Wetter/Webcam-Vorbild), da die Seite
    // das ohnehin schon kann - das ist schneller und die Scroll-Position
    // bleibt erhalten.
    initPullToRefresh(alleAktualisieren);

    // Alle 5 Minuten automatisch auffrischen (Tankerkönig-typisches
    // Aktualisierungsintervall).
    setInterval(alleAktualisieren, 5 * 60 * 1000);

    // Wird die Seite wieder sichtbar (z.B. App aus dem Hintergrund geholt
    // oder Tab erneut geöffnet), sofort auffrischen statt auf das nächste
    // Intervall zu warten.
    document.addEventListener('visibilitychange', function () {
        if (document.visibilityState === 'visible') {
            alleAktualisieren();
        }
    });
})();

/**
 * Baut eine kleine Pull-to-Refresh-Geste auf: wird am oberen Seitenrand
 * (scrollY === 0) nach unten gezogen, erscheint ein Lade-Symbol
 * (loader.png), das der Zugbewegung folgt; wird weit genug gezogen und
 * losgelassen, ruft es sofort "aktualisierenFn" auf statt wie früher bei
 * Wetter/Webcam per scrollTop-Hack + wait() + location.reload() (siehe
 * Chat 01.08.2026).
 */
function initPullToRefresh(aktualisierenFn) {
    var SCHWELLE = 70;
    var startY = null;
    var ziehtGerade = false;
    var overlay = null;

    function overlayHolen() {
        if (overlay) { return overlay; }
        overlay = document.createElement('div');
        overlay.id = 'pull-refresh-overlay';
        overlay.innerHTML = '<img src="loader.png" alt="">';
        document.body.appendChild(overlay);
        return overlay;
    }

    document.addEventListener('touchstart', function (e) {
        if (window.scrollY <= 0) {
            startY = e.touches[0].clientY;
            ziehtGerade = true;
        } else {
            startY = null;
            ziehtGerade = false;
        }
    }, { passive: true });

    document.addEventListener('touchmove', function (e) {
        if (!ziehtGerade || startY === null || window.scrollY > 0) { return; }
        var distanz = e.touches[0].clientY - startY;
        if (distanz <= 0) { return; }
        var el = overlayHolen();
        var begrenzt = Math.min(distanz, SCHWELLE * 1.6);
        el.style.transform = 'translateY(' + (begrenzt - SCHWELLE) + 'px)';
        el.classList.toggle('bereit', distanz > SCHWELLE);
    }, { passive: true });

    document.addEventListener('touchend', function () {
        if (!ziehtGerade) { return; }
        ziehtGerade = false;
        startY = null;
        if (!overlay) { return; }
        if (overlay.classList.contains('bereit')) {
            overlay.classList.add('laedt');
            overlay.style.transform = 'translateY(6px)';
            aktualisierenFn();
            setTimeout(function () {
                overlay.classList.remove('bereit', 'laedt');
                overlay.style.transform = '';
            }, 600);
        } else {
            overlay.style.transform = '';
        }
    });
}