// ── Initialization & Event Listeners ─────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
    // Mobile toggle
    const btnToggle = document.getElementById('btnToggleFieldList');
    const leftPanel = document.querySelector('.left-panel');
    if (btnToggle && leftPanel) {
        btnToggle.addEventListener('click', () => {
            leftPanel.classList.toggle('collapsed');
            btnToggle.innerHTML = leftPanel.classList.contains('collapsed')
                ? '<i class="bi bi-list"></i> Tables'
                : '<i class="bi bi-x-lg"></i> Hide';
        });
    }

    // Left panel click
    document.querySelectorAll('#fieldsTableList li').forEach(li => {
        li.addEventListener('click', () => {
            const tableName = li.dataset.table;
            if (!tableName) return;
            document.querySelectorAll('#fieldsTableList li').forEach(l => l.classList.remove('active'));
            li.classList.add('active');
            loadTableConfig(tableName);
        });
    });

    if (currentTableName) {
        document.querySelectorAll('#fieldsTableList li').forEach(li => {
            if (li.dataset.table === currentTableName) li.classList.add('active');
        });
        loadTableConfig(currentTableName);
    }

    // Search Settings modal save (View As / Edit As were removed from Fields —
    // field display/input controls live in the Designer module).
    document.getElementById('btnSaveSearchSettings')?.addEventListener('click', () => {
        const field = document.getElementById('searchSettingsField').value;
        if (!currentConfig) currentConfig = { activeDevice: 'desktop', devices: {}, searchSettings: {} };
        // Coerce to a plain object first — if it is an array (PHP []), string
        // keys are dropped by JSON.stringify and the save silently loses data.
        if (!currentConfig.searchSettings || typeof currentConfig.searchSettings !== 'object' || Array.isArray(currentConfig.searchSettings)) {
            currentConfig.searchSettings = Object.assign({}, currentConfig.searchSettings);
        }
        currentConfig.searchSettings[field] = {
            searchable: document.getElementById('ssSearchable')?.checked ?? true,
            alwaysOnPanel: document.getElementById('ssAlwaysOnPanel')?.checked ?? false,
            advancedSearch: document.getElementById('ssAdvancedSearch')?.checked ?? false,
            allFields: document.getElementById('ssAllFields')?.checked ?? true,
            filterPanel: document.getElementById('ssFilterPanel')?.checked ?? false,
            required: document.getElementById('ssRequired')?.checked ?? false,
            defaultOption: document.getElementById('ssDefaultOption')?.value ?? 'contains',
            caseSensitive: document.getElementById('ssCaseSensitive')?.checked ?? false,
            saveSearch: document.getElementById('ssSaveSearch')?.checked ?? false,
            highlight: document.getElementById('ssHighlight')?.checked ?? false,
        };
        updateSearchSettingsIndicator(field);
        saveCurrentConfig();   // save immediately on this explicit Save click
        bootstrap.Modal.getInstance(document.getElementById('searchSettingsModal')).hide();
    });
});
