const state = {
  user: null,
  stories: [],
  contests: [],
  track: "standard",
  videoCatalog: null,
  videos: [],
  videoAbility: "",
  videoDiscipline: "",
};

const $ = (selector, root = document) => root.querySelector(selector);
const $$ = (selector, root = document) => [...root.querySelectorAll(selector)];

function csrfToken() {
  const match = document.cookie.match(/(?:^|; )csrftoken=([^;]+)/);
  return match ? decodeURIComponent(match[1]) : "";
}

async function api(path, options = {}) {
  const headers = { Accept: "application/json", ...(options.headers || {}) };
  if (options.body && typeof options.body !== "string") {
    headers["Content-Type"] = "application/json";
    options.body = JSON.stringify(options.body);
  }
  if (!["GET", "HEAD"].includes(options.method || "GET")) headers["X-CSRFToken"] = csrfToken();
  const response = await fetch(`/api/v1/${path}`, { credentials: "same-origin", ...options, headers });
  if (response.status === 204) return null;
  const payload = await response.json().catch(() => ({}));
  if (!response.ok) {
    const details = payload.error?.details;
    const message = payload.error?.message || payload.detail ||
      (details ? Object.values(details).flat().join(" ") : "请求失败");
    const error = new Error(message);
    error.status = response.status;
    throw error;
  }
  return payload;
}

function showToast(message) {
  const toast = $("#toast");
  toast.textContent = message;
  toast.classList.add("show");
  window.setTimeout(() => toast.classList.remove("show"), 2600);
}

function navigate(view) {
  $$(".nav-item").forEach((button) => button.classList.toggle("active", button.dataset.view === view));
  $$(".view").forEach((section) => section.classList.toggle("active", section.id === `view-${view}`));
  window.scrollTo({ top: 0, behavior: "smooth" });
  if (view === "profile") loadProfile();
}

function openAuth() {
  $("#auth-error").textContent = "";
  $("#auth-dialog").showModal();
}

function requireAuth() {
  if (state.user) return true;
  openAuth();
  showToast("请先登录或使用邀请码注册");
  return false;
}

function updateUserUI() {
  const chip = $("#user-chip");
  chip.replaceChildren();
  const avatar = document.createElement("span");
  avatar.className = "avatar";
  avatar.textContent = state.user ? state.user.nickname.slice(0, 1) : "游";
  const name = document.createElement("span");
  name.textContent = state.user ? `${state.user.nickname} · ${state.user.rating}` : "游客";
  chip.append(avatar, name);
  $("#auth-button").textContent = state.user ? "退出登录" : "登录 / 注册";
  $("#admin-entry").hidden = !state.user?.is_staff;
}

async function loadUser() {
  try {
    state.user = await api("accounts/me/");
  } catch (error) {
    if (error.status !== 401 && error.status !== 403) console.warn(error);
    state.user = null;
  }
  updateUserUI();
}

function card({ meta, title, body, foot, action, onClick, disabled = false }) {
  const article = document.createElement("article");
  article.className = "content-card";
  const metaEl = document.createElement("span");
  metaEl.className = "meta";
  metaEl.textContent = meta;
  const titleEl = document.createElement("h3");
  titleEl.textContent = title;
  const bodyEl = document.createElement("p");
  bodyEl.textContent = body;
  const footer = document.createElement("footer");
  const footEl = document.createElement("span");
  footEl.textContent = foot;
  const button = document.createElement("button");
  button.textContent = action;
  button.disabled = disabled;
  if (onClick) button.addEventListener("click", onClick);
  footer.append(footEl, button);
  article.append(metaEl, titleEl, bodyEl, footer);
  return article;
}

async function loadStories() {
  const root = $("#story-list");
  try {
    state.stories = await api("math-life/stories/");
    root.classList.remove("loading");
    root.replaceChildren(...state.stories.map((story) => card({
      meta: story.kind === "flagship" ? "旗舰人生" : story.kind === "skill" ? "人物 Skill" : "特别篇",
      title: story.title,
      body: story.summary || "在不完整信息中判断机会、关系与代价。",
      foot: `约 ${story.estimated_minutes} 分钟`,
      action: story.available ? "开始人生 →" : "查看预告",
      disabled: !story.available,
      onClick: () => beginStory(story.slug),
    })));
  } catch (error) {
    root.textContent = error.message;
  }
}

