<!-- 
Archivo: FormAA.html
Ruta: src/templates/Ventas/Cotiz/CotizEspSolicitud/FormAA.html
Descripción: Formulario de Plantas Eléctricas con gestión de archivos
-->

<!-- 🆕 SECCIÓN DE CARGA DE ARCHIVOS -->
<div class="row-3col">
    <div class="form-group">
        <label for="pemx_potencia">Potencia Requerida (kW):</label>
        <input type="number" id="pemx_potencia" class="form-control" required
               placeholder="Ej: 500" min="1">
    </div>
    
    <div class="form-group">
        <label for="pemx_voltaje">Voltaje (V):</label>
        <select id="pemx_voltaje" class="form-select" required>
            <option selected disabled>Selecciona voltaje</option>
            <option value="127">127V</option>
            <option value="220">220V</option>
            <option value="440">440V</option>
            <option value="480">480V</option>
            <option value="otro">Otro</option>
        </select>
    </div>
    
    <div class="form-group">
        <label for="pemx_fases">Número de Fases:</label>
        <select id="pemx_fases" class="form-select" required>
            <option selected disabled>Selecciona fases</option>
            <option value="1">Monofásico (1φ)</option>
            <option value="3">Trifásico (3φ)</option>
        </select>
    </div>
</div>

<div class="row-3col">
    <div class="form-group">
        <label for="pemx_combustible">Tipo de Combustible:</label>
        <select id="pemx_combustible" class="form-select" required>
            <option selected disabled>Selecciona combustible</option>
            <option value="diesel">Diésel</option>
            <option value="gas_natural">Gas Natural</option>
            <option value="gas_lp">Gas LP</option>
            <option value="gasolina">Gasolina</option>
        </select>
    </div>
    
    <div class="form-group">
        <label for="pemx_uso">Tipo de Uso:</label>
        <select id="pemx_uso" class="form-select" required>
            <option selected disabled>Selecciona uso</option>
            <option value="emergencia">Emergencia</option>
            <option value="continuo">Uso Continuo</option>
            <option value="standby">Standby</option>
        </select>
    </div>
    
    <div class="form-group">
        <label for="pemx_arranque">Tipo de Arranque:</label>
        <select id="pemx_arranque" class="form-select" required>
            <option selected disabled>Selecciona arranque</option>
            <option value="manual">Manual</option>
            <option value="automatico">Automático</option>
            <option value="remoto">Remoto</option>
        </select>
    </div>
</div>

<div class="row-1col">
    <div class="field-group">
        <label for="pemx_observaciones">Observaciones Técnicas:</label>
        <textarea id="pemx_observaciones" rows="3" 
                  placeholder="Especifique detalles técnicos adicionales, condiciones ambientales, requisitos especiales..."></textarea>
    </div>
</div>

<!-- 🆕 SECCIÓN MEJORADA DE CARGA DE ARCHIVOS -->
<div class="file-upload-section">
    <h5 class="file-section-title">📎 Documentos Técnicos</h5>
    <p class="file-section-description">
        Adjunte planos, especificaciones técnicas, fotos del sitio, etc. 
        <strong>Formatos permitidos:</strong> PDF, DOC, DOCX, JPG, PNG, XLSX, XLS (máx. 2MB por archivo)
    </p>
    
    <!-- Input de archivos mejorado -->
    <div class="file-input-container">
        <input type="file" 
               id="files_CoolerAC" 
               name="files_CoolerAC[]" 
               multiple 
               accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.xlsx,.xls"
               class="file-input"
               style="display: none;">
        <button type="button" class="file-input-label" onclick="FormAA.openFileSelector()">
            <i class="fas fa-cloud-upload-alt"></i>
            <span>Seleccionar Archivos</span>
        </button>
        <button type="button" class="btn-add-more" onclick="FormAA.openFileSelector()" style="display: none;">
            <i class="fas fa-plus"></i>
            <span>Agregar Más</span>
        </button>
    </div>
    
    <!-- Vista previa mejorada de archivos seleccionados -->
    <div id="preview_CoolerAC" class="file-preview-container" style="display: none;">
        <div class="preview-header">
            <h6 class="preview-title">Archivos Seleccionados:</h6>
            <div class="file-counter">
                <span id="file-count-Genset">0</span> archivo(s) | 
                <span id="file-size-Genset">0</span> KB total
            </div>
        </div>
        <div class="file-preview-list"></div>
        <div class="preview-actions">
            <button type="button" class="btn-add-more" onclick="FormAA.openFileSelector()">
                <i class="fas fa-plus"></i> Agregar Más
            </button>
            <button type="button" class="btn-remove-all" onclick="FormAA.clearAllFiles()">
                <i class="fas fa-trash"></i> Quitar Todos
            </button>
        </div>
    </div>
    
    <!-- Información adicional -->
    <div class="file-info">
        <small class="text-muted">
            <i class="fas fa-info-circle"></i>
            Los archivos se subirán cuando envíe la solicitud completa.
        </small>
    </div>
