/* EnsinoJa - Modal de Instalação PWA (SÓ UI)
   - Não quebra chat / SSE
   - Não aparece em modo app/standalone
   - Usa beforeinstallprompt (Android/Chrome/Edge)
   - iOS: mostra instruções "Adicionar à Tela de Início"
*/
(() => {
  "use strict";

  // ========= CONFIG =========
  const STORAGE_KEY_DISMISS = "ej_pwa_install_dismissed_at";
  const DISMISS_COOLDOWN_HOURS = 48; // não mostrar de novo por X horas após fechar

  const UI = {
    title: "Instale o EnsinoJa no seu celular",
    text:
      "Instalando, você não precisa salvar o site nem abrir pelo navegador. " +
      "Vai aparecer um ícone no seu celular para acessar rapidinho o Grupo " +
      "aberto para Educação Infantil e 1º, 2º, 3º e 4º ano do Fundamental.",
    btnInstall: "Instalar",
    btnHowTo: "Como instalar",
    btnCloseAria: "Fechar"
  };

  // ========= HELPERS =========
  function nowMs() { return Date.now(); }

  function isStandalone() {
    // Android/Chrome/Edge: display-mode
    const m = window.matchMedia && window.matchMedia("(display-mode: standalone)");
    const standaloneByMedia = !!(m && m.matches);

    // iOS Safari: navigator.standalone
    const standaloneByIOS = !!(window.navigator && window.navigator.standalone);

    return standaloneByMedia || standaloneByIOS;
  }

  function isIOS() {
    const ua = navigator.userAgent || "";
    return /iPad|iPhone|iPod/.test(ua) || (ua.includes("Mac") && "ontouchend" in document);
  }

  function isSafariIOS() {
    if (!isIOS()) return false;
    const ua = navigator.userAgent || "";
    // iOS Chrome/Edge/Firefox usam WKWebView e colocam CriOS/EdgiOS/FxiOS
    const isNotOther = !/CriOS|EdgiOS|FxiOS|OPiOS/.test(ua);
    const isSafari = /Safari/.test(ua) && isNotOther;
    return isSafari;
  }

  function dismissedRecently() {
    const raw = localStorage.getItem(STORAGE_KEY_DISMISS);
    const t = parseInt(raw || "0", 10) || 0;
    if (!t) return false;
    const hours = (nowMs() - t) / (1000 * 60 * 60);
    return hours < DISMISS_COOLDOWN_HOURS;
  }

  function markDismissed() {
    try { localStorage.setItem(STORAGE_KEY_DISMISS, String(nowMs())); } catch (_) {}
  }

  function safeRegisterSW() {
    // Não interfere no chat: é só um register e pronto.
    if (!("serviceWorker" in navigator)) return;
    try {
      navigator.serviceWorker.register("/sw.js").catch(() => {});
    } catch (_) {}
  }

  // ========= MODAL UI =========
  function injectStyles() {
    const css = `
#ejPwaModal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
#ejPwaModal.show { display: block; }
#ejPwaModal .ejBackdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}
#ejPwaModal .ejCard{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(460px, calc(100vw - 28px));
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  overflow:hidden;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
#ejPwaModal .ejHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px 8px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.65);
}
#ejPwaModal .ejTitle{
  font-weight: 900;
  font-size: 14px;
  color: rgba(17,24,39,.90);
}
#ejPwaModal .ejClose{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.90);
  cursor:pointer;
  display:grid;
  place-items:center;
  -webkit-tap-highlight-color: transparent;
}
#ejPwaModal .ejClose:active{ transform: translateY(1px); }
#ejPwaModal .ejBody{
  padding: 14px 14px 16px;
}
#ejPwaModal .ejText{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(17,24,39,.78);
}
#ejPwaModal .ejActions{
  display:flex;
  gap:10px;
  margin-top: 14px;
}
#ejPwaModal .ejBtn{
  flex: 1 1 auto;
  border: 0;
  border-radius: 14px;
  padding: 12px 12px;
  font-weight: 900;
  font-size: 14px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
#ejPwaModal .ejPrimary{
  background: rgba(37,99,235,.92);
  color: #fff;
  box-shadow: 0 12px 26px rgba(37,99,235,.20);
}
#ejPwaModal .ejPrimary:active{ transform: translateY(1px); }
#ejPwaModal .ejSecondary{
  background: rgba(255,255,255,.92);
  color: rgba(17,24,39,.85);
  border: 1px solid rgba(0,0,0,.10);
}
#ejPwaModal .ejSecondary:active{ transform: translateY(1px); }
#ejPwaModal .ejHowto{
  margin-top: 12px;
  display:none;
  border-top: 1px dashed rgba(0,0,0,.12);
  padding-top: 12px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(17,24,39,.70);
}
#ejPwaModal .ejHowto.show{ display:block; }
#ejPwaModal .ejHowto b{ color: rgba(17,24,39,.88); }
    `.trim();

    const st = document.createElement("style");
    st.id = "ejPwaModalStyle";
    st.textContent = css;
    document.head.appendChild(st);
  }

  function closeModal() {
    const modal = document.getElementById("ejPwaModal");
    if (!modal) return;
    modal.classList.remove("show");
    markDismissed();
  }

  function buildModal() {
    if (document.getElementById("ejPwaModal")) return;

    injectStyles();

    const modal = document.createElement("div");
    modal.id = "ejPwaModal";
    modal.setAttribute("aria-hidden", "true");

    modal.innerHTML = `
      <div class="ejBackdrop" data-ej-close="1"></div>
      <div class="ejCard" role="dialog" aria-modal="true" aria-label="${UI.title}">
        <div class="ejHead">
          <div class="ejTitle">${UI.title}</div>
          <button class="ejClose" type="button" aria-label="${UI.btnCloseAria}" title="${UI.btnCloseAria}" data-ej-close="1">
            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M7 7l10 10" stroke="rgba(17,24,39,.72)" stroke-width="2.6" stroke-linecap="round"/>
              <path d="M17 7L7 17" stroke="rgba(17,24,39,.72)" stroke-width="2.6" stroke-linecap="round"/>
            </svg>
          </button>
        </div>
        <div class="ejBody">
          <div class="ejText">${UI.text}</div>
          <div class="ejActions">
            <button class="ejBtn ejPrimary" type="button" id="ejPwaBtnInstall">${UI.btnInstall}</button>
            <button class="ejBtn ejSecondary" type="button" id="ejPwaBtnLater">Agora não</button>
          </div>
          <div class="ejHowto" id="ejPwaHowto"></div>
        </div>
      </div>
    `;

    document.body.appendChild(modal);

    // Close handlers
    modal.addEventListener("click", (e) => {
      const t = e.target;
      if (t && t.getAttribute && t.getAttribute("data-ej-close") === "1") {
        e.preventDefault();
        closeModal();
      }
    });

    const btnLater = document.getElementById("ejPwaBtnLater");
    btnLater.addEventListener("click", (e) => {
      e.preventDefault();
      closeModal();
    });

    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape") {
        const m = document.getElementById("ejPwaModal");
        if (m && m.classList.contains("show")) closeModal();
      }
    });
  }

  function showModal({ iosMode = false } = {}) {
    if (isStandalone()) return;           // ✅ nunca em modo app
    if (dismissedRecently()) return;      // ✅ evita encher o saco

    buildModal();

    const modal = document.getElementById("ejPwaModal");
    const btnInstall = document.getElementById("ejPwaBtnInstall");
    const howto = document.getElementById("ejPwaHowto");

    // iOS mode: não existe prompt, então vira instruções
    if (iosMode) {
      btnInstall.textContent = UI.btnHowTo;
      howto.innerHTML =
        `No <b>iPhone</b>: toque em <b>Compartilhar</b> (quadrado com seta para cima) ` +
        `e depois em <b>Adicionar à Tela de Início</b>.`;
      howto.classList.add("show");
    } else {
      btnInstall.textContent = UI.btnInstall;
      howto.classList.remove("show");
      howto.textContent = "";
    }

    modal.classList.add("show");
    modal.setAttribute("aria-hidden", "false");
  }

  // ========= INSTALL FLOW =========
  let deferredPrompt = null;

  function bindInstallButton() {
    const btnInstall = document.getElementById("ejPwaBtnInstall");
    if (!btnInstall) return;

    btnInstall.addEventListener("click", async (e) => {
      e.preventDefault();

      // iOS: só mostra instrução (não instala via JS)
      if (isSafariIOS()) {
        const howto = document.getElementById("ejPwaHowto");
        if (howto) howto.classList.toggle("show");
        return;
      }

      // Android/Chrome
      if (!deferredPrompt) {
        // Sem beforeinstallprompt (ou não elegível)
        closeModal();
        return;
      }

      try {
        deferredPrompt.prompt();
        const choice = await deferredPrompt.userChoice;
        // choice.outcome: "accepted" ou "dismissed"
        deferredPrompt = null;

        // Se aceitou, normalmente o browser instala e na próxima abertura será standalone
        closeModal();
      } catch (_) {
        deferredPrompt = null;
        closeModal();
      }
    });
  }

  // ========= BOOT =========
  function boot() {
    safeRegisterSW();

    // Se já é standalone, não faz nada.
    if (isStandalone()) return;

    // iOS Safari: não tem beforeinstallprompt, mas podemos orientar
    if (isSafariIOS() && !dismissedRecently()) {
      // Espera um pouco para não “pular” a UI do chat
      setTimeout(() => {
        showModal({ iosMode: true });
        bindInstallButton();
      }, 800);
      return;
    }

    // Android/Chrome: modal só aparece quando o browser disser que é instalável (beforeinstallprompt)
    // (o evento vai setar deferredPrompt e a gente abre a modal)
  }

  window.addEventListener("beforeinstallprompt", (e) => {
    // ✅ não aparece em standalone, nem se usuário fechou recentemente
    if (isStandalone() || dismissedRecently()) return;

    // Impede o mini-infobar e nos dá controle do botão
    e.preventDefault();
    deferredPrompt = e;

    // Mostra modal
    setTimeout(() => {
      showModal({ iosMode: false });
      bindInstallButton();
    }, 600);
  });

  // Quando instala, garante que pare de sugerir
  window.addEventListener("appinstalled", () => {
    deferredPrompt = null;
    markDismissed();
    const modal = document.getElementById("ejPwaModal");
    if (modal) modal.classList.remove("show");
  });

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", boot);
  } else {
    boot();
  }
})();