app.js

const MAX_PER_MINGWEN = 6;
const MAX_PER_CATEGORY = 6;
const MAX_TOTAL = 18;

const categoryMeta = {
  blue: { name: "明澈", colorName: "蓝色" },
  green: { name: "护持", colorName: "绿色" },
  red: { name: "狂攻", colorName: "红色" }
};

const categoryOrder = {
  blue: 0,
  green: 1,
  red: 2
};

const summaryStatOrder = ["生命值", "攻击力", "防御力", "暴击率", "流技强度", "追击率"];

const state = {
  mingwens: [],
  selected: new Map(),
  levels: new Map(),
  activeCategory: "blue",
  activeName: "",
  keyword: ""
};

const elements = {
  openSelectorButtons: document.querySelectorAll("#openSelectorButton"),
  clearSelectedButtons: document.querySelectorAll("#clearSelectedButton"),
  selectorDialog: document.querySelector("#selectorDialog"),
  selectedList: document.querySelector("#selectedList"),
  selectedCount: document.querySelector("#selectedCount"),
  summaryColumn: document.querySelector("#summaryColumn"),
  categoryTabs: document.querySelector("#categoryTabs"),
  catalogGrid: document.querySelector("#catalogGrid"),
  detailPanel: document.querySelector("#detailPanel"),
  pickedList: document.querySelector("#pickedList"),
  dialogSelectedCount: document.querySelector("#dialogSelectedCount"),
  searchInput: document.querySelector("#searchInput"),
  toast: document.querySelector("#toast")
};

let toastTimer = 0;

init();

async function init() {
  const response = await fetch("./data/mingwen.json");
  state.mingwens = await response.json();
  state.activeName = getCategoryItems("blue")[0]?.name ?? state.mingwens[0]?.name ?? "";

  elements.openSelectorButtons.forEach((button) => {
    button.addEventListener("click", () => elements.selectorDialog.showModal());
  });
  elements.clearSelectedButtons.forEach((button) => {
    button.addEventListener("click", () => {
      state.selected.clear();
      render();
    });
  });
  elements.searchInput.addEventListener("input", (event) => {
    state.keyword = event.target.value.trim();
    renderCatalog();
  });

  render();
}

function render() {
  renderMainList();
  renderSummaries();
  renderTabs();
  renderCatalog();
  renderDetail();
  renderPickedList();
}

function renderMainList() {
  elements.selectedCount.textContent = `已选 ${getTotalCount()} / ${MAX_TOTAL}`;
  elements.selectedList.innerHTML = Object.keys(categoryMeta).map(renderCategorySection).join("");

  elements.selectedList.querySelectorAll("[data-action]").forEach((button) => {
    button.addEventListener("click", () => {
      const name = button.dataset.name;
      const action = button.dataset.action;

      if (action === "count-down") {
        changeCount(name, -1);
      }

      if (action === "count-up") {
        changeCount(name, 1);
      }

      if (action === "level-down") {
        changeLevel(name, -1);
      }

      if (action === "level-up") {
        changeLevel(name, 1);
      }

      render();
    });
  });
}

function renderCategorySection(categoryKey) {
  const meta = categoryMeta[categoryKey];
  const selectedRows = getSelectedItems().filter(({ mingwen }) => mingwen.categoryKey === categoryKey);
  const rows = selectedRows.length > 0 ? selectedRows.map(renderMainRow).join("") : renderEmptyMainRow();

  return `
    <section class="mingwen-section" data-category="${categoryKey}">
      <div class="mingwen-section-head">
        <h3>${meta.name}（${meta.colorName}）</h3>
        <span class="level-title">等级</span>
        <span class="stats-title">属性</span>
      </div>
      <div class="mingwen-table">${rows}</div>
    </section>
  `;
}

function renderMainRow({ mingwen, level }) {
  const stats = getLevelStats(mingwen, level);

  return `
    <div class="mingwen-row">
      <div class="mingwen-name-cell">
        ${renderIcon(mingwen, "small")}
        <strong>${mingwen.name}</strong>
      </div>
      <div class="stepper">
        <button data-action="level-down" data-name="${mingwen.name}" type="button">−</button>
        <span>${level}</span>
        <button data-action="level-up" data-name="${mingwen.name}" type="button">+</button>
      </div>
      <div class="row-stats">${Object.entries(stats).map(([name, value]) => renderInlineStat(name, value)).join("")}</div>
    </div>
  `;
}