</div>

<!-- JavaScript específico del formulario MEJORADO -->
<script>
// ============================================
// MÓDULO: FormAA (Plantas Eléctricas) - VERSIÓN MEJORADA
// ============================================

window.FormAA = (function() {
    'use strict';
    
    // 🆕 GESTIÓN MEJORADA DE ARCHIVOS
    let selectedFiles = new Map(); // Usar Map para mejor gestión
    let fileCounter = 0; // Contador único para cada archivo
    const MAX_FILE_SIZE = 2 * 1024 * 1024; // 2MB
    const ALLOWED_EXTENSIONS = ['.pdf', '.doc', '.docx', '.jpg', '.jpeg', '.png', '.xlsx', '.xls'];
    
    // Inicialización
    function init() {
        console.log('FormAA: Módulo inicializado con gestión mejorada de archivos');
        setupFileSystem();
        updateUI();
    }
    
    // 🆕 CONFIGURAR SISTEMA DE ARCHIVOS MEJORADO
    function setupFileSystem() {
        const fileInput = document.getElementById('files_CoolerAC');
        if (!fileInput) {
            console.warn('FormAA: Input de archivos no encontrado');
            return;
        }
        
        // Event listener mejorado
        fileInput.addEventListener('change', handleFileSelection);
        
        // 🆕 PREVENIR RESET ACCIDENTAL
        fileInput.addEventListener('click', function(e) {
            // No prevenir el click, pero preparar para mantener archivos
            console.log('FormAA: Abriendo selector de archivos...');
        });
    }
    
    // 🆕 ABRIR SELECTOR DE ARCHIVOS (MÉTODO CONTROLADO)
    function openFileSelector() {
        const fileInput = document.getElementById('files_CoolerAC');
        if (fileInput) {
            console.log('FormAA: Abriendo selector de archivos de forma controlada');
            fileInput.click();
        }
    }
    
    // 🆕 MANEJAR SELECCIÓN DE ARCHIVOS MEJORADA
    function handleFileSelection(event) {
        const files = Array.from(event.target.files);
        console.log(`FormAA: Procesando ${files.length} archivo(s) seleccionado(s)`);
        
        if (files.length === 0) {
            console.log('FormAA: No se seleccionaron archivos - manteniendo archivos existentes');
            return;
        }
        
        const validFiles = [];
        const errors = [];
        
        files.forEach(file => {
            const validation = validateFile(file);
            if (validation.valid) {
                // 🆕 VERIFICAR DUPLICADOS POR NOMBRE Y TAMAÑO
                const isDuplicate = Array.from(selectedFiles.values()).some(existingFile => 
                    existingFile.file.name === file.name && 
                    existingFile.file.size === file.size
                );
                
                if (!isDuplicate) {
                    validFiles.push(file);
                } else {
                    errors.push(`${file.name}: Archivo ya seleccionado`);
                }
            } else {
                errors.push(`${file.name}: ${validation.error}`);
            }
        });
        
        // Mostrar errores si los hay
        if (errors.length > 0) {
            showFileErrors(errors);
        }
        
        // Agregar archivos válidos
        if (validFiles.length > 0) {
            validFiles.forEach(file => {
                fileCounter++;
                selectedFiles.set(fileCounter, {
                    id: fileCounter,
                    file: file,
                    addedAt: new Date().toISOString()
                });
            });
            
            updateFilePreview();
            showSuccessMessage(`${validFiles.length} archivo(s) agregado(s)`);
            console.log(`FormAA: Total de archivos: ${selectedFiles.size}`);
        }
        
        // 🆕 LIMPIAR INPUT SIN AFECTAR ARCHIVOS SELECCIONADOS
        event.target.value = '';
    }
    
    // Validar archivo individual (sin cambios)
    function validateFile(file) {
        // Verificar tamaño
        if (file.size > MAX_FILE_SIZE) {
            return {
                valid: false,
                error: `Archivo muy grande (${(file.size / 1024 / 1024).toFixed(1)}MB). Máximo 2MB.`
            };
        }
        
        // Verificar extensión
        const extension = '.' + file.name.split('.').pop().toLowerCase();
        if (!ALLOWED_EXTENSIONS.includes(extension)) {
            return {
                valid: false,
                error: `Tipo de archivo no permitido (${extension})`
            };
        }
        
        return { valid: true };
    }
    
    // 🆕 ACTUALIZAR VISTA PREVIA MEJORADA
    function updateFilePreview() {
        const previewContainer = document.getElementById('preview_CoolerAC');
        const previewList = previewContainer.querySelector('.file-preview-list');
        const fileCountElement = document.getElementById('file-count-Genset');
        const fileSizeElement = document.getElementById('file-size-Genset');
        
        if (selectedFiles.size === 0) {
            previewContainer.style.display = 'none';
            updateUI();
            return;
        }
        
        previewContainer.style.display = 'block';
        previewList.innerHTML = '';
        
        // Calcular estadísticas
        let totalSize = 0;
        Array.from(selectedFiles.values()).forEach(fileData => {
            totalSize += fileData.file.size;
            const fileItem = createFilePreviewItem(fileData.file, fileData.id);
            previewList.appendChild(fileItem);
        });
        
        // Actualizar contadores
        if (fileCountElement) fileCountElement.textContent = selectedFiles.size;
        if (fileSizeElement) fileSizeElement.textContent = (totalSize / 1024).toFixed(1);
        
        updateUI();
    }
    
    // 🆕 ACTUALIZAR UI SEGÚN ESTADO
    function updateUI() {
        const hasFiles = selectedFiles.size > 0;
        const initialButton = document.querySelector('.file-input-label');
        const addMoreButton = document.querySelector('.btn-add-more');
        
        if (initialButton) {
            initialButton.style.display = hasFiles ? 'none' : 'inline-flex';
        }
        
        // Los botones "Agregar Más" se muestran en la vista previa
    }
    
    // Crear elemento de vista previa (mejorado)
    function createFilePreviewItem(file, fileId) {
        const item = document.createElement('div');
        item.className = 'file-preview-item';
        item.setAttribute('data-file-id', fileId);
        
        const fileSize = (file.size / 1024).toFixed(1);
        const fileIcon = getFileIcon(file.name);
        
        item.innerHTML = `
            <div class="file-info">
                <i class="${fileIcon}"></i>
                <div class="file-details">
                    <span class="file-name" title="${file.name}">${file.name}</span>
                    <span class="file-size">${fileSize} KB</span>
                </div>
            </div>
            <button type="button" class="btn-remove-file" onclick="FormAA.removeFile(${fileId})" title="Quitar archivo">
                <i class="fas fa-times"></i>
            </button>
        `;
        
        return item;
    }
    
    // Obtener icono según tipo de archivo (sin cambios)
    function getFileIcon(filename) {
        const extension = filename.split('.').pop().toLowerCase();
        
        const iconMap = {
            'pdf': 'fas fa-file-pdf text-danger',
            'doc': 'fas fa-file-word text-primary',
            'docx': 'fas fa-file-word text-primary',
            'xlsx': 'fas fa-file-excel text-success',
            'xls': 'fas fa-file-excel text-success',
            'jpg': 'fas fa-file-image text-warning',
            'jpeg': 'fas fa-file-image text-warning',
            'png': 'fas fa-file-image text-warning'
        };
        
        return iconMap[extension] || 'fas fa-file text-secondary';
    }
    
    // 🆕 REMOVER ARCHIVO ESPECÍFICO MEJORADO
    function removeFile(fileId) {
        if (selectedFiles.has(fileId)) {
            const fileData = selectedFiles.get(fileId);
            selectedFiles.delete(fileId);
            updateFilePreview();
            showSuccessMessage(`Archivo "${fileData.file.name}" removido`);
            console.log(`FormAA: Archivo removido. Total: ${selectedFiles.size}`);
        }
    }
    
    // 🆕 LIMPIAR TODOS LOS ARCHIVOS MEJORADO
    function clearAllFiles() {
        const fileCount = selectedFiles.size;
        selectedFiles.clear();
        fileCounter = 0;
        updateFilePreview();
        showSuccessMessage(`${fileCount} archivo(s) removido(s)`);
        console.log('FormAA: Todos los archivos removidos');
    }
    
    // 🆕 OBTENER ARCHIVOS COMO ARRAY DE FILES
    function getFiles() {
        const filesArray = Array.from(selectedFiles.values()).map(fileData => fileData.file);
        console.log(`FormAA: Retornando ${filesArray.length} archivo(s)`);
        return filesArray;
    }
    
    // 🆕 OBTENER ESTADÍSTICAS DE ARCHIVOS
    function getFileStats() {
        const files = Array.from(selectedFiles.values());
        const totalSize = files.reduce((sum, fileData) => sum + fileData.file.size, 0);
        
        return {
            count: selectedFiles.size,
            totalSize: totalSize,
            totalSizeMB: (totalSize / 1024 / 1024).toFixed(2),
            files: files.map(fileData => ({
                name: fileData.file.name,
                size: fileData.file.size,
                type: fileData.file.type,
                addedAt: fileData.addedAt
            }))
        };
    }
    
    // Mostrar mensajes (sin cambios)
    function showSuccessMessage(message) {
        if (window.mostrarNotificacionToast) {
            window.mostrarNotificacionToast(message, 'success');
        } else {
            console.log('FormAA:', message);
        }
    }
    
    function showFileErrors(errors) {
        const errorMessage = `Algunos archivos no pudieron agregarse:\n${errors.join('\n')}`;
        
        if (window.mostrarAlerta) {
            window.mostrarAlerta(errorMessage, 'warning');
        } else {
            alert(errorMessage);
        }
    }
    
    // Callback cuando el formulario se vuelve visible
    function onBecomeVisible() {
        console.log('FormAA: Formulario visible, inicializando...');
        init();
    }
    
    // 🆕 API PÚBLICA MEJORADA
    return {
        init: init,
        openFileSelector: openFileSelector,
        removeFile: removeFile,
        clearAllFiles: clearAllFiles,
        getFiles: getFiles,
        getFileStats: getFileStats,
        onBecomeVisible: onBecomeVisible
    };
    
})();

