hokoritemp/static/app.js

// HokoriTemp - JavaScript principal

let selectedFile = null;
// Usar configuración del servidor si está disponible, sino usar valor por defecto
const MAX_FILE_SIZE = (typeof SERVER_CONFIG !== 'undefined' && SERVER_CONFIG.maxFileSize) 
    ? SERVER_CONFIG.maxFileSize 
    : 16 * 1024 * 1024; // 16MB por defecto

// DOM Elements
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('fileInput');
const fileInfo = document.getElementById('fileInfo');
const fileName = document.getElementById('fileName');
const fileSize = document.getElementById('fileSize');
const removeFile = document.getElementById('removeFile');
const uploadForm = document.getElementById('uploadForm');
const uploadBtn = document.getElementById('uploadBtn');
const uploadBtnText = document.getElementById('uploadBtnText');
const uploadBtnLoading = document.getElementById('uploadBtnLoading');
const resultSection = document.getElementById('resultSection');
const emptyResultSection = document.getElementById('emptyResultSection');
const errorSection = document.getElementById('errorSection');
const errorMessage = document.getElementById('errorMessage');
const downloadLink = document.getElementById('downloadLink');

// Progress bar elements
const progressContainer = document.getElementById('progressContainer');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
const uploadedSize = document.getElementById('uploadedSize');
const totalSize = document.getElementById('totalSize');

// Event Listeners
dropZone.addEventListener('click', () => fileInput.click());
dropZone.addEventListener('dragover', handleDragOver);
dropZone.addEventListener('dragleave', handleDragLeave);
dropZone.addEventListener('drop', handleDrop);
fileInput.addEventListener('change', handleFileSelect);
removeFile.addEventListener('click', removeSelectedFile);
uploadForm.addEventListener('submit', handleUpload);

// Inicializar estado
document.addEventListener('DOMContentLoaded', function() {
    // Mostrar el estado vacío del resultado al cargar
    emptyResultSection.classList.remove('hidden');
    emptyResultSection.classList.add('fade-in');
});

function handleDragOver(e) {
    e.preventDefault();
    dropZone.classList.add('dragover');
}

function handleDragLeave(e) {
    e.preventDefault();
    dropZone.classList.remove('dragover');
}

function handleDrop(e) {
    e.preventDefault();
    dropZone.classList.remove('dragover');
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        handleFile(files[0]);
    }
}

function handleFileSelect(e) {
    const file = e.target.files[0];
    if (file) {
        handleFile(file);
    }
}

function handleFile(file) {
    // Validar tamaño del archivo
    if (file.size > MAX_FILE_SIZE) {
        showError(`El archivo es demasiado grande. Tamaño máximo: ${getMaxFileSizeMB()}MB`);
        return;
    }

    selectedFile = file;
    fileName.textContent = file.name;
    fileName.title = file.name; // Agregar título completo para tooltip
    fileSize.textContent = formatFileSize(file.size);
    
    // Aplicar clase de advertencia si el archivo es grande (>10MB)
    if (file.size > 10 * 1024 * 1024) {
        fileInfo.classList.add('file-size-warning');
    } else {
        fileInfo.classList.remove('file-size-warning');
    }
    
    fileInfo.classList.remove('hidden');
    uploadBtn.disabled = false;
    hideError();
}

function removeSelectedFile() {
    selectedFile = null;
    fileInput.value = '';
    fileInfo.classList.add('hidden');
    fileInfo.classList.remove('file-size-warning', 'file-size-error');
    uploadBtn.disabled = true;
    // Ocultar resultado si hay uno mostrado
    hideResult();
    // Ocultar barra de progreso
    hideProgress();
}

