// assets/js/comments.js

(function () {
    // Konfiguracja API
    const baseUrl = (typeof MAGICO_BASE_URL !== 'undefined') ? MAGICO_BASE_URL : '';
    const API_URL = baseUrl + '/api-comments.php';
    const CURRENT_PATH = window.location.pathname.replace(/^\/|\/$/g, '');

    let isCommentMode = false;
    let pendingElement = null; // Element, który chcemy skomentować
    let markersData = [];      // Przechowujemy dane o markerach lokalnie do szybkiego odświeżania

    // --- 1. GENEROWANIE UI ---
    function initUI() {
        document.body.style.paddingTop = '50px';

        const bar = document.createElement('div');
        bar.id = 'prototype-topbar';
        bar.innerHTML = `
            <div style="display:flex; align-items:center;">
                <div style="font-weight: bold; font-size: 14px; margin-right: 20px;">
                    <span style="color: #696cff;">Magico</span> Feedback
                </div>
            </div>
            
            <div style="display:flex; align-items:center; gap: 20px;">
                 <!-- Licznik -->
                 <div id="comments-count-badge" style="cursor:pointer; font-size:13px; display:flex; align-items:center; gap:5px; padding: 5px 10px; background: rgba(255,255,255,0.1); border-radius: 4px;">
                    <span style="opacity:0.8;">Komentarzy:</span>
                    <span id="comments-count-val" style="background:#696cff; padding:2px 8px; border-radius:10px; font-weight:bold; font-size:11px;">0</span>
                 </div>

                 <!-- Pokaż/Ukryj -->
                 <div style="display:flex; align-items:center; font-size:13px; gap: 5px;">
                    <input type="checkbox" id="comments-visibility-toggle" checked style="cursor:pointer;">
                    <label for="comments-visibility-toggle" style="cursor:pointer; margin-bottom:0;">Pokaż pineski</label>
                 </div>

                 <div style="width: 1px; height: 20px; background: rgba(255,255,255,0.2);"></div>

                 <!-- Tryb -->
                 <div class="mode-switch">
                    <span style="font-size: 13px; margin-right: 8px;">Tryb Komentowania</span>
                    <label class="switch-label">
                        <input type="checkbox" id="comment-toggle">
                        <span class="slider"></span>
                    </label>
                </div>
            </div>
        `;
        document.body.appendChild(bar);

        // Kontener na input (domyślnie w body)
        const modalHtml = `
            <div id="comment-input-box-overlay"></div>
            <div id="comment-input-box">
                <h6 style="margin-top:0;">Dodaj notatkę</h6>
                <input type="text" id="new-comment-author" class="form-control mb-2" placeholder="Twój podpis (np. Jan)" style="font-size: 0.9rem;">
                <textarea id="new-comment-text" class="form-control mb-2" rows="3" placeholder="Wpisz uwagę..."></textarea>
                <div style="text-align: right; gap: 5px; display: flex; justify-content: flex-end;">
                    <button id="cancel-comment" class="btn btn-sm btn-outline-secondary">Anuluj</button>
                    <button id="save-comment" class="btn btn-sm btn-primary">Zapisz</button>
                </div>
            </div>

            <!-- Modal Lista Wszystkich -->
            <div id="all-comments-dialog-overlay"></div>
            <div id="all-comments-dialog">
                <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; border-bottom:1px solid #eee; padding-bottom:10px;">
                    <h5 style="margin:0;">Wszystkie komentarze</h5>
                    <button id="close-all-comments" class="btn btn-sm btn-outline-secondary">X</button>
                </div>
                <div id="all-comments-list" style="max-height:60vh; overflow-y:auto; padding-right:5px;"></div>
            </div>
        `;
        document.body.insertAdjacentHTML('beforeend', modalHtml);

        // Listenery UI
        const toggle = document.getElementById('comment-toggle');

        toggle.addEventListener('change', function (e) {
            if (e.target.checked) {
                // Próba włączenia - autoryzacja
                checkAuth().then(ok => {
                    if (ok) {
                        isCommentMode = true;
                        localStorage.setItem('magico_comment_mode', 'true');
                        toggleCommentMode(true);
                    } else {
                        e.target.checked = false; // Cofnij switch
                    }
                });
            } else {
                isCommentMode = false;
                localStorage.removeItem('magico_comment_mode');
                toggleCommentMode(false);
            }
        });

        // Toggle visibility
        const visToggle = document.getElementById('comments-visibility-toggle');
        const savedVis = localStorage.getItem('magico_markers_visible');
        if (savedVis === 'false') {
            visToggle.checked = false;
            document.body.classList.add('comments-hidden');
        }

        visToggle.addEventListener('change', (e) => {
            if (e.target.checked) {
                document.body.classList.remove('comments-hidden');
                localStorage.setItem('magico_markers_visible', 'true');
            } else {
                document.body.classList.add('comments-hidden');
                localStorage.setItem('magico_markers_visible', 'false');
            }
        });

        // Open list dialog
        document.getElementById('comments-count-badge').addEventListener('click', showAllCommentsDialog);
        document.getElementById('close-all-comments').addEventListener('click', () => {
            document.getElementById('all-comments-dialog').style.display = 'none';
            document.getElementById('all-comments-dialog-overlay').style.display = 'none';
        });

        // --- RESTORE SESSION ---
        const savedMode = localStorage.getItem('magico_comment_mode');
        if (savedMode === 'true') {
            // Sprawdź cicho czy sesja PHP jest aktywna
            checkAuth(true).then(ok => {
                if (ok) {
                    toggle.checked = true;
                    isCommentMode = true;
                    toggleCommentMode(true);
                } else {
                    localStorage.removeItem('magico_comment_mode'); // Sesja wygasła
                }
            });
        }

        document.getElementById('cancel-comment').addEventListener('click', closeInputBox);
        document.getElementById('save-comment').addEventListener('click', saveComment);

        // Scroll listener (capture) - żeby aktualizować pineski przy każdym przewinięciu (okna lub modala)
        window.addEventListener('scroll', updateMarkerPositions, true);
    }

    // --- 1.5 AUTORYZACJA ---
    // Prosta weryfikacja - czy mamy flagę w sesji JS? 
    // Lepiej: przy włączeniu zapytać o hasło jeśli nie mamy, i wysłać do API.
    // API ustawi sesję PHP.

    let isAuthorized = false; // Lokalna flaga, aby nie pytać co chwilę

    async function checkAuth(silent = false) {
        if (isAuthorized) return true;

        // Najpierw zapytaj API czy już jesteśmy zalogowani (sesja PHP)
        try {
            const check = await fetch(API_URL + '?action=check_auth');
            const checkData = await check.json();
            if (checkData.status === 'success') {
                isAuthorized = true;
                return true;
            }
        } catch (e) { }

        if (silent) return false;

        const pass = prompt("Podaj hasło do trybu komentowania:");
        if (!pass) return false;

        try {
            const res = await fetch(API_URL + '?action=auth', {
                method: 'POST',
                body: JSON.stringify({ password: pass })
            });
            const data = await res.json();

            if (data.status === 'success') {
                isAuthorized = true;
                return true;
            } else {
                alert("Błąd: " + (data.message || "Nieprawidłowe hasło"));
                return false;
            }
        } catch (e) {
            alert("Błąd połączenia z API");
            return false;
        }
    }

    // --- 2. LOGIKA TRYBU (AGRESYWNE BLOKOWANIE) ---
    function toggleCommentMode(active) {
        if (active) {
            document.body.classList.add('comment-mode-active');
            // Blokujemy wszystko: click, mousedown, mouseup, submit
            ['click', 'mousedown', 'mouseup', 'submit'].forEach(evt =>
                window.addEventListener(evt, handleInteraction, true)
            );
        } else {
            document.body.classList.remove('comment-mode-active');
            ['click', 'mousedown', 'mouseup', 'submit'].forEach(evt =>
                window.removeEventListener(evt, handleInteraction, true)
            );
        }
    }

    // --- 3. OBSŁUGA INTERAKCJI ---
    function handleInteraction(e) {
        // ZAWSZE pozwalamy na interakcję z naszym UI
        if (e.target.closest('#prototype-topbar') ||
            e.target.closest('#comment-input-box') ||
            e.target.closest('.comment-marker') ||
            e.target.closest('.comment-popover')) { // Dodano popover do wykluczeń
            return;
        }

        // Blokujemy natywną akcję
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        // Reagujemy tylko na 'click' (żeby nie odpalać input boxa 3 razy na mousedown/up/click)
        if (e.type === 'click') {
            pendingElement = e.target;
            openInputBox();
        }
    }

    // --- 4. SELEKTOR CSS ---
    function getCssSelector(el) {
        if (!(el instanceof Element)) return;
        const path = [];
        while (el.nodeType === Node.ELEMENT_NODE && el.tagName !== 'BODY') {
            let selector = el.tagName.toLowerCase();
            if (el.id) {
                selector += '#' + el.id;
                path.unshift(selector);
                break;
            } else {
                let sib = el, nth = 1;
                while (sib = sib.previousElementSibling) {
                    if (sib.tagName.toLowerCase() == selector) nth++;
                }
                if (nth > 1) selector += ":nth-of-type(" + nth + ")";

                if (el.classList.length > 0) {
                    for (let cls of el.classList) {
                        if (cls !== 'active' && cls !== 'show' && cls !== 'collapsed' && cls !== 'fade') {
                            selector += "." + cls;
                            break;
                        }
                    }
                }
            }
            path.unshift(selector);
            el = el.parentNode;
        }
        return path.join(" > ");
    }

    // --- 5. OBSŁUGA INPUTA (PRZENOSZENIE DO MODALA) ---
    function openInputBox() {
        const box = document.getElementById('comment-input-box');
        const overlay = document.getElementById('comment-input-box-overlay');

        // FIX: Sprawdź czy jest otwarty modal Bootstrapa
        const activeModal = document.querySelector('.modal.show .modal-content');

        if (activeModal) {
            // Jeśli tak, przenieś nasz box do modala (żeby działało pisanie i focus)
            activeModal.appendChild(box);
            // Overlay też, żeby przykrył modal
            activeModal.appendChild(overlay);
            box.style.position = 'absolute'; // W modalu pozycjonujemy absolutnie względem modala
        } else {
            // Jeśli nie, wracamy do body
            document.body.appendChild(overlay);
            document.body.appendChild(box);
            box.style.position = 'fixed';
        }

        // Tymczasowe wyłączenie trybu wybierania, żeby można było klikać w Boxie
        // Ale NIE zdejmujemy listenerów blokujących tło (bo tło nadal ma być nieklikalne)
        // Po prostu nasza funkcja handleInteraction przepuszcza kliknięcia w #comment-input-box

        overlay.style.display = 'block';
        box.style.display = 'block';

        // Focus po małym timeout, żeby przeglądarka zdążyła przenieść element
        setTimeout(() => {
            const authorInput = document.getElementById('new-comment-author');
            const savedAuthor = localStorage.getItem('magico_comment_author');
            if (savedAuthor) authorInput.value = savedAuthor;

            // Focus na tekst, chyba że brak autora
            if (!savedAuthor) authorInput.focus();
            else document.getElementById('new-comment-text').focus();
        }, 50);
    }

    function closeInputBox() {
        const box = document.getElementById('comment-input-box');
        const overlay = document.getElementById('comment-input-box-overlay');

        overlay.style.display = 'none';
        box.style.display = 'none';
        document.getElementById('new-comment-text').value = '';
        pendingElement = null;

        // Wracamy z boxem do body na wszelki wypadek
        document.body.appendChild(overlay);
        document.body.appendChild(box);
    }

    function saveComment() {
        const text = document.getElementById('new-comment-text').value;
        const author = document.getElementById('new-comment-author').value || 'Anonim';

        if (!text || !pendingElement) {
            closeInputBox();
            return;
        }

        // Zapisz autora na przyszłość
        localStorage.setItem('magico_comment_author', author);

        const selector = getCssSelector(pendingElement);

        fetch(API_URL + '?action=add', {
            method: 'POST',
            body: JSON.stringify({
                page_path: CURRENT_PATH,
                selector: selector,
                comment: text,
                author: author
            })
        })
            .then(res => res.json())
            .then(data => {
                if (data.status === 'success') {
                    closeInputBox();
                    loadComments();
                } else {
                    alert('Błąd: ' + data.message);
                }
            });
    }

    // --- 6. PINESKI I AKTUALIZACJA POZYCJI ---
    function loadComments() {
        fetch(API_URL + '?action=list&page_path=' + encodeURIComponent(CURRENT_PATH))
            .then(res => res.json())
            .then(resp => {
                if (resp.status === 'success') {
                    markersData = resp.data; // Zapisz dane
                    renderMarkers();         // Narysuj
                }
            });
    }

    let activePopover = null;

    function renderMarkers() {
        window.magicoIsUpdating = true;
        try {
            // Usuń stare
            document.querySelectorAll('.comment-marker').forEach(el => el.remove());
            if (activePopover) { activePopover.remove(); activePopover = null; }

            // Grupowanie komentarzy po selektorze
            const grouped = {};
            let activeCount = 0;

            markersData.forEach((c) => {
                if (c.is_resolved == 0) activeCount++;

                // Pomiń rozwiązane, jeśli chcemy je ukrywać (na razie pokazujemy wszystkie, albo tylko nierozwiązane?)
                // User: "archiwum zmienia flagę is_resolved". Zakładamy że archiwum = ukryte?
                // "Archiwum" zwykle oznacza ukryte. Ukryjmy rozwiązane.
                if (c.is_resolved == 1) return;

                if (!grouped[c.dom_selector]) grouped[c.dom_selector] = [];
                grouped[c.dom_selector].push(c);
            });

            // Aktualizacja licznika na pasku
            const cntEl = document.getElementById('comments-count-val');
            if (cntEl) cntEl.textContent = activeCount;

            Object.keys(grouped).forEach((selector, index) => {
                const commentsList = grouped[selector];
                if (!commentsList.length) return;

                try {
                    const el = document.querySelector(selector);
                    if (el && el.offsetParent !== null) { // Tylko widoczne elementy
                        const marker = document.createElement('div');
                        marker.className = 'comment-marker';
                        marker.dataset.selector = selector;

                        // Jeśli więcej niż 1 komentarz, pokaż licznik
                        if (commentsList.length > 1) {
                            marker.textContent = commentsList.length;
                            marker.style.display = 'flex';
                            marker.style.alignItems = 'center';
                            marker.style.justifyContent = 'center';
                            marker.style.color = 'white';
                            marker.style.fontSize = '12px';
                            marker.style.fontWeight = 'bold';
                            // Resetuejmu transform dla tekstu żeby był czytelny? Nie, rotacja jest na pinezce.
                            // Tekst też się obróci. Trzeba by go odkręcić.
                            // Prościej: dodajmy span w środku który odkręcimy.
                            marker.innerHTML = `<span style="transform: rotate(45deg); display:block;">${commentsList.length}</span>`;
                        }

                        // Zdarzenie HOVER (najazd myszką)
                        marker.addEventListener('mouseenter', (e) => {
                            showPopover(marker, commentsList);
                        });

                        marker.addEventListener('mouseleave', (e) => {
                            marker._leaveTimeout = setTimeout(() => {
                                if (activePopover && activePopover._associatedMarker === marker) {
                                    if (!activePopover.matches(':hover')) {
                                        activePopover.remove();
                                        activePopover = null;
                                    }
                                }
                            }, 300);
                        });

                        document.body.appendChild(marker);
                    }
                } catch (err) { }
            });

            // Po stworzeniu od razu ustaw pozycje
            updateMarkerPositions();
        } finally {
            setTimeout(() => { window.magicoIsUpdating = false; }, 0);
        }
    }

    function showPopover(marker, commentsList) {
        if (activePopover) activePopover.remove();

        const pop = document.createElement('div');
        pop.className = 'comment-popover';

        // Budowanie listy komentarzy
        let html = '<div style="max-height: 600px; overflow-y: auto;">';

        commentsList.forEach(data => {
            // Escape (chociaż API to robi, warto mieć warstwę w JS w razie czego, ale API już robi htmlspecialchars)
            // Skoro API robi htmlspecialchars, to tutaj możemy bezpiecznie wstawić
            // Ale uwaga: JS textContent jest bezpieczniejszy.

            // Hack na szybkie budowanie bezpiecznego HTML w pętli stringów jest trudny.
            // Zbudujmy to jako elementy DOM potem? Albo zaufajmy API + textContent buildera.

            // Zrobimy placeholder i podstawimy wartości.

            html += `
                <div class="comment-item" style="border-bottom:1px solid #eee; padding-bottom:8px; margin-bottom:8px;">
                    <div style="display:flex; justify-content:space-between; margin-bottom:4px;">
                        <h6 style="margin:0;">${data.author || 'Anonim'}</h6>
                        <span style="font-size:10px; color:#999;">${data.created_at}</span>
                    </div>
                    <p style="margin-bottom:5px;">${data.comment}</p>
                    <div style="text-align:right; gap:5px; display:flex; justify-content:flex-end;">
                        <button class="btn btn-xs btn-outline-success btn-resolve" data-id="${data.id}" style="font-size:10px; padding: 2px 5px;">Rozwiąż</button>
                        <button class="btn btn-xs btn-outline-danger btn-delete" data-id="${data.id}" style="font-size:10px; padding: 2px 5px;">Usuń</button>
                    </div>
                </div>
            `;
        });
        html += '</div>';

        pop.innerHTML = html;
        document.body.appendChild(pop);
        activePopover = pop;
        pop._associatedMarker = marker;

        // Bindowanie akcji z stopPropagation
        pop.querySelectorAll('.btn-resolve').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation(); // Ważne!
                resolveComment(btn.dataset.id);
            });
        });
        pop.querySelectorAll('.btn-delete').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation(); // Ważne!
                deleteComment(btn.dataset.id);
            });
        });

        // Obsługa interakcji (np. scrollbar)
        pop.addEventListener('mousedown', () => {
            pop._isInteracting = true;
        });

        // Obsługa zamykania przy wyjechaniu z popovera
        pop.addEventListener('mouseleave', () => {
            pop._leaveTimeout = setTimeout(() => {
                if (activePopover === pop) {
                    // Jeśli user trzyma przycisk myszy (np. na scrollbarze), nie zamykaj
                    if (pop._isInteracting) return;

                    if (!activePopover.matches(':hover') && !marker.matches(':hover')) {
                        activePopover.remove();
                        activePopover = null;
                    }
                }
            }, 500); // Zwiększono do 500ms
        });

        pop.addEventListener('mouseenter', () => {
            if (pop._leaveTimeout) clearTimeout(pop._leaveTimeout);
            if (marker._leaveTimeout) clearTimeout(marker._leaveTimeout);
        });

        // Pozycjonowanie
        const rect = marker.getBoundingClientRect();
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

        pop.style.top = (rect.top + scrollTop - 5) + 'px';
        pop.style.left = (rect.right + scrollLeft) + 'px'; // Usunięto przerwę +2px

        if (rect.right + 260 > window.innerWidth) {
            pop.style.left = (rect.left + scrollLeft - 260) + 'px';
        }
    }

    function resolveComment(id) {
        if (!confirm('Czy na pewno chcesz rozwiązać/zarchiwizować ten komentarz?')) return;
        fetch(API_URL + '?action=resolve', {
            method: 'POST', body: JSON.stringify({ id: id })
        }).then(res => res.json()).then(res => {
            if (res.status === 'success') loadComments();
            else alert('Błąd: ' + res.message);
        });
    }

    function deleteComment(id) {
        if (!confirm('Czy na pewno chcesz trwale usunąć ten komentarz?')) return;
        fetch(API_URL + '?action=delete', {
            method: 'POST', body: JSON.stringify({ id: id })
        }).then(res => res.json()).then(res => {
            if (res.status === 'success') loadComments();
            else alert('Błąd: ' + res.message);
        });
    }

    // (Usunięto click-outside listener, bo teraz działamy na hover)

    // Aktualizuj też pozycję otwartego popovera przy scrollu
    const originalUpdatePositions = updateMarkerPositions;
    // ... w sumie updateMarkerPositions jest niżej zdefiniowana, 
    // lepiej wrzucimy to w updateMarkerPositions bezpośrednio.

    // Funkcja wywoływana przy scrollowaniu - musi być szybka
    function updateMarkerPositions() {
        window.magicoIsUpdating = true; // Zaczynamy aktualizację
        try {
            const markers = document.querySelectorAll('.comment-marker');

            markers.forEach(marker => {
                const selector = marker.dataset.selector;
                if (!selector) return;

                try {
                    const el = document.querySelector(selector);
                    if (el && el.offsetParent !== null) {
                        const rect = el.getBoundingClientRect();

                        // Jeśli element wyjechał poza ekran (jest w scrollowanym divie ale schowany)
                        marker.style.top = (rect.top + window.scrollY) + 'px';
                        marker.style.left = (rect.left + window.scrollX + (rect.width / 2)) + 'px';
                        marker.style.display = (marker.textContent.length > 0) ? 'flex' : 'block';
                        // Flex dla licznika, block dla zwykłego? A w stylach mamy display?
                        // W renderMarkers ustawilismy display:flex ręcznie dla licznika.
                        // Tu musimy uwazac zeby tego nie zepsuc. Pominmy style.display='block' jesli ma flex.
                        if (marker.style.display !== 'flex') marker.style.display = 'block';

                        if (activePopover && activePopover._associatedMarker === marker) {
                            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                            const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

                            // Recalculate position
                            let top = (rect.top + scrollTop - 5);
                            let left = (rect.right + scrollLeft);
                            if (rect.right + 260 > window.innerWidth) {
                                left = (rect.left + scrollLeft - 260);
                            }

                            activePopover.style.top = top + 'px';
                            activePopover.style.left = left + 'px';
                        }
                    } else {
                        marker.style.display = 'none';
                        if (activePopover && activePopover._associatedMarker === marker) {
                            // Jeśli element zniknął (np. scroll), ale user trzyma myszkę na popoverze - nie usuwaj
                            if (!activePopover.matches(':hover') && !activePopover._isInteracting) {
                                activePopover.remove();
                                activePopover = null;
                            }
                        }
                    }
                } catch (e) { }
            });
        } finally {
            // Mały timeout, bo MutationObserver jest asynchroniczny (microtask)
            // Ale my chcemy zablokować detekcję zmian, które WŁAŚNIE zaszły.
            // Ponieważ observer odpala się "później", flaga false może zostać ustawiona ZA WCZEŚNIE?
            // Nie, observer zbiera zmiany i odpala callback.
            // Jeśli callback odpali się kiedy flaga jest true, to return.
            // Ale callback odpali się w następnym ticku.
            // Więc musimy przetrzymać flagę true do następnego ticku?
            // Tak, bezpieczniej setTimeout(..., 0).
            setTimeout(() => { window.magicoIsUpdating = false; }, 0);
        }
    }

    // Global mouseup do resetowania flagi interakcji
    document.addEventListener('mouseup', () => {
        if (activePopover) {
            activePopover._isInteracting = false;
            // Opcjonalnie: sprawdź czy zamknąć, jeśli myszka jest poza
            if (activePopover && !activePopover.matches(':hover') && (!activePopover._associatedMarker || !activePopover._associatedMarker.matches(':hover'))) {
                // Możemy wywołać logikę zamykania, ale ona jest w mouseleave.
                // Jeśli user puścił myszkę POZA popoverem, mouseleave już dawno poszło (i timeout mógł zostać zablokowany przez flagę).
                // Więc tutaj warto sprawdzić.
                setTimeout(() => {
                    // Sprawdź ponownie (bezpiecznik)
                    if (activePopover && !activePopover._isInteracting && !activePopover.matches(':hover')) {
                        activePopover.remove();
                        activePopover = null;
                    }
                }, 200);
            }
        }
    });

    // START
    initUI();
    loadComments();

    // Odświeżanie przy zmianie rozmiaru okna
    window.addEventListener('resize', updateMarkerPositions);

    // MutationObserver - odświeżaj pozycje jak coś się zmieni w wygenerowanym DOM (ale ignoruj nasze markery)
    // Helper sprawdzający czy element jest częścią naszego UI
    function isOurElement(node) {
        if (!node || node.nodeType !== 1) return false;

        // Lista ID elementów systemu
        const ourIds = [
            'prototype-topbar',
            'comment-input-box',
            'comment-input-box-overlay',
            'all-comments-dialog',
            'all-comments-dialog-overlay'
        ];

        if (ourIds.includes(node.id)) return true;

        if (node.classList && (
            node.classList.contains('comment-marker') ||
            node.classList.contains('comment-popover')
        )) return true;

        // Sprawdź rodziców
        if (node.closest) {
            for (const id of ourIds) {
                if (node.closest('#' + id)) return true;
            }
            if (node.closest('.comment-marker') || node.closest('.comment-popover')) return true;
        }

        return false;
    }

    // --- 8. OBSŁUGA OBSERVERA I PĘTLI ---

    // Zmienna na observer zdefiniowana niżej, ale potrzebujemy jej tu.
    // Przenieśmy definicję observera wyżej albo użyjmy funkcji.

    let observer; // deklaracja wstępna

    function ignoreObserver(action) {
        if (observer) observer.disconnect();
        try {
            action();
        } finally {
            if (observer) startObserver();
        }
    }

    function startObserver() {
        observer.observe(document.body, {
            childList: true, subtree: true, attributes: true,
            attributeFilter: ['class', 'style', 'hidden']
        });
    }

    // --- MODYFIKACJA renderMarkers i updateMarkerPositions ---

    // Przechwytujemy stare funkcje i opakowujemy je
    // Ale lepiej po prostu zmienić ich ciała w kodzie (co robię tym replace'm)

    // Nadpiszmy renderMarkers, żeby używało ignoreObserver
    // Uwaga: Funkcja renderMarkers i updateMarkerPositions są wyżej. 
    // Ten tool replace musi być sprytny. 
    // Zamiast nadpisywać, zmienię logikę observera na dole pliku i podmienię wywołania.

    // W tym bloku (EndLine: 734) jest końcówka pliku i definicja observera.
    // Zdefiniujmy observera tutaj poprawnie.

    observer = new MutationObserver((mutations) => {
        // Jeśli my sami aktualizujemy, ignoruj wszystko
        if (window.magicoIsUpdating) return;

        let shouldUpdate = false;

        // Optymalizacja: Sprawdzamy czy zmiany są ISTOTNE
        for (const mutation of mutations) {
            // Ignorujemy zmiany na naszych elementach (nawet jeśli disconnect nie zadziałał idealnie)
            if (isOurElement(mutation.target)) continue;

            // Zmiany childList
            if (mutation.type === 'childList') {
                let externalChanges = false;
                // Sprawdź dodane
                for (let i = 0; i < mutation.addedNodes.length; i++) {
                    const node = mutation.addedNodes[i];
                    if (node.nodeType === 1 && !isOurElement(node)) {
                        externalChanges = true; break;
                    }
                    if (node.nodeType === 3 && node.textContent.trim() !== '') {
                        externalChanges = true; break;
                    }
                }
                // Sprawdź usunięte
                if (!externalChanges) {
                    for (let i = 0; i < mutation.removedNodes.length; i++) {
                        const node = mutation.removedNodes[i];
                        if (node.nodeType === 1 && !isOurElement(node)) {
                            externalChanges = true; break;
                        }
                    }
                }
                if (!externalChanges) continue;
            }

            shouldUpdate = true;
            break;
        }

        if (shouldUpdate) {
            if (window.commentUpdateTimeout) clearTimeout(window.commentUpdateTimeout);
            window.commentUpdateTimeout = setTimeout(() => {
                // Renderowanie wyzwolone przez zmiany zewnętrzne
                // Nie musimy tu robić ignoreObserver bo renderMarkers samo to zrobi wewnątrz?
                // Nie, bo renderMarkers to funkcja.
                // Wywołajmy renderMarkers.
                renderMarkers();
            }, 200);
        }
    });

    startObserver();

    // EXPORT funkcji do użycia wewnątrz renderMarkers/update
    // Ponieważ nie edytuję całego pliku, musimy jakoś wstrzyknąć ignoreObserver do wywołań wyżej?
    // Nie da się bez edycji tamtych funkcji.
    // WIĘC: Zostawiam observera jak jest (z ulepszonym isOurElement), 
    // ALE w renderMarkers i updateMarkerPositions dodam wywołania disconnect/connect.

    // Czekaj, nie mam dostępu do zmiennej `observer` wewnątrz funkcji zadeklarowanych wyżej, jeśli zadeklaruję ją na dole.
    // Ale w JS var/let w tym samym scope (IIFE) są widoczne. 
    // Muszę przenieść deklarację `let observer` na górę IIFE (innym replacem) lub 
    // Zmienić observer na `window.magicoObserver`? Nieładnie.

    // Zrobię tak: Zdefiniuję `ignoreObserver` tutaj, i użyję `observer.disconnect()` wewnątrz.
    // Ale muszę mieć pewność że `observer` jest zdefiniowany.
    // W obecnym kodzie jest zdefiniowany jako `const observer = ...` na dole.
    // const nie jest hoisted.

    // PLAN B:
    // Zmienię definicję `const observer` na `let observer` i przesunę definicję funkcji `isOurElement` i observera na dół, 
    // a potem w replace'ach wyżej dodam wywołania wrapperów.

    // LUB PROŚCIEJ:
    // Zmodyfikujmy `renderMarkers` i `updateMarkerPositions` żeby sprawdzały flagę globalną `window.magicoIsUpdating`.
    // A observer będzie sprawdzał tę flagę.

    // IMPLEMENTACJA FLAGI:
    window.magicoIsUpdating = false;

    // --- 7. DIALOG Z LISTĄ WSZYSTKICH ---
    function showAllCommentsDialog() {
        const dialog = document.getElementById('all-comments-dialog');
        const overlay = document.getElementById('all-comments-dialog-overlay');
        const list = document.getElementById('all-comments-list');

        // Budowanie listy
        // Filtrujemy tylko nierozwiązane??? W sumie user chciał "wszystkimi zebranymi z tego ekranu".
        // Pokażmy wszystkie uporządkowane od najnowszych, z oznaczeniem rozwiązanych.

        // Kopia i sortowanie
        const sorted = [...markersData].sort((a, b) => b.id - a.id);

        if (sorted.length === 0) {
            list.innerHTML = '<p style="text-align:center; color:#999; padding:20px;">Brak komentarzy na tym ekranie.</p>';
        } else {
            let html = '';
            sorted.forEach(c => {
                const bg = c.is_resolved == 1 ? '#f0fff0' : '#fff';
                const status = c.is_resolved == 1 ? '<span class="badge bg-success" style="font-size:10px;">Rozwiązany</span>' : '';

                html += `
                <div class="comment-list-item" style="background:${bg};">
                    <div style="display:flex; justify-content:space-between; margin-bottom:5px;">
                        <div>
                            <strong>${c.author || 'Anonim'}</strong> 
                            ${status}
                        </div>
                        <small style="color:#999;">${c.created_at}</small>
                    </div>
                    <p style="margin-bottom:8px;">${c.comment}</p>
                    <div style="font-size:11px; color:#888; margin-bottom:5px;">
                        Element: <code>${c.dom_selector.substring(0, 30)}...</code>
                    </div>
                    <div style="text-align:right;">
                        ${c.is_resolved == 0 ? `<button class="btn btn-sm btn-outline-success btn-resolve-list" data-id="${c.id}">Rozwiąż</button>` : ''}
                        <button class="btn btn-sm btn-outline-danger btn-delete-list" data-id="${c.id}">Usuń</button>
                    </div>
                </div>
               `;
            });
            list.innerHTML = html;

            // Listenery w liście
            list.querySelectorAll('.btn-resolve-list').forEach(btn => {
                btn.addEventListener('click', () => resolveComment(btn.dataset.id));
            });
            list.querySelectorAll('.btn-delete-list').forEach(btn => {
                btn.addEventListener('click', () => deleteComment(btn.dataset.id));
            });
        }

        dialog.style.display = 'block';
        overlay.style.display = 'block';
    }

    // Dodajmy do renderMarkers aktualizację licznika
    // Musimy przechwycić oryginalny renderMarkers wyżej
    // Ale jesteśmy w module, więc po prostu dopiszmy to do renderMarkers

    // W renderMarkers (linia ~300) dodać:
    // document.getElementById('comments-count-val').textContent = markersData.filter(c => c.is_resolved == 0).length;
    // Albo wszystkich? "Liczba komentarzy". Raczej wszystkich aktywnych.

})();