// ── Project Tab ────────────────────────────────────────────────────────
function populateProjectTab() {
    const cfg = currentConfig.project || {};
    document.getElementById('projRegional').value = cfg.regionalFormat || 'US';
    populateLandingPageTargets();            // populate table dropdown
    setLandingPageValue(cfg.landingPage || { type: 'dashboard', value: 'dashboard' });
    document.getElementById('projMapProvider').value = cfg.mapProvider || 'google';
    document.getElementById('projMapKey').value = cfg.mapApiKey || '';
    document.getElementById('projErrorReporting').value = cfg.errorReporting || 'detailed';
    document.getElementById('projErrorMsg').value = cfg.customErrorMessage || '';
    document.getElementById('projDarkMode').checked = cfg.darkMode || false;
    document.getElementById('projGDPR').checked = cfg.gdprBanner || false;
    document.getElementById('proj508').checked = cfg.section508 || false;
    // Show language selector in navbar — defaults ON (undefined/true → show; false → hide).
    const showLang = document.getElementById('projShowLangSelector');
    if (showLang) showLang.checked = cfg.showLanguageSelector !== false;
    // Live (DB) translation editing — defaults OFF (opt-in); only explicit true enables.
    const liveTrans = document.getElementById('projLiveTranslations');
    if (liveTrans) liveTrans.checked = cfg.liveTranslations === true;
    if (typeof syncLangSelectorVisibility === 'function') syncLangSelectorVisibility();
}

function attachProjectEventListeners() {
    const elements = [
        'projRegional', 'projLandingTarget', 'projLandingPageType', 'projLandingCustomUrl',
        'projMapProvider', 'projMapKey', 'projErrorReporting', 'projErrorMsg',
        'projDarkMode', 'projGDPR', 'proj508', 'projShowLangSelector', 'projLiveTranslations'
    ];
    elements.forEach(id => {
        const el = document.getElementById(id);
        if (el) {
            el.addEventListener('change', () => saveSection('project'));
        }
    });
}

// Ensure listeners are attached after DOM and after config loads
document.addEventListener('DOMContentLoaded', () => {
    setTimeout(attachProjectEventListeners, 100);
});

// Also re-attach when the project tab becomes active
document.querySelector('[data-bs-target="#projectPane"]')?.addEventListener('shown.bs.tab', () => {
    attachProjectEventListeners();
});


// helper to collect project data and a pagehide listener to save it when the user leaves the page
function getCurrentProjectData() {
    return {
        regionalFormat: document.getElementById('projRegional')?.value || 'US',
        landingPage: getLandingPageValue(),
        mapProvider: document.getElementById('projMapProvider')?.value || 'google',
        mapApiKey: document.getElementById('projMapKey')?.value || '',
        errorReporting: document.getElementById('projErrorReporting')?.value || 'detailed',
        customErrorMessage: document.getElementById('projErrorMsg')?.value || '',
        darkMode: document.getElementById('projDarkMode')?.checked || false,
        gdprBanner: document.getElementById('projGDPR')?.checked || false,
        section508: document.getElementById('proj508')?.checked || false,
        showLanguageSelector: document.getElementById('projShowLangSelector')?.checked ?? true,
        liveTranslations: document.getElementById('projLiveTranslations')?.checked || false
    };
}

window.addEventListener('pagehide', () => {
    const projectData = getCurrentProjectData();
    navigator.sendBeacon(
        `${baseUrl}/project/${projectSlug}/misc/save`,
        JSON.stringify({ section: 'project', data: projectData })
    );
});