(() => {
    const container = document.querySelector('[data-section-root]');
    const statusEl = document.querySelector('[data-section-status]');
    const errorEl = document.querySelector('[data-section-error]');
    const REFRESH_INTERVAL = 5000;

    if (!container) {
        return;
    }

    const formatTime = (date) =>
        date.toLocaleTimeString([], {
            hour: 'numeric',
            minute: '2-digit',
            second: '2-digit',
        });

    const setStatus = (text) => {
        if (!statusEl) return;
        statusEl.textContent = text;
    };

    const refresh = async () => {
        try {
            const response = await fetch('main.php', {
                cache: 'no-store',
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
            });

            if (!response.ok) {
                throw new Error(`Request failed: ${response.status}`);
            }

            container.innerHTML = await response.text();
            setStatus(formatTime(new Date()));

            if (errorEl) {
                errorEl.textContent = '';
                errorEl.setAttribute('aria-hidden', 'true');
            }
        } catch (error) {
            console.error('Failed to refresh overview sections', error);
            container.setAttribute('data-refresh-error', 'true');
            if (errorEl) {
                errorEl.textContent = 'Connection lost — retrying';
                errorEl.setAttribute('aria-hidden', 'false');
            }
        }
    };

    refresh();
    setInterval(refresh, REFRESH_INTERVAL);

    document.addEventListener('visibilitychange', () => {
        if (!document.hidden) {
            refresh();
        }
    });
})();