@extends('layouts.questionnaire-game', [
    'pageTitle' => $pageTitle ?? 'Resultado',
    '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="40"
            aria-label="Volume da música"
            title="Volume da música"
        >
    </div>

    @php
        $percent = ($result['total'] ?? 0) > 0
            ? (int) round(100 * ($result['correct'] ?? 0) / $result['total'])
            : 0;
        $pointsFormatted = \App\Support\PortalPointsFormatter::format($result['total_points'] ?? 0);
    @endphp

    <div class="qg-play">
        <div class="qg-play__bg" aria-hidden="true"></div>

        <div class="qg-play__wires-layer" aria-hidden="true">
            <x-questionnaire.splash-wire-corner corner="tl" />
            <x-questionnaire.splash-wire-corner corner="tr" />
        </div>

        <header class="qg-hud">
            <p class="qg-hud__title">Resultado</p>
            @if(($elapsedSeconds ?? 0) > 0)
                <div class="qg-timer-wrap" aria-label="Tempo total">
                    <svg class="qg-timer__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <circle cx="12" cy="12" r="10" />
                        <polyline points="12 6 12 12 16 14" />
                    </svg>
                    <span class="qg-timer">
                        {{ sprintf('%02d:%02d', intdiv($elapsedSeconds, 60), $elapsedSeconds % 60) }}
                    </span>
                </div>
            @endif
        </header>

        <div class="qg-result">
            <section class="qg-result__hero" aria-labelledby="qg-result-headline">
                <p class="qg-result__eyebrow">Bateria concluída</p>
                <h1 class="qg-result__headline" id="qg-result-headline">Missão cumprida!</h1>
                <p class="qg-result__battery">{{ $battery->title }}</p>

                <div class="qg-result__stats">
                    <div class="qg-result__stat">
                        <span class="qg-result__stat-value">{{ $result['correct'] }}/{{ $result['total'] }}</span>
                        <span class="qg-result__stat-label">Acertos ({{ $percent }}%)</span>
                    </div>
                    <div class="qg-result__stat">
                        <span class="qg-result__stat-value qg-result__stat-value--gold">{{ $pointsFormatted }}</span>
                        <span class="qg-result__stat-label">Pontos conquistados</span>
                    </div>
                    @if(($elapsedSeconds ?? 0) > 0)
                        <div class="qg-result__stat">
                            <span class="qg-result__stat-value">
                                {{ sprintf('%02d:%02d', intdiv($elapsedSeconds, 60), $elapsedSeconds % 60) }}
                            </span>
                            <span class="qg-result__stat-label">Tempo total</span>
                        </div>
                    @endif
                </div>
            </section>

            <div class="qg-result__ranking">
                <x-portal.battery-ranking
                    :battery="$battery"
                    :entries="$rankingEntries"
                    variant="game"
                    :show-cta="false"
                    header-eyebrow="Sua posição no ranking"
                    header-title="Pódio da bateria"
                    class="!mt-0"
                />
            </div>

            <div class="qg-result__actions">
                <div class="qg-result__back-wrap">
                    <a href="{{ route('portal.home') }}" class="qg-btn-iniciar qg-result__back">
                        <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>
                        Voltar ao Início
                    </a>
                </div>
            </div>
        </div>
    </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-play-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 = 0.4;
            let pendingResumeTime = null;

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

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

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

            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)));
                    }
                    if (typeof data.currentTime === 'number' && data.currentTime > 0) {
                        pendingResumeTime = data.currentTime;
                    }
                } catch (_) {
                    applyDefaultVolume();
                }
            }

            function applyResumeTime() {
                if (pendingResumeTime === null) {
                    return;
                }
                const duration = soundtrack.duration;
                if (!duration || Number.isNaN(duration)) {
                    return;
                }
                const resumeAt = Math.min(pendingResumeTime, Math.max(0, duration - 0.25));
                if (resumeAt > 0) {
                    soundtrack.currentTime = resumeAt;
                }
                pendingResumeTime = null;
            }

            function persistState() {
                try {
                    sessionStorage.setItem(storageKey, JSON.stringify({
                        currentTime: usingFileTrack && !Number.isNaN(soundtrack.currentTime)
                            ? soundtrack.currentTime
                            : (pendingResumeTime || 0),
                        muted,
                        volume: volumeSlider ? Number(volumeSlider.value) : Math.round(lastVolume * 100),
                        lastVolume,
                    }));
                } catch (_) {}
            }

            soundtrack.addEventListener('loadedmetadata', applyResumeTime);

            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;
                    applyResumeTime();
                    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 backLink = document.querySelector('.qg-result__back');
            if (backLink) {
                backLink.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