async function beginStory(slug) {
  if (!requireAuth()) return;
  try {
    const run = await api(`math-life/stories/${slug}/start/`, { method: "POST", body: {} });
    renderStoryNode(run);
    $("#experience-dialog").showModal();
  } catch (error) {
    showToast(error.message);
  }
}

function renderStoryNode(run) {
  const root = $("#experience-content");
  root.replaceChildren();
  const label = document.createElement("span");
  label.className = "kicker";
  label.textContent = `${run.story} · ${run.current_node}`;
  const title = document.createElement("h2");
  title.textContent = run.node.character || "旁白";
  const scene = document.createElement("p");
  scene.className = "scene";
  scene.textContent = run.node.scene;
  const choices = document.createElement("div");
  choices.className = "choice-list";
  if (run.status === "completed") {
    const ending = document.createElement("p");
    ending.textContent = "这段人生已经抵达结局，路径已写入你的数学档案。";
    choices.append(ending);
  } else {
    run.node.choices.forEach((choice) => {
      const button = document.createElement("button");
      button.textContent = choice.text;
      button.addEventListener("click", async () => {
        button.disabled = true;
        try {
          const next = await api(`math-life/runs/${run.run_id}/choice/`, {
            method: "POST",
            headers: { "Idempotency-Key": crypto.randomUUID() },
            body: { choice_index: choice.index },
          });
          renderStoryNode(next);
        } catch (error) {
          showToast(error.message);
          button.disabled = false;
        }
      });
      choices.append(button);
    });
  }
  root.append(label, title, scene, choices);
}

async function startMathBTI() {
  try {
    const assessment = await api("math-life/mathbti/");
    const questions = assessment.definition.questions;
    const answers = [];
    let index = 0;
    const root = $("#experience-content");
    const render = () => {
      const question = questions[index];
      root.replaceChildren();
      const label = document.createElement("span");
      label.className = "kicker";
      label.textContent = `MATHBTI · ${index + 1} / ${questions.length}`;
      const progress = document.createElement("div");
      progress.className = "quiz-progress";
      const bar = document.createElement("i");
      bar.style.width = `${((index + 1) / questions.length) * 100}%`;
      progress.append(bar);
      const title = document.createElement("h2");
      title.textContent = question.question;
      const choices = document.createElement("div");
      choices.className = "choice-list";
      question.options.forEach((option, optionIndex) => {
        const button = document.createElement("button");
        button.textContent = option.text;
        button.addEventListener("click", async () => {
          answers.push(optionIndex);
          index += 1;
          if (index < questions.length) {
            render();
            return;
          }
          try {
            const result = await api("math-life/mathbti/submit/", {
              method: "POST",
              body: { version: assessment.version, answers },
            });
            renderMathBTIResult(result);
          } catch (error) {
            showToast(error.message);
          }
        });
        choices.append(button);
      });
      root.append(label, progress, title, choices);
    };
    render();
    $("#experience-dialog").showModal();
  } catch (error) {
    showToast(error.message);
  }
}

function renderMathBTIResult(result) {
  const root = $("#experience-content");
  root.replaceChildren();
  const label = document.createElement("span");
  label.className = "kicker";
  label.textContent = `${result.identity.clan} · ${result.identity.code}`;
  const title = document.createElement("h2");
  title.textContent = `${result.identity.name} · ${result.identity.mathematician}`;
  const description = document.createElement("p");
  description.className = "scene";
  description.textContent = result.identity.description;
  const button = document.createElement("button");
  button.className = "primary-button";
  button.textContent = state.user ? "进入推荐人生" : "注册并保存身份";
  button.addEventListener("click", () => {
    $("#experience-dialog").close();
    if (state.user) navigate("life"); else openAuth();
  });
  root.append(label, title, description, button);
}

async function loadContests() {
  const root = $("#contest-list");
  try {
    state.contests = await api("contests/");
    renderContests();
  } catch (error) {
    root.textContent = error.message;
  }
}

