// Página de Registro
function renderRegister() {
    const main = document.getElementById('main-content');
    main.innerHTML = `
        <div class="container" style="max-width: 600px;">
            <div class="card">
                <h1 style="text-align: center; margin-bottom: 2rem;">Crear Cuenta</h1>
                
                <div id="register-alert"></div>
                
                <form id="register-form" onsubmit="handleRegister(event)">
                    <div class="form-group">
                        <label class="form-label">Nombre de Usuario *</label>
                        <input type="text" id="username" class="form-input" required 
                               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); font-size: 0.875rem;">
                            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="full-name" class="form-input" required 
                               placeholder="Ej: Juan Pérez García">
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Email (Gmail) *</label>
                        <input type="email" id="email" class="form-input" required 
                               placeholder="ejemplo@gmail.com"
                               pattern=".*@gmail\.com$"
                               title="Debe ser una dirección de Gmail">
                        <small style="color: var(--text-secondary); font-size: 0.875rem;">
                            Debe ser una dirección de Gmail (@gmail.com)
                        </small>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Teléfono *</label>
                        <input type="tel" id="phone" class="form-input" required 
                               placeholder="Ej: +51 999 999 999"
                               pattern="[0-9+() -]+"
                               title="Solo números y símbolos: +, -, espacios, paréntesis">
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Tipo de Usuario *</label>
                        <select id="user-type" class="form-select" required>
                            <option value="">Selecciona un tipo</option>
                            <option value="customer">Cliente</option>
                            <option value="business">Negocio</option>
                        </select>
                        <small style="color: var(--text-secondary); font-size: 0.875rem;">
                            Selecciona si eres un cliente o un negocio
                        </small>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Contraseña *</label>
                        <input type="password" id="password" class="form-input" required 
                               placeholder="••••••••" minlength="6">
                        <small style="color: var(--text-secondary); font-size: 0.875rem;">
                            Mínimo 6 caracteres
                        </small>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Confirmar Contraseña *</label>
                        <input type="password" id="confirm-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-user-plus"></i> Registrarse
                        </button>
                    </div>
                </form>
                
                <div style="text-align: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color);">
                    <p style="color: var(--text-secondary);">
                        ¿Ya tienes cuenta? 
                        <a href="/iniciar-sesion" data-link style="color: var(--primary-color); text-decoration: none; font-weight: 600;">
                            Inicia sesión aquí
                        </a>
                    </p>
                </div>
            </div>
        </div>
    `;
    
    // Aplicar validación de formulario
    setTimeout(() => {
        const form = document.getElementById('register-form');
        if (form && window.formValidation) {
            window.formValidation.setupFormValidation(form);
        }
    }, 100);
}

// Función global para registro
window.handleRegister = async function(event) {
    event.preventDefault();
    const alertDiv = document.getElementById('register-alert');
    
    const username = document.getElementById('username').value.trim();
    const fullName = document.getElementById('full-name').value.trim();
    const email = document.getElementById('email').value.trim();
    const phone = document.getElementById('phone').value.trim();
    const userType = document.getElementById('user-type').value;
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirm-password').value;
    
    // Validaciones básicas
    if (!username) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> El nombre de usuario es requerido</div>';
        return;
    }
    
    if (username.length < 3 || 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;
    }
    
    if (!fullName) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> El nombre completo es requerido</div>';
        return;
    }
    
    if (!email) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> El email es requerido</div>';
        return;
    }
    
    if (!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 (!phone) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> El teléfono es requerido</div>';
        return;
    }
    
    if (!userType) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> Debes seleccionar un tipo de usuario</div>';
        return;
    }
    
    if (password !== confirmPassword) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> Las contraseñas no coinciden</div>';
        return;
    }
    
    if (password.length < 6) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> La contraseña debe tener al menos 6 caracteres</div>';
        return;
    }
    
    alertDiv.innerHTML = '<div class="alert alert-info"><i class="fas fa-spinner fa-spin"></i> Registrando...</div>';
    
    try {
        const data = {
            username: username,
            full_name: fullName,
            email: email,
            phone: phone,
            user_type: userType,
            password: password,
            confirm_password: confirmPassword
        };
        
        const result = await api.post('/auth/register', data);
        
        alertDiv.innerHTML = '<div class="alert alert-success"><i class="fas fa-check"></i> Cuenta creada correctamente. Redirigiendo...</div>';
        
        setTimeout(() => {
            router.navigate('/iniciar-sesion');
        }, 2000);
    } catch (error) {
        console.error('Error en registro:', error);
        const errorMessage = error.message || 'Error al crear la cuenta. Por favor intenta nuevamente.';
        alertDiv.innerHTML = `<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> ${errorMessage}</div>`;
    }
}

