
document.addEventListener("DOMContentLoaded", function () {
    const navList = document.getElementById("menu");
    const main = document.querySelector("main");

    function loadJSON(callback) {
        fetch("baza.json")
            .then(res => res.json())
            .then(data => callback(data))
            .catch(err => console.error("Błąd wczytywania JSON:", err));
    }

    function buildMenu(data) {
        data.podstrony.forEach(p => {
            const li = document.createElement("li");
            const a = document.createElement("a");
            a.href = "#" + p.adres;
            a.textContent = p.tytul;
            li.appendChild(a);
            navList.appendChild(li);
        });
    }

    function showPage(data, hash) {
        const adres = hash.replace(/^#/, '');
        const p = data.podstrony.find(p => p.adres === adres);

        if (p) {
            main.innerHTML = `
                <article>
                    <h2>${p.tytul}</h2>
                    ${p.tresc}
                    <img src="${p.obraz}" alt="${p.tytul}" style="max-width: 100%; margin-top: 10px;">
                </article>
            `;
        } else {
            main.innerHTML = `
                <article>
                    <h2>Nie znaleziono strony</h2>
                    <p>Podana podstrona nie istnieje lub została usunięta.</p>
                </article>
            `;
        }
    }

    function init(data) {
        buildMenu(data);
        if (window.location.hash) {
            showPage(data, window.location.hash);
        }

        window.addEventListener("hashchange", () => {
            showPage(data, window.location.hash);
        });
    }

    loadJSON(init);
});

/*
document.addEventListener("DOMContentLoaded", function () {
    const navList = document.getElementById("menu");
    const main = document.querySelector("main");
    const reklama = document.getElementById("reklama");

    let daneZwierzat = [];

    // Zmiana funkcji z loadXML na loadJSON
    function loadJSON(callback) {
        fetch("baza.json")
            .then(res => {
                if (!res.ok) throw new Error("Błąd wczytywania JSON");
                return res.json();
            })
            .then(data => {
                daneZwierzat = data.podstrony;
                callback();
            })
            .catch(err => {
                console.error("Błąd wczytywania JSON:", err);
                main.innerHTML = "<article><h2>Błąd</h2><p>Nie udało się wczytać danych.</p></article>";
            });
    }

    function buildMenu() {
        const categories = {};

        // Grupowanie wpisów wg kategorii (np. "ptaki", "ssaki", "gryzonie")
        daneZwierzat.forEach(p => {
            const title = p.tytul;
            const url = p.adres;
            const [category, page] = url.split("/");

            if (!categories[category]) {
                categories[category] = [];
            }

            categories[category].push({ title, url });
        });

        // Tworzenie struktury menu
        Object.entries(categories).forEach(([category, items]) => {
            const categoryLi = document.createElement("li");
            const categoryLink = document.createElement("a");
            categoryLink.href = "#";
            categoryLink.textContent = category.charAt(0).toUpperCase() + category.slice(1);
            categoryLink.style.cursor = "pointer";
            categoryLi.appendChild(categoryLink);

            const subUl = document.createElement("ul");
            subUl.style.display = "none"; // ukryte początkowo

            items.forEach(({ title, url }) => {
                const itemLi = document.createElement("li");
                const itemA = document.createElement("a");
                itemA.href = "#" + url;
                itemA.textContent = title;
                itemLi.appendChild(itemA);
                subUl.appendChild(itemLi);
            });

            // Dodaj rozwijanie/zamykanie podmenu
            categoryLink.addEventListener("click", (e) => {
                e.preventDefault();
                subUl.style.display = subUl.style.display === "none" ? "block" : "none";
            });

            categoryLi.appendChild(subUl);
            navList.appendChild(categoryLi);
        });
    }

    function showPage(hash) {
        const adres = hash.replace(/^#/, '');
        const p = daneZwierzat.find(item => item.adres === adres);

        if (p) {
            const tytul = p.tytul;
            const tresc = p.tresc.map(paragraf => `<p>${paragraf}</p>`).join("");
            const obraz = p.obraz;

            main.innerHTML = `
                <article>
                    <h2>${tytul}</h2>
                    ${tresc}
                    <img id="dynamic-img" src="${obraz}" alt="${tytul}" style="max-width: 100%; margin-top: 10px;">
                </article>
            `;

            const img = document.getElementById("dynamic-img");

            img.onload = () => {
                const dominantColor = getDominantColor(img);
                reklama.style.backgroundColor = dominantColor;
            };

        } else {
            main.innerHTML = `
                <article>
                    <h2>Nie znaleziono strony</h2>
                    <p>Podana podstrona nie istnieje lub została usunięta.</p>
                </article>
            `;
            reklama.style.backgroundColor = ""; // reset tła
        }
    }

    function init() {
        buildMenu();
        if (window.location.hash) {
            showPage(window.location.hash);
        }

        window.addEventListener("hashchange", () => {
            showPage(window.location.hash);
        });
    }

    function getDominantColor(imgElement) {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");

        canvas.width = imgElement.naturalWidth;
        canvas.height = imgElement.naturalHeight;
        ctx.drawImage(imgElement, 0, 0);

        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;

        const colorCounts = {};
        let maxCount = 0;
        let dominantColor = "#000000";

        for (let i = 0; i < data.length; i += 4) {
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];

            const key = `${Math.floor(r / 16)},${Math.floor(g / 16)},${Math.floor(b / 16)}`;
            colorCounts[key] = (colorCounts[key] || 0) + 1;

            if (colorCounts[key] > maxCount) {
                maxCount = colorCounts[key];
                dominantColor = `rgb(${Math.floor(r / 16) * 16}, ${Math.floor(g / 16) * 16}, ${Math.floor(b / 16) * 16})`;
            }
        }

        return dominantColor;
    }

    // Załaduj dane JSON i zainicjalizuj stronę
    loadJSON(init);
});
*/