function renderContests() {
  const root = $("#contest-list");
  const contests = state.contests.filter((contest) => contest.track === state.track);
  root.classList.remove("loading");
  root.replaceChildren(...contests.map((contest) => card({
    meta: contest.kind === "realtime" ? "实时竞技" : contest.kind === "daily" ? "今日挑战" : "自由练习",
    title: contest.title,
    body: contest.kind === "realtime" ? "Rating 匹配，同题序列，服务端计时和唯一结算。" : "完成整组题目，正式答案只在提交后显示。",
    foot: `${contest.duration_seconds} 秒`,
    action: contest.kind === "realtime" ? "开始匹配 →" : "开始答题 →",
    onClick: () => beginContest(contest),
  })));
}

async function beginContest(contest) {
  if (!requireAuth()) return;
  try {
    if (contest.kind === "realtime") {
      const match = await api(`contests/${contest.slug}/matchmaking/`, { method: "POST", body: {} });
      if (match.status === "waiting") {
        showToast("已进入匹配队列，等待同赛道对手");
        return;
      }
      renderAttempt(match.attempt);
    } else {
      renderAttempt(await api(`contests/${contest.slug}/start/`, { method: "POST", body: {} }));
    }
    $("#experience-dialog").showModal();
  } catch (error) {
    showToast(error.message);
  }
}

function renderAttempt(attempt) {
  const root = $("#experience-content");
  root.replaceChildren();
  const label = document.createElement("span");
  label.className = "kicker";
  label.textContent = `${attempt.kind} · ${attempt.duration_seconds} 秒`;
  const title = document.createElement("h2");
  title.textContent = attempt.contest;
  if (attempt.status !== "active") {
    const summary = document.createElement("p");
    summary.className = "scene";
    summary.textContent = `得分 ${attempt.score}，答对 ${attempt.correct_count} 题，用时 ${(attempt.duration_ms / 1000).toFixed(1)} 秒。`;
    root.append(label, title, summary);
    return;
  }
  const form = document.createElement("form");
  form.className = "choice-list";
  attempt.questions.forEach((question) => {
    const field = document.createElement("label");
    field.textContent = `${question.order}. ${question.prompt}`;
    const input = document.createElement("input");
    input.name = String(question.order);
    input.inputMode = "decimal";
    input.autocomplete = "off";
    input.style.cssText = "margin-top:7px;width:100%;padding:12px;border:1px solid #d6d8d1;border-radius:9px";
    field.append(input);
    form.append(field);
  });
  const submit = document.createElement("button");
  submit.className = "primary-button";
  submit.type = "submit";
  submit.textContent = "提交并结算";
  form.append(submit);
  form.addEventListener("submit", async (event) => {
    event.preventDefault();
    submit.disabled = true;
    const data = new FormData(form);
    const answers = attempt.questions.map((question) => ({
      order: question.order,
      answer: data.get(String(question.order)) || "",
    }));
    try {
      const result = await api(`contests/attempts/${attempt.attempt_id}/submit/`, {
        method: "POST",
        headers: { "Idempotency-Key": crypto.randomUUID() },
        body: { answers },
      });
      renderAttempt(result);
    } catch (error) {
      showToast(error.message);
      submit.disabled = false;
    }
  });
  root.append(label, title, form);
}

function filterChip(label, value, type, active) {
  const button = document.createElement("button");
  button.className = `filter-chip${active ? " active" : ""}`;
  button.textContent = label;
  button.dataset[type] = value;
  button.addEventListener("click", () => {
    if (type === "ability") state.videoAbility = value;
    if (type === "discipline") state.videoDiscipline = value;
    renderVideoFilters();
    renderVideos();
  });
  return button;
}

