// ================================================================
// 01_ui.js — Toolbar button + pause toggle
// Depends on: uw, log (00_config.js)
// ================================================================

const btnHtml = `
    <div class="divider"></div>
    <div class="activity" id="grc_btn"
         style="filter: brightness(70%) sepia(100%) hue-rotate(200deg) saturate(1000%) contrast(0.8);">
        <p id="grc_label" style="position:relative;top:-8px;font-weight:bold;z-index:6;">Remote</p>
    </div>`;

let paused = false;

function togglePause() {
    paused = !paused;
    const label = document.getElementById('grc_label');
    const btn   = document.getElementById('grc_btn');
    if (paused) {
        label.textContent = 'Paused';
        btn.style.filter  = 'brightness(70%) sepia(100%) hue-rotate(-50deg) saturate(1000%) contrast(0.8)';
    } else {
        label.textContent = 'Remote';
        btn.style.filter  = 'brightness(294%) sepia(100%) hue-rotate(200deg) saturate(1000%) contrast(0.8)';
    }
    log(`Remote is now ${paused ? 'PAUSED' : 'ACTIVE'}`);
}

setTimeout(() => {
    if (!document.getElementById('grc_btn')) {
        uw.$('.tb_activities, .toolbar_activities').find('.middle').append(btnHtml);
    }
}, 4000);

uw.$(document).on('click', '#grc_btn', togglePause);