// Página de Configuración
async function renderSettings() {
    if (!auth.isAuthenticated()) {
        router.navigate('/iniciar-sesion');
        return;
    }

    // Obtener datos actualizados del usuario
    let user;
    try {
        const userData = await api.get('/auth/me');
        user = userData;
        auth.setUser(userData);
    } catch (error) {
        user = auth.getCurrentUser();
    }

    const main = document.getElementById('main-content');
    main.innerHTML = `
        <div class="container" style="max-width: 700px;">
            <div class="card">
                <h1 style="margin-bottom: 2rem;">
                    <i class="fas fa-cog"></i> Configuración
                </h1>
                
                <div id="settings-alert"></div>
                
                <div class="card" style="background: var(--bg-secondary); margin-bottom: 2rem;">
                    <h3 style="margin-bottom: 1rem;">Información de la Cuenta</h3>
                    <div class="grid grid-2" style="gap: 1rem;">
                        ${user.role !== 'super-admin' ? `
                            <div>
                                <p style="margin-bottom: 0.5rem;"><strong>Rol:</strong></p>
                                <p style="color: var(--text-secondary);">${user.role === 'business-admin' ? 'Administrador de Negocio' : user.role === 'customer' ? 'Cliente' : user.role || 'N/A'}</p>
                            </div>
                        ` : ''}
                        ${user.role === 'business-admin' && user.business_id ? `
                            <div>
                                <p style="margin-bottom: 0.5rem;"><strong>Gestión de Negocio:</strong></p>
                                <a href="/admin/mi-negocio" data-link class="btn btn-primary" style="display: inline-block;">
                                    <i class="fas fa-store"></i> Ir a Panel de Negocio
                                </a>
                            </div>
                        ` : ''}
                    </div>
                </div>
                
                <div class="card" style="background: var(--bg-secondary); margin-bottom: 2rem;">
                    <h3 style="margin-bottom: 1.5rem;">
                        <i class="fas fa-user-edit"></i> Editar Perfil
                    </h3>
                    <form id="profile-form" onsubmit="updateProfile(event)">
                        <div class="form-group">
                            <label class="form-label">Nombre de Usuario</label>
                            <input type="text" id="profile-username" class="form-input" 
                                   value="${user.username || ''}" 
                                   placeholder="Ej: juan_perez"
                                   pattern="[a-zA-Z0-9_-]{3,30}"
                                   title="3-30 caracteres, solo letras, números, guiones y guiones bajos">
                            <small style="color: var(--text-secondary);">3-30 caracteres, solo letras, números, guiones y guiones bajos</small>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Nombre Completo</label>
                            <input type="text" id="profile-full-name" class="form-input" 
                                   value="${user.full_name || ''}" 
                                   placeholder="Ej: Juan Pérez"
                                   required>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Email (Gmail)</label>
                            <input type="email" id="profile-email" class="form-input" 
                                   value="${user.email || ''}" 
                                   placeholder="ejemplo@gmail.com"
                                   pattern=".*@gmail\.com$"
                                   title="Debe ser una dirección de Gmail"
                                   required>
                            <small style="color: var(--text-secondary);">Debe ser una dirección de Gmail</small>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Teléfono</label>
                            <input type="tel" id="profile-phone" class="form-input" 
                                   value="${user.phone || ''}" 
                                   placeholder="Ej: +51 999 999 999"
                                   pattern="[0-9+() -]+"
                                   title="Solo números y símbolos: +, -, espacios, paréntesis">
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary" style="width: 100%;">
                                <i class="fas fa-save"></i> Guardar Cambios
                            </button>
                        </div>
                    </form>
                </div>
                
                <div class="card" style="background: var(--bg-secondary); margin-bottom: 2rem;">
                    <h3 style="margin-bottom: 1.5rem;">
                        <i class="fas fa-lock"></i> Cambiar Contraseña
                    </h3>
                    <form id="password-form" onsubmit="changePassword(event)">
                        <div class="form-group">
                            <label class="form-label">Contraseña Actual *</label>
                            <input type="password" id="current-password" class="form-input" required 
                                   placeholder="••••••••">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Nueva Contraseña *</label>
                            <input type="password" id="new-password" class="form-input" required 
                                   placeholder="••••••••" minlength="6">
                            <small style="color: var(--text-secondary);">Mínimo 6 caracteres</small>
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">Confirmar Nueva Contraseña *</label>
                            <input type="password" id="confirm-new-password" class="form-input" required 
                                   placeholder="••••••••">
                        </div>
                        
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary" style="width: 100%;">
                                <i class="fas fa-key"></i> Cambiar Contraseña
                            </button>
                        </div>
                    </form>
                </div>
                
                <div style="margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border-color);">
                    <button onclick="handleLogout()" class="btn btn-danger" style="width: 100%;">
                        <i class="fas fa-sign-out-alt"></i> Cerrar Sesión
                    </button>
                </div>
            </div>
        </div>
    `;
    
    // Aplicar validación de formulario
    setTimeout(() => {
        const profileForm = document.getElementById('profile-form');
        if (profileForm && window.formValidation) {
            window.formValidation.setupFormValidation(profileForm);
        }
        
        const passwordForm = document.getElementById('password-form');
        if (passwordForm && window.formValidation) {
            window.formValidation.setupFormValidation(passwordForm);
        }
    }, 100);
}