function renderVideoFilters() {
  if (!state.videoCatalog) return;
  const abilityRoot = $("#ability-filters");
  abilityRoot.replaceChildren(
    filterChip(`全部 ${state.videoCatalog.total}`, "", "ability", !state.videoAbility),
    ...state.videoCatalog.abilities.map((ability) =>
      filterChip(
        `${ability.icon} ${ability.label} ${ability.count}`,
        ability.id,
        "ability",
        state.videoAbility === ability.id,
      )
    ),
  );
  const disciplineRoot = $("#discipline-filters");
  disciplineRoot.replaceChildren(
    filterChip("全部专业", "", "discipline", !state.videoDiscipline),
    ...state.videoCatalog.disciplines.map((discipline) =>
      filterChip(
        `${discipline.icon || "∑"} ${discipline.name}`,
        discipline.name,
        "discipline",
        state.videoDiscipline === discipline.name,
      )
    ),
  );

  const selected = state.videoCatalog.abilities.find(
    (item) => item.id === state.videoAbility
  );
  $("#video-stream-title").textContent = selected ? `${selected.label}视频流` : "全部视频";
  $$(".ability-node").forEach((node) => {
    node.classList.toggle("active", node.dataset.ability === state.videoAbility);
  });
}

function formatCount(value) {
  if (value >= 10000) return `${(value / 10000).toFixed(1)}万`;
  return String(value);
}

function formatDuration(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remaining = seconds % 60;
  return `${String(minutes).padStart(2, "0")}:${String(remaining).padStart(2, "0")}`;
}

function videoCard(item, index) {
  const article = document.createElement("article");
  article.className = "video-card";
  article.setAttribute("role", "button");
  article.setAttribute("aria-label", `打开视频：${item.title}`);
  article.tabIndex = 0;
  const ability = item.ability || { label: "数学探索", icon: "∑", color: "#657068" };
  article.style.setProperty("--badge-color", ability.color);
  article.style.setProperty("--cover-a", `${ability.color}22`);
  article.style.setProperty("--cover-b", `${ability.color}55`);

  const cover = document.createElement("div");
  cover.className = "video-cover";
  const duration = document.createElement("b");
  duration.className = "video-duration";
  duration.textContent = formatDuration(item.duration_seconds);
  const icon = document.createElement("span");
  icon.textContent = item.discipline_icon || ability.icon;
  cover.append(duration, icon);
  if (item.progress?.completed) {
    const complete = document.createElement("i");
    complete.className = "video-complete";
    complete.textContent = "已完成";
    cover.append(complete);
  }

  const body = document.createElement("div");
  body.className = "video-body";
  const badge = document.createElement("span");
  badge.className = "ability-badge";
  badge.textContent = `${ability.icon} ${ability.label}`;
  const title = document.createElement("h3");
  title.textContent = item.title;
  const metrics = document.createElement("div");
  metrics.className = "video-metrics";
  const views = document.createElement("span");
  views.textContent = `◉ ${formatCount(item.view_count)}`;
  const comments = document.createElement("span");
  comments.textContent = `◌ ${formatCount(item.comment_count)}`;
  metrics.append(views, comments);
  const author = document.createElement("div");
  author.className = "video-author";
  const avatar = document.createElement("i");
  avatar.textContent = item.discipline?.slice(0, 1) || "数";
  const authorName = document.createElement("span");
  authorName.textContent = item.author || "葫芦数学志愿者";
  author.append(avatar, authorName);
  body.append(badge, title, metrics, author);
  article.append(cover, body);
  article.addEventListener("click", () => openVideo(item));
  article.addEventListener("keydown", (event) => {
    if (event.key === "Enter") openVideo(item);
  });
  return article;
}

function renderVideos() {
  const root = $("#video-list");
  const videos = state.videos.filter(
    (item) =>
      (!state.videoAbility || item.ability_dimension === state.videoAbility) &&
      (!state.videoDiscipline || item.discipline === state.videoDiscipline)
  );
  root.classList.remove("loading");
  root.replaceChildren(...videos.map(videoCard));
  $("#video-result-count").textContent = `${videos.length} 条内容`;
}

