const API_BASE2 = '/api/config';
let currentConfig = {};
let currentSchema = {};
let activeSection = '';
let modal, navContainer, formContent, form;

window.toggleSettingsModal = async (forceClose = false) => {
    modal = document.getElementById('settings-modal');
    navContainer = document.getElementById('config-nav');
    formContent = document.getElementById('config-section-content');
    form = document.getElementById('config-form');

    if (!modal) return;

    if (forceClose) {
        modal.classList.add('hidden');
    } else {
        const isHidden = modal.classList.contains('hidden');
        if (isHidden) {
            modal.classList.remove('hidden');
            await loadSettings();
        } else {
            modal.classList.add('hidden');
        }
    }
};

async function loadSettings() {
    if (!formContent) return;

    // Loading State
    formContent.innerHTML = `
        <div class="skeleton-loader">
            <div class="skeleton title-skeleton"></div>
            <div class="skeleton field-skeleton"></div>
            <div class="skeleton field-skeleton"></div>
        </div>
    `;

    try {
        const res = await fetch(API_BASE2);
        if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);

        const data = await res.json();
        if (data.error) throw new Error(data.error);

        // --- CORRECCIÓN AQUI ---
        // Tu JSON devuelve "values", el código original buscaba "config"
        currentConfig = data.values || data.config || data;
        currentSchema = data.schema || {};

        renderNav();

        if (!activeSection || !currentConfig[activeSection]) {
            activeSection = Object.keys(currentConfig)[0];
        }

        switchSection(activeSection);

    } catch (err) {
        console.error('Error loading settings:', err);
        formContent.innerHTML = `
            <div style="padding: 2rem; text-align: center;">
                <p style="color: #ef4444; margin-bottom: 1rem;">Failed to load settings</p>
                <p style="color: #888; font-size: 0.9rem;">${err.message}</p>
            </div>
        `;
    }
}

function switchSection(section) {
    if (!currentConfig[section]) return;
    activeSection = section;
    renderNav();

    const sectionData = currentConfig[section];
    const sectionSchema = currentSchema[section] || {};

    formContent.innerHTML = `
        <h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize; font-size: 1.8rem;">
            ${section.replace(/_/g, ' ')}
        </h2>
    `;

    Object.entries(sectionData).forEach(([key, value]) => {
        const group = document.createElement('div');
        group.className = 'config-group';

        const isBool = typeof value === 'boolean';
        const inputId = `input-${section}-${key}`;
        const labelText = key.replace(/_/g, ' ');

        // Obtener descripción
        const description = sectionSchema[key]?.description || '';
        const descHtml = description
            ? `<p class="config-description">${description}</p>`
            : '';

        if (isBool) {
            group.innerHTML = `
                <div style="display: flex; flex-direction: column; gap: 8px;">
                    <div style="display: flex; align-items: center; gap: 0.8rem;">
                        <input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''} 
                               style="width: 20px; height: 20px; accent-color: var(--accent);">
                        <label for="${inputId}" style="margin: 0; cursor: pointer; font-size: 1rem;">${labelText}</label>
                    </div>
                    ${descHtml} </div>
            `;
        } else {
            // --- CAMBIO PRINCIPAL AQUI ---
            // Movimos ${descHtml} para que esté DESPUÉS del input
            group.innerHTML = `
                <label for="${inputId}">${labelText}</label>
                <input class="config-input" id="${inputId}" name="${key}"
                       type="${typeof value === 'number' ? 'number' : 'text'}"
                       value="${value || ''}" 
                       placeholder="Not set">
                ${descHtml} 
            `;
        }

        formContent.appendChild(group);
    });
}

function renderNav() {
    if (!navContainer) return;
    navContainer.innerHTML = '';

    Object.keys(currentConfig).forEach(section => {
        const btn = document.createElement('div');
        btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;

        // Icono opcional según la sección (puedes personalizar esto)
        let icon = '';
        if(section === 'library') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>';
        if(section === 'paths') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><folder></folder><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';

        btn.innerHTML = `${icon} ${section}`;
        btn.onclick = () => switchSection(section);
        navContainer.appendChild(btn);
    });
}

// Handler de guardado
document.addEventListener('DOMContentLoaded', () => {
    document.addEventListener('submit', async (e) => {
        if (e.target.id === 'config-form') {
            e.preventDefault();
            await saveSettings();
        }
    });
});

async function saveSettings() {
    if (!form || !activeSection) return;

    const updatedData = {};
    const sectionConfig = currentConfig[activeSection];

    Object.keys(sectionConfig).forEach(key => {
        const input = form.elements[key];
        if (!input) return;

        if (input.type === 'checkbox') {
            updatedData[key] = input.checked;
        } else if (input.type === 'number') {
            updatedData[key] = Number(input.value);
        } else {
            updatedData[key] = input.value;
        }
    });

    try {
        const res = await fetch(`${API_BASE2}/${activeSection}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(updatedData)
        });

        if (res.ok) {
            currentConfig[activeSection] = updatedData; // Actualizamos localmente
            showNotification('Settings saved successfully!');
        } else {
            throw new Error('Failed to save settings');
        }
    } catch (err) {
        console.error(err);
        showNotification('Error saving settings', true);
    }
}

function showNotification(msg, isError = false) {
    const notification = document.createElement('div');
    const bg = isError ? '#ef4444' : '#10b981';

    notification.style.cssText = `
        position: fixed; top: 20px; right: 20px;
        background: ${bg}; color: white;
        padding: 1rem 1.5rem; border-radius: 8px; font-weight: 600;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 20000;
        animation: slideIn 0.3s ease-out; display: flex; align-items: center; gap: 10px;
    `;
    notification.innerHTML = isError
        ? `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg> ${msg}`
        : `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> ${msg}`;

    document.body.appendChild(notification);
    setTimeout(() => {
        notification.style.animation = 'slideOut 0.3s ease-out';
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}