{% extends "admin_base.html" %}

{% set active_page = 'confused' %}
{% set title = 'Live Confusion Alerts' %}

{% block head_extra %}
  <script src="{{ url_for('static', filename='js/socket.io.min.js') }}"></script>
{% endblock %}

{% block admin_content %}
<div class="max-w-3xl mx-auto mt-12 px-4">
  <h1 class="text-3xl font-bold mb-6 dark:text-white">Live Confusion Alerts</h1>
  <div id="notif-list" class="space-y-4 text-gray-700">
    <p class="italic text-gray-500">Waiting for students to click "I'm confused…"</p>
  </div>
</div>
{% endblock admin_content %}

{% block scripts %}{% endblock %}{# No Flowbite needed #}

{% block scripts_extra %}
<script>
  const notifList = document.getElementById("notif-list");
  const socket = io({ transports: ['websocket'] });

  socket.on("confused", data => {
    if (notifList.children.length === 1 &&
        notifList.children[0].classList.contains("italic")) {
      notifList.innerHTML = "";
    }

    const box = document.createElement("div");
    box.className = [
      "flex items-start",
      "bg-red-50 border border-red-400",
      "text-red-800 px-4 py-3 rounded-lg shadow",
      "relative"
    ].join(" ");

    const who = data.who || "Someone";
    const now = new Date().toLocaleTimeString();
    box.innerHTML = `
      <div class="flex-1">
        <strong class="font-semibold">Confused!</strong>
        <p>${who} clicked "I'm confused." at ${now}</p>
      </div>
    `;

    const btn = document.createElement("button");
    btn.className = "ml-4 text-red-600 hover:text-red-900 focus:outline-none";
    btn.setAttribute("aria-label", "Dismiss");
    btn.innerHTML = "&times;";
    btn.onclick = () => box.remove();
    box.appendChild(btn);

    notifList.prepend(box);
    setTimeout(() => box.remove(), 20000);
  });
</script>
{% endblock %}