// Auto-inicializar si el formulario ya está visible
document.addEventListener('DOMContentLoaded', function() {
    const formSection = document.querySelector('.section-FormAA');
    if (formSection && formSection.style.display !== 'none') {
        FormAA.init();
    }
});
</script>

<!-- CSS mejorado para la gestión de archivos -->
<style>
.file-upload-section {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.file-section-title {
    color: #495057;
    margin-bottom: 8px;
    font-weight: 600;
}

.file-section-description {
    color: #6c757d;
    font-size: 0.9em;
    margin-bottom: 15px;
    line-height: 1.4;
}

.file-input-container {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.file-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.file-input-label, .btn-add-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: 500;
    text-decoration: none;
}

.file-input-label:hover, .btn-add-more:hover {
    background: #0056b3;
}

.btn-add-more {
    background: #28a745;
}

.btn-add-more:hover {
    background: #218838;
}

.file-preview-container {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    margin-top: 15px;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e9ecef;
}

.preview-title {
    color: #495057;
    margin: 0;
    font-weight: 600;
}

.file-counter {
    color: #6c757d;
    font-size: 0.9em;
    font-weight: 500;
}

.file-preview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    margin-bottom: 8px;
    background: #f8f9fa;
    transition: background-color 0.2s;
}

.file-preview-item:hover {
    background: #e9ecef;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.file-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.file-name {
    font-weight: 500;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size {
    font-size: 0.85em;
    color: #6c757d;
}

.btn-remove-file {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.9em;
    flex-shrink: 0;
}

.btn-remove-file:hover {
    background: #c82333;
}

.preview-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #e9ecef;
}

.btn-remove-all {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-remove-all:hover {
    background: #c82333;
}

.file-info small {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .file-input-container {
        flex-direction: column;
    }
    
    .preview-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .preview-actions {
        flex-direction: column;
    }
    
    .file-preview-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
</style>