window.addEventListener("load", function () {
  const levelSelect = document.querySelectorAll("select")[1];
  const outputBox = document.querySelector("textarea[aria-label='📝 Transcription & Correction']");
  const historyContainer = document.querySelector("#history-output");

  const savedLevel = localStorage.getItem("level");
  if (savedLevel && levelSelect) levelSelect.value = savedLevel;

  // Crear botón para borrar historial
  const clearBtn = document.createElement("button");
  clearBtn.textContent = "🗑️ Borrar historial";
  clearBtn.style.marginTop = "10px";
  clearBtn.style.padding = "5px 10px";
  clearBtn.style.backgroundColor = "#ffdddd";
  clearBtn.style.border = "1px solid #d33";
  clearBtn.style.cursor = "pointer";
  clearBtn.style.fontWeight = "bold";

  // Insertar botón después del contenedor principal
  if (historyContainer && historyContainer.parentNode) {
    historyContainer.parentNode.insertBefore(clearBtn, historyContainer.nextSibling);
  }

  function mostrarCorrecciones(level) {
    const stored = JSON.parse(localStorage.getItem("corrections_by_level") || "{}");
    const frases = stored[level] || [];

    if (outputBox) {
      const formatted = frases.map((c, i) => `#${i + 1}: ${c}`).join("\n");
      outputBox.placeholder = frases.length
        ? `Last 3 corrected for level "${level}":\n${formatted}`
        : `No corrections yet for level "${level}".`;
    }

    if (historyContainer) {
      historyContainer.innerHTML = frases.length
        ? `<h4>📚 Últimas correcciones para <b>${level}</b></h4><ul>` +
            frases.map(f => `<li>${f}</li>`).join("") +
          `</ul>`
        : `<h4>📚 No hay correcciones previas para <b>${level}</b></h4>`;
    }
  }

  const currentLevel = levelSelect?.value || "General";
  mostrarCorrecciones(currentLevel);

  levelSelect?.addEventListener("change", () => {
    localStorage.setItem("level", levelSelect.value);
    mostrarCorrecciones(levelSelect.value);
  });

  const observer = new MutationObserver(() => {
    const newText = outputBox?.value;
    if (!newText) return;

    const match = newText.match(/✅ \*\*Corrected:\*\* (.+?)\n/);
    if (match && match[1]) {
      const corrected = match[1];
      const currentLevel = levelSelect?.value || "General";

      const stored = JSON.parse(localStorage.getItem("corrections_by_level") || "{}");
      stored[currentLevel] = [corrected, ...(stored[currentLevel] || [])].slice(0, 3);
      localStorage.setItem("corrections_by_level", JSON.stringify(stored));
      mostrarCorrecciones(currentLevel);
    }
  });

  if (outputBox) {
    observer.observe(outputBox, { childList: true, subtree: true });
  }

  clearBtn.addEventListener("click", () => {
    if (confirm("¿Estás seguro de que quieres borrar todo el historial de correcciones?")) {
      localStorage.removeItem("corrections_by_level");
      mostrarCorrecciones(levelSelect?.value || "General");
    }
  });
});