(function () {
  "use strict";

  var grid = document.querySelector("[data-archive-grid]");
  var cards = Array.prototype.slice.call(
    document.querySelectorAll("[data-archive-card]"),
  );
  var count = document.querySelector("[data-archive-count]");
  var empty = document.querySelector("[data-archive-empty]");
  var search = document.querySelector("#archive-search");
  var theme = document.querySelector("#archive-theme");
  var laneButtons = Array.prototype.slice.call(
    document.querySelectorAll("[data-archive-lane]"),
  );
  var resetButtons = Array.prototype.slice.call(
    document.querySelectorAll("[data-archive-reset]"),
  );
  var jumpButtons = Array.prototype.slice.call(
    document.querySelectorAll("[data-archive-lane-jump]"),
  );
  var activeLane = "all";

  if (!grid || !count || !empty || !search || !theme || cards.length === 0) {
    return;
  }

  function normalize(value) {
    return String(value || "")
      .normalize("NFKC")
      .toLocaleLowerCase("ja");
  }

  function validLane(value) {
    return ["all", "past", "now", "future"].indexOf(value) !== -1;
  }

  function updateUrl() {
    if (!window.history || !window.URL) {
      return;
    }

    var url = new URL(window.location.href);
    var query = search.value.trim();

    if (activeLane === "all") {
      url.searchParams.delete("lane");
    } else {
      url.searchParams.set("lane", activeLane);
    }

    if (theme.value === "all") {
      url.searchParams.delete("theme");
    } else {
      url.searchParams.set("theme", theme.value);
    }

    if (query === "") {
      url.searchParams.delete("q");
    } else {
      url.searchParams.set("q", query);
    }

    window.history.replaceState(null, "", url.pathname + url.search + url.hash);
  }

  function applyFilters(updateAddress) {
    var query = normalize(search.value.trim());
    var selectedTheme = theme.value;
    var visible = 0;

    cards.forEach(function (card) {
      var lanes = String(card.getAttribute("data-lanes") || "").split(/\s+/);
      var themes = String(card.getAttribute("data-themes") || "").split("|");
      var haystack = normalize(card.getAttribute("data-search"));
      var matchesLane =
        activeLane === "all" || lanes.indexOf(activeLane) !== -1;
      var matchesTheme =
        selectedTheme === "all" || themes.indexOf(selectedTheme) !== -1;
      var matchesQuery = query === "" || haystack.indexOf(query) !== -1;
      var matches = matchesLane && matchesTheme && matchesQuery;

      card.hidden = !matches;
      if (matches) {
        visible += 1;
      }
    });

    count.textContent = String(visible);
    empty.hidden = visible !== 0;
    laneButtons.forEach(function (button) {
      button.setAttribute(
        "aria-pressed",
        button.getAttribute("data-archive-lane") === activeLane
          ? "true"
          : "false",
      );
    });

    if (updateAddress !== false) {
      updateUrl();
    }
  }

  function setLane(lane, moveToCatalog) {
    activeLane = validLane(lane) ? lane : "all";
    applyFilters(true);

    if (moveToCatalog) {
      var reducedMotion = window.matchMedia(
        "(prefers-reduced-motion: reduce)",
      ).matches;
      document
        .querySelector("#archive-catalog")
        .scrollIntoView({
          behavior: reducedMotion ? "auto" : "smooth",
          block: "start",
        });
      window.setTimeout(function () {
        search.focus({ preventScroll: true });
      }, 500);
    }
  }

  function resetFilters() {
    activeLane = "all";
    search.value = "";
    theme.value = "all";
    applyFilters(true);
    search.focus();
  }

  laneButtons.forEach(function (button) {
    button.addEventListener("click", function () {
      setLane(button.getAttribute("data-archive-lane"), false);
    });
  });

  jumpButtons.forEach(function (button) {
    button.addEventListener("click", function () {
      setLane(button.getAttribute("data-archive-lane-jump"), true);
    });
  });

  resetButtons.forEach(function (button) {
    button.addEventListener("click", resetFilters);
  });

  search.addEventListener("input", function () {
    applyFilters(true);
  });
  theme.addEventListener("change", function () {
    applyFilters(true);
  });

  document.querySelectorAll("[data-copy-citation]").forEach(function (button) {
    button.addEventListener("click", function () {
      var citation = button.getAttribute("data-copy-citation") || "";
      var previousLabel = button.textContent;

      function showResult(label) {
        button.textContent = label;
        window.setTimeout(function () {
          button.textContent = previousLabel;
        }, 1800);
      }

      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(citation).then(
          function () {
            showResult("コピーしました");
          },
          function () {
            showResult("コピーできませんでした");
          },
        );
        return;
      }

      var input = document.createElement("textarea");
      input.value = citation;
      input.setAttribute("readonly", "");
      input.style.position = "fixed";
      input.style.opacity = "0";
      document.body.appendChild(input);
      input.select();

      try {
        showResult(
          document.execCommand("copy")
            ? "コピーしました"
            : "コピーできませんでした",
        );
      } catch (error) {
        showResult("コピーできませんでした");
      }

      input.remove();
    });
  });

  var initial = new URLSearchParams(window.location.search);
  var initialLane = initial.get("lane") || "all";
  var initialTheme = initial.get("theme") || "all";
  var initialQuery = initial.get("q") || "";

  activeLane = validLane(initialLane) ? initialLane : "all";
  if (
    Array.prototype.some.call(theme.options, function (option) {
      return option.value === initialTheme;
    })
  ) {
    theme.value = initialTheme;
  }
  search.value = initialQuery;
  applyFilters(false);
})();