function renderEmptyMainRow() {
  return `
    <div class="mingwen-row empty-row">
      <div class="mingwen-name-cell"><span class="empty-icon"></span><strong>未选择</strong></div>
      <div class="muted">-</div>
      <div class="muted">点击“选择铭文”添加</div>
    </div>
  `;
}

function renderSummaries() {
  const summaries = ["all", "blue", "green", "red"].map((key) => {
    const title = key === "all" ? "全部汇总" : `${categoryMeta[key].name}汇总`;
    return renderSummaryCard(key, title, calculateSummary(key));
  });

  elements.summaryColumn.innerHTML = summaries.join("");
}

function renderSummaryCard(categoryKey, title, stats) {
  const rows = Object.keys(stats).length
    ? getSortedSummaryStats(stats).map(([name, value]) => renderStatRow(name, formatStat(value))).join("")
    : `<div class="stat-row"><span>暂无加成</span><strong>-</strong></div>`;

  return `
    <section class="summary-card" data-category="${categoryKey}">
      <h3>${title}</h3>
      <div class="summary-list">${rows}</div>
    </section>
  `;
}

function getSortedSummaryStats(stats) {
  const entries = Object.entries(stats);
  const priorityEntries = summaryStatOrder
    .filter((name) => Object.prototype.hasOwnProperty.call(stats, name))
    .map((name) => [name, stats[name]]);
  const remainingEntries = entries.filter(([name]) => !summaryStatOrder.includes(name));

  return [...priorityEntries, ...remainingEntries];
}

function renderTabs() {
  elements.categoryTabs.innerHTML = Object.entries(categoryMeta)
    .map(([key, meta]) => `<button class="category-tab ${state.activeCategory === key ? "active" : ""}" data-category="${key}" type="button">${meta.name}</button>`)
    .join("");

  elements.categoryTabs.querySelectorAll("[data-category]").forEach((button) => {
    button.addEventListener("click", () => {
      state.activeCategory = button.dataset.category;
      state.activeName = getFilteredMingwens()[0]?.name ?? getCategoryItems(state.activeCategory)[0]?.name ?? "";
      renderTabs();
      renderCatalog();
      renderDetail();
    });
  });
}

function renderCatalog() {
  const items = getFilteredMingwens();

  elements.catalogGrid.innerHTML = items
    .map((mingwen) => {
      const count = state.selected.get(mingwen.name) ?? 0;
      const isActive = state.activeName === mingwen.name;

      return `
        <div class="catalog-card ${count > 0 ? "selected" : ""} ${isActive ? "active" : ""}" data-name="${mingwen.name}">
          <button class="catalog-pick ${count > 0 ? "checked" : ""}" data-pick-name="${mingwen.name}" type="button" aria-label="选择${mingwen.name}">
            ${count > 0 ? "✓" : ""}
          </button>
          ${renderIcon(mingwen, "medium")}
          <strong>${mingwen.name}</strong>
        </div>
      `;
    })
    .join("");

  elements.catalogGrid.querySelectorAll(".catalog-card").forEach((card) => {
    card.addEventListener("click", (event) => {
      if (event.target.closest("[data-pick-name]")) {
        return;
      }
      state.activeName = card.dataset.name;
      renderCatalog();
      renderDetail();
    });

    card.addEventListener("dblclick", (event) => {
      event.preventDefault();
      window.getSelection()?.removeAllRanges();
      state.activeName = card.dataset.name;
      toggleSelected(card.dataset.name);
      render();
    });
  });

  elements.catalogGrid.querySelectorAll("[data-pick-name]").forEach((button) => {
    button.addEventListener("click", (event) => {
      event.stopPropagation();
      state.activeName = button.dataset.pickName;
      toggleSelected(button.dataset.pickName);
      render();
    });
  });
}

