import { bindLocaleSwitcher, getMaintenanceView, getSiteLocale, getSiteLogoUrl, t } from "../config/site.js";

function escapeHtml(s) {
  return String(s)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/"/g, "&quot;");
}

function dismissSplash() {
  const splash = document.getElementById("splash");
  document.body.classList.remove("splash-open");
  if (!splash) return;
  splash.classList.add("splash-screen--exit");
  const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (reduce) {
    splash.remove();
    return;
  }
  const onEnd = (e) => {
    if (e.propertyName !== "opacity") return;
    splash.removeEventListener("transitionend", onEnd);
    splash.remove();
  };
  splash.addEventListener("transitionend", onEnd);
  setTimeout(() => {
    if (splash.parentNode) splash.remove();
  }, 600);
}

export function mountSiteMaintenanceScreen() {
  if (typeof document === "undefined") return;
  dismissSplash();

  let root = document.getElementById("site-maintenance-root");
  if (!root) {
    root = document.createElement("div");
    root.id = "site-maintenance-root";
    document.body.appendChild(root);
  }

  document.body.classList.add("site-maintenance-active");

  const view = getMaintenanceView();
  const imgSrc = view.imageUrl || getSiteLogoUrl();

  root.innerHTML = `
    <div class="site-maintenance" role="alertdialog" aria-modal="true" aria-labelledby="site-maintenance-title">
      <div class="site-maintenance__glow" aria-hidden="true"></div>
      <div class="site-maintenance__card">
        <div class="site-maintenance__locale">
          <button type="button" data-locale-switch="tr" class="site-maintenance__locale-btn" aria-pressed="false">TR</button>
          <button type="button" data-locale-switch="en" class="site-maintenance__locale-btn" aria-pressed="false">EN</button>
        </div>
        <div class="site-maintenance__visual">
          <img src="${escapeHtml(imgSrc)}" alt="" class="site-maintenance__img" width="280" height="280" decoding="async" />
        </div>
        <p class="site-maintenance__eyebrow">${escapeHtml(view.eyebrow)}</p>
        <h1 id="site-maintenance-title" class="site-maintenance__title">${escapeHtml(view.title)}</h1>
        <p class="site-maintenance__message">${escapeHtml(view.message)}</p>
        <p class="site-maintenance__hint">${escapeHtml(t("maintenanceHint"))}</p>
      </div>
    </div>`;

  const img = root.querySelector(".site-maintenance__img");
  img?.addEventListener("error", () => {
    const fallback = getSiteLogoUrl();
    if (img && img.getAttribute("src") !== fallback) img.setAttribute("src", fallback);
  });

  bindLocaleSwitcher(root);
  syncMaintenanceLocaleUi(root);
  window.addEventListener("mocker:locale", onLocale);
  function onLocale() {
    window.removeEventListener("mocker:locale", onLocale);
    mountSiteMaintenanceScreen();
  }
}

function syncMaintenanceLocaleUi(root) {
  const loc = getSiteLocale();
  root.querySelectorAll(".site-maintenance__locale-btn").forEach((btn) => {
    const on = btn.getAttribute("data-locale-switch") === loc;
    btn.classList.toggle("is-active", on);
    btn.setAttribute("aria-pressed", on ? "true" : "false");
  });
}