function formatFileSize(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

async function handleUpload(e) {
    e.preventDefault();
    
    if (!selectedFile) {
        showError('Por favor selecciona un archivo');
        return;
    }

    // Validar tamaño del archivo antes de subir
    if (selectedFile.size > MAX_FILE_SIZE) {
        showError(`El archivo es demasiado grande. Tamaño máximo: ${getMaxFileSizeMB()}MB`);
        return;
    }

    // Show loading state
    uploadBtn.disabled = true;
    uploadBtnText.classList.add('hidden');
    uploadBtnLoading.classList.remove('hidden');
    hideError();
    hideResult();
    showProgress();
    totalSize.textContent = formatFileSize(selectedFile.size);

    const formData = new FormData();
    formData.append('file', selectedFile);
    
    // Agregar tiempo de vida del archivo
    const expiresHours = document.getElementById('expiresHours').value;
    formData.append('expires_hours', expiresHours);

    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        
        // Configurar eventos de progreso
        xhr.upload.addEventListener('progress', function(e) {
            if (e.lengthComputable) {
                updateProgress(e.loaded, e.total);
            }
        });
        
        // Configurar eventos de respuesta
        xhr.addEventListener('load', function() {
            hideProgress();
            
            try {
                // Verificar si la respuesta es JSON válido
                const contentType = xhr.getResponseHeader('content-type');
                const isJson = contentType && contentType.includes('application/json');
                
                // Manejar diferentes códigos de respuesta
                if (xhr.status === 413) {
                    showError(`El archivo es demasiado grande. Tamaño máximo: ${getMaxFileSizeMB()}MB`);
                    resolve();
                    return;
                }
                
                if (xhr.status !== 200) {
                    let errorMessage = `Error del servidor (${xhr.status})`;
                    
                    if (isJson) {
                        try {
                            const errorData = JSON.parse(xhr.responseText);
                            errorMessage = errorData.error || errorMessage;
                        } catch (e) {
                            console.error('Error parsing JSON response:', e);
                        }
                    } else {
                        // Si no es JSON, intentar leer como texto
                        const errorText = xhr.responseText;
                        console.error('Error response:', errorText);
                        
                        // Detectar errores específicos basados en el contenido
                        if (errorText.includes('Request Entity Too Large') || errorText.includes('413')) {
                            errorMessage = `El archivo es demasiado grande. Tamaño máximo: ${getMaxFileSizeMB()}MB`;
                        } else if (errorText.includes('413')) {
                            errorMessage = `El archivo es demasiado grande. Tamaño máximo: ${getMaxFileSizeMB()}MB`;
                        } else {
                            errorMessage = `Error del servidor: ${xhr.statusText}`;
                        }
                    }
                    
                    showError(errorMessage);
                    resolve();
                    return;
                }
                
                if (isJson) {
                    const result = JSON.parse(xhr.responseText);
                    
                    if (result.success) {
                        showResult(result.download_url);
                        showNotification('Archivo subido exitosamente', 'success');
                    } else {
                        showError(result.error || 'Error al subir el archivo');
                    }
                } else {
                    showError('Respuesta inesperada del servidor');
                }
            } catch (error) {
                console.error('Upload error:', error);
                showError('Error al procesar la respuesta del servidor.');
            }
            
            resolve();
        });
        
        // Configurar eventos de error
        xhr.addEventListener('error', function() {
            hideProgress();
            console.error('Upload error: Network error');
            showError('Error de conexión. Verifica tu conexión a internet e intenta de nuevo.');
            resolve();
        });
        
        xhr.addEventListener('abort', function() {
            hideProgress();
            console.error('Upload error: Request aborted');
            showError('Subida cancelada.');
            resolve();
        });
        
        // Configurar timeout
        xhr.timeout = 300000; // 5 minutos
        xhr.addEventListener('timeout', function() {
            hideProgress();
            console.error('Upload error: Request timeout');
            showError('Tiempo de espera agotado. Intenta de nuevo.');
            resolve();
        });
        
        // Enviar la petición
        xhr.open('POST', '/upload');
        xhr.send(formData);
    }).finally(() => {
        // Reset loading state
        uploadBtn.disabled = false;
        uploadBtnText.classList.remove('hidden');
        uploadBtnLoading.classList.add('hidden');
    });
}

// Función eliminada - ya no se usa localStorage, los enlaces se guardan en la base de datos

function showResult(url) {
    downloadLink.value = url;
    
    // Actualizar el tiempo de vida mostrado
    const expiresHours = document.getElementById('expiresHours').value;
    const expiresTimeText = getExpiresTimeText(expiresHours);
    document.getElementById('selectedExpiresTime').textContent = expiresTimeText;
    
    resultSection.classList.remove('hidden');
    resultSection.classList.add('fade-in');
    emptyResultSection.classList.add('hidden');
    
    // Ocultar el formulario de subida
    const uploadFormContainer = document.querySelector('.bg-white.rounded-lg.shadow-lg.p-6');
    if (uploadFormContainer) {
        uploadFormContainer.classList.add('hidden');
    }
}

