// Página de Solicitud de Negocio
function renderRequestBusiness() {
    // Verificar que el usuario esté autenticado
    if (!auth.isAuthenticated()) {
        alert('Debes iniciar sesión para solicitar un negocio. Serás redirigido al login.');
        router.navigate('/iniciar-sesion');
        return;
    }

    const user = auth.getCurrentUser();
    
    // Verificar que el usuario tenga rol customer (no business-admin ni super-admin)
    if (user.role !== 'customer') {
        alert('Solo los usuarios registrados como clientes pueden solicitar un negocio.');
        router.navigate('/');
        return;
    }

    // Verificar si ya tiene un negocio aprobado
    if (user.business_id) {
        alert('Ya tienes un negocio aprobado. Ve a tu panel de administración.');
        router.navigate('/admin/dashboard');
        return;
    }

    // Verificar si ya tiene una solicitud pendiente
    if (user.business_application_status === 'pending') {
        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;">Solicitud de Negocio</h1>
                    <div class="alert alert-info" style="text-align: center;">
                        <i class="fas fa-clock"></i>
                        <p style="margin: 1rem 0;">Ya tienes una solicitud de negocio pendiente de revisión.</p>
                        <p style="margin: 0;">Un administrador revisará tu solicitud y te contactará.</p>
                    </div>
                    <div style="text-align: center; margin-top: 2rem;">
                        <a href="/" data-link class="btn btn-primary">Volver al Inicio</a>
                    </div>
                </div>
            </div>
        `;
        return;
    }

    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;">Solicitar Registro de Negocio</h1>
                
                <div id="request-alert"></div>
                
                <p style="color: var(--text-secondary); margin-bottom: 1.5rem; text-align: center;">
                    Completa el formulario para solicitar el registro de tu negocio de llantas.
                    Un administrador revisará tu solicitud.
                </p>
                
                <form id="request-form" onsubmit="handleRequestBusiness(event)">
                    <div class="form-group">
                        <label class="form-label">Nombre del Negocio *</label>
                        <input type="text" id="business-name" class="form-input" required 
                               placeholder="Ej: Llantas Express">
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Dirección *</label>
                        <input type="text" id="address" class="form-input" required 
                               placeholder="Ej: Av. Principal 123">
                    </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">Email de Contacto (Opcional)</label>
                        <input type="email" id="email" class="form-input" 
                               placeholder="${user.email || 'contacto@negocio.com'}">
                        <small style="color: var(--text-secondary);">Si no proporcionas un email, se usará tu email de cuenta (${user.email || 'N/A'})</small>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Horarios *</label>
                        <input type="text" id="hours" class="form-input" required 
                               placeholder="Ej: Lun-Vie: 9:00-18:00">
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">Descripción</label>
                        <textarea id="description" class="form-textarea" rows="4" 
                                  placeholder="Describe tu negocio..."></textarea>
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary" style="width: 100%;">
                            <i class="fas fa-paper-plane"></i> Enviar Solicitud
                        </button>
                    </div>
                </form>
            </div>
        </div>
    `;
    
    // Aplicar validación de formulario
    setTimeout(() => {
        const form = document.getElementById('request-form');
        if (form && window.formValidation) {
            window.formValidation.setupFormValidation(form);
        }
    }, 100);
}

// Función global para solicitar negocio
window.handleRequestBusiness = async function(event) {
    event.preventDefault();
    const alertDiv = document.getElementById('request-alert');
    
    const data = {
        businessName: document.getElementById('business-name').value,
        address: document.getElementById('address').value,
        phone: document.getElementById('phone').value,
        email: document.getElementById('email').value,
        hours: document.getElementById('hours').value,
        description: document.getElementById('description').value
    };
    
    // Validaciones básicas (email es opcional si el usuario está autenticado)
    if (!data.businessName || !data.address || !data.phone || !data.hours) {
        alertDiv.innerHTML = '<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> Por favor completa todos los campos obligatorios (Nombre, Dirección, Teléfono y Horarios)</div>';
        return;
    }
    
    alertDiv.innerHTML = '<div class="alert alert-info"><i class="fas fa-spinner"></i> Enviando solicitud...</div>';
    
    try {
        console.log('Sending business application:', data);
        // Usar el endpoint correcto para usuarios autenticados
        const response = await api.post('/users/me/business-application', data);
        console.log('Business application response:', response);
        
        alertDiv.innerHTML = `
            <div class="alert alert-success">
                <i class="fas fa-check"></i> 
                ¡Solicitud enviada correctamente! Un administrador la revisará y te contactará.
            </div>
        `;
        
        document.getElementById('request-form').reset();
        
        // Actualizar información del usuario para reflejar el estado pendiente
        try {
            const userData = await api.get('/auth/me');
            auth.setUser(userData);
            renderHeader();
        } catch (e) {
            console.error('Error updating user data:', e);
        }
        
        // Redirigir después de 3 segundos
        setTimeout(() => {
            router.navigate('/');
        }, 3000);
    } catch (error) {
        console.error('Error submitting business application:', error);
        let errorMessage = error.message || 'Error al enviar la solicitud';
        
        // Mostrar mensaje más específico si es que ya tiene una solicitud
        if (errorMessage.includes('pending') || errorMessage.includes('already')) {
            errorMessage = 'Ya tienes una solicitud pendiente. Un administrador la revisará pronto.';
        }
        
        alertDiv.innerHTML = `<div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> ${errorMessage}</div>`;
    }
}