function renderDetail() {
  const mingwen = findMingwen(state.activeName);

  if (!mingwen) {
    elements.detailPanel.innerHTML = `<p class="detail-empty">请选择一个铭文查看详情。</p>`;
    return;
  }

  const level = getLevel(mingwen.name);
  const stats = getLevelStats(mingwen, level);

  elements.detailPanel.innerHTML = `
    <h3>铭文详情</h3>
    ${renderIcon(mingwen, "large")}
    <div class="detail-title">
      <strong>${mingwen.name}</strong>
      <span>${level}级</span>
    </div>
    <div class="detail-stats">
      ${Object.entries(stats).map(([name, value]) => renderStatRow(name, value)).join("")}
    </div>
    <div class="detail-level">
      <span>等级</span>
      <div class="detail-level-buttons">
        <button data-detail-level="min" type="button">&lt;&lt;</button>
        <button data-detail-level="down" type="button">&lt;</button>
        <strong>${level}</strong>
        <button data-detail-level="up" type="button">&gt;</button>
        <button data-detail-level="max" type="button">&gt;&gt;</button>
      </div>
    </div>
    <p class="source-text">来源：产处未知</p>
  `;

  elements.detailPanel.querySelectorAll("[data-detail-level]").forEach((button) => {
    button.addEventListener("click", () => {
      const action = button.dataset.detailLevel;
      if (action === "min") {
        state.levels.set(mingwen.name, 1);
      }
      if (action === "max") {
        state.levels.set(mingwen.name, 10);
      }
      if (action === "down") {
        changeLevel(mingwen.name, -1);
      }
      if (action === "up") {
        changeLevel(mingwen.name, 1);
      }
      render();
    });
  });
}

function renderPickedList() {
  elements.dialogSelectedCount.textContent = String(getTotalCount());
  const selectedItems = getSelectedItems();

  if (selectedItems.length === 0) {
    elements.pickedList.innerHTML = `<div class="picked-empty">暂未选择铭文</div>`;
    return;
  }

  elements.pickedList.innerHTML = selectedItems.map(renderPickedRow).join("");
  elements.pickedList.querySelectorAll("[data-action]").forEach((button) => {
    button.addEventListener("click", () => {
      const name = button.dataset.name;
      const action = button.dataset.action;

      if (action === "remove") {
        state.selected.delete(name);
      }
      if (action === "count-down") {
        changeCount(name, -1);
      }
      if (action === "count-up") {
        changeCount(name, 1);
      }
      if (action === "count-min") {
        state.selected.delete(name);
      }
      if (action === "count-max") {
        setCountToMax(name);
      }

      state.activeName = name;
      render();
    });
  });
}

function renderPickedRow({ mingwen, count }) {
  return `
    <div class="picked-row">
      ${renderIcon(mingwen, "tiny")}
      <strong>${mingwen.name}</strong>
      <div class="picked-stepper">
        <button data-action="count-min" data-name="${mingwen.name}" type="button">|&lt;</button>
        <button data-action="count-down" data-name="${mingwen.name}" type="button">&lt;</button>
        <span>${count}</span>
        <button data-action="count-up" data-name="${mingwen.name}" type="button">&gt;</button>
        <button data-action="count-max" data-name="${mingwen.name}" type="button">&gt;|</button>
      </div>
      <button class="remove-button plain" data-action="remove" data-name="${mingwen.name}" type="button" aria-label="移除${mingwen.name}">×</button>
    </div>
  `;
}

function changeCount(name, delta) {
  const current = state.selected.get(name) ?? 0;
  const mingwen = findMingwen(name);
  const totalWithoutCurrent = getTotalCount() - current;
  const categoryWithoutCurrent = mingwen ? getCategoryCount(mingwen.categoryKey) - current : 0;
  const maxAllowed = Math.min(MAX_PER_MINGWEN, MAX_TOTAL - totalWithoutCurrent, MAX_PER_CATEGORY - categoryWithoutCurrent);
  const next = clamp(current + delta, 0, maxAllowed);

  if (delta > 0 && next === current && mingwen && getCategoryCount(mingwen.categoryKey) >= MAX_PER_CATEGORY) {
    showToast("同类铭文最多可选择6个");
  }

  if (next <= 0) {
    state.selected.delete(name);
    return;
  }

  state.selected.set(name, next);
  if (!state.levels.has(name)) {
    state.levels.set(name, 10);
  }
}

function setCountToMax(name) {
  const current = state.selected.get(name) ?? 0;
  const mingwen = findMingwen(name);
  const totalWithoutCurrent = getTotalCount() - current;
  const categoryWithoutCurrent = mingwen ? getCategoryCount(mingwen.categoryKey) - current : 0;
  const maxAllowed = Math.min(MAX_PER_MINGWEN, MAX_TOTAL - totalWithoutCurrent, MAX_PER_CATEGORY - categoryWithoutCurrent);

  if (maxAllowed <= current && mingwen && getCategoryCount(mingwen.categoryKey) >= MAX_PER_CATEGORY) {
    showToast("同类铭文最多可选择6个");
  }

  if (maxAllowed > 0) {
    state.selected.set(name, maxAllowed);
  }
}

