/* Live-sessies — het overzicht van je eigen live-sessies, met per sessie de twee
   downloads. Bewust alleen een lijst: de grafieken en de PDF worden op
   /live/sessierapport.html gemaakt, want live-viz.js plus jsPDF zijn samen 400+ KB
   en die horen niet in élke dashboardlading van élke educator. */
function LiveSessies() {
  const [sessies, setSessies] = React.useState(null);
  const [fout, setFout] = React.useState("");

  React.useEffect(() => {
    fetch("/api/live/sessions", { credentials: "same-origin" })
      .then((r) => {
        if (r.status === 401) throw new Error("Log opnieuw in om je sessies te zien.");
        if (!r.ok) throw new Error("De sessies ophalen mislukte (status " + r.status + ").");
        return r.json();
      })
      .then((d) => setSessies(d.sessions || []))
      .catch((e) => { setFout(e.message); setSessies([]); });
  }, []);

  const datum = (sec) => sec ? new Date(sec * 1000).toLocaleDateString("nl-NL",
    { day: "numeric", month: "short", year: "numeric" }) : "—";

  return (
    <div style={{ padding: 20 }}>
      <h1 style={{ fontSize: 22, margin: "0 0 4px" }}>Live-sessies</h1>
      <p style={{ color: "var(--ink3)", margin: "0 0 18px", fontSize: 13.5 }}>
        Elke sessie die je hebt gedraaid, met de deelnemers en antwoorden als CSV en het
        volledige rapport met alle uitslagen.
      </p>
      {fout && <div style={{ background: "#fdecea", border: "1px solid #f5c6c0", borderRadius: 10,
        padding: "10px 12px", marginBottom: 14, fontSize: 13.5 }}>{fout}</div>}
      {sessies === null && <div style={{ color: "var(--ink3)", fontSize: 13.5 }}>Bezig met laden…</div>}
      {sessies !== null && !sessies.length && !fout &&
        <div style={{ color: "var(--ink3)", fontSize: 13.5 }}>
          Je hebt nog geen live-sessie gedraaid. Start er een vanuit een event, tab Presentatie.
        </div>}
      {!!(sessies && sessies.length) &&
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13.5 }}>
          <thead>
            <tr style={{ textAlign: "left", color: "var(--ink3)", fontSize: 11.5, textTransform: "uppercase", letterSpacing: ".08em" }}>
              <th style={{ padding: "6px 8px" }}>Datum</th>
              <th style={{ padding: "6px 8px" }}>Code</th>
              <th style={{ padding: "6px 8px" }}>Event</th>
              <th style={{ padding: "6px 8px" }}>Deelnemers</th>
              <th style={{ padding: "6px 8px" }}>Downloads</th>
            </tr>
          </thead>
          <tbody>
            {sessies.map((s) =>
              <tr key={s.id} style={{ borderTop: "1px solid var(--line)" }}>
                <td style={{ padding: "8px" }}>{datum(s.ended_at || s.created_at)}</td>
                <td style={{ padding: "8px", fontFamily: "var(--display)" }}>{s.code}</td>
                <td style={{ padding: "8px", color: s.event_titel ? "inherit" : "var(--ink3)" }}>
                  {s.event_titel || "losse sessie"}
                </td>
                <td style={{ padding: "8px" }}>{s.participants}</td>
                <td style={{ padding: "8px", display: "flex", gap: 12 }}>
                  <a href={"/api/live/export?code=" + s.code} download
                     style={{ color: "var(--accent)", fontWeight: 600 }}>CSV</a>
                  <a href={"/live/sessierapport.html?s=" + s.code} target="_blank" rel="noopener"
                     style={{ color: "var(--accent)", fontWeight: 600 }}>Rapport</a>
                </td>
              </tr>
            )}
          </tbody>
        </table>}
    </div>);
}
Object.assign(window, { LiveSessies });