/* Magma Hybrid Detail — demo interactions */

(function () {
  "use strict";

  function qs(sel, root) {
    return (root || document).querySelector(sel);
  }

  function qsa(sel, root) {
    return Array.from((root || document).querySelectorAll(sel));
  }

  /* Log / history / tracking table filters */
  function bindTableFilter(formId, tableId) {
    var form = qs("#" + formId);
    var table = qs("#" + tableId);
    if (!form || !table) return;

    function apply() {
      var level = (qs("[name=level]", form) || {}).value || "";
      var q = ((qs("[name=q]", form) || {}).value || "").toLowerCase().trim();
      var rows = qsa("tbody tr", table);
      rows.forEach(function (tr) {
        var rowLevel = (tr.getAttribute("data-level") || "").toUpperCase();
        var text = (tr.textContent || "").toLowerCase();
        var okLevel = !level || rowLevel === level.toUpperCase();
        var okQ = !q || text.indexOf(q) !== -1;
        tr.style.display = okLevel && okQ ? "" : "none";
      });
    }

    form.addEventListener("submit", function (e) {
      e.preventDefault();
      apply();
    });
    form.addEventListener("input", apply);
    form.addEventListener("change", apply);
  }

  bindTableFilter("log-filter", "log-table");
  bindTableFilter("history-filter", "history-table");
  bindTableFilter("tracking-filter", "tracking-table");
  bindTableFilter("runset-filter", "runset-table");

  /* Create wizard steps */
  var wizard = qs("#create-wizard");
  if (wizard) {
    var panes = qsa(".wizard-pane", wizard);
    var steps = qsa(".wizard-steps .step", wizard);
    var idx = 0;

    function show(i) {
      idx = Math.max(0, Math.min(panes.length - 1, i));
      panes.forEach(function (p, n) {
        p.hidden = n !== idx;
      });
      steps.forEach(function (s, n) {
        s.classList.toggle("active", n === idx);
      });
      var back = qs("[data-wizard=back]", wizard);
      var next = qs("[data-wizard=next]", wizard);
      var finish = qs("[data-wizard=finish]", wizard);
      if (back) back.disabled = idx === 0;
      if (next) next.hidden = idx >= panes.length - 1;
      if (finish) finish.hidden = idx < panes.length - 1;
    }

    wizard.addEventListener("click", function (e) {
      var t = e.target.closest("[data-wizard]");
      if (!t) return;
      var action = t.getAttribute("data-wizard");
      if (action === "back") show(idx - 1);
      if (action === "next") show(idx + 1);
      if (action === "finish") {
        alert("Demo only — RunSet would be created here.");
        window.location.href = t.getAttribute("data-href") || "/app/runsets";
      }
    });
    show(0);
  }

  /* Vote form */
  var voteForm = qs("#vote-form");
  if (voteForm) {
    voteForm.addEventListener("submit", function (e) {
      e.preventDefault();
      var nav = (qs("input[name=nav_option_id]:checked", voteForm) || {}).value;
      var brandInput = qs("input[name=brand_option_id]:checked", voteForm);
      var brand = (brandInput || {}).value;
      var policy = (qs("input[name=policy_option_id]:checked", voteForm) || {}).value;
      var brandDetails = (qs("#brand_details", voteForm) || {}).value || "";
      var voter = (qs("input[name=voter_label]", voteForm) || {}).value || "";
      if (!nav || !brand || !policy) {
        alert("Please select section navigation, layout policy, and branding.");
        return;
      }
      if (
        brandInput &&
        brandInput.getAttribute("data-needs-details") === "true" &&
        !brandDetails.trim()
      ) {
        alert("Please provide details for the Other branding option.");
        return;
      }
      fetch("/api/votes", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          navOptionId: nav,
          brandOptionId: brand,
          policyOptionId: policy,
          brandDetails: brandDetails.trim() || null,
          voterLabel: voter.trim() || null,
        }),
      })
        .then(function (r) {
          return r.json().then(function (j) {
            if (!r.ok) throw new Error(j.error || "Vote failed");
            return j;
          });
        })
        .then(function () {
          alert("Thanks — vote recorded.");
          window.location.reload();
        })
        .catch(function (err) {
          alert(err.message || String(err));
        });
    });

    function syncBrandDetails() {
      var wrap = qs("#brand-details-wrap");
      var checked = qs("input[name=brand_option_id]:checked", voteForm);
      if (!wrap) return;
      var needs =
        checked && checked.getAttribute("data-needs-details") === "true";
      wrap.hidden = !needs;
    }

    qsa(
      "input[name=nav_option_id], input[name=brand_option_id], input[name=policy_option_id]",
      voteForm
    ).forEach(function (input) {
      input.addEventListener("change", function () {
        var name = input.name;
        qsa(".vote-option-card[data-group=" + name + "]").forEach(function (card) {
          card.classList.toggle(
            "selected",
            card.querySelector("input") && card.querySelector("input").checked
          );
        });
        if (name === "brand_option_id") syncBrandDetails();
      });
    });
    syncBrandDetails();
  }

  var commentForm = qs("#comment-form");
  if (commentForm) {
    commentForm.addEventListener("submit", function (e) {
      e.preventDefault();
      var body = (qs("textarea[name=body]", commentForm) || {}).value || "";
      var author = (qs("input[name=author]", commentForm) || {}).value || "";
      if (!body.trim()) {
        alert("Comment body is required.");
        return;
      }
      fetch("/api/comments", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          body: body.trim(),
          author: author.trim() || null,
          optionId: null,
        }),
      })
        .then(function (r) {
          return r.json().then(function (j) {
            if (!r.ok) throw new Error(j.error || "Comment failed");
            return j;
          });
        })
        .then(function () {
          window.location.reload();
        })
        .catch(function (err) {
          alert(err.message || String(err));
        });
    });
  }
})();