@push('styles')
    @vite('resources/css/portal-questionnaire-hub.css')
@endpush

<x-portal-layout>
    <div class="qhub-audio-controls" id="qhub-audio-controls">
        <input
            type="range"
            class="qhub-audio-volume"
            id="qhub-audio-volume"
            min="0"
            max="100"
            value="50"
            aria-label="Volume da música"
            title="Volume da música"
        />
        <button
            type="button"
            class="qhub-audio-toggle"
            id="qhub-audio-toggle"
            aria-pressed="false"
            aria-label="Mutar música"
            title="Mutar música"
        >
            <svg
                viewBox="0 0 24 24"
                aria-hidden="true"
                width="22"
                height="22"
                fill="none"
                stroke="currentColor"
                stroke-width="2.2"
                stroke-linecap="round"
                stroke-linejoin="round"
            >
                <path d="M4 10v4h4l6 5V5l-6 5H4z" />
                <path d="M17 9.5c1 .8 1.5 1.6 1.5 2.5s-.5 1.7-1.5 2.5" />
                <path d="M19.4 7.2c1.8 1.5 2.6 3.1 2.6 4.8s-.8 3.3-2.6 4.8" />
                <path class="audio-off-mark" d="M3 3l18 18" />
            </svg>
        </button>
    </div>

    <x-page.header title="Portal" />

    <!-- <x-page.card> -->
        <!-- <p class="text-gray-700">Bem-vindo ao portal. Em breve: conteúdos e treinamentos.</p>
        <p class="mt-2 text-sm text-gray-500">Permissões atuais incluem acesso à área do participante.</p> -->
    <!-- </x-page.card> -->

    @if($rankingPayload !== null)
        <x-portal.battery-ranking
            :battery="$rankingPayload['battery']"
            :entries="$rankingPayload['entries']"
        />
    @endif
</x-portal-layout>

<script>
    (() => {
        const toggleButton = document.getElementById('qhub-audio-toggle');
        const volumeSlider = document.getElementById('qhub-audio-volume');
        const controlsRoot = document.getElementById('qhub-audio-controls');
        if (!toggleButton) {
            return;
        }

        const storageKey = 'qg-portal-audio:home';

        const soundtrack = new Audio('/sons/som-interno.mpeg');
        soundtrack.playsInline = true;
        soundtrack.loop = true;
        soundtrack.preload = 'auto';
        soundtrack.volume = 0;

        let started = false;
        let muted = false;
        let usingFileTrack = false;
        let lastVolume = 0.5;

        const sliderVolume = () => volumeSlider ? Number(volumeSlider.value) / 100 : lastVolume;

        const musicVolume = () => {
            if (muted || sliderVolume() === 0) {
                return 0;
            }
            return Math.min(1, sliderVolume());
        };

        function applyDefaultVolume() {
            muted = false;
            lastVolume = 0.5;
            if (volumeSlider) {
                volumeSlider.value = '50';
            }
        }

        function readStoredState() {
            try {
                const raw = sessionStorage.getItem(storageKey);
                if (!raw) {
                    applyDefaultVolume();
                    return;
                }
                const data = JSON.parse(raw);
                if (!data || typeof data !== 'object') {
                    applyDefaultVolume();
                    return;
                }
                muted = Boolean(data.muted);
                if (typeof data.lastVolume === 'number') {
                    lastVolume = data.lastVolume;
                }
                if (volumeSlider && typeof data.volume === 'number') {
                    volumeSlider.value = String(Math.min(100, Math.max(0, data.volume)));
                }
            } catch (_) {
                applyDefaultVolume();
            }
        }

        function persistState() {
            try {
                sessionStorage.setItem(storageKey, JSON.stringify({
                    muted,
                    volume: volumeSlider ? Number(volumeSlider.value) : Math.round(lastVolume * 100),
                    lastVolume,
                }));
            } catch (_) {}
        }

        readStoredState();

        const setButtonState = () => {
            const isMuted = muted || sliderVolume() === 0;
            toggleButton.setAttribute('aria-pressed', isMuted ? 'true' : 'false');
            toggleButton.classList.toggle('is-muted', isMuted);
            controlsRoot?.classList.toggle('is-muted', isMuted);
            toggleButton.setAttribute('aria-label', isMuted ? 'Ativar música' : 'Mutar música');
            toggleButton.setAttribute('title', isMuted ? 'Ativar música' : 'Mutar música');
        };

        const applyVolume = () => {
            if (!usingFileTrack) {
                return;
            }
            soundtrack.volume = musicVolume();
        };

        const startMusic = async () => {
            if (started) {
                applyVolume();
                return;
            }

            try {
                soundtrack.volume = musicVolume();
                await soundtrack.play();
                usingFileTrack = true;
                started = true;
                applyVolume();
            } catch (_) {
                usingFileTrack = false;
            }
        };

        const ensureStarted = async () => {
            await startMusic();
        };

        controlsRoot?.addEventListener('pointerdown', (event) => {
            event.stopPropagation();
            ensureStarted();
        });

        toggleButton.addEventListener('click', async (event) => {
            event.stopPropagation();
            await ensureStarted();
            if (!muted && sliderVolume() === 0 && volumeSlider) {
                volumeSlider.value = String(Math.round(lastVolume * 100));
            }
            muted = !muted;
            applyVolume();
            setButtonState();
            persistState();
        });

        const onVolumeChange = async () => {
            await ensureStarted();
            const vol = sliderVolume();
            if (vol > 0) {
                lastVolume = vol;
                muted = false;
            } else {
                muted = true;
            }
            applyVolume();
            setButtonState();
            persistState();
        };

        if (volumeSlider) {
            volumeSlider.addEventListener('input', onVolumeChange);
            volumeSlider.addEventListener('change', onVolumeChange);
        }

        const onFirstInteraction = async (event) => {
            if (controlsRoot?.contains(event.target)) {
                return;
            }
            await ensureStarted();
            document.removeEventListener('pointerdown', onFirstInteraction, true);
            window.removeEventListener('keydown', onFirstInteraction);
        };

        document.addEventListener('pointerdown', onFirstInteraction, true);
        window.addEventListener('keydown', onFirstInteraction, { once: true });

        document.addEventListener('visibilitychange', () => {
            if (!started || !usingFileTrack) {
                return;
            }
            soundtrack.volume = document.hidden ? 0 : musicVolume();
        });

        window.addEventListener('pagehide', persistState);
        window.addEventListener('beforeunload', () => {
            persistState();
            soundtrack.pause();
        });

        setButtonState();
        startMusic().catch(() => {});
    })();
</script>