/* ==========================================================================
   M GALA Admin — shared shell (sidebar, toast, avatar fallback, modal)
   ========================================================================== */
(function () {
  "use strict";
  var Store = window.MGala.Store;

  var NAV = [
    { href: "index.html", label: "Dashboard", icon: "fa-house" },
    { href: "nominations.html", label: "Nominations", icon: "fa-clipboard-list" },
    { href: "nominees.html", label: "Nominees", icon: "fa-users" },
    { href: "categories.html", label: "Categories", icon: "fa-tags" },
    { href: "featured.html", label: "Featured Woman", icon: "fa-star" }
  ];

  var PASSCODE = "mgala2026";
  function isUnlocked() {
    try { return sessionStorage.getItem("mgala_admin_ok") === "1"; } catch (e) { return false; }
  }
  function unlock() {
    try { sessionStorage.setItem("mgala_admin_ok", "1"); } catch (e) {}
  }

  function renderLockScreen() {
    var overlay = document.createElement("div");
    overlay.id = "admin-lock-overlay";
    overlay.innerHTML =
      '<div class="admin-lock">' +
        '<div class="admin-lock-card">' +
          '<div class="admin-lock-logo">M <span>GALA</span></div>' +
          '<div class="admin-lock-sub">Admin Workspace</div>' +
          '<h1>Enter Passcode</h1>' +
          '<p>This area is private. Enter the admin passcode to continue.</p>' +
          '<form id="lock-form">' +
            '<input type="password" id="lock-input" placeholder="Passcode" autocomplete="off" autofocus>' +
            '<div class="admin-lock-error" id="lock-error">Incorrect passcode — try again.</div>' +
            '<button type="submit" class="btn btn-gold btn-block">Unlock</button>' +
          '</form>' +
          '<a href="../public/index.html" class="admin-lock-back">&larr; Back to public site</a>' +
        '</div>' +
      '</div>';
    document.body.appendChild(overlay);

    var form = document.getElementById("lock-form");
    var input = document.getElementById("lock-input");
    var error = document.getElementById("lock-error");
    form.addEventListener("submit", function (e) {
      e.preventDefault();
      if (input.value.trim() === PASSCODE) {
        unlock();
        location.reload();
      } else {
        error.classList.add("show");
        input.value = "";
        input.focus();
      }
    });
  }

  window.MGala.renderAdminShell = function (active) {
    if (!isUnlocked()) { renderLockScreen(); return; }
    var shell = document.querySelector(".admin-shell");
    var mainContent = document.getElementById("admin-content");

    var backdrop = document.createElement("div");
    backdrop.className = "sidebar-backdrop";
    backdrop.id = "sb-backdrop";

    var aside = document.createElement("aside");
    aside.className = "sidebar";
    aside.id = "sidebar";
    aside.innerHTML =
      '<div class="brand">M <span>GALA</span><small>Admin Workspace</small></div>' +
      '<nav>' + NAV.map(function (item) {
        return '<a href="' + item.href + '" class="' + (item.label === active ? "active" : "") + '"><i class="fa-solid ' + item.icon + '"></i>' + item.label + "</a>";
      }).join("") + '</nav>' +
      '<div class="footer-note">Signed in as <br><span style="color:var(--white)">M Gala Admin</span><br><a href="../public/index.html" target="_blank">View public site &rarr;</a></div>';

    shell.insertBefore(aside, shell.firstChild);
    shell.insertBefore(backdrop, shell.firstChild);

    var contentCol = document.createElement("div");
    contentCol.style.flex = "1";
    contentCol.style.minWidth = "0";
    shell.insertBefore(contentCol, mainContent);

    var topbar = document.createElement("div");
    topbar.className = "admin-topbar";
    topbar.innerHTML =
      '<button class="menu-btn" id="sb-open"><i class="fa-solid fa-bars"></i></button>' +
      '<div style="font-family:\'Playfair Display\',serif;font-size:16px;">M <span style="color:var(--gold)">GALA</span></div>' +
      '<a href="../public/index.html" target="_blank" style="font-size:12px;color:var(--gray)"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>';

    contentCol.appendChild(topbar);
    contentCol.appendChild(mainContent);

    document.getElementById("sb-open").addEventListener("click", function () {
      document.getElementById("sidebar").classList.add("open");
      document.getElementById("sb-backdrop").classList.add("open");
    });
    document.getElementById("sb-backdrop").addEventListener("click", function () {
      document.getElementById("sidebar").classList.remove("open");
      document.getElementById("sb-backdrop").classList.remove("open");
    });
  };

  /* ---------- avatar fallback ---------- */
  function initialsAvatar(name) {
    var initials = (name || "?").split(" ").filter(Boolean).slice(0, 2).map(function (s) { return s[0]; }).join("").toUpperCase();
    var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">' +
      '<rect width="300" height="300" fill="#241338"/>' +
      '<text x="150" y="185" font-family="Georgia,serif" font-size="90" fill="#d4af37" text-anchor="middle">' + initials + "</text></svg>";
    return "data:image/svg+xml;base64," + btoa(svg);
  }
  window.MGala.attachImgFallback = function (img, name) {
    img.addEventListener("error", function onErr() {
      img.removeEventListener("error", onErr);
      img.src = initialsAvatar(name);
    });
  };
  window.MGala.wireImgFallbacks = function (root) {
    (root || document).querySelectorAll("img[data-name]").forEach(function (img) {
      window.MGala.attachImgFallback(img, img.getAttribute("data-name"));
    });
  };

  /* ---------- toast ---------- */
  var toastTimer;
  window.MGala.toast = function (msg, icon) {
    var el = document.getElementById("mg-toast");
    if (!el) {
      el = document.createElement("div");
      el.id = "mg-toast";
      el.className = "toast";
      document.body.appendChild(el);
    }
    el.innerHTML = '<i class="fa-solid ' + (icon || "fa-circle-check") + '"></i><span>' + msg + "</span>";
    el.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () { el.classList.remove("show"); }, 3400);
  };

  window.MGala.timeAgoStr = function (h) { return Store.timeAgo(h); };

  /* ---------- photo picker: upload (compressed) + silhouette swatches ---------- */
  window.MGala.readAndCompressImage = function (file, maxWidth, callback) {
    maxWidth = maxWidth || 700;
    var reader = new FileReader();
    reader.onload = function (e) {
      var img = new Image();
      img.onload = function () {
        var scale = Math.min(1, maxWidth / img.width);
        var w = Math.round(img.width * scale);
        var h = Math.round(img.height * scale);
        var canvas = document.createElement("canvas");
        canvas.width = w;
        canvas.height = h;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, w, h);
        callback(canvas.toDataURL("image/jpeg", 0.82));
      };
      img.onerror = function () { window.MGala.toast("Could not read that image.", "fa-triangle-exclamation"); };
      img.src = e.target.result;
    };
    reader.onerror = function () { window.MGala.toast("Could not read that file.", "fa-triangle-exclamation"); };
    reader.readAsDataURL(file);
  };

  window.MGala.renderPhotoPicker = function (container, current) {
    // current: { photo, photoStyle } — photoStyle is one of Store.SILHOUETTE_STYLES or null (real upload)
    var state = { photo: current.photo, photoStyle: current.photoStyle || null };
    container.innerHTML =
      '<div class="photo-picker">' +
        '<div class="pp-preview"><img id="pp-preview-img" src="' + state.photo + '" alt=""></div>' +
        '<div class="pp-controls">' +
          '<label class="btn btn-outline btn-sm pp-upload-btn"><i class="fa-solid fa-upload"></i> Upload Photo<input type="file" accept="image/*" id="pp-file-input" hidden></label>' +
          '<div class="pp-label">or choose a placeholder</div>' +
          '<div class="pp-swatches" id="pp-swatches"></div>' +
        '</div>' +
      '</div>';

    var previewImg = container.querySelector("#pp-preview-img");
    var swatchesEl = container.querySelector("#pp-swatches");

    function renderSwatches() {
      swatchesEl.innerHTML = Store.SILHOUETTE_STYLES.map(function (styleKey) {
        var uri = Store.silhouetteUri(styleKey);
        var sel = state.photoStyle === styleKey;
        return '<button type="button" class="pp-swatch' + (sel ? " selected" : "") + '" data-style="' + styleKey + '" title="' + styleKey + '"><img src="' + uri + '" alt="' + styleKey + '"></button>';
      }).join("");
      swatchesEl.querySelectorAll("[data-style]").forEach(function (btn) {
        btn.addEventListener("click", function () {
          var styleKey = btn.getAttribute("data-style");
          state.photo = Store.silhouetteUri(styleKey);
          state.photoStyle = styleKey;
          previewImg.src = state.photo;
          renderSwatches();
        });
      });
    }
    renderSwatches();

    container.querySelector("#pp-file-input").addEventListener("change", function (e) {
      var file = e.target.files && e.target.files[0];
      if (!file) return;
      window.MGala.readAndCompressImage(file, 700, function (dataUrl) {
        state.photo = dataUrl;
        state.photoStyle = null;
        previewImg.src = dataUrl;
        renderSwatches();
        window.MGala.toast("Photo uploaded — remember to save.", "fa-image");
      });
    });

    return { get: function () { return { photo: state.photo, photoStyle: state.photoStyle }; } };
  };
})();