function openVideo(item) {
  const root = $("#video-dialog-content");
  root.replaceChildren();
  const player = document.createElement("div");
  player.className = "video-player";
  const icon = document.createElement("span");
  icon.textContent = item.discipline_icon || "▶";
  const status = document.createElement("h3");
  status.textContent = item.media_url ? "志愿者视频外部播放" : "视频素材待上传";
  const note = document.createElement("p");
  note.textContent = item.media_url
    ? "点击下方按钮打开原始视频来源。观看后可回到这里记录完成。"
    : "内容卡、分类和成长链路已经就绪，运营上传视频地址后即可播放。";
  player.append(icon, status, note);

  const title = document.createElement("h2");
  title.textContent = item.title;
  const meta = document.createElement("div");
  meta.className = "video-detail-meta";
  [
    `${item.discipline_icon || "∑"} ${item.discipline}`,
    formatDuration(item.duration_seconds),
    item.author,
    item.ability?.label || "数学探索",
  ].forEach((value) => {
    const span = document.createElement("span");
    span.textContent = value;
    meta.append(span);
  });
  const description = document.createElement("p");
  description.className = "video-description";
  description.textContent = item.summary;
  const actions = document.createElement("div");
  actions.className = "video-dialog-actions";
  if (item.media_url) {
    const link = document.createElement("a");
    link.className = "ghost-button";
    link.href = item.media_url;
    link.target = "_blank";
    link.rel = "noopener noreferrer";
    link.textContent = "打开视频来源";
    actions.append(link);
  } else {
    const unavailable = document.createElement("span");
    unavailable.textContent = "暂时没有可播放地址";
    actions.append(unavailable);
  }
  const complete = document.createElement("button");
  complete.className = "primary-button";
  complete.textContent = item.progress?.completed ? "已完成观看" : "标记完成 · +1 能力碎片";
  complete.disabled = Boolean(item.progress?.completed);
  complete.addEventListener("click", async () => {
    if (!requireAuth()) return;
    complete.disabled = true;
    try {
      const result = await api(`content/${item.slug}/complete/`, {
        method: "POST",
        body: {},
      });
      item.progress = { completed: true, reward_granted: result.reward_granted };
      complete.textContent = "已完成观看";
      renderVideos();
      showToast(result.reward ? "观看完成，获得 1 枚能力碎片" : "观看记录已保存");
    } catch (error) {
      complete.disabled = false;
      showToast(error.message);
    }
  });
  actions.append(complete);
  root.append(player, title, meta, description, actions);
  $("#video-dialog").showModal();
}

async function loadContent() {
  const root = $("#video-list");
  try {
    const [catalog, videos] = await Promise.all([
      api("content/videos/catalog/"),
      api("content/?kind=video"),
    ]);
    state.videoCatalog = catalog;
    state.videos = videos;
    const abilityRoot = $("#ability-legend");
    abilityRoot.replaceChildren(
      ...catalog.abilities.map((ability) => {
        const item = document.createElement("span");
        const dot = document.createElement("i");
        dot.style.background = ability.color;
        item.append(dot, document.createTextNode(`${ability.label} · ${ability.count}`));
        return item;
      })
    );
    catalog.abilities.forEach((ability) => {
      const node = $(`.ability-node[data-ability="${ability.id}"]`);
      if (node) node.querySelector("small").textContent = ability.count;
    });
    renderVideoFilters();
    renderVideos();
  } catch (error) {
    root.textContent = error.message;
  }
}

async function loadProfile() {
  const root = $("#profile-panel");
  if (!state.user) {
    root.innerHTML = '<p>登录后查看完整档案。</p><button class="primary-button" data-open-auth>登录 / 注册</button>';
    $("[data-open-auth]", root).addEventListener("click", openAuth);
    return;
  }
  try {
    const profile = await api("progression/me/");
    root.replaceChildren();
    const heading = document.createElement("h2");
    heading.textContent = `${state.user.nickname} · Rating ${state.user.rating}`;
    const pet = document.createElement("p");
    pet.textContent = `数学精灵：${profile.pet.name}，等级 ${profile.pet.level}`;
    const metrics = document.createElement("div");
    metrics.className = "metric-grid";
    profile.abilities.forEach((ability) => {
      const item = document.createElement("div");
      item.className = "metric";
      const value = document.createElement("b");
      value.textContent = ability.level;
      const label = document.createElement("span");
      label.textContent = `${ability.label} · ${ability.fragments} 碎片`;
      item.append(value, label);
      metrics.append(item);
    });
    root.append(heading, pet, metrics);
  } catch (error) {
    root.textContent = error.message;
  }
}

