// ═══════════════════════════════════════════════════════════════════════
// SETTINGS PANEL — in-battle configuration UI
// ═══════════════════════════════════════════════════════════════════════

function toggleSettings() {
    if (STATE.settingsVisible) { closeSettings(); } else { openSettings(); }
}

function closeSettings() {
    const p = document.getElementById('hv-settings-panel');
    if (p) p.remove();
    STATE.settingsVisible = false;
}

function openSettings() {
    if (document.getElementById('hv-settings-panel')) return;
    STATE.settingsVisible = true;

    const p = document.createElement('div');
    p.id = 'hv-settings-panel';
    p.style.cssText = css({
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        width: '520px',
        maxHeight: '80vh',
        overflowY: 'auto',
        background: '#1a1a2e',
        color: '#ccc',
        zIndex: '99999',
        borderRadius: '8px',
        padding: '16px',
        fontSize: '12px',
        fontFamily: 'monospace',
        boxShadow: '0 0 30px rgba(0,0,0,0.8)',
    });

    const mkTog = (l, k) =>
        `<label style="display:flex;align-items:center;margin:3px 0;cursor:pointer">
            <input type="checkbox" ${CFG[k] ? 'checked' : ''} data-key="${k}" style="margin-right:6px">
            <span>${l}</span>
        </label>`;

    const mkNum = (l, k, st) =>
        `<div style="margin:3px 0;display:flex;align-items:center">
            <span style="width:190px;flex-shrink:0">${l}</span>
            <input type="number" value="${CFG[k]}" data-key="${k}" step="${st || 0.05}"
                style="width:55px;background:#333;color:#ccc;border:1px solid #555;border-radius:3px;padding:2px 4px">
        </div>`;

    p.innerHTML = `
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
            <b style="color:#fdcb00;font-size:14px">⚙ HV Unified v${VERSION}</b>
            <button id="hv-settings-close" style="background:#d50c2d;color:#fff;border:none;border-radius:4px;padding:4px 10px;cursor:pointer">✕</button>
        </div>
        <div style="border-top:1px solid #444;margin:8px 0"></div>
        <b style="color:#0f0">Battle</b>
        ${mkTog('Auto-buff (Haste, Protection, etc.)', 'autoBuff')}
        ${mkTog('Auto-debuff (Imperil, Weaken)', 'autoDebuff')}
        ${mkTog('Auto-cure when HP low', 'autoCure')}
        ${mkTog('Auto Spirit Stance', 'autoSpirit')}
        ${mkTog('Hover-to-attack mode', 'hoverEnabled')}
        ${mkTog('Auto-difficulty suggestion', 'autoDifficulty')}
        ${mkTog('Use attack spells', 'useAttackSpells')}
        ${mkNum('Cure HP threshold', 'cureHP')}
        ${mkNum('Item HP threshold', 'cureItemHP')}
        ${mkNum('Mana gem MP threshold', 'manaGemMP')}
        ${mkNum('Mana potion MP threshold', 'manaPotionMP')}
        ${mkNum('Spirit Stance OC%', 'spiritStanceOC', 5)}
        <div style="border-top:1px solid #444;margin:8px 0"></div>
        <b style="color:#0f0">Out of Battle</b>
        ${mkTog('Equip quick sell buttons', 'autoSell')}
        ${mkTog('Bulk Shrine buttons', 'bulkShrine')}
        ${mkTog('RE Timer', 'reTimer')}
        ${mkTog('Training queue info', 'trainingQueue')}
        ${mkTog('Advisor panel', 'showGuidance')}
        ${mkTog('Equip KEEP/SELL tags', 'showEquipAdvice')}
        <div style="border-top:1px solid #444;margin:8px 0"></div>
        <b style="color:#0f0">UI</b>
        ${mkTog('Cooldown timers', 'showCooldowns')}
        ${mkTog('Monster HP numbers', 'showMonsterHP')}
        ${mkTog('Buff duration counters', 'showDurations')}
        ${mkTog('Alert colours', 'alertColours')}
        ${mkTog('Monster numbers', 'showMonsterNumbers')}
        ${mkTog('Config button', 'cfgButton')}
        <div style="margin-top:12px;text-align:center;color:#666;font-size:10px">
            Changes apply immediately. Press <b>,</b> in battle to open settings.
        </div>`;

    document.body.appendChild(p);

    document.getElementById('hv-settings-close').onclick = closeSettings;

    $$('input', p).forEach(inp => {
        inp.addEventListener('change', () => {
            const k = inp.dataset.key;
            if (!k || CFG[k] === undefined) return;
            if (inp.type === 'checkbox') CFG[k] = inp.checked;
            else CFG[k] = parseFloat(inp.value) || CFG[k];
            saveConfig();
            refreshUI();
        });
    });
}