const API_BASE = '/api/config';
let currentConfig = {};
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) {
        console.error('Modal not found');
        return;
    }

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

        if (isHidden) {
            // Abrir modal
            modal.classList.remove('hidden');
            await loadSettings();
        } else {
            // Cerrar modal
            modal.classList.add('hidden');
        }
    }
};

async function loadSettings() {
    if (!formContent) {
        console.error('Form content not found');
        return;
    }

    // Mostrar loading
    formContent.innerHTML = `
        <div class="skeleton-loader">
            <div class="skeleton title-skeleton"></div>
            <div class="skeleton text-skeleton"></div>
            <div class="skeleton text-skeleton"></div>
        </div>
    `;

    try {
        const res = await fetch(API_BASE);

        if (!res.ok) {
            throw new Error(`HTTP error! status: ${res.status}`);
        }

        const data = await res.json();

        if (data.error) throw new Error(data.error);

        currentConfig = data;
        renderNav();

        // Seleccionar la primera sección si no hay ninguna activa
        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: var(--color-danger); margin-bottom: 1rem;">Failed to load settings</p>
                <p style="color: var(--color-text-muted); font-size: 0.9rem;">${err.message}</p>
            </div>
        `;
    }
}

function renderNav() {
    if (!navContainer) return;

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

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

    activeSection = section;
    renderNav();

    const sectionData = currentConfig[section];

    formContent.innerHTML = `
        <h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize;">
            ${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 label = key.replace(/_/g, ' ');

        if (isBool) {
            group.innerHTML = `
                <div style="display: flex; align-items: center; gap: 0.5rem;">
                    <input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''}>
                    <label for="${inputId}" style="margin: 0; cursor: pointer;">${label}</label>
                </div>
            `;
        } else {
            group.innerHTML = `
                <label for="${inputId}">${label}</label>
                <input class="config-input" id="${inputId}" name="${key}"
                       type="${typeof value === 'number' ? 'number' : 'text'}"
                       value="${value}">
            `;
        }

        formContent.appendChild(group);
    });
}

// Setup form submit handler
document.addEventListener('DOMContentLoaded', () => {
    // Usar delegación de eventos ya que el form se carga dinámicamente
    document.addEventListener('submit', async (e) => {
        if (e.target.id === 'config-form') {
            e.preventDefault();
            await saveSettings();
        }
    });
});

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

    const updatedData = {};

    Object.keys(currentConfig[activeSection]).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_BASE}/${activeSection}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(updatedData)
        });

        if (res.ok) {
            currentConfig[activeSection] = updatedData;

            // Mostrar notificación de éxito
            const notification = document.createElement('div');
            notification.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: var(--color-success, #10b981);
                color: white;
                padding: 1rem 1.5rem;
                border-radius: 8px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                z-index: 10000;
                animation: slideIn 0.3s ease-out;
            `;
            notification.textContent = 'Settings saved successfully!';
            document.body.appendChild(notification);

            setTimeout(() => {
                notification.style.animation = 'slideOut 0.3s ease-out';
                setTimeout(() => notification.remove(), 300);
            }, 2000);
        } else {
            throw new Error('Failed to save settings');
        }
    } catch (err) {
        console.error('Error saving settings:', err);
        alert('Error saving settings: ' + err.message);
    }
}

// Añadir estilos para las animaciones (solo si no existen)
if (!document.getElementById('settings-animations')) {
    const animationStyles = document.createElement('style');
    animationStyles.id = 'settings-animations';
    animationStyles.textContent = `
        @keyframes slideIn {
            from { transform: translateX(400px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        @keyframes slideOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(400px); opacity: 0; }
        }
    `;
    document.head.appendChild(animationStyles);
}