const MATH_SYMBOLS = [
  ["∑", "求和", "一组数或表达式的总和", "\\sum"],
  ["∏", "连乘", "一组数或表达式的乘积", "\\prod"],
  ["∫", "积分", "连续累积与面积", "\\int"],
  ["∂", "偏导数", "多元函数对一个变量的变化率", "\\partial"],
  ["∞", "无穷", "没有有限边界", "\\infty"],
  ["√", "平方根", "平方后得到原数的值", "\\sqrt{x}"],
  ["≈", "约等于", "数值近似相等", "\\approx"],
  ["≠", "不等于", "两个量不相等", "\\ne"],
  ["≤", "小于等于", "不大于右侧的量", "\\le"],
  ["≥", "大于等于", "不小于右侧的量", "\\ge"],
  ["∈", "属于", "元素属于某个集合", "\\in"],
  ["∉", "不属于", "元素不在某个集合中", "\\notin"],
  ["⊂", "真子集", "集合被另一个集合包含", "\\subset"],
  ["∪", "并集", "属于至少一个集合的元素", "\\cup"],
  ["∩", "交集", "同时属于多个集合的元素", "\\cap"],
  ["∀", "任意", "对所有对象都成立", "\\forall"],
  ["∃", "存在", "至少存在一个对象", "\\exists"],
  ["⇒", "推出", "前件能够推出后件", "\\Rightarrow"],
  ["π", "圆周率", "圆周长与直径之比", "\\pi"],
  ["θ", "角变量", "常用于表示角度", "\\theta"],
];

function evaluateExpression(source, variables = {}) {
  const input = String(source).replaceAll("π", "pi").replaceAll("×", "*").replaceAll("÷", "/");
  let position = 0;
  const functions = {
    sin: Math.sin,
    cos: Math.cos,
    tan: Math.tan,
    sqrt: Math.sqrt,
    log: Math.log10,
    ln: Math.log,
    abs: Math.abs,
  };

  const skip = () => {
    while (/\s/.test(input[position] || "")) position += 1;
  };
  const parseExpression = () => {
    let value = parseTerm();
    while (true) {
      skip();
      const operator = input[position];
      if (operator !== "+" && operator !== "-") break;
      position += 1;
      const right = parseTerm();
      value = operator === "+" ? value + right : value - right;
    }
    return value;
  };
  const parseTerm = () => {
    let value = parsePower();
    while (true) {
      skip();
      const operator = input[position];
      if (operator !== "*" && operator !== "/") break;
      position += 1;
      const right = parsePower();
      value = operator === "*" ? value * right : value / right;
    }
    return value;
  };
  const parsePower = () => {
    let value = parseUnary();
    skip();
    if (input[position] === "^") {
      position += 1;
      value = value ** parsePower();
    }
    return value;
  };
  const parseUnary = () => {
    skip();
    if (input[position] === "+") {
      position += 1;
      return parseUnary();
    }
    if (input[position] === "-") {
      position += 1;
      return -parseUnary();
    }
    return parsePrimary();
  };
  const parsePrimary = () => {
    skip();
    if (input[position] === "(") {
      position += 1;
      const value = parseExpression();
      skip();
      if (input[position] !== ")") throw new Error("缺少右括号");
      position += 1;
      return value;
    }
    const numberMatch = input.slice(position).match(/^(?:\d+\.?\d*|\.\d+)/);
    if (numberMatch) {
      position += numberMatch[0].length;
      return Number(numberMatch[0]);
    }
    const identifierMatch = input.slice(position).match(/^[A-Za-z]+/);
    if (!identifierMatch) throw new Error(`无法识别位置 ${position + 1} 的内容`);
    const identifier = identifierMatch[0].toLowerCase();
    position += identifierMatch[0].length;
    if (identifier === "pi") return Math.PI;
    if (identifier === "e") return Math.E;
    if (Object.hasOwn(variables, identifier)) return Number(variables[identifier]);
    if (!functions[identifier]) throw new Error(`不支持函数 ${identifier}`);
    skip();
    if (input[position] !== "(") throw new Error(`${identifier} 后需要括号`);
    position += 1;
    const argument = parseExpression();
    skip();
    if (input[position] !== ")") throw new Error("函数缺少右括号");
    position += 1;
    return functions[identifier](argument);
  };

  const value = parseExpression();
  skip();
  if (position !== input.length) throw new Error(`无法识别位置 ${position + 1} 的内容`);
  if (!Number.isFinite(value)) throw new Error("结果不是有限数值");
  return value;
}

