(function (global) {
  "use strict";

  var PERIODS = ["day", "week", "month"];

  function statsSegmentSelect() {
    return document.getElementById("stats-segment-select");
  }

  function activeSegmentPanel() {
    var sel = statsSegmentSelect();
    if (!sel) return null;
    var key = sel.value;
    return document.querySelector(
      '.stats-segment-panel[data-stats-segment="' + key + '"]'
    );
  }

  function replaceStatsUrl(params) {
    var q = new URLSearchParams(global.location.search);
    Object.keys(params).forEach(function (k) {
      if (params[k] == null || params[k] === "") q.delete(k);
      else q.set(k, params[k]);
    });
    var qs = q.toString();
    global.history.replaceState(
      null,
      "",
      qs ? global.location.pathname + "?" + qs : global.location.pathname
    );
  }

  function switchStatsPeriod(periodKey) {
    var panel = activeSegmentPanel();
    if (!panel) return;
    var key = PERIODS.indexOf(periodKey) >= 0 ? periodKey : "day";
    panel.querySelectorAll(".stats-period-pane").forEach(function (pane) {
      var match = pane.getAttribute("data-stats-period") === key;
      if (match) pane.removeAttribute("hidden");
      else pane.setAttribute("hidden", "");
    });
    panel.querySelectorAll(".stats-period-tab").forEach(function (btn) {
      var on = btn.getAttribute("data-stats-period") === key;
      btn.classList.toggle("active", on);
      btn.setAttribute("aria-selected", on ? "true" : "false");
    });
    replaceStatsUrl({ stats_period: key });
  }

  function switchStatsSegment() {
    var sel = statsSegmentSelect();
    if (!sel) return;
    var key = sel.value;
    document.querySelectorAll(".stats-segment-panel").forEach(function (p) {
      p.style.display =
        p.getAttribute("data-stats-segment") === key ? "block" : "none";
    });
    replaceStatsUrl({ stats_segment: key });
    var period =
      new URLSearchParams(global.location.search).get("stats_period") || "day";
    switchStatsPeriod(period);
  }

  function bindPeriodTabs() {
    document.querySelectorAll(".stats-period-tab").forEach(function (btn) {
      if (btn.getAttribute("data-stats-bound") === "1") return;
      btn.setAttribute("data-stats-bound", "1");
      btn.addEventListener("click", function () {
        switchStatsPeriod(btn.getAttribute("data-stats-period") || "day");
      });
    });
  }

  function initStatsFromUrl() {
    var sel = statsSegmentSelect();
    if (!sel) return;
    bindPeriodTabs();
    var url = new URLSearchParams(global.location.search);
    var segKey = url.get("stats_segment");
    if (
      segKey &&
      sel.querySelector('option[value="' + segKey.replace(/"/g, "") + '"]')
    ) {
      sel.value = segKey;
    }
    switchStatsSegment();
    var period = url.get("stats_period") || "day";
    if (PERIODS.indexOf(period) < 0) period = "day";
    switchStatsPeriod(period);
  }

  global.switchStatsSegment = switchStatsSegment;
  global.switchStatsPeriod = switchStatsPeriod;
  global.initStatsFromUrl = initStatsFromUrl;
  global.initStatsSegmentFromUrl = initStatsFromUrl;
})(window);