/*
 * site.js - replaces the two interactive pieces of the former React runtime.
 *  1. Mobile navigation toggle (Escape closes; body class mirrors original).
 *  2. Email enquiry form: builds a pre-filled email (mailto + Gmail/Outlook
 *     fallbacks), identical wording to the original form. No data leaves the
 *     visitor's device until the visitor sends the email.
 *  3. Prefills the enquiry with a design handed over from /fence-designer.
 */
(function () {
  "use strict";
  var EMAIL = "info@rjlfencing.com.au";

  // ---- 1. Mobile menu --------------------------------------------------
  var menu = document.querySelector(".mobile-menu");
  if (menu) {
    var btn = menu.querySelector(".mobile-menu-toggle");
    var panel = menu.querySelector(".mobile-menu-panel");
    var setOpen = function (open) {
      menu.classList.toggle("is-open", open);
      btn.setAttribute("aria-expanded", String(open));
      btn.querySelector("span").textContent = open ? "Close" : "Menu";
      panel.hidden = !open;
      document.body.classList.toggle("mobile-nav-open", open);
    };
    btn.addEventListener("click", function () { setOpen(btn.getAttribute("aria-expanded") !== "true"); });
    panel.addEventListener("click", function (e) { if (e.target.closest("a")) setOpen(false); });
    document.addEventListener("keydown", function (e) { if (e.key === "Escape") setOpen(false); });
  }

  // ---- 2. Email enquiry form ------------------------------------------
  var form = document.querySelector(".email-enquiry form");
  if (form) {
    var status = document.createElement("div");
    form.appendChild(status);
    form.addEventListener("input", function () { status.className = ""; status.innerHTML = ""; });
    form.addEventListener("submit", function (e) {
      e.preventDefault();
      if (!form.reportValidity()) return;
      var d = new FormData(form);
      var g = function (k) { return String(d.get(k) || "").trim(); };
      if (!g("name") || !g("message")) {
        status.className = "form-status is-error";
        status.setAttribute("role", "alert");
        status.textContent = "Please enter your name and project details.";
        return;
      }
      var body = ["Hello RJL Fencing and Gates,", "", "I would like to enquire about the following project.", "",
        "Full name: " + g("name"), "Phone: " + g("phone"), "Email: " + g("email"),
        "Suburb / site address: " + g("address"), "Service: " + g("service"), "", "Project details:", g("message")].join("\r\n");
      var subj = "Online%20Enquiry", b = encodeURIComponent(body);
      var mailto = "mailto:" + EMAIL + "?subject=" + subj + "&body=" + b;
      var gmail = "https://mail.google.com/mail/?view=cm&fs=1&to=" + EMAIL + "&su=" + subj + "&body=" + b;
      var outlook = "https://outlook.live.com/mail/0/deeplink/compose?to=" + EMAIL + "&subject=" + subj + "&body=" + b;
      status.className = "form-status";
      status.setAttribute("role", "status");
      status.innerHTML = "<strong>Your enquiry is ready to send.</strong><p>If your email app did not open, choose an option below. Press Send in your email app to submit your enquiry.</p>" +
        '<p><a href="' + mailto + '">Open email app</a> · <a href="' + gmail + '" target="_blank" rel="noopener noreferrer">Gmail</a> · ' +
        '<a href="' + outlook + '" target="_blank" rel="noopener noreferrer">Outlook / Hotmail</a></p>';
      // Tell ga.js a valid enquiry was produced (no personal details passed).
      document.dispatchEvent(new CustomEvent("rjl:enquiry-ready", { detail: { service: g("service") } }));
      window.location.href = mailto;
    });
  }

  // Native disclosure menus support Escape and close when focus moves away.
  document.querySelectorAll('.suburb-nav').forEach(function (menu) {
    menu.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') { menu.open = false; menu.querySelector('summary').focus(); }
    });
    menu.addEventListener('focusout', function (e) {
      if (!menu.contains(e.relatedTarget)) menu.open = false;
    });
    document.addEventListener('click', function (e) {
      if (!menu.contains(e.target)) menu.open = false;
    });
  });
  // Suburb landing-page links prefill the existing enquiry address field.
  if (form) {
    var suburb = new URLSearchParams(window.location.search).get('suburb');
    var coreSuburbs = ['Bundoora', 'Mill Park', 'Epping', 'South Morang', 'Greensborough'];
    var addressField = form.querySelector('#enquiry-address');
    if (coreSuburbs.indexOf(suburb) !== -1 && addressField && !addressField.value) addressField.value = suburb;
  }

  // A staged address checkout can hand the confirmed property to this form.
  if (form) {
    var propertyField = form.querySelector('#enquiry-address');
    var property = null;
    try {
      property = JSON.parse(sessionStorage.getItem('rjl-property-address') || 'null');
      sessionStorage.removeItem('rjl-property-address');
    } catch (err) { /* Manual entry remains available when storage is blocked. */ }
    if (propertyField && property && typeof property.address === 'string' &&
        Number.isFinite(property.confirmedAt) && Date.now() - property.confirmedAt >= 0 &&
        Date.now() - property.confirmedAt < 60 * 60 * 1000) {
      propertyField.value = [typeof property.unit === 'string' ? property.unit.slice(0, 80) : '',
        property.address.slice(0, 300)].filter(Boolean).join(', ');
    } else if (propertyField && !propertyField.value) {
      var manualProperty = new URLSearchParams(window.location.search).get('address');
      if (manualProperty) propertyField.value = manualProperty.slice(0, 400);
    }
    // Clear the query-string fallback once it has prefilled the local form.
    if (new URLSearchParams(window.location.search).has('address')) {
      var cleaned = new URL(window.location.href);
      cleaned.searchParams.delete('address');
      window.history.replaceState(window.history.state, '', cleaned.href);
    }
  }

  // ---- 3. Design handed over from the 3D fence designer (/fence-designer) ----
  // The designer stores a plain-text summary in sessionStorage and comes here.
  // Prefill the project details once, then clear it. No data leaves the device.
  if (form) {
    try {
      var handed = JSON.parse(sessionStorage.getItem("rjl-design-quote") || "null");
      if (handed && handed.text) {
        var ta = form.querySelector("#enquiry-message"), sel = form.querySelector("#enquiry-service");
        if (ta) ta.value = handed.text.slice(0, 3900) + "\n\n";
        if (sel && handed.service) { for (var i = 0; i < sel.options.length; i++) if (sel.options[i].text === handed.service) sel.selectedIndex = i; }
        var note = document.createElement("p");
        note.className = "form-note";
        note.innerHTML = '<strong>Your 3D design has been added below.</strong> Add your details and send. <a href="/fence-designer">Back to the designer</a>';
        form.insertBefore(note, form.firstChild);
        sessionStorage.removeItem("rjl-design-quote");
        form.scrollIntoView({ behavior: "smooth", block: "start" });
      }
    } catch (err) { /* storage blocked: the form still works normally */ }
  }
})();