{% extends "lanexam/base.html" %}
{% block title %}Invigilator · {{ session.title }}{% endblock %}
{% block style %}
<style>
  main { max-width:1150px; }
  .head { display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap;
    justify-content:space-between; }
  .code { font-size:clamp(1.9rem,6vw,2.9rem); font-weight:800; letter-spacing:.12em;
    line-height:1; background:linear-gradient(135deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
  .controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .mode { border:1.5px solid var(--line); background:var(--card); color:var(--ink);
    border-radius:11px; padding:9px 14px; font:inherit; font-weight:700;
    font-size:.9rem; cursor:pointer; }
  .mode[aria-pressed="true"] { background:var(--accent); color:#fff; border-color:var(--accent); }
  .mode.permit[aria-pressed="true"] { background:var(--warn); border-color:var(--warn); }
  .mode.pause[aria-pressed="true"] { background:var(--muted); border-color:var(--muted); }
  .strip { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:16px 0; }
  .stat { background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:12px 14px; }
  .stat b { display:block; font-size:1.7rem; font-weight:800; line-height:1.1; }
  .stat span { font-size:.74rem; color:var(--muted); font-weight:700; letter-spacing:.03em; }
  .stat.bad b { color:var(--bad); } .stat.warn b { color:var(--warn); }
  .stat.good b { color:var(--good); }
  @media (max-width:640px){ .strip{ grid-template-columns:repeat(2,1fr);} }

  #popups { display:flex; flex-direction:column; gap:10px; margin:6px 0 14px; }
  .popup { border:1.5px solid var(--warn); background:var(--warn-soft); color:var(--ink);
    border-radius:14px; padding:12px 16px; display:flex; align-items:center;
    gap:12px; flex-wrap:wrap; }
  .popup.app { border-color:var(--accent); background:var(--accent-soft); }
  .popup .txt { font-weight:700; font-size:.94rem; flex:1 1 260px; }
  .popup .txt small { display:block; font-weight:600; color:var(--muted); }
  .popup .acts { display:flex; gap:6px; flex-wrap:wrap; }
  .chip { display:inline-block; font-size:.62rem; font-weight:800;
    letter-spacing:.08em; padding:2px 6px; border-radius:6px;
    background:var(--muted); color:var(--surface); vertical-align:middle;
    margin-right:6px; }
  .popup.app .chip { background:var(--accent); color:#fff; }
  .mini { border:1px solid var(--line); background:var(--card); color:var(--ink);
    border-radius:9px; padding:7px 11px; font:inherit; font-weight:700;
    font-size:.82rem; cursor:pointer; }
  .mini.deny { color:var(--bad); border-color:var(--bad); }
  .mini.allow { color:var(--good); border-color:var(--good); }
  .mini.dark { background:var(--ink); color:var(--bg); border-color:var(--ink); }

  .grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
  .tile { background:var(--card); border:1.5px solid var(--line); border-radius:16px;
    padding:14px; cursor:pointer; text-align:left; font:inherit; color:inherit;
    position:relative; }
  .tile:hover { border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); }
  .tile .who { font-weight:800; display:block; }
  .tile .sub { font-size:.76rem; color:var(--muted); font-weight:600; margin-bottom:8px; }
  .tile .fg { font-size:.78rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; }
  .tile .pips { position:absolute; top:12px; right:12px; display:flex; gap:5px; }
  .dot { width:9px; height:9px; border-radius:50%; background:var(--muted); }
  .dot.on { background:var(--good); } .dot.off { background:var(--bad); }
  .tile .badges { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
  .b { font-size:.72rem; font-weight:800; padding:3px 8px; border-radius:99px;
    background:var(--accent-soft); color:var(--accent); }
  .b.red { background:var(--bad-soft); color:var(--bad); }
  .b.warn { background:var(--warn-soft); color:var(--warn); }
  .tile.warning { border-color:var(--warn); background:var(--warn-soft); }
  .tile.flagged { border-color:var(--bad); background:var(--bad-soft); }
  .tile.submitted { opacity:.65; }
  .tile.offline { opacity:.5; border-style:dashed; }

  .empty { text-align:center; padding:40px 20px; color:var(--muted); }

  /* drawer */
  #drawer { position:fixed; inset:0; z-index:100; display:none; }
  #drawer.on { display:block; }
  .scrim { position:absolute; inset:0; background:rgba(10,12,20,.45); }
  .panel { position:absolute; right:0; top:0; bottom:0; width:min(560px,94vw);
    background:var(--bg); border-left:1px solid var(--line); overflow-y:auto;
    padding:20px 20px 60px; box-shadow:-8px 0 30px rgba(0,0,0,.2); }
  .panel h2 { margin-bottom:2px; } .panel .x { float:right; cursor:pointer;
    font-size:1.4rem; color:var(--muted); background:none; border:0; }
  .drow { display:flex; gap:10px; align-items:baseline; padding:9px 12px;
    border-left:3px solid var(--line); background:var(--card); border-radius:0 10px 10px 0;
    margin-bottom:6px; }
  .drow.red { border-left-color:var(--bad); } .drow.warn { border-left-color:var(--warn); }
  .drow .at { font-variant-numeric:tabular-nums; font-weight:800; font-size:.8rem;
    color:var(--muted); min-width:52px; }
  .drow .what { font-size:.88rem; font-weight:600; }
  .drow .what small { color:var(--muted); font-weight:600; }
  .drow.red .what { color:var(--bad); font-weight:700; }
  .shot { margin-top:6px; } .shot img { max-width:180px; border-radius:8px;
    border:1px solid var(--line); display:block; }
  .rulebar { display:flex; gap:6px; margin:12px 0; flex-wrap:wrap; }
  .rulebar input { flex:1; padding:9px 12px; border:1.5px solid var(--line);
    border-radius:10px; background:var(--card); color:var(--ink); font:inherit; }
</style>
{% endblock %}
{% block content %}
<div class="head">
  <div>
    <div class="small muted" style="font-weight:700">SESSION CODE</div>
    <div class="code">{{ session.code }}</div>
    <div class="small muted">{{ session.title }} · {{ session.minutes }} min
      {% if session.platform %}· {{ session.platform }}{% endif %}</div>
  </div>
  <div class="controls">
    <button class="mode" data-mode="monitoring" aria-pressed="true">Monitoring</button>
    <button class="mode permit" data-mode="permitted">Allow lookup</button>
    <button class="mode pause" data-mode="paused">Pause</button>
    <a class="mini" href="{% url 'lan_csv' session.code %}">CSV</a>
    <a class="mini" href="{% url 'lan_xlsx' session.code %}">Excel</a>
    <button class="mini deny" id="endbtn">End exam</button>
  </div>
</div>

<div id="popups"></div>
<p class="small muted" id="board-connection" role="status">Connecting to the teacher server…</p>

<div class="strip">
  <div class="stat"><b id="s-total">0</b><span>STUDENTS</span></div>
  <div class="stat good"><b id="s-on">0</b><span>ONLINE</span></div>
  <div class="stat warn"><b id="s-warn">0</b><span>WINDOW SEEN</span></div>
  <div class="stat bad"><b id="s-flag">0</b><span>FLAGGED</span></div>
  <div class="stat bad"><b id="s-deny">0</b><span>FLAGS FOR REVIEW</span></div>
</div>

<div class="grid" id="grid"></div>
<div class="empty" id="empty">
  <p>Waiting for students to join.</p>
  <p class="small">Read out the code above. On each PC, open the launcher,
     type the code, name and roll number.</p>
</div>

<div id="drawer">
  <div class="scrim" id="scrim"></div>
  <div class="panel" id="panel"></div>
</div>
{% endblock %}

{% block script %}
<script>
  const CODE = "{{ session.code }}";
  const STATUS = "{% url 'lan_status' session.code %}";
  const SET_MODE = "{% url 'lan_mode' session.code %}";
  const SET_RULE = "{% url 'lan_rule' session.code %}";
  const END = "{% url 'lan_end' session.code %}";
  const CSRF = "{{ csrf_token }}";
  const $ = (id) => document.getElementById(id);
  const esc = (s) => String(s).replace(/[&<>"']/g,(c)=>(
    {"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]));
  const mmss = (s) => `${Math.floor(s/60)}:${String(s%60).padStart(2,"0")}`;

  let openSid = null;

  async function post(url, body) {
    const r = await fetch(url, { method:"POST",
      headers:{ "X-CSRFToken":CSRF, "Content-Type":"application/x-www-form-urlencoded" },
      body: new URLSearchParams(body) });
    if (!r.ok) {
      $("board-connection").textContent = "Change was not saved. Check your connection and retry.";
      $("board-connection").style.color = "var(--bad)";
      return false;
    }
    return true;
  }

  /* ---- mode + end ---- */
  document.querySelectorAll(".mode").forEach((b) =>
    b.onclick = () => setMode(b.dataset.mode));
  function setMode(mode) {
    document.querySelectorAll(".mode").forEach((b) =>
      b.setAttribute("aria-pressed", String(b.dataset.mode === mode)));
    post(SET_MODE, { mode }).then(poll).catch(() => boardOffline());
  }
  $("endbtn").onclick = async () => {
    if (!confirm("End the exam for everyone? Monitoring stops and no new "
      + "students can join. The record stays.")) return;
    try { await post(END, {}); poll(); } catch (_) { boardOffline(); }
  };

  /* ---- rulings ---- */
  async function rule(target, ruling, student, kind) {
    const body = { target, ruling, kind: kind || "site" };
    if (student && student !== "all") body.student = student;
    try { if (!await post(SET_RULE, body)) return; } catch (_) { boardOffline(); return; }
    poll();
    if (openSid) openDrawer(openSid, true);
  }

  /* ---- render ---- */
  function render(data) {
    const rows = data.students || [];
    $("empty").style.display = rows.length ? "none" : "";

    $("s-total").textContent = rows.length;
    $("s-on").textContent = rows.filter((s)=>s.browser_online||s.agent_online).length;
    $("s-warn").textContent = rows.filter((s)=>s.screen==="warning").length;
    $("s-flag").textContent = rows.filter((s)=>s.reds>0 && !s.submitted).length;
    let deny = 0; (data.feed||[]).forEach((e)=>{ if(e.kind==="website"&&e.ruling==="deny") deny++; });
    $("s-deny").textContent = rows.reduce((a,s)=>a+(s.reds||0),0);

    document.querySelectorAll(".mode").forEach((b)=>
      b.setAttribute("aria-pressed", String(b.dataset.mode===(data.mode||"monitoring"))));

    $("grid").innerHTML = rows.map((s) => {
      let cls = s.submitted ? "submitted" : (!s.browser_online && !s.agent_online ? "offline" : "");
      if (!s.submitted && s.screen === "flagged") cls = "flagged";
      else if (!s.submitted && s.screen === "warning") cls = "warning";
      const badges = [];
      if (!s.agent_online && !s.submitted) badges.push(`<span class="b red">agent offline</span>`);
      if (s.sensor_issues?.length) badges.push(`<span class="b warn">sensor attention: ${esc(s.sensor_issues.join(', '))}</span>`);
      if (!s.submitted) badges.push(`<span class="b ${s.monitoring_ok ? '' : 'red'}">${s.mode === 'paused' && s.monitoring_ok ? 'ML paused by invigilator' : s.monitoring_ok ? 'ML active' : 'ML not ready'}</span>`);
      if (s.mode === "paused") badges.push(`<span class="b">paused</span>`);
      if (s.reds) badges.push(`<span class="b red">${s.reds} flag${s.reds>1?"s":""}</span>`);
      if (s.sites) badges.push(`<span class="b warn">${s.sites} site${s.sites>1?"s":""}</span>`);
      if (s.submitted) badges.push(`<span class="b">done · ${s.score}</span>`);
      return `<button class="tile ${cls}" data-id="${s.id}">
        <span class="pips">
          <span class="dot ${s.browser_online?'on':'off'}" title="browser"></span>
          <span class="dot ${s.agent_online?'on':'off'}" title="agent"></span></span>
        <span class="who">${esc(s.name)}</span>
        <span class="sub">${esc(s.roll||"—")} · ${esc(s.pc||"?")} · ${esc(s.ip||"")}</span>
        <span class="fg">${esc(s.fg||"—")}</span>
        <span class="badges">${badges.join("")}</span></button>`;
    }).join("");
    document.querySelectorAll(".tile").forEach((t)=>
      t.onclick = () => openDrawer(t.dataset.id));

    renderPopups(data.popups || []);
  }

  function renderPopups(popups) {
    $("popups").innerHTML = popups.map((p) => {
      const app = p.type === "app";
      const verb = app ? "has" : "looked up";
      const tail = app ? " in front" : "";
      const sub = p.detail ? esc(p.detail) + (app ? ` · ${esc(p.target)}` : "")
                           : esc(p.target);
      return `<div class="popup ${app?"app":""}">
        <div class="txt"><span class="chip">${app?"APP":"SITE"}</span>
          ${esc(p.who)} ${verb} <b>${esc(p.label)}</b>${tail}
          <small>${sub}</small></div>
        <div class="acts">
          <button class="mini allow" data-k="${p.type}" data-t="${esc(p.target)}" data-s="${p.sid}" data-r="allow">Allow ${esc(firstName(p.who))}</button>
          <button class="mini deny" data-k="${p.type}" data-t="${esc(p.target)}" data-s="${p.sid}" data-r="deny">Deny ${esc(firstName(p.who))}</button>
          <button class="mini" data-k="${p.type}" data-t="${esc(p.target)}" data-s="all" data-r="allow">Allow all</button>
          <button class="mini dark" data-k="${p.type}" data-t="${esc(p.target)}" data-s="all" data-r="deny">Deny all</button>
        </div></div>`;
    }).join("");
    $("popups").querySelectorAll("button").forEach((b)=>
      b.onclick = () => rule(b.dataset.t, b.dataset.r, b.dataset.s, b.dataset.k));
  }
  const firstName = (n) => String(n).split(" ")[0];

  /* ---- drawer: one student's evidence ---- */
  async function openDrawer(sid, keep) {
    if (keep && document.activeElement?.id === "dom") return;
    openSid = sid;
    if (!keep) $("drawer").classList.add("on");
    const r = await fetch(`{% url 'lan_studentlog' session.code 0 %}`.replace(/0\/$/, sid+"/"),
      { cache:"no-store" });
    if (!r.ok) return;
    const d = await r.json();
    const s = d.student;
    const NAME = {
      website:["","Website"], window:["","Window"], process:["","Program"],
      usb:["warn","USB drive"], clipboard:["","Clipboard"],
      screen_flag:["red","Screen"], join:["","Joined"], submit:["","Submitted"],
      ruling:["","Ruling"], ended:["","Exam ended"], note:["","Note"] };
    const rows = d.events.map((e) => {
      const [defcls, base] = NAME[e.kind] || ["", e.kind];
      const cls = e.sev === "red" ? "red" : (e.sev === "warn" ? "warn" : defcls);
      const dt = e.detail || {};
      let what = dt.label || dt.domain || dt.title || dt.name || dt.event || dt.text || "";
      if (e.kind === "clipboard") what = dt.into_exam ? "Pasted into exam" : "Clipboard changed";
      if (e.kind === "website" && e.ruling) what += ` · ${e.ruling}`;
      const shot = e.shot ? `<div class="shot"><a href="{% url 'lan_shot' session.code 0 %}`
        .replace(/0\/$/, e.shot+"/") + `" target="_blank">
        <img src="{% url 'lan_shot' session.code 0 %}`.replace(/0\/$/, e.shot+"/")
        + `" loading="lazy"></a></div>` : "";
      return `<div class="drow ${cls}"><span class="at">${mmss(e.elapsed)}</span>
        <span class="what">${esc(base)} <small>${esc(String(what))}</small>${shot}</span></div>`;
    }).join("");

    $("panel").innerHTML = `
      <button class="x" id="closex">×</button>
      <h2>${esc(s.name)}</h2>
      <p class="small muted">${esc(s.roll||"—")} · ${esc(s.pc||"?")} · ${esc(s.ip||"")}
        · agent ${s.agent_online?"online":"offline"} · browser ${s.browser_online?"online":"offline"}
        ${s.submitted?`· submitted (${s.score})`:""}</p>
      <div class="rulebar">
        <button class="mini" data-mode="permitted">Allow lookup for ${esc(firstName(s.name))}</button>
        <button class="mini" data-mode="paused">Pause</button>
        <button class="mini" data-mode="monitoring">Resume</button>
      </div>
      <div class="rulebar">
        <input id="dom" placeholder="type a domain, e.g. chatgpt.com">
        <button class="mini allow" id="da">Allow</button>
        <button class="mini deny" id="dd">Deny</button>
      </div>
      <h2 style="font-size:.95rem;margin:16px 0 8px">Evidence (${d.events.length})</h2>
      ${rows || '<p class="muted small">Nothing recorded yet.</p>'}`;

    $("closex").onclick = closeDrawer;
    $("panel").querySelectorAll("[data-mode]").forEach((b)=>
      b.onclick = () => { post(SET_MODE, { mode:b.dataset.mode, student:sid }).then(poll).catch(boardOffline); });
    $("da").onclick = () => { const v=$("dom").value.trim(); if(v) rule(v,"allow",sid); };
    $("dd").onclick = () => { const v=$("dom").value.trim(); if(v) rule(v,"deny",sid); };
  }
  function closeDrawer(){ openSid=null; $("drawer").classList.remove("on"); }
  $("scrim").onclick = closeDrawer;

  let polling = false;
  function boardOffline() {
    $("board-connection").style.color = "var(--bad)";
    $("board-connection").textContent = "Dashboard disconnected. Student status below may be stale. Reconnecting…";
  }
  async function poll() {
    if (polling) return;
    polling = true;
    try { const r = await fetch(STATUS, { cache:"no-store" });
      if (!r.ok) throw new Error("Status unavailable");
      const data = await r.json(); render(data);
      $("board-connection").style.color = "var(--muted)";
      $("board-connection").textContent = `${data.active ? "Exam live" : "Exam ended"} · Updated ${new Date().toLocaleTimeString()} · Flags are observations for review`;
      if (openSid) openDrawer(openSid, true).catch(boardOffline);
    } catch (_) { boardOffline(); }
    finally { polling = false; }
  }
  poll(); setInterval(poll, 2500);
</script>
{% endblock %}