/* educator-event-presentatie.jsx — de Presentatie-tab in het eventdetail (spec §4c.1).
   Deck koppelen uit Courseware, sessie beheren (één actieve per event), presenteren.
   De studio is hier exact dezelfde functie als onder Products: window.StudyBuilder. */

const PT_STATUS = { draft: "concept", live: "live", ended: "afgelopen" };

function PresentatieTab({ ev }) {
  const seed = !!ev.__seed;
  const [fout, setFout] = useState("");
  const [decks, setDecks] = useState(null);          // null = nog laden
  const [deckId, setDeckId] = useState(ev.deckId || null);
  const [builder, setBuilder] = useState(null);       // deck-record → StudyBuilder
  const [sessies, setSessies] = useState([]);
  const [busy, setBusy] = useState(false);

  const actief = sessies.find((s) => s.state !== "ended") || null;
  const klaar = sessies.filter((s) => s.state === "ended");

  async function api(p, opts) {
    opts = opts || {};
    if (opts.body) { opts.method = opts.method || "POST"; opts.headers = { "content-type": "application/json" }; opts.body = JSON.stringify(opts.body); }
    const r = await fetch(p, opts);
    const d = await r.json().catch(() => ({}));
    return { status: r.status, data: d };
  }

  useEffect(() => {
    if (seed) return;   // voorbeeldevents doen geen netwerkverkeer
    let weg = false;
    window.DeckStore.list().then((ds) => { if (!weg) setDecks(ds || []); })
      .catch(() => { if (!weg) { setDecks([]); setFout("Decks laden mislukte."); } });
    return () => { weg = true; };
  }, [seed]);

  const laadSessies = React.useCallback(() => {
    if (seed) return;
    api("/api/live/sessions?event_id=" + encodeURIComponent(ev.id))
      .then((r) => { if (r.status === 200) setSessies(r.data.sessions || []); else setFout((r.data && r.data.error) || "Sessies laden mislukte (status " + r.status + ")."); })
      .catch(() => setFout("Geen verbinding met de server."));
  }, [ev.id, seed]);

  useEffect(() => {
    if (seed) return;
    laadSessies();
    const t = setInterval(laadSessies, 5000);
    return () => clearInterval(t);
  }, [laadSessies, seed]);

  async function koppel(id) {
    setFout("");
    try {
      const r = await api("/api/events", { method: "PUT", body: { ...ev, deckId: id } });
      if (r.status !== 200) { setFout((r.data && r.data.error) || "Koppelen mislukte (status " + r.status + ")."); return; }
      ev.deckId = id;               // het gedeelde ev-object bijwerken voor herrender
      setDeckId(id);
    } catch (e) { setFout("Geen verbinding met de server."); }
  }

  async function openStudio() {
    setFout("");
    try {
      const rec = await window.DeckStore.get(deckId);
      if (!rec) { setFout("Het gekoppelde deck is niet gevonden — koppel opnieuw."); return; }
      setBuilder(rec);
    } catch (e) { setFout("Deck openen mislukte."); }
  }

  async function startSessie() {
    setBusy(true); setFout("");
    try {
      const rec = await window.DeckStore.get(deckId);
      if (!rec) { setFout("Het gekoppelde deck is niet gevonden."); setBusy(false); return; }
      const bron = (rec.slides || []).map((s, i) => ({ html: (((rec.enhance || {})[String(i)]) || {}).html || (s && s.html) || "" }));
      const ex = window.LiveMarkers.extract(bron);
      const val = window.LiveMarkers.validate(ex.activities);
      if (val.errors.length) { setFout("Deck niet bruikbaar: " + val.errors.join(" · ")); setBusy(false); return; }
      const r = await api("/api/live/session", { body: { deck_id: rec.id, event_id: ev.id, title: ev.title, activities: ex.activities } });
      if (r.status === 409 && r.data && r.data.session) { laadSessies(); setBusy(false); return; }   // liep er al één — die tonen
      if (r.status !== 200) { setFout((r.data && r.data.error) || "Sessie aanmaken mislukte (status " + r.status + ")."); setBusy(false); return; }
      laadSessies();
    } catch (e) { setFout("Geen verbinding met de server."); }
    setBusy(false);
  }

  async function zetStatus(s, status) {
    setFout("");
    if (status === "ended" && !window.confirm("Sessie beëindigen? Deelnemers kunnen daarna niet meer stemmen.")) return;
    try {
      const r = await api("/api/live/session", { method: "PUT", body: { code: s.code, state: status } });
      if (r.status !== 200) setFout((r.data && r.data.error) || "Actie mislukte (status " + r.status + ").");
      laadSessies();
    } catch (e) { setFout("Geen verbinding met de server."); }
  }

  async function zetLimiet(s, m) {
    setFout("");
    try {
      const r = await api("/api/live/session", { method: "PUT", body: { code: s.code, max_participants: m } });
      if (r.status !== 200) setFout((r.data && r.data.error) || "Limiet aanpassen mislukte (status " + r.status + ").");
      laadSessies();
    } catch (e) { setFout("Geen verbinding met de server."); }
  }

  const KNOP = { padding: "9px 13px", fontSize: 12.5, fontWeight: 700, border: "none", borderRadius: 9, cursor: "pointer", background: "var(--blue)", color: "#fff" };
  const KNOP2 = { ...KNOP, background: "var(--surface-2)", color: "var(--ink2)" };
  const KAART = { border: "1px solid var(--line)", borderRadius: 12, padding: 14 };

  if (seed) {
    return <div style={{ fontSize: 13.5, color: "var(--ink2)", lineHeight: 1.5 }}>
      Dit is een voorbeeldevent. Maak een echt event aan om er een presentatie en live-sessie aan te koppelen.
    </div>;
  }

  const deck = deckId && decks ? decks.find((d) => d.id === deckId) : null;

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {fout && <div style={{ background: "#fdecea", color: "#c62828", padding: "10px 12px", borderRadius: 10, fontSize: 13 }}>{fout}</div>}

      {/* Deck koppelen (spec §4c.1: het deck blijft van Courseware) */}
      <div style={KAART}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
          <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".08em", color: "var(--ink3)" }}>Presentatie</div>
          <a href="/live/instructie.html" target="_blank" rel="noopener" style={{ fontSize: 12 }}>Codes voor je slides →</a>
        </div>
        {decks === null && <div style={{ fontSize: 13, color: "var(--ink3)" }}>Decks laden…</div>}
        {decks !== null && !deck &&
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {!decks.length && <div style={{ fontSize: 13, color: "var(--ink2)" }}>Nog geen decks. Maak er een in de Presentation Studio (Products → Presentation &amp; Courseware).</div>}
            {decks.map((d) =>
              <div key={d.id} style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{ flex: 1, fontSize: 13.5, fontWeight: 600 }}>{d.name || d.title || d.id}</span>
                <span style={{ fontSize: 12, color: "var(--ink3)" }}>{(d.slides || []).length} slides</span>
                <button style={KNOP} onClick={() => koppel(d.id)}>Koppel</button>
              </div>
            )}
          </div>}
        {deck &&
          <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
            <span style={{ flex: 1, fontSize: 14, fontWeight: 700 }}>{deck.name || deck.title || deck.id}</span>
            <button style={KNOP2} onClick={openStudio}>Open in de studio</button>
            <button style={KNOP2} onClick={() => koppel(null)}>Ontkoppel</button>
          </div>}
      </div>

      {/* Sessie beheren (§4c.1: één actieve sessie per event) */}
      {deck &&
        <div style={KAART}>
          <div style={{ fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".08em", color: "var(--ink3)", marginBottom: 8 }}>Live-sessie</div>
          {!actief &&
            <button style={KNOP} disabled={busy} onClick={startSessie}>{busy ? "Bezig…" : "Start een live-sessie"}</button>}
          {actief &&
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
                <div style={{ width: 120 }} dangerouslySetInnerHTML={{ __html: window.LiveQr.svg(location.origin + "/j/" + actief.code) }} />
                <div>
                  <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: ".2em" }}>{actief.code}</div>
                  <div style={{ fontSize: 12.5, color: "var(--ink2)" }}>{(location.origin + "/j/" + actief.code).replace(/^https?:\/\//, "")}</div>
                  <div style={{ fontSize: 12.5, marginTop: 4 }}>Status: <strong>{PT_STATUS[actief.state] || actief.state}</strong> · {actief.participants} deelnemers (max {actief.max_participants})</div>
                  <div style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12.5, marginTop: 6 }}>
                    <span>Limiet:</span>
                    <input type="number" min="1" max="500" defaultValue={actief.max_participants} style={{ width: 70, padding: "4px 6px", border: "1px solid var(--line)", borderRadius: 6 }}
                      onBlur={(e) => { const m = parseInt(e.target.value, 10); if (m >= 1 && m <= 500 && m !== actief.max_participants) zetLimiet(actief, m); }} />
                    <span style={{ color: "var(--ink3)" }}>deelnemers</span>
                  </div>
                </div>
              </div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {actief.state === "draft" && <button style={KNOP} onClick={() => zetStatus(actief, "live")}>Zet live</button>}
                <a href={"/live/console.html?s=" + actief.code} target="_blank" rel="noopener"><button type="button" style={KNOP2}>Open de console</button></a>
                <a href={"/live/stage.html?s=" + actief.code} target="_blank" rel="noopener"><button type="button" style={KNOP2}>Presenteren</button></a>
                {actief.state === "live" && <button style={{ ...KNOP, background: "#c62828" }} onClick={() => zetStatus(actief, "ended")}>Beëindig</button>}
              </div>
            </div>}
          {!!klaar.length &&
            <div style={{ marginTop: 10, borderTop: "1px solid var(--line)", paddingTop: 8 }}>
              <div style={{ fontSize: 11.5, fontWeight: 700, color: "var(--ink3)", marginBottom: 4 }}>Eerdere sessies</div>
              {klaar.map((s) =>
                <div key={s.id} style={{ fontSize: 12.5, color: "var(--ink2)", display: "flex", gap: 8, alignItems: "center" }}>
                  <span style={{ fontFamily: "var(--display)" }}>{s.code}</span>
                  <span>{s.participants} deelnemers</span>
                  <span>{new Date(s.created_at * 1000).toLocaleDateString("nl-NL")}</span>
                  <a href={"/live/sessierapport.html?s=" + s.code} target="_blank" rel="noopener"
                     style={{ color: "var(--accent)", fontWeight: 600 }}>Rapport</a>
                </div>
              )}
            </div>}
        </div>}

      {builder && <StudyBuilder deck={builder} toast={(m, t) => window.eduToast && window.eduToast(m, t)} onClose={() => setBuilder(null)} />}
    </div>);
}

Object.assign(window, { PresentatieTab });