static/app.js

let historial = [];
let textoOCR = "";

// Elementos
const imageInput = document.getElementById('imageInput');
const imagePreview = document.getElementById('imagePreview');
const extractedTextDiv = document.getElementById('extractedText');
const chatLog = document.getElementById('chatLog');
const inputPregunta = document.getElementById('pregunta');
const btnEnviar = document.getElementById('btnEnviar');
const ocrBadge = document.getElementById('ocrBadge');
const previewWrapper = document.getElementById('previewWrapper');

// --- 1. Manejo de OCR ---
imageInput.addEventListener('change', async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    chatLog.innerHTML = ""; // Limpiar chat
    historial = []; // Limpiar historial

    // Mostrar preview
    const url = URL.createObjectURL(file);
    imagePreview.src = url;
    previewWrapper.classList.remove('hidden');
    ocrBadge.textContent = "Procesando...";
    ocrBadge.style.background = "#eab308"; // Amarillo

    const formData = new FormData();
    formData.append('file', file);

    try {
        const res = await fetch('/api/ocr', {
            method: 'POST',
            body: formData
        });
        const data = await res.json();

        textoOCR = data.texto;
        extractedTextDiv.textContent = textoOCR;
        ocrBadge.textContent = "OCR Listo";
        ocrBadge.style.background = "#22c55e"; // Verde

        // Habilitar chat
        inputPregunta.disabled = false;
        btnEnviar.disabled = false;
        inputPregunta.focus();

        agregarMensaje('assistant', 'He leído la imagen. ¿Qué quieres saber sobre ella?');
    } catch (err) {
        ocrBadge.textContent = "Error OCR";
        ocrBadge.style.background = "#ef4444"; // Rojo
    }
});

// --- 2. Manejo de Chat ---
async function enviarPregunta() {
    const pregunta = inputPregunta.value.trim();
    if (!pregunta) return;

    agregarMensaje('user', pregunta);
    inputPregunta.value = "";
    
    // Mostramos estado de carga
    const typingId = agregarMensaje('assistant', '<i class="fa-solid fa-ellipsis fa-beat"></i> Pensando...');

    try {
        const res = await fetch('/api/chat', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                pregunta: pregunta,
                contexto: textoOCR, // <--- CAMBIO: Usamos la variable global 'textoOCR' definida arriba
                historial: historial
            })
        });

        const data = await res.json();
        
        // Eliminamos indicador de carga y ponemos respuesta
        const loader = document.getElementById(typingId);
        if (loader) loader.remove();

        if (data.respuesta) {
            agregarMensaje('assistant', data.respuesta);
            
            // Actualizamos historial
            historial.push(`USER: ${pregunta}`, `ASSISTANT: ${data.respuesta}`);
            if(historial.length > 10) historial.splice(0, 2);
        } else {
            agregarMensaje('assistant', 'La IA no pudo generar una respuesta clara.');
        }

    } catch (err) {
        const loader = document.getElementById(typingId);
        if (loader) loader.remove();
        agregarMensaje('assistant', 'Lo siento, ha ocurrido un error al conectar con el servidor.');
        console.error(err);
    }
}

function agregarMensaje(rol, texto) {
    const div = document.createElement('div');
    const id = 'msg-' + Date.now() + '-' + Math.floor(Math.random() * 1000);    
    div.id = id;
    div.className = `message ${rol}`;
    div.innerHTML = texto;
    chatLog.appendChild(div);
    chatLog.scrollTop = chatLog.scrollHeight;
    return id;
}

// Eventos
btnEnviar.addEventListener('click', enviarPregunta);
inputPregunta.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') enviarPregunta();
});

document.getElementById('btnLimpiar').addEventListener('click', () => {
    chatLog.innerHTML = "";
    historial = [];
    agregarMensaje('system', 'Chat reiniciado.');
});