static/core.js

// ============================================================
//  Consumertec Frontend (split) - Core UI + helpers + backend + charts
// ============================================================

(function(){
  // DOM refs
  const csvInputEl   = document.getElementById("csvInput");
  const fileStatusEl = document.getElementById("fileStatus");
  const csvLabelEl   = document.getElementById("csvLabel");
  const modeStatusEl = document.getElementById("modeStatus");

  // -------------------------------------------------------------
  // Guard rails: evitar ReferenceError si alguna global no existe
  // -------------------------------------------------------------
  window.csvFile = window.csvFile || null;
  window.csvHeaders = window.csvHeaders || null;
  window.comparacionesDataset = window.comparacionesDataset || null;

  window.analysisMode = window.analysisMode || null;
  window.currentPromptKey = window.currentPromptKey || null;

  window.tiposDisponibles = window.tiposDisponibles || {
    comparaciones:false, whiteness:false, resumen:false, response_rel:false
  };

  window.whitenessMetrics = window.whitenessMetrics || [
    "1.2.WI_STw","2.2.WI_GEw","3.2.WI_VOw","4.2.WI_LGw"
  ];

  window.lastChartData = window.lastChartData || null;
  window.lastChartDataMulti = window.lastChartDataMulti || null;
  window.chartInstance = window.chartInstance || null;
  window.chartInstanceMulti = window.chartInstanceMulti || null;

  window.BACKEND_URL = window.BACKEND_URL || "/generate_answer";

  // -------------------------------------------------------------
  // Helpers para “códigos evidentes” en sección 5 (para que el LLM los mencione)
  // -------------------------------------------------------------
  function _formatProductosDetectados(codes) {
    if (!codes || !codes.length) return "PRODUCTOS DETECTADOS: (no detectados)";
    return "PRODUCTOS DETECTADOS: " + codes.join(", ");
  }

  function _buildDiferenciasClaveBlock(countByProd, rateByProd) {
    if (!countByProd) return "";
    const items = Object.entries(countByProd)
      .map(([k,v]) => ({k, v: Number(v)||0, r: (rateByProd && rateByProd[k]!=null) ? Number(rateByProd[k]) : null}))
      .sort((a,b)=> b.v - a.v);
    if (!items.length) return "";
    const top = items[0];
    const second = items[1] || null;
    const last = items[items.length - 1];
    let out = "DIFERENCIAS CLAVE:\n";
    if (second) {
      const d12 = top.v - second.v;
      out += `Top vs 2do (favorables): ${top.k} (${top.v}) vs ${second.k} (${second.v}) | Δ=${d12}\n`;
      if (top.r!=null && second.r!=null) {
        const dr12 = top.r - second.r;
        out += `Top vs 2do (tasa): ${top.k} (${top.r}%) vs ${second.k} (${second.r}%) | Δ=${dr12.toFixed(2)} pp\n`;
      }
    }
    const d1L = top.v - last.v;
    out += `Top vs último (favorables): ${top.k} (${top.v}) vs ${last.k} (${last.v}) | Δ=${d1L}\n`;
    if (top.r!=null && last.r!=null) {
      const dr1L = top.r - last.r;
      out += `Top vs último (tasa): ${top.k} (${top.r}%) vs ${last.k} (${last.r}%) | Δ=${dr1L.toFixed(2)} pp\n`;
    }
    return out.trimEnd();
  }

  // Exponer helpers a los modos (mínimo necesario)
  window._formatProductosDetectados = _formatProductosDetectados;
  window._buildDiferenciasClaveBlock = _buildDiferenciasClaveBlock;

  // -------------------------------------------------------------
  // Helpers para sección 7 (gráfico 1)
  // -------------------------------------------------------------
  function prepararDatosGrafico(data) {
    lastChartData = data || null;
    const chartStatusEl = document.getElementById("chartStatus");
    if (!lastChartData || !lastChartData.labels || !lastChartData.labels.length) {
      if (chartStatusEl) chartStatusEl.textContent = "⚠️ No se generaron datos suficientes para graficar.";
      if (chartInstance) { chartInstance.destroy(); chartInstance = null; }
      return;
    }
    if (chartStatusEl) {
      chartStatusEl.textContent = "✅ Datos listos para graficar: " +
        (lastChartData.title || "gráfico a partir del resumen numérico determinista.");
    }
    renderChartInternal();
  }

  function renderChartInternal() {
    const canvas = document.getElementById("chartCanvas");
    const chartTypeEl = document.getElementById("chartType");
    const chartStatusEl = document.getElementById("chartStatus");
    if (!canvas || !lastChartData || !lastChartData.labels || !lastChartData.labels.length) {
      if (chartStatusEl) chartStatusEl.textContent = "⚠️ Aún no hay datos para graficar. Ejecuta un análisis primero.";
      return;
    }
    const ctx = canvas.getContext("2d");
    if (chartInstance) { chartInstance.destroy(); chartInstance = null; }
    const tipo = chartTypeEl ? chartTypeEl.value : "bar";
    chartInstance = new Chart(ctx, {
      type: tipo,
      data: {
        labels: lastChartData.labels,
        datasets: [{
          label: lastChartData.datasetLabel || "Valores",
          data: lastChartData.values,
          fill: false
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: true },
          title: { display: !!lastChartData.title, text: lastChartData.title }
        },
        scales: {
          x: {
            title: { display: !!lastChartData.xLabel, text: lastChartData.xLabel },
            ticks: { autoSkip: true, maxRotation: 45, minRotation: 0 }
          },
          y: {
            beginAtZero: true,
            title: { display: !!lastChartData.yLabel, text: lastChartData.yLabel }
          }
        }
      }
    });
    if (chartStatusEl) chartStatusEl.textContent = "✅ Gráfico actualizado correctamente.";
  }

  function cambiarTipoGrafico() { renderChartInternal(); }
  window.cambiarTipoGrafico = cambiarTipoGrafico;

  // -------------------------------------------------------------
  // Helpers para gráfico multivariable (gráfico 2)
  // -------------------------------------------------------------
  function prepararDatosGraficoMultivariable(data) {
    lastChartDataMulti = data || null;
    const chartMultiStatusEl = document.getElementById("chartMultiStatus");
    if (!lastChartDataMulti ||
        !lastChartDataMulti.labels ||
        !lastChartDataMulti.labels.length ||
        !lastChartDataMulti.datasets ||
        !lastChartDataMulti.datasets.length) {
      if (chartMultiStatusEl) chartMultiStatusEl.textContent = "⚠️ No se generaron datos suficientes para el gráfico multivariable.";
      if (chartInstanceMulti) { chartInstanceMulti.destroy(); chartInstanceMulti = null; }
      return;
    }
    if (chartMultiStatusEl) {
      chartMultiStatusEl.textContent =
        "✅ Datos listos para el gráfico multivariable: " +
        (lastChartDataMulti.title || "gráfico multivariable a partir del resumen determinista.");
    }
    renderChartMultivariable();
  }

  function renderChartMultivariable() {
    const canvas = document.getElementById("chartCanvasMulti");
    const chartMultiStatusEl = document.getElementById("chartMultiStatus");
    if (!canvas ||
        !lastChartDataMulti ||
        !lastChartDataMulti.labels ||
        !lastChartDataMulti.labels.length ||
        !lastChartDataMulti.datasets ||
        !lastChartDataMulti.datasets.length) {
      if (chartMultiStatusEl) chartMultiStatusEl.textContent = "⚠️ Aún no hay datos para el gráfico multivariable.";
      return;
    }
    const ctx = canvas.getContext("2d");
    if (chartInstanceMulti) { chartInstanceMulti.destroy(); chartInstanceMulti = null; }
    chartInstanceMulti = new Chart(ctx, {
      type: "bar",
      data: {
        labels: lastChartDataMulti.labels,
        datasets: lastChartDataMulti.datasets.map(ds => ({
          label: ds.label,
          data: ds.values,
          fill: false
        }))
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: true },
          title: { display: !!lastChartDataMulti.title, text: lastChartDataMulti.title }
        },
        scales: {
          x: {
            title: { display: !!lastChartDataMulti.xLabel, text: lastChartDataMulti.xLabel },
            ticks: { autoSkip: true, maxRotation: 45, minRotation: 0 }
          },
          y: {
            beginAtZero: true,
            title: { display: !!lastChartDataMulti.yLabel, text: lastChartDataMulti.yLabel }
          }
        }
      }
    });
    if (chartMultiStatusEl) chartMultiStatusEl.textContent = "✅ Gráfico multivariable actualizado correctamente.";
  }

  // Exponer helpers a los modos (mínimo necesario)
  window.prepararDatosGrafico = prepararDatosGrafico;
  window.prepararDatosGraficoMultivariable = prepararDatosGraficoMultivariable;

  // -------------------------------------------------------------
  // Actualizar visibilidad de grupos de prompts
  // -------------------------------------------------------------
  function actualizarDisponibilidadPrompts() {
    const groupCompar = document.getElementById("group_comparaciones");
    const groupWhite  = document.getElementById("group_whiteness");
    const groupRes    = document.getElementById("group_resumen");
    const groupResp   = document.getElementById("group_response_rel");

    if (tiposDisponibles.comparaciones) groupCompar.classList.remove("hidden");
    else groupCompar.classList.add("hidden");

    if (tiposDisponibles.whiteness) groupWhite.classList.remove("hidden");
    else groupWhite.classList.add("hidden");

    if (tiposDisponibles.resumen) groupRes.classList.remove("hidden");
    else groupRes.classList.add("hidden");

    if (tiposDisponibles.response_rel) groupResp.classList.remove("hidden");
    else groupResp.classList.add("hidden");

    const activos = [];
    if (tiposDisponibles.comparaciones) activos.push("Comparaciones PRODUCT_TEST vs RESPONSE");
    if (tiposDisponibles.whiteness)     activos.push("Blancura por MONITOR (métricas WI)");
    if (tiposDisponibles.resumen)       activos.push("Resumen general / avanzado");
    if (tiposDisponibles.response_rel)  activos.push("RESPONSE vs otras columnas");

    if (!csvFile) {
      modeStatusEl.textContent =
        "Primero sube un CSV en la sección 1. Luego se activarán aquí los tipos de análisis compatibles.";
    } else if (!activos.length) {
      modeStatusEl.textContent =
        "CSV cargado, pero no se detectó ninguna configuración estándar. Puedes seguir usando un resumen general con el modo Resumen.";
    } else {
      modeStatusEl.textContent =
        "CSV cargado. Análisis disponibles: " + activos.join(" • ") +
        ". La sección 5 es determinista (navegador) y la 6 se genera en el backend con esa evidencia.";
    }
  }
  window.actualizarDisponibilidadPrompts = actualizarDisponibilidadPrompts;

  // -------------------------------------------------------------
  // Validación de columnas según modo
  // -------------------------------------------------------------
  function validarHeadersPorModo(mode, headers) {
    const hdr = headers || [];
    const set = new Set(hdr);

    if (mode === "comparaciones") {
      const needed = ["PRODUCT_TEST", "RESPONSE"];
      const faltantes = needed.filter(c => !set.has(c));
      if (faltantes.length > 0) {
        return { ok: false, mensaje: "faltan columnas requeridas (" + faltantes.join(", ") + ")." };
      }
      return { ok: true, mensaje: "" };
    }

    if (mode === "whiteness") {
      const base = ["MONITOR", "PRODUCT"];
      const faltantesBase = base.filter(c => !set.has(c));
      if (faltantesBase.length > 0) {
        return { ok: false, mensaje: "faltan columnas base " + faltantesBase.join(", ") + "." };
      }
      const algunaMetrica = whitenessMetrics.some(m => set.has(m));
      if (!algunaMetrica) {
        return { ok: false, mensaje: "no se encontró ninguna métrica WI esperada." };
      }
      return { ok: true, mensaje: "" };
    }

    if (mode === "resumen") {
      if (!hdr.length) return { ok: false, mensaje: "el CSV no tiene columnas detectables." };
      return { ok: true, mensaje: "" };
    }

    if (mode === "response_rel") {
      if (!set.has("RESPONSE")) return { ok: false, mensaje: "no se encuentra la columna RESPONSE." };
      return { ok: true, mensaje: "" };
    }

    return { ok: false, mensaje: "modo no reconocido." };
  }
  window.validarHeadersPorModo = validarHeadersPorModo;

  // -------------------------------------------------------------
  // Selección de prompt interno (SECCIÓN 2)
  // -------------------------------------------------------------
  function setModeInternal(mode, promptKey) {
    const questionEl  = document.getElementById("question");

    if (!csvFile) {
      modeStatusEl.textContent = "⚠️ Primero sube un CSV en la sección 1.";
      document.querySelectorAll('input[name="mode"]').forEach(r => { r.checked = false; });
      return;
    }

    if (mode === "comparaciones" && !tiposDisponibles.comparaciones) {
      modeStatusEl.textContent = "❌ CSV no compatible con Comparaciones (PRODUCT_TEST/RESPONSE).";
      document.querySelectorAll('input[name="mode"]').forEach(r => { r.checked = false; });
      return;
    }
    if (mode === "whiteness" && !tiposDisponibles.whiteness) {
      modeStatusEl.textContent = "❌ CSV no compatible con Blancura.";
      document.querySelectorAll('input[name="mode"]').forEach(r => { r.checked = false; });
      return;
    }
    if (mode === "resumen" && !tiposDisponibles.resumen) {
      modeStatusEl.textContent = "❌ CSV no válido para resumen.";
      document.querySelectorAll('input[name="mode"]').forEach(r => { r.checked = false; });
      return;
    }
    if (mode === "response_rel" && !tiposDisponibles.response_rel) {
      modeStatusEl.textContent = "❌ CSV no compatible con RESPONSE vs otras columnas.";
      document.querySelectorAll('input[name="mode"]').forEach(r => { r.checked = false; });
      return;
    }

    analysisMode = mode;

    // ✅ defaults por modo (siempre habrá promptKey válido)
    const defaults = {
      comparaciones: "comparaciones_basico",
      whiteness:     "whiteness_basico",
      resumen:       "resumen_basico",
      response_rel:  "response_basico"
    };
    currentPromptKey = promptKey || defaults[mode] || mode;

    questionEl.placeholder = "Prompt oficial cargado para el análisis elegido. Puedes ajustarlo si lo deseas…";

    // === TEXTOS DE LOS PROMPTS INTERNOS (TU CONTENIDO, IGUAL) ===
    if (mode === "comparaciones") {
      if (currentPromptKey === "comparaciones_basico") {
        questionEl.value = `Analiza el archivo OUTPUT_MAP_COMPARISONS.csv para identificar cuál es el producto con mejor desempeño general. Para ello, toma en cuenta únicamente las comparaciones en las que la columna RESPONSE tenga los valores 01.SUPERIOR o 02.SUPERIOR_TREND, que indican un resultado favorable para PRODUCT_TEST frente a PRODUCT_BENCH. Evalúa cuántas veces cada valor de PRODUCT_TEST alcanza un resultado superior en todas las combinaciones posibles de las columnas MODALITY, SCENARIOS, WASH, PROCESS, MONITOR, INDEX y THRESHOLD. El producto que más veces obtenga resultados favorables según estos dos valores de RESPONSE debe ser considerado como el de mejor desempeño. La conclusión debe presentarse en texto continuo, indicando claramente cuál es el producto con mejor rendimiento y por qué, basándose en la frecuencia con la que obtiene un desempeño superior en las comparaciones.`;
      } else if (currentPromptKey === "comparaciones_escenarios") {
        questionEl.value = `Analiza el archivo OUTPUT_MAP_COMPARISONS.csv poniendo el foco en cómo cambia el desempeño de los distintos PRODUCT_TEST según las columnas MODALITY, SCENARIOS, WASH y PROCESS. Identifica para cada una de estas columnas qué productos tienden a concentrar más respuestas 01.SUPERIOR y 02.SUPERIOR_TREND, señalando si hay formulaciones especialmente fuertes en determinados escenarios o modalidades y si existen contextos donde el rendimiento se reparte de forma más equilibrada. La explicación debe ser en texto continuo, resaltando las combinaciones producto–escenario más robustas y aquellas donde las diferencias entre productos parecen menos marcadas.`;
      } else {
        // fallback
        currentPromptKey = "comparaciones_basico";
        questionEl.value = `Analiza el archivo OUTPUT_MAP_COMPARISONS.csv para identificar cuál es el producto con mejor desempeño general. Para ello, toma en cuenta únicamente las comparaciones en las que la columna RESPONSE tenga los valores 01.SUPERIOR o 02.SUPERIOR_TREND, que indican un resultado favorable para PRODUCT_TEST frente a PRODUCT_BENCH. Evalúa cuántas veces cada valor de PRODUCT_TEST alcanza un resultado superior en todas las combinaciones posibles de las columnas MODALITY, SCENARIOS, WASH, PROCESS, MONITOR, INDEX y THRESHOLD. El producto que más veces obtenga resultados favorables según estos dos valores de RESPONSE debe ser considerado como el de mejor desempeño. La conclusión debe presentarse en texto continuo, indicando claramente cuál es el producto con mejor rendimiento y por qué, basándose en la frecuencia con la que obtiene un desempeño superior en las comparaciones.`;
      }
    } else if (mode === "whiteness") {
      if (currentPromptKey === "whiteness_basico") {
        questionEl.value = `Para cada uno de los valores únicos de la columna "MONITOR", identifica cuáles son los productos ("PRODUCT") que presentan los valores más altos en cada una de las métricas de blancura: "1.2.WI_STw" (blancura estándar), "2.2.WI_GEw" (blancura verdosa), "3.2.WI_VOw" (blancura violácea) y "4.2.WI_LGw" (blancura luminosa). Para cada caso, indica en qué combinaciones específicas de las variables "MODALITY", "SCENARIOS", "WASH" y "PROCESS" se presentan esos valores máximos. Luego, compara entre los distintos productos dentro de cada tipo de monitor, resaltando si algún producto se destaca de forma consistente en más de una métrica o en múltiples combinaciones. Finalmente, resume qué productos muestran un mejor desempeño global de blancura en función del tipo de monitor utilizado, considerando la frecuencia con la que aparecen con los valores más altos y la diversidad de condiciones en las que lo hacen.`;
      } else if (currentPromptKey === "whiteness_productos") {
        questionEl.value = `Utiliza los datos de blancura del CSV para construir un perfil de cada "PRODUCT" en términos de las métricas "1.2.WI_STw", "2.2.WI_GEw", "3.2.WI_VOw" y "4.2.WI_LGw" a través de todos los "MONITOR" disponibles. Describe en texto continuo qué productos se ubican con mayor frecuencia en los valores máximos de blancura, cuáles parecen más equilibrados entre varias métricas y cuáles destacan solo en una dimensión específica (por ejemplo, más verdosa o más luminosa). Indica también si hay productos que cambian mucho su posición relativa según el monitor utilizado, y qué implicaciones tiene esto para la lectura global de blancura.`;
      } else {
        currentPromptKey = "whiteness_basico";
        questionEl.value = `Para cada uno de los valores únicos de la columna "MONITOR", identifica cuáles son los productos ("PRODUCT") que presentan los valores más altos en cada una de las métricas de blancura: "1.2.WI_STw" (blancura estándar), "2.2.WI_GEw" (blancura verdosa), "3.2.WI_VOw" (blancura violácea) y "4.2.WI_LGw" (blancura luminosa). Para cada caso, indica en qué combinaciones específicas de las variables "MODALITY", "SCENARIOS", "WASH" y "PROCESS" se presentan esos valores máximos. Luego, compara entre los distintos productos dentro de cada tipo de monitor, resaltando si algún producto se destaca de forma consistente en más de una métrica o en múltiples combinaciones. Finalmente, resume qué productos muestran un mejor desempeño global de blancura en función del tipo de monitor utilizado, considerando la frecuencia con la que aparecen con los valores más altos y la diversidad de condiciones en las que lo hacen.`;
      }
    } else if (mode === "resumen") {
      if (currentPromptKey === "resumen_basico") {
        questionEl.value = `Haz un resumen general de la tabla del CSV, describiendo cuántas filas y columnas contiene, qué tipo de información parece dominar (columnas numéricas frente a categóricas) y cómo se distribuyen los valores. Menciona, de forma interpretativa, cuáles son las columnas que parecen más relevantes o más variadas y qué patrones generales se pueden intuir solamente a partir de los recuentos y de los rangos de valores. La explicación debe ir en texto continuo, sin listas, destacando las ideas principales sobre la estructura y el contenido de la tabla.`;
      } else if (currentPromptKey === "resumen_avanzado") {
        questionEl.value = `Elabora un resumen avanzado de la tabla combinando la descripción estructural (número de filas, columnas y tipos de variables) con una lectura más interpretativa de qué grupos de columnas parecen estar relacionados entre sí. Sin realizar inferencias causales, comenta qué bloques de variables pueden agruparse (por ejemplo, columnas de contexto experimental frente a columnas de resultados) y cómo podrían utilizarse en análisis posteriores más específicos. La explicación debe ser narrativa, destacando las conexiones más plausibles sólo a partir de la estructura y de los recuentos.`;
      } else {
        currentPromptKey = "resumen_basico";
        questionEl.value = `Haz un resumen general de la tabla del CSV, describiendo cuántas filas y columnas contiene, qué tipo de información parece dominar (columnas numéricas frente a categóricas) y cómo se distribuyen los valores. Menciona, de forma interpretativa, cuáles son las columnas que parecen más relevantes o más variadas y qué patrones generales se pueden intuir solamente a partir de los recuentos y de los rangos de valores. La explicación debe ir en texto continuo, sin listas, destacando las ideas principales sobre la estructura y el contenido de la tabla.`;
      }
    } else if (mode === "response_rel") {
      if (currentPromptKey === "response_basico") {
        questionEl.value = `Compara la distribución de los valores de la columna RESPONSE con lo que ocurre en el resto de columnas del CSV. Identifica qué valores de RESPONSE son más frecuentes y, para cada uno de ellos, describe qué patrones se observan en las columnas principales (productos, monitores, modalidades, escenarios, procesos, etc.). Explica de forma narrativa si hay combinaciones de valores que aparezcan más asociadas a determinados resultados de RESPONSE, resaltando las tendencias más claras que puedan deducirse únicamente de los recuentos.`;
      } else if (currentPromptKey === "response_extremos") {
        questionEl.value = `Profundiza en la columna RESPONSE distinguiendo claramente entre los resultados más favorables y los menos favorables. Para cada grupo (por ejemplo, valores que representan superioridad, empate o inferioridad), describe qué patrones se observan en las columnas de producto, monitor, modalidad y escenario. Explica en texto continuo qué combinaciones parecen asociarse con respuestas especialmente buenas y cuáles tienden a concentrar los peores resultados, utilizando únicamente recuentos y frecuencias obtenidos del CSV.`;
      } else {
        currentPromptKey = "response_basico";
        questionEl.value = `Compara la distribución de los valores de la columna RESPONSE con lo que ocurre en el resto de columnas del CSV. Identifica qué valores de RESPONSE son más frecuentes y, para cada uno de ellos, describe qué patrones se observan en las columnas principales (productos, monitores, modalidades, escenarios, procesos, etc.). Explica de forma narrativa si hay combinaciones de valores que aparezcan más asociadas a determinados resultados de RESPONSE, resaltando las tendencias más claras que puedan deducirse únicamente de los recuentos.`;
      }
    }

    modeStatusEl.textContent = "✅ Prompt interno seleccionado. La sección 5 se calculará en el navegador y se enviará al backend como evidencia.";
  }
  window.setMode = setModeInternal;

  // -------------------------------------------------------------
  // Manejo de subida de archivo
  // -------------------------------------------------------------
  function resetOutputs() {
    analysisMode = null;
    currentPromptKey = null;
    document.querySelectorAll('input[name="mode"]').forEach(r => { r.checked = false; });

    const questionEl = document.getElementById("question");
    questionEl.value = "";
    questionEl.placeholder =
      "Tras subir el CSV y elegir un tipo de análisis en la sección 2, aquí se cargará el prompt correspondiente…";

    // Reset sección 5/6
    const numericEl = document.getElementById("numericOutput");
    if (numericEl) {
      numericEl.textContent =
        "// Sección 5 — Resumen numérico determinista (generado en el navegador).\n" +
        "// Ejecuta “4. Analizar CSV” para generarlo aquí.";
    }
    const textEl = document.getElementById("textOutput");
    if (textEl) {
      textEl.textContent =
        "// Sección 6 — Explicación LLM.\n" +
        "// Se generará con tu prompt + evidencia numérica (sección 5).";
    }

    // Reset gráfico 1
    lastChartData = null;
    if (chartInstance) { chartInstance.destroy(); chartInstance = null; }
    const chartStatusEl = document.getElementById("chartStatus");
    if (chartStatusEl) chartStatusEl.textContent = "⚠️ Aún no hay datos para graficar. Ejecuta un análisis primero.";

    // Reset gráfico 2
    lastChartDataMulti = null;
    if (chartInstanceMulti) { chartInstanceMulti.destroy(); chartInstanceMulti = null; }
    const chartMultiStatusEl = document.getElementById("chartMultiStatus");
    if (chartMultiStatusEl) {
      chartMultiStatusEl.textContent =
        "⚠️ Aún no hay datos para el gráfico multivariable. Ejecuta un análisis compatible (por ejemplo, Comparaciones).";
    }
  }

  csvInputEl.addEventListener("change", (ev) => {
    const file = ev.target.files && ev.target.files[0];

    // Reset
    csvFile = null;
    csvHeaders = null;
    comparacionesDataset = null;
    resetOutputs();

    if (!file) {
      fileStatusEl.textContent = "⚠️ Ningún archivo seleccionado.";
      tiposDisponibles.comparaciones = false;
      tiposDisponibles.whiteness = false;
      tiposDisponibles.resumen = false;
      tiposDisponibles.response_rel = false;
      actualizarDisponibilidadPrompts();
      return;
    }

    fileStatusEl.textContent = "⏳ Leyendo archivo: " + file.name + "…";
    comparacionesDataset = detectarDatasetPorNombreArchivo(file.name);

    Papa.parse(file, {
      header: true,
      preview: 5,
      skipEmptyLines: true,
      complete: function(results) {
        const headers = results.meta && results.meta.fields ? results.meta.fields : [];
        csvHeaders = headers;

        const validCompar   = validarHeadersPorModo("comparaciones", headers);
        const validWhite    = validarHeadersPorModo("whiteness", headers);
        const validResumen  = validarHeadersPorModo("resumen", headers);
        const validRespRel  = validarHeadersPorModo("response_rel", headers);

        tiposDisponibles.comparaciones = !!validCompar.ok;
        tiposDisponibles.whiteness     = !!validWhite.ok;
        tiposDisponibles.resumen       = !!validResumen.ok;
        tiposDisponibles.response_rel  = !!validRespRel.ok;

        csvFile = file;

        const datasetTag = comparacionesDataset ? (" [" + comparacionesDataset + "]") : "";
        const disponibles = [];
        if (validCompar.ok)  disponibles.push("Comparación PRODUCT_TEST vs RESPONSE" + datasetTag);
        if (validWhite.ok)   disponibles.push("Blancura por MONITOR (métricas WI)");
        if (validRespRel.ok) disponibles.push("RESPONSE vs otras columnas");
        if (validResumen.ok) disponibles.push("Resumen general / avanzado");

        fileStatusEl.textContent =
          "✅ CSV cargado: " + file.name + ". " +
          (disponibles.length
            ? "Análisis posibles: " + disponibles.join(" • ") + "."
            : "Puedes usar un resumen general con el modo Resumen.");

        csvLabelEl.textContent =
          "Archivo CSV cargado. Si lo deseas, puedes cambiarlo por otro. Ahora elige en la sección 2 el tipo de análisis.";

        actualizarDisponibilidadPrompts();
      },
      error: function(err) {
        csvFile = null;
        csvHeaders = null;
        fileStatusEl.textContent = "❌ Error al leer el CSV: " + err;
        tiposDisponibles.comparaciones = false;
        tiposDisponibles.whiteness = false;
        tiposDisponibles.resumen = false;
        tiposDisponibles.response_rel = false;
        actualizarDisponibilidadPrompts();
      }
    });
  });

  // Inicial
  actualizarDisponibilidadPrompts();

  // -------------------------------------------------------------
  // Llamada al backend /generate_answer (Sección 6)
  // -------------------------------------------------------------
  async function pedirExplicacionDesdeBackend(userPrompt, numericSummary, mode) {
    const textEl = document.getElementById("textOutput");
    const llmStatusEl = document.getElementById("llmStatus");
    if (!textEl) return;

    const pregunta = (userPrompt || "").trim();
    const resumen  = (numericSummary || "").trim();

    textEl.textContent = "⏳ Llamando al backend /generate_answer…";

    try {
      const resp = await fetch(BACKEND_URL, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          mode: mode || "general",
          question: pregunta,
          numeric_summary: resumen
        })
      });

      if (!resp.ok) {
        let detail = "";
        try {
          const j = await resp.json();
          detail = (j && (j.detail || j.error)) ? String(j.detail || j.error) : "";
        } catch(_) {}
        const msg = "Respuesta HTTP no OK: " + resp.status + (detail ? ("\n" + detail) : "");
        console.error(msg);
        textEl.textContent =
          "❌ Error llamando al backend.\n" +
          msg +
          "\n\nLa sección 5 sí es determinista y ya se calculó en el navegador.";
        if (llmStatusEl) llmStatusEl.textContent = "❌ Backend respondió con error " + resp.status + ".";
        return;
      }

      const data = await resp.json();
      const answer = (data && data.answer) ? String(data.answer).trim() : "";

      if (!answer) {
        textEl.textContent =
          "⚠️ El backend no devolvió una respuesta de texto utilizable.\n" +
          "La sección 5 sí está disponible como evidencia determinista.";
        if (llmStatusEl) llmStatusEl.textContent = "⚠️ Backend sin respuesta de texto.";
      } else {
        textEl.textContent = answer;
        if (llmStatusEl) {
          llmStatusEl.textContent =
            "✅ Respuesta generada por el backend usando tu prompt (sección 3) + evidencia numérica determinista (sección 5).";
        }
      }
    } catch (err) {
      console.error("Error llamando al backend:", err);
      textEl.textContent =
        "❌ Error de red al llamar al backend /generate_answer.\n" +
        "Revisa tu conexión o el estado del Space en Hugging Face.";
      if (llmStatusEl) llmStatusEl.textContent = "❌ Error de red hacia el backend.";
    }
  }
  window.pedirExplicacionDesdeBackend = pedirExplicacionDesdeBackend;

  // -------------------------------------------------------------
  // Botón principal: analizar CSV (Sección 5 determinista + Sección 6 LLM)
  // -------------------------------------------------------------
  function analizarCSVInternal() {
    const statusEl  = document.getElementById("analysisStatus");
    const numericEl = document.getElementById("numericOutput");
    const textEl    = document.getElementById("textOutput");
    const question  = document.getElementById("question").value.trim();

    if (!csvFile) { statusEl.textContent = "⚠️ Sube primero el archivo CSV en la sección 1."; return; }
    if (!analysisMode) { statusEl.textContent = "⚠️ Elige un tipo de análisis en la sección 2."; return; }
    if (!question) { statusEl.textContent = "⚠️ El prompt de análisis (sección 3) no puede estar vacío."; return; }

    statusEl.textContent =
      "⏳ Generando resumen determinista (sección 5) y preparando llamada al LLM (sección 6)…";
    numericEl.textContent = "// Procesando CSV para generar el resumen determinista…";
    textEl.textContent = "// Esperando respuesta del LLM (sección 6)…";

    // Reset gráficos
    lastChartData = null;
    if (chartInstance) { chartInstance.destroy(); chartInstance = null; }
    const chartStatusEl = document.getElementById("chartStatus");
    if (chartStatusEl) chartStatusEl.textContent = "⏳ Preparando datos para posibles gráficos…";

    lastChartDataMulti = null;
    if (chartInstanceMulti) { chartInstanceMulti.destroy(); chartInstanceMulti = null; }
    const chartMultiStatusEl = document.getElementById("chartMultiStatus");
    if (chartMultiStatusEl) {
      chartMultiStatusEl.textContent = "⏳ Preparando datos para el gráfico multivariable (si el modo lo soporta)…";
    }

    const usarBackendLLM = true;

    if (analysisMode === "whiteness") {
      window.analizarBlancura(statusEl, numericEl, textEl, question, usarBackendLLM);
    } else if (analysisMode === "comparaciones") {
      window.analizarComparaciones(statusEl, numericEl, textEl, question, usarBackendLLM);
    } else if (analysisMode === "resumen") {
      window.analizarResumen(statusEl, numericEl, textEl, question, usarBackendLLM);
    } else if (analysisMode === "response_rel") {
      window.analizarResponseVsOtros(statusEl, numericEl, textEl, question, usarBackendLLM);
    }
  }

  window.analizarCSV = analizarCSVInternal;

})();