// bottom-bar-miniplayer.js

window.addEventListener('load', () => {
    // 1. Add Toggle to Settings
    const audioSettingsSection = document.querySelectorAll('.settings-section')[2];
    
    if (audioSettingsSection && !document.getElementById('bottomBarToggle')) {
        const toggleHTML = `
            <div class="custom-theme-container" style="border-top: 1px solid rgba(255,255,255,0.1); margin-top:15px; padding-top:15px;">
                <label style="display: flex; align-items: center; cursor: pointer; width: 100%;">
                    <input type="checkbox" id="bottomBarToggle" style="width:20px; height:20px; accent-color:var(--accent-color);" /> 
                    <div style="margin-left: 15px;">
                        <span style="color: var(--accent-color); font-weight: 800; font-size: 1rem;"><i class="fas fa-window-maximize"></i> Bottom Bar Player</span><br>
                        <span style="font-size: 0.75rem; color: #aaa;">Enables the Spotify-style fixed bottom bar. Optimized for mobile use.</span>
                    </div>
                </label>
            </div>
        `;
        audioSettingsSection.insertAdjacentHTML('beforeend', toggleHTML);
    }

    const bottomBarToggle = document.getElementById('bottomBarToggle');
    if (!bottomBarToggle) return;

    // Apply or Remove the Class
    function applyBottomBarLayout(active) {
        if (active) {
            document.body.classList.add('bottom-bar-active');
        } else {
            document.body.classList.remove('bottom-bar-active');
        }
    }

    // --- Safety Check: Hide behind Modals & Big Player ---
    function syncLayerVisibility() {
        const settings = document.getElementById('settingsModal');
        const bigPlayer = document.getElementById('bigPlayerScreen');
        const login = document.getElementById('loginModal');
        const playlistModal = document.getElementById('playlistModal');

        // Check if any major UI is open
        const isSettingsOpen = settings && settings.style.display === 'flex';
        const isBigPlayerOpen = bigPlayer && bigPlayer.classList.contains('show');
        const isLoginOpen = login && login.style.display === 'flex';
        const isPlaylistOpen = playlistModal && playlistModal.style.display === 'flex';

        if (isSettingsOpen || isBigPlayerOpen || isLoginOpen || isPlaylistOpen) {
            document.body.classList.add('modal-open');
        } else {
            document.body.classList.remove('modal-open');
        }
    }

    // Run visibility check frequently
    setInterval(syncLayerVisibility, 200);

    bottomBarToggle.addEventListener('change', (e) => {
        applyBottomBarLayout(e.target.checked);
    });

    // Save Preference
    const saveSettingsBtn = document.getElementById('saveSettingsBtn');
    if (saveSettingsBtn) {
        const originalOnClick = saveSettingsBtn.onclick;
        saveSettingsBtn.onclick = function() {
            if (typeof originalOnClick === 'function') originalOnClick.call(this);
            let userEmail = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).email : null;
            let settingsKey = userEmail ? `settings_${userEmail}` : `settings_guest`;
            let settings = JSON.parse(localStorage.getItem(settingsKey) || '{}');
            settings.useBottomBar = bottomBarToggle.checked;
            localStorage.setItem(settingsKey, JSON.stringify(settings));
        };
    }

    // Restore on Load
    function restoreBottomBar() {
        let userEmail = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')).email : null;
        let settingsKey = userEmail ? `settings_${userEmail}` : `settings_guest`;
        let settings = JSON.parse(localStorage.getItem(settingsKey) || '{}');
        if (settings.useBottomBar) {
            bottomBarToggle.checked = true;
            applyBottomBarLayout(true);
        }
    }

    setTimeout(restoreBottomBar, 200);
});