function getExpiresTimeText(hours) {
    const hoursInt = parseInt(hours);
    if (hoursInt === 1) return '1 hora';
    if (hoursInt === 6) return '6 horas';
    if (hoursInt === 12) return '12 horas';
    if (hoursInt === 24) return '24 horas';
    if (hoursInt === 48) return '2 días';
    if (hoursInt === 72) return '3 días';
    if (hoursInt === 168) return '7 días';
    return `${hoursInt} horas`;
}

function showError(message) {
    errorMessage.textContent = message;
    errorSection.classList.remove('hidden');
    showNotification(message, 'error');
}

function hideError() {
    errorSection.classList.add('hidden');
}

function hideResult() {
    resultSection.classList.add('hidden');
    resultSection.classList.remove('fade-in');
    emptyResultSection.classList.remove('hidden');
    emptyResultSection.classList.add('fade-in');
    
    // Mostrar el formulario de subida nuevamente
    const uploadFormContainer = document.querySelector('.bg-white.rounded-lg.shadow-lg.p-6');
    if (uploadFormContainer) {
        uploadFormContainer.classList.remove('hidden');
    }
}

function copyLink() {
    downloadLink.select();
    document.execCommand('copy');
    // Show feedback
    const copyBtn = event.target;
    const originalText = copyBtn.textContent;
    copyBtn.textContent = '¡Copiado!';
    setTimeout(() => {
        copyBtn.textContent = originalText;
    }, 2000);
    showNotification('Enlace copiado al portapapeles', 'success');
}

function openLink() {
    window.open(downloadLink.value, '_blank');
}

function resetForm() {
    removeSelectedFile();
    hideResult();
    hideError();
    hideProgress();
    
    // Mostrar el formulario de subida nuevamente
    const uploadFormContainer = document.querySelector('.bg-white.rounded-lg.shadow-lg.p-6');
    if (uploadFormContainer) {
        uploadFormContainer.classList.remove('hidden');
    }
    
    // Mostrar el estado vacío del resultado
    emptyResultSection.classList.remove('hidden');
}

// Función para mostrar notificaciones
function showNotification(message, type = 'info') {
    // Crear elemento de notificación
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.textContent = message;
    
    // Agregar al DOM
    document.body.appendChild(notification);
    
    // Mostrar con animación
    setTimeout(() => {
        notification.classList.add('show');
    }, 100);
    
    // Ocultar después de 3 segundos
    setTimeout(() => {
        notification.classList.remove('show');
        setTimeout(() => {
            document.body.removeChild(notification);
        }, 300);
    }, 3000);
}

// Función helper para obtener el tamaño máximo en MB
function getMaxFileSizeMB() {
    return (typeof SERVER_CONFIG !== 'undefined' && SERVER_CONFIG.maxFileSizeMB) 
        ? SERVER_CONFIG.maxFileSizeMB 
        : MAX_FILE_SIZE / (1024 * 1024);
}

// Función para validar archivo antes de subir
function validateFile(file) {
    const maxSize = MAX_FILE_SIZE;
    const maxSizeMB = getMaxFileSizeMB();
    
    if (file.size > maxSize) {
        return {
            valid: false,
            message: `El archivo es demasiado grande. Tamaño máximo: ${maxSizeMB}MB`
        };
    }
    
    return { valid: true };
}

// Progress bar functions
function showProgress() {
    progressContainer.classList.remove('hidden');
    progressBar.style.width = '0%';
    progressText.textContent = '0%';
    uploadedSize.textContent = '0 KB';
    totalSize.textContent = '0 KB';
}

function hideProgress() {
    progressContainer.classList.add('hidden');
}

function updateProgress(uploaded, total) {
    const percentage = Math.round((uploaded / total) * 100);
    progressBar.style.width = percentage + '%';
    progressText.textContent = percentage + '%';
    uploadedSize.textContent = formatFileSize(uploaded);
    totalSize.textContent = formatFileSize(total);
}

function resetProgress() {
    progressBar.style.width = '0%';
    progressText.textContent = '0%';
    uploadedSize.textContent = '0 KB';
    totalSize.textContent = '0 KB';
}