// Funciones globales para configuración
window.updateProfile = async function(event) {
    event.preventDefault();
    const alertDiv = document.getElementById('settings-alert');
    
    const data = {
        username: document.getElementById('profile-username').value.trim(),
        full_name: document.getElementById('profile-full-name').value.trim(),
        email: document.getElementById('profile-email').value.trim(),
        phone: document.getElementById('profile-phone').value.trim()
    };
    
    // Validaciones básicas
    if (!data.full_name) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> El nombre completo es requerido</div>';
        return;
    }
    
    if (!data.email) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> El email es requerido</div>';
        return;
    }
    
    if (!data.email.includes('@gmail.com')) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> El email debe ser una dirección de Gmail (@gmail.com)</div>';
        return;
    }
    
    if (data.username && (data.username.length < 3 || data.username.length > 30)) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> El nombre de usuario debe tener entre 3 y 30 caracteres</div>';
        return;
    }
    
    alertDiv.innerHTML = '<div class="alert alert-info"><i class="fas fa-spinner fa-spin"></i> Actualizando perfil...</div>';
    
    try {
        await api.put('/users/me', data);
        alertDiv.innerHTML = '<div class="alert alert-success"><i class="fas fa-check"></i> Perfil actualizado correctamente</div>';
        
        // Actualizar usuario
        const userData = await api.get('/auth/me');
        auth.setUser(userData);
        renderHeader();
        
        // Recargar la página después de 1.5 segundos
        setTimeout(() => {
            renderSettings();
        }, 1500);
    } catch (error) {
        console.error('Error updating profile:', error);
        let errorMessage = error.message || 'Error al actualizar el perfil';
        alertDiv.innerHTML = `<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> ${errorMessage}</div>`;
    }
}

// Función global para cambiar contraseña
window.changePassword = async function(event) {
    event.preventDefault();
    const alertDiv = document.getElementById('settings-alert');
    
    const currentPassword = document.getElementById('current-password').value;
    const newPassword = document.getElementById('new-password').value;
    const confirmPassword = document.getElementById('confirm-new-password').value;
    
    // Validaciones básicas
    if (!currentPassword) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> La contraseña actual es requerida</div>';
        return;
    }
    
    if (!newPassword) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> La nueva contraseña es requerida</div>';
        return;
    }
    
    if (newPassword.length < 6) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> La nueva contraseña debe tener al menos 6 caracteres</div>';
        return;
    }
    
    if (newPassword !== confirmPassword) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> Las contraseñas no coinciden</div>';
        return;
    }
    
    alertDiv.innerHTML = '<div class="alert alert-info"><i class="fas fa-spinner fa-spin"></i> Cambiando contraseña...</div>';
    
    try {
        const data = {
            current_password: currentPassword,
            new_password: newPassword,
            confirm_password: confirmPassword
        };
        
        await api.put('/users/me/password', data);
        alertDiv.innerHTML = '<div class="alert alert-success"><i class="fas fa-check"></i> Contraseña cambiada correctamente</div>';
        
        // Limpiar formulario
        document.getElementById('password-form').reset();
        
        // Recargar después de 1.5 segundos
        setTimeout(() => {
            renderSettings();
        }, 1500);
    } catch (error) {
        console.error('Error changing password:', error);
        const errorMessage = error.message || 'Error al cambiar la contraseña. Por favor intenta nuevamente.';
        alertDiv.innerHTML = `<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> ${errorMessage}</div>`;
    }
}