function runCalculator() {
  const input = $("#calc-input").value;
  try {
    const result = evaluateExpression(input);
    $("#calc-history").textContent = input;
    $("#calc-output").textContent = Number(result.toPrecision(12)).toString();
  } catch (error) {
    $("#calc-history").textContent = error.message;
    $("#calc-output").textContent = "错误";
  }
}

function renderSymbols(query = "") {
  const keyword = query.trim().toLowerCase();
  const matches = MATH_SYMBOLS.filter((symbol) =>
    symbol.join(" ").toLowerCase().includes(keyword)
  );
  $("#symbol-list").replaceChildren(
    ...matches.map(([glyph, name, description, latex]) => {
      const button = document.createElement("button");
      button.className = "symbol-card";
      const symbol = document.createElement("strong");
      symbol.textContent = glyph;
      const title = document.createElement("b");
      title.textContent = name;
      const detail = document.createElement("small");
      detail.textContent = description;
      const code = document.createElement("code");
      code.textContent = latex;
      button.append(symbol, title, detail, code);
      button.addEventListener("click", async () => {
        try {
          await navigator.clipboard.writeText(latex);
          showToast(`已复制 ${latex}`);
        } catch {
          showToast(`LaTeX：${latex}`);
        }
      });
      return button;
    })
  );
}

function drawGraph() {
  const canvas = $("#graph-canvas");
  const context = canvas.getContext("2d");
  const expression = $("#graph-expression").value;
  const range = Number($("#graph-range").value);
  const width = canvas.width;
  const height = canvas.height;
  $("#graph-range-label").textContent = `−${range} 到 ${range}`;
  $("#graph-error").textContent = "";
  context.clearRect(0, 0, width, height);
  context.fillStyle = "#fbfbf7";
  context.fillRect(0, 0, width, height);

  const toX = (x) => ((x + range) / (range * 2)) * width;
  const toY = (y) => height / 2 - (y / range) * (height / 2);
  context.strokeStyle = "#e4e5df";
  context.lineWidth = 1;
  for (let value = -range; value <= range; value += 1) {
    context.beginPath();
    context.moveTo(toX(value), 0);
    context.lineTo(toX(value), height);
    context.stroke();
    context.beginPath();
    context.moveTo(0, toY(value));
    context.lineTo(width, toY(value));
    context.stroke();
  }
  context.strokeStyle = "#718078";
  context.lineWidth = 2;
  context.beginPath();
  context.moveTo(0, height / 2);
  context.lineTo(width, height / 2);
  context.moveTo(width / 2, 0);
  context.lineTo(width / 2, height);
  context.stroke();

  context.strokeStyle = "#196548";
  context.lineWidth = 3;
  context.beginPath();
  let drawing = false;
  try {
    for (let pixel = 0; pixel <= width; pixel += 2) {
      const x = (pixel / width) * range * 2 - range;
      const y = evaluateExpression(expression, { x });
      const screenY = toY(y);
      if (screenY < -height * 2 || screenY > height * 3) {
        drawing = false;
        continue;
      }
      if (!drawing) context.moveTo(pixel, screenY);
      else context.lineTo(pixel, screenY);
      drawing = true;
    }
    context.stroke();
  } catch (error) {
    $("#graph-error").textContent = error.message;
  }
}

function switchTool(tool) {
  if (tool === "mental") {
    navigate("contest");
    return;
  }
  $$(".tool-card").forEach((card) => {
    card.classList.toggle("active", card.dataset.tool === tool);
  });
  $$(".tool-workspace").forEach((workspace) => {
    workspace.classList.toggle("active", workspace.id === `tool-${tool}`);
  });
  if (tool === "graph") window.setTimeout(drawGraph, 30);
}

