{% extends "base.html" %}
{% block title %}Live Coach — Banko AI{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto p-6">
  <header class="mb-6 flex items-center justify-between">
    <div>
      <h1 class="text-2xl font-bold">Live Coach</h1>
      <p class="text-gray-600 text-sm">
        Real-time, event-driven nudges. New cards appear as signals stream in.
      </p>
    </div>
    <div id="conn-state" class="text-xs px-3 py-1 rounded-full bg-gray-200">
      connecting...
    </div>
  </header>

  <div id="nudge-feed" class="space-y-3" aria-live="polite"></div>

  <div id="empty-state" class="text-center py-12 text-gray-400">
    No nudges yet. Run
    <code class="bg-gray-100 px-2 py-1 rounded">
      python scripts/coach/mock_signals.py --type=budget_threshold
    </code>
    to fire one.
  </div>
</div>

<template id="nudge-card-tpl">
  <article class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm
                  transition-opacity duration-300 opacity-0">
    <div class="flex items-center justify-between mb-2">
      <span class="text-xs font-medium px-2 py-1 rounded badge"></span>
      <span class="text-xs text-gray-400 timestamp"></span>
    </div>
    <p class="text-gray-900 message mb-3"></p>
    <div class="flex items-center gap-3 text-xs">
      <button class="text-blue-600 hover:underline evidence-toggle">
        show evidence
      </button>
      <span class="text-gray-400 provider"></span>
    </div>
    <pre class="evidence hidden bg-gray-50 text-xs p-3 mt-3 rounded
                overflow-auto max-h-60"></pre>
    <form class="reply-form mt-3 flex gap-2" data-nudge-id="">
      <input type="text" name="reply" placeholder="Reply to Coach..."
             class="flex-1 border rounded px-3 py-1 text-sm" />
      <button class="bg-blue-600 text-white px-3 py-1 rounded text-sm">
        Send
      </button>
    </form>
    <div class="reply-output text-sm text-gray-700 mt-2 hidden"></div>
  </article>
</template>

<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script>
const userId = "{{ user_id }}";
const room = `coach:${userId}`;
const feed = document.getElementById("nudge-feed");
const emptyState = document.getElementById("empty-state");
const connState = document.getElementById("conn-state");

const SEVERITY_CLASSES = {
  info:     "bg-blue-100 text-blue-800",
  warn:     "bg-yellow-100 text-yellow-800",
  critical: "bg-red-100 text-red-800",
};

function renderNudge(n) {
  emptyState.classList.add("hidden");
  const tpl = document.getElementById("nudge-card-tpl").content.cloneNode(true);
  const card = tpl.querySelector("article");
  card.querySelector(".badge").textContent =
    `${n.signal_type} · ${n.severity}`;
  card.querySelector(".badge").className +=
    " " + (SEVERITY_CLASSES[n.severity] || "bg-gray-100 text-gray-800");
  card.querySelector(".timestamp").textContent =
    new Date().toLocaleTimeString();
  card.querySelector(".message").textContent = n.message;
  card.querySelector(".provider").textContent =
    `via ${n.provider_used || "unknown"}`;

  const form = card.querySelector(".reply-form");
  form.dataset.nudgeId = n.nudge_id;
  form.addEventListener("submit", (ev) => {
    ev.preventDefault();
    const replyText = form.querySelector('input[name="reply"]').value.trim();
    if (!replyText) return;
    sendReply(form, n.nudge_id, replyText);
  });

  const toggle = card.querySelector(".evidence-toggle");
  const evidence = card.querySelector(".evidence");
  toggle.addEventListener("click", async () => {
    if (!evidence.dataset.loaded) {
      const r = await fetch(`/api/coach/nudges/${n.nudge_id}`);
      const data = await r.json();
      evidence.textContent = JSON.stringify(data.tool_trace || [], null, 2);
      evidence.dataset.loaded = "1";
    }
    evidence.classList.toggle("hidden");
    toggle.textContent = evidence.classList.contains("hidden")
      ? "show evidence" : "hide evidence";
  });

  feed.prepend(card);
  requestAnimationFrame(() => card.classList.remove("opacity-0"));
}

async function sendReply(form, nudgeId, message) {
  const out = form.parentElement.querySelector(".reply-output");
  out.textContent = "Coach is thinking...";
  out.classList.remove("hidden");
  const r = await fetch("/api/coach/chat", {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({nudge_id: nudgeId, message,
                           thread_id: `nudge-${nudgeId}`}),
  });
  const data = await r.json();
  out.textContent = data.message || ("Error: " + (data.error || "unknown"));
}

async function loadRecent() {
  const r = await fetch(`/api/coach/nudges?limit=20`);
  const data = await r.json();
  for (const n of (data.nudges || []).reverse()) {
    renderNudge({
      nudge_id: n.nudge_id, message: n.message,
      provider_used: n.provider_used,
      signal_type: n.signal_type || "unknown",
      severity: n.severity || "info",
    });
  }
}

const socket = io({transports: ["websocket", "polling"]});
socket.on("connect", () => {
  connState.textContent = "connected";
  connState.className = "text-xs px-3 py-1 rounded-full bg-green-100 text-green-800";
  socket.emit("coach.join", {user_id: userId});
});
socket.on("disconnect", () => {
  connState.textContent = "disconnected";
  connState.className = "text-xs px-3 py-1 rounded-full bg-red-100 text-red-800";
});
socket.on("coach.nudge", (payload) => {
  if (payload.user_id !== userId) return;
  renderNudge(payload);
});

loadRecent();
</script>
{% endblock %}