(() => {
    'use strict';

    const button = document.querySelector('#wakeLockBtn');
    if (!button) return;

    let wakeLock = null;
    let wanted = false;

    function supported() {
        return 'wakeLock' in navigator;
    }

    function active() {
        return wakeLock !== null && wakeLock.released === false;
    }

    function render() {
        const isActive = active();
        button.disabled = !supported();
        button.classList.toggle('wake-active', isActive);
        button.textContent = 'WakeLock';
        button.title = supported() ? '화면 꺼짐 방지' : '현재 브라우저에서 WakeLock을 지원하지 않습니다.';
    }

    async function requestWakeLock() {
        if (!supported()) {
            render();
            return;
        }

        wakeLock = await navigator.wakeLock.request('screen');
        wakeLock.addEventListener('release', () => {
            wakeLock = null;
            render();
        });
        render();
    }

    async function releaseWakeLock() {
        wanted = false;
        if (wakeLock) {
            await wakeLock.release();
        }
        wakeLock = null;
        render();
    }

    button.addEventListener('click', () => {
        const job = active() ? releaseWakeLock() : (async () => {
            wanted = true;
            await requestWakeLock();
        })();

        job.catch(error => {
            wanted = false;
            wakeLock = null;
            alert(error.message || 'WakeLock failed');
            render();
        });
    });

    document.addEventListener('visibilitychange', () => {
        if (document.visibilityState === 'visible' && wanted && !active()) {
            requestWakeLock().catch(() => render());
        }
    });

    render();
})();