/*
 * deck-stage.js — palco navegavel para decks MASI Slides (.dc.html)
 * - escala cada <section> de 1280x720 para caber na tela
 * - navegacao por teclado (setas / espaco / home / end)
 * - trilha de miniaturas
 * - painel de notas do apresentador (tecla N)
 * Sem dependencias. Cada slide e uma <section class="slide"> com data-notes opcional.
 */
(function () {
  "use strict";

  var SLIDE_W = 1280;
  var SLIDE_H = 720;

  function ready(fn) {
    if (document.readyState !== "loading") fn();
    else document.addEventListener("DOMContentLoaded", fn);
  }

  ready(function () {
    var slides = Array.prototype.slice.call(document.querySelectorAll(".slide"));
    if (slides.length === 0) return;

    var current = 0;
    var notesOpen = false;

    // Monta o palco
    var stage = document.createElement("div");
    stage.className = "deck-stage";
    var frame = document.createElement("div");
    frame.className = "deck-frame";
    stage.appendChild(frame);

    slides.forEach(function (slide, i) {
      slide.classList.add("deck-slide");
      slide.style.display = i === 0 ? "block" : "none";
      frame.appendChild(slide);
    });

    // Trilha de miniaturas
    var rail = document.createElement("div");
    rail.className = "deck-rail";
    slides.forEach(function (slide, i) {
      var dot = document.createElement("button");
      dot.className = "deck-dot";
      dot.type = "button";
      dot.textContent = String(i + 1);
      dot.addEventListener("click", function () { go(i); });
      rail.appendChild(dot);
    });

    // Painel de notas
    var notes = document.createElement("div");
    notes.className = "deck-notes";

    document.body.appendChild(stage);
    document.body.appendChild(rail);
    document.body.appendChild(notes);

    function fit() {
      var pad = window.innerWidth < 600 ? 24 : 48;
      var availW = window.innerWidth - pad;
      var availH = window.innerHeight - pad - rail.offsetHeight - 16;
      var scale = Math.min(availW / SLIDE_W, availH / SLIDE_H);
      frame.style.width = SLIDE_W + "px";
      frame.style.height = SLIDE_H + "px";
      frame.style.transform = "scale(" + scale + ")";
      // O contorno tambem e escalado junto com o frame, entao compensamos pela
      // escala para ele sair sempre com 1px reais na tela, em qualquer tamanho.
      frame.style.outline = (1 / scale) + "px solid rgba(255,255,255,0.16)";
      frame.style.outlineOffset = "0px";
    }

    function go(i) {
      if (i < 0 || i >= slides.length) return;
      slides[current].style.display = "none";
      current = i;
      slides[current].style.display = "block";
      Array.prototype.forEach.call(rail.children, function (dot, k) {
        dot.classList.toggle("is-active", k === current);
      });
      renderNotes();
    }

    function renderNotes() {
      var n = slides[current].getAttribute("data-notes") || "";
      notes.textContent = n;
      notes.style.display = notesOpen ? "block" : "none";
    }

    document.addEventListener("keydown", function (e) {
      if (e.key === "ArrowRight" || e.key === "PageDown" || e.key === " ") { go(current + 1); e.preventDefault(); }
      else if (e.key === "ArrowLeft" || e.key === "PageUp") { go(current - 1); e.preventDefault(); }
      else if (e.key === "Home") { go(0); }
      else if (e.key === "End") { go(slides.length - 1); }
      else if (e.key === "n" || e.key === "N") { notesOpen = !notesOpen; renderNotes(); }
    });

    window.addEventListener("resize", fit);
    fit();
    go(0);
  });
})();