async function saveFormula() {
  if (!requireAuth()) return;
  try {
    await api("latex/documents/", {
      method: "POST",
      body: { title: `公式 ${new Date().toLocaleString()}`, source: $("#latex-source").value },
    });
    showToast("公式及首个版本已保存");
  } catch (error) {
    showToast(error.message);
  }
}

function bindUI() {
  $$(".nav-item").forEach((button) => button.addEventListener("click", () => navigate(button.dataset.view)));
  $$("[data-jump]").forEach((button) => button.addEventListener("click", () => navigate(button.dataset.jump)));
  $$("[data-open-auth]").forEach((button) => button.addEventListener("click", openAuth));
  $("#start-mathbti").addEventListener("click", startMathBTI);
  $("#save-formula").addEventListener("click", saveFormula);
  $("#latex-source").addEventListener("input", (event) => { $("#latex-preview").textContent = event.target.value; });
  $$(".tool-card").forEach((button) => {
    button.addEventListener("click", () => switchTool(button.dataset.tool));
  });
  $("#calc-run").addEventListener("click", runCalculator);
  $("#calc-input").addEventListener("keydown", (event) => {
    if (event.key === "Enter") runCalculator();
  });
  $$("[data-calc-example]").forEach((button) => {
    button.addEventListener("click", () => {
      $("#calc-input").value = button.dataset.calcExample;
      runCalculator();
    });
  });
  $("#symbol-search").addEventListener("input", (event) => {
    renderSymbols(event.target.value);
  });
  $("#graph-run").addEventListener("click", drawGraph);
  $("#graph-range").addEventListener("input", drawGraph);
  $("#graph-expression").addEventListener("keydown", (event) => {
    if (event.key === "Enter") drawGraph();
  });
  $$(".ability-node").forEach((button) => {
    button.addEventListener("click", () => {
      state.videoAbility =
        state.videoAbility === button.dataset.ability ? "" : button.dataset.ability;
      renderVideoFilters();
      renderVideos();
      $("#video-list").scrollIntoView({ behavior: "smooth", block: "start" });
    });
  });
  $("#auth-button").addEventListener("click", async () => {
    if (!state.user) return openAuth();
    await api("accounts/logout/", { method: "POST", body: {} });
    state.user = null;
    updateUserUI();
    showToast("已退出登录");
  });
  $$("dialog .dialog-close").forEach((button) => button.addEventListener("click", () => button.closest("dialog").close()));
  $$("[data-auth-tab]").forEach((button) => button.addEventListener("click", () => {
    $$("[data-auth-tab]").forEach((item) => item.classList.toggle("active", item === button));
    $("#login-form").classList.toggle("hidden", button.dataset.authTab !== "login");
    $("#register-form").classList.toggle("hidden", button.dataset.authTab !== "register");
    $("#auth-error").textContent = "";
  }));
  $$("#track-switch button").forEach((button) => button.addEventListener("click", () => {
    state.track = button.dataset.track;
    $$("#track-switch button").forEach((item) => item.classList.toggle("active", item === button));
    renderContests();
  }));
  $("#login-form").addEventListener("submit", async (event) => {
    event.preventDefault();
    try {
      state.user = await api("accounts/login/", { method: "POST", body: Object.fromEntries(new FormData(event.target)) });
      $("#auth-dialog").close();
      updateUserUI();
      await loadContent();
      showToast("登录成功");
    } catch (error) {
      $("#auth-error").textContent = error.message;
    }
  });
  $("#register-form").addEventListener("submit", async (event) => {
    event.preventDefault();
    try {
      state.user = await api("accounts/register/", { method: "POST", body: Object.fromEntries(new FormData(event.target)) });
      $("#auth-dialog").close();
      updateUserUI();
      await loadContent();
      showToast("账号和数学档案已建立");
    } catch (error) {
      $("#auth-error").textContent = error.message;
    }
  });
}

async function boot() {
  bindUI();
  renderSymbols();
  runCalculator();
  await Promise.all([loadUser(), loadStories(), loadContests(), loadContent()]);
}

boot();