(() => {
  "use strict";

  const qs = (sel) => document.querySelector(sel);

  const state = {
    index: null,
    rows: [],
    table: null,
    filters: {
      episode: "",
      difficulty: "",
      section: "",
      search: "",
    },
  };

  function esc(value) {
    return String(value ?? "")
      .replaceAll("&", "&")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;")
      .replaceAll("'", "&#039;");
  }

  function labelValue(value) {
    return String(value || "")
      .replace(/^Episode(\d+)$/, "Episode $1")
      .replaceAll("_", " ");
  }

  function setStatus(message, kind = "") {
    const box = qs("#drops-placeholder");
    if (!box) return;
    box.innerHTML = `<div class="drops-status ${kind ? `drops-status--${kind}` : ""}">${esc(message)}</div>`;
  }

  async function fetchJson(path) {
    const res = await fetch(path, { cache: "no-store" });
    if (!res.ok) throw new Error(`${path}: HTTP ${res.status}`);
    return res.json();
  }

  function uniqueSorted(rows, key) {
    return [...new Set(rows.map((row) => row[key]).filter(Boolean))]
      .sort((a, b) => String(a).localeCompare(String(b)));
  }

  function fillSelect(select, values, allLabel) {
    if (!select) return;
    const previous = select.value;
    select.innerHTML = `<option value="">${esc(allLabel)}</option>`;
    for (const value of values) {
      const opt = document.createElement("option");
      opt.value = value;
      opt.textContent = labelValue(value);
      select.appendChild(opt);
    }
    if ([...select.options].some((opt) => opt.value === previous)) {
      select.value = previous;
    }
  }

  function populateVersions(index) {
    const select = qs("#drops-version");
    if (!select) return;

    const previous = select.value || "v1";
    select.innerHTML = "";

    for (const table of index.tables || []) {
      const opt = document.createElement("option");
      opt.value = table.version;
      opt.textContent = table.label;
      select.appendChild(opt);
    }

    if ([...select.options].some((opt) => opt.value === previous)) {
      select.value = previous;
    }
  }

  function populateFilters(rows) {
    fillSelect(qs("#drops-episode"), uniqueSorted(rows, "episode"), "All episodes");
    fillSelect(qs("#drops-difficulty"), uniqueSorted(rows, "difficulty"), "All difficulties");
    fillSelect(qs("#drops-section"), uniqueSorted(rows, "section_id"), "All Section IDs");
  }

  function visibleRows() {
    const search = state.filters.search.trim().toLowerCase();

    return state.rows.filter((row) => {
      if (state.filters.episode && row.episode !== state.filters.episode) return false;
      if (state.filters.difficulty && row.difficulty !== state.filters.difficulty) return false;
      if (state.filters.section && row.section_id !== state.filters.section) return false;

      if (search) {
        const haystack = [
          row.mode,
          row.episode,
          row.difficulty,
          row.section_id,
          row.source,
          row.item,
          row.item_code,
          row.rate,
        ].join(" ").toLowerCase();

        if (!haystack.includes(search)) return false;
      }

      return true;
    });
  }

  function renderTable() {
    const box = qs("#drops-placeholder");
    if (!box) return;

    const rows = visibleRows();
    const tableLabel = state.table?.label || "Peeps";
    const shown = rows.slice(0, 1000);

    const body = shown.map((row) => {
      const item = row.item || row.item_code || "—";
      const itemCode = row.item_code || "—";

      return `
        <tr>
          <td data-label="Mode">${esc(labelValue(row.mode))}</td>
          <td data-label="Episode">${esc(labelValue(row.episode))}</td>
          <td data-label="Difficulty">${esc(labelValue(row.difficulty))}</td>
          <td data-label="Section ID">${esc(row.section_id || "—")}</td>
          <td data-label="Source">${esc(labelValue(row.source || "—"))}</td>
          <td data-label="Item">${esc(item)}</td>
          <td data-label="Item Code">${esc(itemCode)}</td>
          <td data-label="Rate">${esc(row.rate || "—")}</td>
        </tr>
      `;
    }).join("");

    const truncation = rows.length > shown.length
      ? ` Showing first ${shown.length.toLocaleString()}.`
      : "";

    box.innerHTML = `
      <div class="drops-summary">
        <div>
          <strong>Peeps ${esc(tableLabel)} drop table</strong>
          <span>${rows.length.toLocaleString()} matching rows.${truncation}</span>
        </div>
        <span>${state.rows.length.toLocaleString()} total rows</span>
      </div>
      <div class="drops-table-wrap">
        <table class="drops-table">
          <thead>
            <tr>
              <th>Mode</th>
              <th>Episode</th>
              <th>Difficulty</th>
              <th>Section ID</th>
              <th>Source</th>
              <th>Item</th>
              <th>Item Code</th>
              <th>Rate</th>
            </tr>
          </thead>
          <tbody>${body || `<tr><td colspan="8">No drops match these filters.</td></tr>`}</tbody>
        </table>
      </div>
    `;
  }

  async function loadPeeps() {
    setStatus("Loading Peeps drop tables...");

    if (!state.index) {
      state.index = await fetchJson("generated/drops/peeps/index.json");
      populateVersions(state.index);
    }

    const version = qs("#drops-version")?.value || "v1";
    const table = (state.index.tables || []).find((entry) => entry.version === version);

    if (!table) {
      setStatus("No drop table is configured for that version.", "error");
      return;
    }

    state.table = table;
    state.rows = await fetchJson(`generated/drops/peeps/${table.path}`);

    state.filters.episode = "";
    state.filters.difficulty = "";
    state.filters.section = "";
    state.filters.search = "";

    if (qs("#drops-search")) qs("#drops-search").value = "";

    populateFilters(state.rows);

    if (qs("#drops-episode")) qs("#drops-episode").value = "";
    if (qs("#drops-difficulty")) qs("#drops-difficulty").value = "";
    if (qs("#drops-section")) qs("#drops-section").value = "";

    renderTable();
  }

  async function updateMode() {
    const mode = qs("#drops-mode")?.value || "peeps";
    const peepsControls = qs("#drops-peeps-controls");

    if (mode === "hardcore") {
      if (peepsControls) peepsControls.hidden = true;
      setStatus("Hardcore drop tables coming next.");
      return;
    }

    if (peepsControls) peepsControls.hidden = false;

    try {
      await loadPeeps();
    } catch (err) {
      setStatus(err?.message || "Unable to load drop table.", "error");
    }
  }

  document.addEventListener("DOMContentLoaded", () => {
    qs("#drops-mode")?.addEventListener("change", updateMode);
    qs("#drops-version")?.addEventListener("change", loadPeeps);

    qs("#drops-episode")?.addEventListener("change", (event) => {
      state.filters.episode = event.target.value;
      renderTable();
    });

    qs("#drops-difficulty")?.addEventListener("change", (event) => {
      state.filters.difficulty = event.target.value;
      renderTable();
    });

    qs("#drops-section")?.addEventListener("change", (event) => {
      state.filters.section = event.target.value;
      renderTable();
    });

    qs("#drops-search")?.addEventListener("input", (event) => {
      state.filters.search = event.target.value;
      renderTable();
    });

    updateMode();
  });
})();