@php
    $globalMusicUrl = function_exists('getGlobalMusicUrl') ? getGlobalMusicUrl() : 'https://samplelib.com/mp3/sample-15s.mp3';
@endphp

<audio id="globalMusicAudio" preload="auto" loop src="{{ $globalMusicUrl }}">
    <source src="{{ $globalMusicUrl }}">
</audio>

<script>
(function () {
    const STATE_KEY = 'blacksplit_music_state';
    const TIME_KEY = 'blacksplit_music_time';
    const TIMESTAMP_KEY = 'blacksplit_music_timestamp';
    const SRC_KEY = 'blacksplit_music_src';

    function initGlobalMusicPlayer() {
        const musicButtons = Array.from(document.querySelectorAll('.js-global-music-toggle'));
        const musicAudio = document.getElementById('globalMusicAudio');

        if (!musicAudio) {
            return;
        }

        const currentTrackSrc = "{{ $globalMusicUrl }}";
        const storedSrc = localStorage.getItem(SRC_KEY);

        // If admin changed track URL, reset playback position to start fresh
        if (storedSrc && storedSrc !== currentTrackSrc) {
            localStorage.setItem(SRC_KEY, currentTrackSrc);
            localStorage.setItem(TIME_KEY, '0');
            localStorage.setItem(TIMESTAMP_KEY, Date.now().toString());
        } else if (!storedSrc) {
            localStorage.setItem(SRC_KEY, currentTrackSrc);
        }

        const syncButtons = function (isPlaying) {
            musicButtons.forEach(function (button) {
                button.classList.toggle('is-playing', isPlaying);
                button.setAttribute('title', isPlaying ? 'Pause music' : 'Play music');
                button.setAttribute('aria-label', isPlaying ? 'Pause music' : 'Play music');
            });
        };

        const saveCurrentState = function (stateOverride) {
            try {
                const isPlaying = typeof stateOverride === 'boolean'
                    ? stateOverride
                    : (!musicAudio.paused && !musicAudio.ended && musicAudio.currentTime > 0);

                localStorage.setItem(STATE_KEY, isPlaying ? 'playing' : 'paused');
                localStorage.setItem(TIME_KEY, musicAudio.currentTime.toString());
                localStorage.setItem(TIMESTAMP_KEY, Date.now().toString());
            } catch (e) {}
        };

        // Continually save current time while playing
        let lastSaveTime = 0;
        musicAudio.addEventListener('timeupdate', function () {
            const now = Date.now();
            if (now - lastSaveTime > 600) {
                lastSaveTime = now;
                saveCurrentState(true);
            }
        });

        // Save position on page unload or visibility change
        window.addEventListener('beforeunload', function () {
            saveCurrentState();
        });
        window.addEventListener('pagehide', function () {
            saveCurrentState();
        });
        document.addEventListener('visibilitychange', function () {
            if (document.visibilityState === 'hidden') {
                saveCurrentState();
            }
        });

        const computeTargetTime = function () {
            const storedTime = parseFloat(localStorage.getItem(TIME_KEY) || '0');
            const storedTimestamp = parseInt(localStorage.getItem(TIMESTAMP_KEY) || '0', 10);
            let target = isNaN(storedTime) ? 0 : storedTime;

            if (storedTimestamp > 0 && localStorage.getItem(STATE_KEY) === 'playing') {
                const elapsedSeconds = (Date.now() - storedTimestamp) / 1000;
                // Seamlessly advance the position by the elapsed page transition time
                if (elapsedSeconds > 0 && elapsedSeconds < 25) {
                    target += elapsedSeconds;
                }
            }

            return target;
        };

        const applyTargetSeek = function (targetTime) {
            if (targetTime <= 0) {
                return;
            }

            try {
                if (musicAudio.duration && !isNaN(musicAudio.duration) && musicAudio.duration > 0) {
                    if (targetTime >= musicAudio.duration) {
                        targetTime = targetTime % musicAudio.duration;
                    }
                }
                musicAudio.currentTime = targetTime;
            } catch (err) {}
        };

        const startMusic = async function (customSeekTime) {
            try {
                musicAudio.volume = 0.55;

                const targetSeek = typeof customSeekTime === 'number'
                    ? customSeekTime
                    : computeTargetTime();

                if (targetSeek > 0) {
                    if (musicAudio.readyState >= 1) {
                        applyTargetSeek(targetSeek);
                    } else {
                        musicAudio.addEventListener('loadedmetadata', function () {
                            applyTargetSeek(targetSeek);
                        }, { once: true });
                    }
                }

                await musicAudio.play();
                syncButtons(true);
                saveCurrentState(true);
            } catch (error) {
                console.warn('Playback waiting for user interaction:', error);
                syncButtons(false);

                // If browser autoplay policy requires user gesture on fresh page,
                // seamlessly continue playback from exact position on first click/touch anywhere!
                const resumeOnInteraction = function () {
                    startMusic();
                    document.removeEventListener('click', resumeOnInteraction);
                    document.removeEventListener('keydown', resumeOnInteraction);
                    document.removeEventListener('touchstart', resumeOnInteraction);
                };

                document.addEventListener('click', resumeOnInteraction, { once: true });
                document.addEventListener('keydown', resumeOnInteraction, { once: true });
                document.addEventListener('touchstart', resumeOnInteraction, { once: true });
            }
        };

        const pauseMusic = function () {
            musicAudio.pause();
            syncButtons(false);
            saveCurrentState(false);
        };

        musicButtons.forEach(function (button) {
            button.addEventListener('click', function (e) {
                e.preventDefault();
                e.stopPropagation();

                if (!musicAudio.paused) {
                    pauseMusic();
                } else {
                    startMusic();
                }
            });
        });

        musicAudio.addEventListener('play', function () {
            syncButtons(true);
            saveCurrentState(true);
        });

        musicAudio.addEventListener('pause', function () {
            syncButtons(false);
            saveCurrentState(false);
        });

        // Initialize state from localStorage
        const storedState = localStorage.getItem(STATE_KEY);
        if (storedState === 'playing') {
            startMusic();
        } else {
            syncButtons(false);
            const pausedTime = parseFloat(localStorage.getItem(TIME_KEY) || '0');
            if (pausedTime > 0) {
                if (musicAudio.readyState >= 1) {
                    applyTargetSeek(pausedTime);
                } else {
                    musicAudio.addEventListener('loadedmetadata', function () {
                        applyTargetSeek(pausedTime);
                    }, { once: true });
                }
            }
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initGlobalMusicPlayer);
    } else {
        initGlobalMusicPlayer();
    }
})();
</script>