function toggleSelected(name) {
  if (state.selected.has(name)) {
    state.selected.delete(name);
    return;
  }

  changeCount(name, 1);
}

function changeLevel(name, delta) {
  state.levels.set(name, clamp(getLevel(name) + delta, 1, 10));
}

function renderIcon(mingwen, size) {
  return `
    <span class="mingwen-icon ${size ? `icon-${size}` : ""} icon-${mingwen.categoryKey}">
      <img src="${mingwen.icon}" alt="${mingwen.name}" />
    </span>
  `;
}

function renderInlineStat(name, value) {
  return `<span><em>${name}</em><strong>${value}</strong></span>`;
}

function renderStatRow(name, value) {
  return `<div class="stat-row"><span>${name}</span><strong>${value}</strong></div>`;
}

function getCategoryItems(categoryKey) {
  return state.mingwens.filter((mingwen) => mingwen.categoryKey === categoryKey);
}

function getFilteredMingwens() {
  const keyword = state.keyword.toLowerCase();

  return getCategoryItems(state.activeCategory).filter((mingwen) => {
    if (!keyword) {
      return true;
    }

    const statsText = mingwen.levels.flatMap((level) => Object.keys(level.stats)).join("");
    return `${mingwen.name}${statsText}`.toLowerCase().includes(keyword);
  });
}

function getSelectedItems() {
  return Array.from(state.selected.entries())
    .map(([name, count]) => ({ mingwen: findMingwen(name), count, level: getLevel(name) }))
    .filter((item) => item.mingwen)
    .sort((a, b) => {
      const categoryDiff = categoryOrder[a.mingwen.categoryKey] - categoryOrder[b.mingwen.categoryKey];

      if (categoryDiff !== 0) {
        return categoryDiff;
      }

      return getMingwenIndex(a.mingwen.name) - getMingwenIndex(b.mingwen.name);
    });
}

function findMingwen(name) {
  return state.mingwens.find((item) => item.name === name);
}

function getMingwenIndex(name) {
  return state.mingwens.findIndex((item) => item.name === name);
}

function getLevel(name) {
  return state.levels.get(name) ?? 10;
}

function getLevelStats(mingwen, level) {
  return mingwen.levels.find((item) => item.level === level)?.stats ?? {};
}

function getTotalCount() {
  return Array.from(state.selected.values()).reduce((sum, count) => sum + count, 0);
}

function getCategoryCount(categoryKey) {
  return getSelectedItems()
    .filter(({ mingwen }) => mingwen.categoryKey === categoryKey)
    .reduce((sum, item) => sum + item.count, 0);
}

function showToast(message) {
  elements.toast.textContent = message;
  elements.toast.classList.add("show");
  window.clearTimeout(toastTimer);
  toastTimer = window.setTimeout(() => {
    elements.toast.classList.remove("show");
  }, 1800);
}

function calculateSummary(categoryKey) {
  const summary = {};

  getSelectedItems().forEach(({ mingwen, count, level }) => {
    if (categoryKey !== "all" && mingwen.categoryKey !== categoryKey) {
      return;
    }

    Object.entries(getLevelStats(mingwen, level)).forEach(([name, rawValue]) => {
      const parsed = parseStatValue(rawValue);
      if (!summary[name]) {
        summary[name] = { value: 0, unit: parsed.unit };
      }
      summary[name].value += parsed.value * count;
    });
  });

  return summary;
}

function parseStatValue(rawValue) {
  const text = String(rawValue).replace("+", "").trim();
  const unit = text.endsWith("%") ? "%" : "";
  const value = Number(text.replace("%", ""));

  return {
    value: Number.isFinite(value) ? value : 0,
    unit
  };
}

function formatStat(stat) {
  const fixed = Number.isInteger(stat.value) ? String(stat.value) : stat.value.toFixed(1).replace(/\.0$/, "");
  return `+${fixed}${stat.unit}`;
}

function clamp(value, min, max) {
  return Math.min(max, Math.max(min, value));
}