@extends('layouts.questionnaire-game', [
    'pageTitle' => $battery->title,
    'qgTheme' => $qgTheme,
    'faviconUrl' => $faviconUrl ?? null,
    'projectName' => $projectName ?? null,
])

@section('content')
    <div
        class="qg-audio-ctrl qg-audio-ctrl--splash"
        id="qg-audio-controls"
        data-battery-id="{{ $battery->id }}"
    >
        <button
            type="button"
            class="qg-audio-toggle"
            id="qg-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>
        <input
            type="range"
            class="qg-volume-slider"
            id="qg-volume-slider"
            min="0"
            max="100"
            value="100"
            aria-label="Volume da música"
            title="Volume da música"
        >
    </div>

    <div class="qg-splash">
        <div class="qg-splash__glow" aria-hidden="true"></div>
        <x-questionnaire.splash-wire-corner corner="tl" />
        <x-questionnaire.splash-wire-corner corner="br" />

        <main class="qg-splash__main">
            @if (! empty($logoUrl))
                <div class="qg-splash__brand" role="img" aria-label="{{ $battery->title }}">
                    <img
                        src="{{ $logoUrl }}"
                        alt=""
                        class="qg-splash__brand-img"
                        loading="eager"
                        decoding="async"
                    />
                </div>
            @else
                <div class="qg-crest" role="img" aria-label="{{ config('questionnaire-game.crest_line_1') }}">
                    <span class="qg-crest__gem" aria-hidden="true"></span>
                    <span class="qg-crest__wing qg-crest__wing--l" aria-hidden="true"></span>
                    <span class="qg-crest__wing qg-crest__wing--r" aria-hidden="true"></span>
                    <div class="qg-crest__inner">
                        <span class="qg-crest__line1">{{ config('questionnaire-game.crest_line_1') }}</span>
                        <span class="qg-crest__line2">{{ config('questionnaire-game.crest_line_2') }}</span>
                    </div>
                </div>
            @endif

            @if (session('success'))
                <p class="qg-tagline" style="color: #86efac; font-size: 0.9rem;">
                    {{ session('success') }}
                </p>
            @endif

            <p class="qg-tagline">
                {!! $qgTheme->splashTaglineHtml() !!}
            </p>

            <div class="qg-splash__btn-wrap">
                <a href="{{ route('portal.questionnaire.experience.play') }}" class="qg-btn-iniciar">
                    <span class="qg-btn-iniciar__wing qg-btn-iniciar__wing--l" aria-hidden="true"></span>
                    <span class="qg-btn-iniciar__wing qg-btn-iniciar__wing--r" aria-hidden="true"></span>
                    <span class="qg-btn-iniciar__gem qg-btn-iniciar__gem--t" aria-hidden="true"></span>
                    <span class="qg-btn-iniciar__gem qg-btn-iniciar__gem--b" aria-hidden="true"></span>
                    {{ ($hasSavedProgress ?? false) ? 'Continuar' : 'Iniciar' }}
                </a>
            </div>
        </main>
    </div>
@endsection

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

            const storageKey = 'qg-splash-audio:' + (controlsRoot?.dataset.batteryId || 'default');

            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     = 1;

            const MUSIC_LEVEL = 1;

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

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

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

            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({
                        currentTime: usingFileTrack && !Number.isNaN(soundtrack.currentTime)
                            ? soundtrack.currentTime
                            : 0,
                        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 });

            const iniciarLink = document.querySelector('.qg-btn-iniciar[href]');
            if (iniciarLink) {
                iniciarLink.addEventListener('click', persistState);
            }

            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>
@endpush