/* ==========================================================================
   M GALA — Public site shared behavior (header/footer, voting, sharing, etc.)
   ========================================================================== */
(function () {
  "use strict";
  var Store = window.MGala.Store;

  /* ---------- initials-avatar fallback for broken photo URLs ---------- */
  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="600" height="750">' +
      '<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">' +
      '<stop offset="0%" stop-color="#3d1f66"/><stop offset="100%" stop-color="#16131b"/></linearGradient></defs>' +
      '<rect width="600" height="750" fill="url(#g)"/>' +
      '<text x="300" y="395" font-family="Georgia,serif" font-size="180" fill="#d4af37" text-anchor="middle" opacity="0.9">' + 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);
    });
  };

  /* ---------------------------- 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"); }, 3200);
  };

  /* ---------------------------- header / footer ---------------------------- */
  var CATS_CACHE = null;
  function cats() { return CATS_CACHE || (CATS_CACHE = Store.getCategories()); }

  window.MGala.renderHeader = function (root, active) {
    var host = document.getElementById(root || "site-header");
    if (!host) return;
    host.innerHTML =
      '<header class="site-header"><div class="wrap">' +
      '<a href="index.html" class="logo"><span class="m">M <span>GALA</span></span><span class="tag">Top Women of Houston &amp; Dallas</span></a>' +
      '<nav class="nav-links">' +
        navLink("index.html", "Home", active) +
        navLink("categories.html", "Nominees", active === "nominees" ? "nominees" : "") +
        navLink("categories.html", "Categories", active) +
        navLink("nominate.html#about", "About", active) +
      '</nav>' +
      '<div class="header-actions">' +
        '<a href="search.html" class="header-search-btn" aria-label="Search nominees"><i class="fa-solid fa-magnifying-glass"></i></a>' +
        '<a href="https://mgala.nekocheri.com/event-page" target="_blank" rel="noopener" class="btn btn-purple-outline btn-sm header-ticket-btn">Tickets</a>' +
        '<a href="nominate.html" class="btn btn-gold btn-sm mobile-hide-btn">Nominate</a>' +
        '<button class="hamburger" id="mg-hamburger" aria-label="Menu"><i class="fa-solid fa-bars"></i></button>' +
      '</div></div></header>' +
      '<div class="mobile-menu" id="mg-mobile-menu">' +
        '<button class="close-btn" id="mg-menu-close"><i class="fa-solid fa-xmark"></i></button>' +
        '<nav>' +
          '<a href="index.html">Home</a>' +
          '<a href="categories.html">Nominees</a>' +
          '<a href="categories.html">Categories</a>' +
          '<a href="search.html">Search</a>' +
          '<a href="nominate.html">Nominate a Woman</a>' +
          '<a href="https://mgala.nekocheri.com/event-page" target="_blank" rel="noopener">Get Tickets</a>' +
        '</nav>' +
        '<a href="nominate.html" class="btn btn-gold btn-block">Nominate a Woman</a>' +
        '<a href="https://mgala.nekocheri.com/event-page" target="_blank" rel="noopener" class="btn btn-purple-outline btn-block" style="margin-top:12px">Get Tickets</a>' +
      '</div>';

    var burger = document.getElementById("mg-hamburger");
    var menu = document.getElementById("mg-mobile-menu");
    var close = document.getElementById("mg-menu-close");
    if (burger) burger.addEventListener("click", function () { menu.classList.add("open"); });
    if (close) close.addEventListener("click", function () { menu.classList.remove("open"); });
    menu.querySelectorAll("a").forEach(function (a) { a.addEventListener("click", function () { menu.classList.remove("open"); }); });
  };

  function navLink(href, label, active) {
    var isActive = (label === "Home" && active === "home") || (label === "Categories" && active === "categories") || (label === "Nominees" && active === "nominees");
    return '<a href="' + href + '"' + (isActive ? ' style="color:var(--gold)"' : "") + ">" + label + "</a>";
  }

  window.MGala.renderFooter = function (root) {
    var host = document.getElementById(root || "site-footer");
    if (!host) return;
    host.innerHTML =
      '<div class="wrap">' +
        '<div class="cta-banner reveal">' +
          '<h3 class="serif">Know a remarkable woman?</h3>' +
          '<p>Nominate her today and help her get the recognition she deserves.</p>' +
          '<a href="nominate.html" class="btn btn-gold">Nominate a Woman <i class="fa-solid fa-arrow-right"></i></a>' +
        '</div>' +
        '<footer>' +
          '<div class="footer-grid">' +
            '<div class="footer-brand">' +
              '<div class="m serif">M <span class="gold-text">GALA</span></div>' +
              '<p>Celebrating the top women of Houston &amp; Dallas — power, purpose and impact.</p>' +
              '<div class="social-row">' +
                '<a href="#"><i class="fa-brands fa-instagram"></i></a>' +
                '<a href="#"><i class="fa-brands fa-facebook-f"></i></a>' +
                '<a href="#"><i class="fa-brands fa-linkedin-in"></i></a>' +
                '<a href="#"><i class="fa-brands fa-tiktok"></i></a>' +
                '<a href="#"><i class="fa-brands fa-youtube"></i></a>' +
              '</div>' +
            '</div>' +
            '<div class="footer-col"><h4>Explore</h4><ul>' +
              '<li><a href="index.html">Home</a></li>' +
              '<li><a href="categories.html">Categories</a></li>' +
              '<li><a href="nominate.html">Nominate a Woman</a></li>' +
            '</ul></div>' +
            '<div class="footer-col"><h4>M Gala</h4><ul>' +
              '<li><a href="#">About</a></li>' +
              '<li><a href="#">FAQ</a></li>' +
              '<li><a href="https://mgala.nekocheri.com/event-page" target="_blank" rel="noopener">Get Tickets</a></li>' +
            '</ul></div>' +
            '<div class="footer-col"><h4>Contact</h4><ul>' +
              '<li><a href="mailto:admin@nekocheri.com"><i class="fa-regular fa-envelope"></i> admin@nekocheri.com</a></li>' +
              '<li><a href="tel:+18323849676"><i class="fa-solid fa-phone"></i> 832.384.9676</a></li>' +
            '</ul></div>' +
            '<div class="footer-col"><h4>Legal</h4><ul>' +
              '<li><a href="#">Privacy Policy</a></li>' +
              '<li><a href="#">Terms of Service</a></li>' +
            '</ul></div>' +
          '</div>' +
          '<div class="footer-bottom">&copy; 2026 M Gala. All rights reserved. &middot; <a href="../admin/index.html">Admin</a></div>' +
        '</footer>' +
      '</div>';
  };

  /* ---------------------------- voting ---------------------------- */
  window.MGala.wireVoteButtons = function (container) {
    (container || document).querySelectorAll("[data-vote-id]").forEach(function (btn) {
      var id = btn.getAttribute("data-vote-id");
      refreshVoteBtn(btn, id);
      btn.addEventListener("click", function (e) {
        e.preventDefault();
        if (Store.hasVoted(id)) {
          window.MGala.toast("You already voted for her today — come back tomorrow for another vote!", "fa-heart");
          return;
        }
        if (btn.disabled) return;
        btn.disabled = true;
        Store.vote(id).then(function (ok) {
          btn.disabled = false;
          if (ok) {
            window.MGala.toast("Thanks for your vote!", "fa-heart");
            refreshVoteBtn(btn, id);
            document.querySelectorAll('[data-votes-for="' + id + '"]').forEach(function (el) {
              el.textContent = Store.fmt(Store.getNominee(id).votes);
            });
          } else {
            window.MGala.toast("You already voted for her today — come back tomorrow for another vote!", "fa-heart");
          }
        });
      });
    });
  };
  function refreshVoteBtn(btn, id) {
    if (Store.hasVoted(id)) {
      btn.innerHTML = '<i class="fa-solid fa-check"></i> Voted';
      btn.classList.add("voted");
    } else {
      btn.innerHTML = btn.getAttribute("data-label") || '<i class="fa-solid fa-heart"></i> Vote';
    }
  }

  /* ---------------------------- sharing ---------------------------- */
  function absoluteNomineeUrl(id) {
    var dir = window.location.pathname.replace(/[^/]*$/, "");
    return window.location.origin + dir + "nominee.html?id=" + encodeURIComponent(id);
  }

  function legacyCopy(text) {
    try {
      var ta = document.createElement("textarea");
      ta.value = text;
      ta.setAttribute("readonly", "");
      ta.style.position = "fixed";
      ta.style.top = "-1000px";
      ta.style.opacity = "0";
      document.body.appendChild(ta);
      ta.focus();
      ta.select();
      var ok = document.execCommand("copy");
      document.body.removeChild(ta);
      return ok;
    } catch (e) { return false; }
  }

  function copyText(text, onDone) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(function () { onDone(true); }).catch(function () { onDone(legacyCopy(text)); });
    } else {
      onDone(legacyCopy(text));
    }
  }

  /* ---------------------------- share modal ---------------------------- */
  function ensureShareModal() {
    var el = document.getElementById("mg-share-backdrop");
    if (el) return el;
    el = document.createElement("div");
    el.id = "mg-share-backdrop";
    el.className = "share-backdrop";
    el.innerHTML =
      '<div class="share-modal">' +
        '<button class="share-close" id="mg-share-close" aria-label="Close"><i class="fa-solid fa-xmark"></i></button>' +
        '<div class="eyebrow" style="margin-bottom:10px">Share This Page</div>' +
        '<h3 class="serif" id="mg-share-name" style="font-size:22px;margin-bottom:16px;"></h3>' +
        '<div class="share-link-row">' +
          '<input type="text" id="mg-share-url" readonly>' +
          '<button class="btn btn-gold btn-sm" id="mg-share-copy">Copy</button>' +
        '</div>' +
        '<div class="share-platforms" id="mg-share-platforms"></div>' +
      '</div>';
    document.body.appendChild(el);
    el.addEventListener("click", function (e) { if (e.target === el) closeShareModal(); });
    document.getElementById("mg-share-close").addEventListener("click", closeShareModal);
    document.getElementById("mg-share-copy").addEventListener("click", function () {
      var input = document.getElementById("mg-share-url");
      input.select();
      copyText(input.value, function (ok) {
        window.MGala.toast(ok ? "Link copied!" : "Couldn't auto-copy — the link above is selected, just copy it manually.", ok ? "fa-check" : "fa-triangle-exclamation");
      });
    });
    return el;
  }
  function closeShareModal() {
    var el = document.getElementById("mg-share-backdrop");
    if (el) el.classList.remove("open");
  }

  window.MGala.share = function (name, id) {
    var url = absoluteNomineeUrl(id);
    var text = "Vote for " + name + " at M Gala!";
    var modal = ensureShareModal();
    document.getElementById("mg-share-name").textContent = name;
    document.getElementById("mg-share-url").value = url;

    var platforms = [
      { key: "whatsapp", label: "WhatsApp", icon: "fa-brands fa-whatsapp", href: "https://wa.me/?text=" + encodeURIComponent(text + " " + url) },
      { key: "sms", label: "Text Message", icon: "fa-solid fa-comment-sms", href: "sms:?&body=" + encodeURIComponent(text + " " + url) },
      { key: "facebook", label: "Facebook", icon: "fa-brands fa-facebook-f", href: "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(url) },
      { key: "twitter", label: "X / Twitter", icon: "fa-brands fa-x-twitter", href: "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text) + "&url=" + encodeURIComponent(url) },
      { key: "email", label: "Email", icon: "fa-regular fa-envelope", href: "mailto:?subject=" + encodeURIComponent("Vote for " + name + " at M Gala") + "&body=" + encodeURIComponent(text + " " + url) }
    ];
    document.getElementById("mg-share-platforms").innerHTML = platforms.map(function (p) {
      return '<a class="share-platform-btn" href="' + p.href + '" target="_blank" rel="noopener"><i class="' + p.icon + '"></i> ' + p.label + '</a>';
    }).join("");

    modal.classList.add("open");

    if (navigator.share) {
      navigator.share({ title: text, text: text, url: url }).then(function () {
        closeShareModal();
      }).catch(function () { /* user cancelled or unsupported — modal stays open as the reliable fallback */ });
    }
  };

  /* ---------------------------- scroll reveal ---------------------------- */
  window.MGala.initReveal = function () {
    var els = document.querySelectorAll(".reveal");
    if (!("IntersectionObserver" in window)) { els.forEach(function (e) { e.classList.add("in"); }); return; }
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) { if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); } });
    }, { threshold: 0.12 });
    els.forEach(function (e) { io.observe(e); });
  };

  /* ---------------------------- card builder ---------------------------- */
  window.MGala.nomineeCardHTML = function (n, opts) {
    opts = opts || {};
    var cat = Store.getCategory(n.category);
    return (
      '<div class="nominee-card' + (opts.large ? " large" : "") + '">' +
        (opts.rank ? '<div class="rank">#' + opts.rank + "</div>" : "") +
        '<a href="nominee.html?id=' + n.id + '" class="photo"><img data-name="' + n.name + '" src="' + n.photo + '" alt="' + n.name + '"></a>' +
        '<div class="body">' +
          '<a href="nominee.html?id=' + n.id + '"><div class="name">' + n.name + "</div></a>" +
          '<div class="cat">' + (cat ? cat.name : "") + "</div>" +
          '<div class="row">' +
            '<div class="votes"><i class="fa-solid fa-heart"></i> <span data-votes-for="' + n.id + '">' + Store.fmt(n.votes) + "</span></div>" +
            '<button class="btn btn-gold btn-sm" data-vote-id="' + n.id + '" data-label=\'<i class="fa-solid fa-heart"></i> Vote\'></button>' +
          "</div>" +
        "</div>" +
      "</div>"
    );
  };

  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("img[data-name]").forEach(function (img) { window.MGala.attachImgFallback(img, img.getAttribute("data-name")); });
  });
})();