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

  const CALC_FIELDS = {
    derivative: ["order"],
    integral: ["bounds"],
    limit: ["point", "direction"],
    series: ["point", "order"],
    solve_system: ["variables"],
    gradient: ["variables"],
    hessian: ["variables"],
    base: ["base"],
    unit: ["unit"],
  };

  const CALC_OPERATION_META = {
    statistics: {
      placeholder: "12, 15, 18, 21, 24",
      hint: "使用逗号分隔数据，返回四分位数、方差、标准差、极差等统计量。",
    },
    base: {
      placeholder: "FF",
      hint: "输入不带前缀的整数，原进制与目标进制均支持 2 到 36。",
    },
    solve: {
      placeholder: "x^2 - 5*x + 6 = 0",
      hint: "可省略等号右侧；通过“变量”指定要求解的未知量。",
    },
    solve_system: {
      placeholder: "x + y = 5; x - y = 1",
      hint: "使用分号分隔方程，通过“变量列表”指定未知量，最多 4 个变量、6 个方程。",
    },
    polynomial_roots: {
      placeholder: "x^5 - x + 1 = 0",
      hint: "返回至多 12 次单变量多项式的全部高精度数值根，包括复根。",
    },
    series: {
      placeholder: "exp(x) * cos(x)",
      hint: "在指定点附近展开；“阶数 6”表示保留到 5 阶并显示余项。",
      order: 6,
    },
    gradient: {
      placeholder: "x^2*y + sin(y)",
      hint: "变量列表示例：x,y。结果按该顺序组成梯度列向量。",
    },
    hessian: {
      placeholder: "x^2 + x*y + y^2",
      hint: "变量列表示例：x,y。结果为二阶偏导组成的 Hessian 矩阵。",
    },
    matrix_det: { placeholder: "1,2;3,4", hint: "逗号分列、分号分行，最多 36 个元素。" },
    matrix_inverse: { placeholder: "1,2;3,4", hint: "逆矩阵要求方阵且行列式非零。" },
    matrix_rref: { placeholder: "1,2,3;2,4,6", hint: "返回矩阵的行最简形。" },
    matrix_transpose: { placeholder: "1,2,3;4,5,6", hint: "交换矩阵的行与列。" },
    matrix_rank: { placeholder: "1,2,3;2,4,6", hint: "通过精确行变换计算矩阵秩。" },
    matrix_nullspace: { placeholder: "1,2;2,4", hint: "返回齐次方程组对应零空间的一组基。" },
    matrix_eigenvalues: { placeholder: "2,1;1,2", hint: "要求方阵，返回特征值及其代数重数。" },
  };

  function calculatorCategoryFor(operation) {
    const option = [...$tool("#calc-operation").options].find(
      (item) => item.value === operation,
    );
    return option?.parentElement?.dataset.calcCategoryOptions || "algebra";
  }

  function setCalculatorCategory(category, selectFirst = true) {
    const select = $tool("#calc-operation");
    $$tool("[data-calc-category-options]").forEach((group) => {
      const active = group.dataset.calcCategoryOptions === category;
      group.hidden = !active;
      group.disabled = !active;
    });
    $$tool("[data-calc-category]").forEach((button) => {
      button.classList.toggle(
        "active",
        button.dataset.calcCategory === category,
      );
    });
    if (selectFirst) {
      const group = $tool(
        `[data-calc-category-options="${category}"]`,
      );
      if (group?.querySelector("option")) {
        select.value = group.querySelector("option").value;
      }
    }
    updateCalculatorFields();
  }

  function resultText(value, field = "exact") {
    if (Array.isArray(value)) {
      return value.map((item) => resultText(item, field)).join("； ");
    }
    if (value && typeof value === "object") {
      if ("exact" in value) return value[field] || value.exact;
      return Object.entries(value)
        .map(([key, item]) => `${key}: ${resultText(item, field)}`)
        .join("； ");
    }
    return String(value ?? "");
  }

  function formatCalculatorResult(result) {
    return {
      exact: resultText(result, "exact"),
      decimal: resultText(result, "decimal"),
      latex: resultText(result, "latex"),
    };
  }

  function updateCalculatorFields() {
    const operation = $tool("#calc-operation").value;
    const visible = new Set(CALC_FIELDS[operation] || []);
    $$tool("[data-calc-field]").forEach((field) => {
      field.hidden = !visible.has(field.dataset.calcField);
    });
    const meta = CALC_OPERATION_META[operation] || {};
    $tool("#calc-input").placeholder = meta.placeholder || "例如：sqrt(2) + 1/3";
    $tool("#calc-hint").textContent =
      meta.hint || "支持精确常量、受限数学函数和变量；按 Command/Ctrl + Enter 运行。";
    $tool("#calc-order").max = operation === "derivative" ? 5 : 12;
    if (meta.order) $tool("#calc-order").value = meta.order;
    else if (operation === "derivative") $tool("#calc-order").value = 1;
  }

  async function runCalculator() {
    const button = $tool("#calc-run");
    const operation = $tool("#calc-operation").value;
    const expression = $tool("#calc-input").value.trim();
    button.disabled = true;
    $tool("#calc-history").textContent = "数学内核正在计算…";
    try {
      const payload = await api("toolbox/calculate/", {
        method: "POST",
        body: {
          operation,
          expression,
          variable: $tool("#calc-variable").value,
          variables: $tool("#calc-variables").value,
          order: $tool("#calc-order").value,
          lower: $tool("#calc-lower").value,
          upper: $tool("#calc-upper").value,
          point: $tool("#calc-point").value,
          direction: $tool("#calc-direction").value,
          from_base: $tool("#calc-from-base").value,
          to_base: $tool("#calc-to-base").value,
          from_unit: $tool("#calc-from-unit").value,
          to_unit: $tool("#calc-to-unit").value,
        },
      });
      const result = formatCalculatorResult(payload.result);
      $tool("#calc-history").textContent = `${operation} · ${expression}`;
      $tool("#calc-output").textContent = result.exact || "完成";
      $tool("#calc-decimal").textContent = result.decimal || result.exact || "—";
      $tool("#calc-latex").textContent = result.latex || result.exact || "—";
      $tool("#calc-steps").replaceChildren(
        ...(payload.steps || []).map((step) => {
          const item = document.createElement("li");
          item.textContent = step;
          return item;
        })
      );
    } catch (error) {
      $tool("#calc-history").textContent = error.message;
      $tool("#calc-output").textContent = "计算失败";
      $tool("#calc-decimal").textContent = "—";
      $tool("#calc-latex").textContent = "—";
      $tool("#calc-steps").replaceChildren();
    } finally {
      button.disabled = false;
    }
  }

  function canvasPoint(canvas, event) {
    const rect = canvas.getBoundingClientRect();
    return {
      x: ((event.clientX - rect.left) / rect.width) * canvas.width,
      y: ((event.clientY - rect.top) / rect.height) * canvas.height,
    };
  }

  function downloadCanvas(canvas, name) {
    const link = document.createElement("a");
    link.download = `${name}-${new Date().toISOString().slice(0, 10)}.png`;
    link.href = canvas.toDataURL("image/png");
    link.click();
  }

  class Whiteboard {
    constructor(canvas) {
      this.canvas = canvas;
      this.context = canvas.getContext("2d");
      this.tool = "pen";
      this.history = [];
      this.drawing = false;
      this.start = null;
      this.preview = null;
      this.onChange = null;
      this.reset();
      canvas.addEventListener("pointerdown", (event) => this.startDrawing(event));
      canvas.addEventListener("pointermove", (event) => this.move(event));
      canvas.addEventListener("pointerup", (event) => this.finish(event));
      canvas.addEventListener("pointercancel", () => this.cancel());
    }

    reset() {
      this.context.fillStyle = "#ffffff";
      this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
    }

    snapshot() {
      this.history.push(this.canvas.toDataURL("image/png"));
      if (this.history.length > 20) this.history.shift();
    }

    emitSnapshot() {
      if (!this.onChange) return;
      const data = this.canvas.toDataURL("image/png");
      if (data.length <= 700000) this.onChange(data);
      else showToast("当前画布内容较大，已保留本地编辑但暂停联机同步");
    }

    applySnapshot(data) {
      if (typeof data !== "string" || !data.startsWith("data:image/")) return;
      const image = new Image();
      image.onload = () => {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.context.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
      };
      image.src = data;
    }

    startDrawing(event) {
      event.preventDefault();
      this.snapshot();
      this.drawing = true;
      this.start = canvasPoint(this.canvas, event);
      if (this.tool === "text") {
        const text = $tool("#whiteboard-text").value.trim();
        if (!text) {
          this.history.pop();
          showToast("先输入要放到白板的文字或公式");
        } else {
          const size = Math.max(18, Number($tool("#whiteboard-size").value) * 5);
          this.context.fillStyle = $tool("#whiteboard-color").value;
          this.context.font = `${size}px "SFMono-Regular", "PingFang SC", sans-serif`;
          this.context.fillText(text, this.start.x, this.start.y);
          this.emitSnapshot();
        }
        this.drawing = false;
        return;
      }
      this.preview = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
      this.canvas.setPointerCapture(event.pointerId);
      this.context.lineCap = "round";
      this.context.lineJoin = "round";
      this.context.lineWidth = Number($tool("#whiteboard-size").value);
      this.context.strokeStyle =
        this.tool === "eraser" ? "#ffffff" : $tool("#whiteboard-color").value;
      if (this.tool === "pen" || this.tool === "eraser") {
        this.context.beginPath();
        this.context.moveTo(this.start.x, this.start.y);
      }
    }

    move(event) {
      if (!this.drawing) return;
      event.preventDefault();
      const point = canvasPoint(this.canvas, event);
      if (this.tool === "pen" || this.tool === "eraser") {
        this.context.lineTo(point.x, point.y);
        this.context.stroke();
        return;
      }
      this.context.putImageData(this.preview, 0, 0);
      this.context.beginPath();
      if (this.tool === "line") {
        this.context.moveTo(this.start.x, this.start.y);
        this.context.lineTo(point.x, point.y);
      } else {
        this.context.rect(
          this.start.x,
          this.start.y,
          point.x - this.start.x,
          point.y - this.start.y,
        );
      }
      this.context.stroke();
    }

    finish(event) {
      if (!this.drawing) return;
      this.move(event);
      this.drawing = false;
      this.preview = null;
      this.emitSnapshot();
    }

    cancel() {
      if (this.preview) this.context.putImageData(this.preview, 0, 0);
      this.drawing = false;
    }

    undo() {
      const source = this.history.pop();
      if (!source) return;
      const image = new Image();
      image.onload = () => {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.context.drawImage(image, 0, 0);
        this.emitSnapshot();
      };
      image.src = source;
    }

    clear() {
      this.snapshot();
      this.reset();
      this.emitSnapshot();
    }

    addGrid() {
      this.snapshot();
      const context = this.context;
      context.strokeStyle = "#e1e7e1";
      context.lineWidth = 1;
      for (let x = 0; x <= this.canvas.width; x += 50) {
        context.beginPath();
        context.moveTo(x, 0);
        context.lineTo(x, this.canvas.height);
        context.stroke();
      }
      for (let y = 0; y <= this.canvas.height; y += 50) {
        context.beginPath();
        context.moveTo(0, y);
        context.lineTo(this.canvas.width, y);
        context.stroke();
      }
      context.strokeStyle = "#7a877f";
      context.lineWidth = 2;
      context.beginPath();
      context.moveTo(this.canvas.width / 2, 0);
      context.lineTo(this.canvas.width / 2, this.canvas.height);
      context.moveTo(0, this.canvas.height / 2);
      context.lineTo(this.canvas.width, this.canvas.height / 2);
      context.stroke();
      this.emitSnapshot();
    }

    addImage(file) {
      if (!file) return;
      const reader = new FileReader();
      reader.onload = () => {
        const image = new Image();
        image.onload = () => {
          this.snapshot();
          const scale = Math.min(
            1,
            (this.canvas.width * 0.8) / image.width,
            (this.canvas.height * 0.8) / image.height,
          );
          this.context.drawImage(
            image,
            30,
            30,
            image.width * scale,
            image.height * scale,
          );
          this.emitSnapshot();
        };
        image.src = reader.result;
      };
      reader.readAsDataURL(file);
    }
  }

  class GeometryBoard {
    constructor(canvas) {
      this.canvas = canvas;
      this.context = canvas.getContext("2d");
      this.tool = "point";
      this.points = [];
      this.segments = [];
      this.circles = [];
      this.history = [];
      this.pending = [];
      this.dragging = null;
      this.onChange = null;
      canvas.addEventListener("pointerdown", (event) => this.pointerDown(event));
      canvas.addEventListener("pointermove", (event) => this.pointerMove(event));
      canvas.addEventListener("pointerup", (event) => this.pointerUp(event));
      canvas.addEventListener("pointercancel", () => {
        this.dragging = null;
      });
      this.draw();
    }

    serialize() {
      return {
        points: this.points,
        segments: this.segments,
        circles: this.circles,
      };
    }

    emitState() {
      if (this.onChange) this.onChange(this.serialize());
    }

    applyState(payload) {
      if (
        !payload ||
        !Array.isArray(payload.points) ||
        !Array.isArray(payload.segments) ||
        !Array.isArray(payload.circles)
      ) {
        return;
      }
      this.points = payload.points.slice(0, 300);
      this.segments = payload.segments.slice(0, 500);
      this.circles = payload.circles.slice(0, 300);
      this.pending = [];
      this.draw();
    }

    save() {
      this.history.push(
        JSON.stringify({
          points: this.points,
          segments: this.segments,
          circles: this.circles,
        })
      );
      if (this.history.length > 30) this.history.shift();
    }

    findOrCreate(point) {
      const nearest = this.findNearest(point);
      if (nearest >= 0) return nearest;
      this.points.push(point);
      return this.points.length - 1;
    }

    findNearest(point) {
      let nearest = -1;
      let distance = 28;
      this.points.forEach((item, index) => {
        const current = Math.hypot(item.x - point.x, item.y - point.y);
        if (current < distance) {
          nearest = index;
          distance = current;
        }
      });
      return nearest;
    }

    pointerDown(event) {
      if (this.tool !== "move") return;
      event.preventDefault();
      const nearest = this.findNearest(canvasPoint(this.canvas, event));
      if (nearest < 0 || this.points[nearest].derived) return;
      this.save();
      this.dragging = nearest;
      this.canvas.setPointerCapture(event.pointerId);
    }

    pointerMove(event) {
      if (this.dragging === null) return;
      event.preventDefault();
      const point = canvasPoint(this.canvas, event);
      this.points[this.dragging] = point;
      this.draw();
    }

    pointerUp(event) {
      if (this.tool === "move") {
        this.pointerMove(event);
        this.dragging = null;
        this.emitState();
        return;
      }
      this.handlePoint(event);
    }

    handlePoint(event) {
      event.preventDefault();
      const point = canvasPoint(this.canvas, event);
      this.save();
      if (this.tool === "point") {
        this.findOrCreate(point);
      } else {
        this.pending.push(this.findOrCreate(point));
        if (this.pending.length === 2) {
          const [first, second] = this.pending;
          if (first !== second && this.tool === "segment") {
            this.segments.push({ first, second });
          } else if (first !== second && this.tool === "circle") {
            this.circles.push({ center: first, edge: second });
          } else if (first !== second && this.tool === "midpoint") {
            const a = this.points[first];
            const b = this.points[second];
            this.points.push({
              x: (a.x + b.x) / 2,
              y: (a.y + b.y) / 2,
              derived: true,
              parents: [first, second],
            });
            this.segments.push({ first, second, guide: true });
          }
          this.pending = [];
        }
      }
      this.draw();
      this.emitState();
      $tool("#geometry-hint").textContent = this.pending.length
        ? "再选择一个点完成构造。"
        : "可继续创建或切换构造工具。";
    }

    draw() {
      const context = this.context;
      const width = this.canvas.width;
      const height = this.canvas.height;
      this.points.forEach((point) => {
        if (!point.derived || !point.parents) return;
        const first = this.points[point.parents[0]];
        const second = this.points[point.parents[1]];
        point.x = (first.x + second.x) / 2;
        point.y = (first.y + second.y) / 2;
      });
      context.fillStyle = "#fbfbf7";
      context.fillRect(0, 0, width, height);
      context.strokeStyle = "#e7e8e2";
      context.lineWidth = 1;
      for (let x = 0; x <= width; x += 50) {
        context.beginPath();
        context.moveTo(x, 0);
        context.lineTo(x, height);
        context.stroke();
      }
      for (let y = 0; y <= height; y += 50) {
        context.beginPath();
        context.moveTo(0, y);
        context.lineTo(width, y);
        context.stroke();
      }
      this.segments.forEach((segment) => {
        const first = this.points[segment.first];
        const second = this.points[segment.second];
        context.strokeStyle = segment.guide ? "#9ca3af" : "#196548";
        context.setLineDash(segment.guide ? [8, 6] : []);
        context.lineWidth = 3;
        context.beginPath();
        context.moveTo(first.x, first.y);
        context.lineTo(second.x, second.y);
        context.stroke();
        context.setLineDash([]);
        if ($tool("#geometry-labels").checked) {
          context.fillStyle = "#47534c";
          context.font = "18px sans-serif";
          context.fillText(
            Math.hypot(first.x - second.x, first.y - second.y).toFixed(1),
            (first.x + second.x) / 2 + 8,
            (first.y + second.y) / 2 - 8,
          );
        }
      });
      this.circles.forEach((circle) => {
        const center = this.points[circle.center];
        const edge = this.points[circle.edge];
        const radius = Math.hypot(center.x - edge.x, center.y - edge.y);
        context.strokeStyle = "#5d73e8";
        context.lineWidth = 3;
        context.beginPath();
        context.arc(center.x, center.y, radius, 0, Math.PI * 2);
        context.stroke();
      });
      this.points.forEach((point, index) => {
        context.fillStyle = point.derived ? "#d86f45" : "#17211b";
        context.beginPath();
        context.arc(point.x, point.y, 7, 0, Math.PI * 2);
        context.fill();
        if ($tool("#geometry-labels").checked) {
          context.fillStyle = "#17211b";
          context.font = "18px sans-serif";
          context.fillText(
            `${String.fromCharCode(65 + (index % 26))} (${Math.round(point.x)}, ${Math.round(point.y)})`,
            point.x + 10,
            point.y - 10,
          );
        }
      });
    }

    undo() {
      const state = this.history.pop();
      if (!state) return;
      const parsed = JSON.parse(state);
      this.points = parsed.points;
      this.segments = parsed.segments;
      this.circles = parsed.circles;
      this.pending = [];
      this.draw();
      this.emitState();
    }

    clear() {
      this.save();
      this.points = [];
      this.segments = [];
      this.circles = [];
      this.pending = [];
      this.draw();
      this.emitState();
    }
  }

  class BoardRealtime {
    constructor() {
      this.session = null;
      this.socket = null;
      this.pollTimer = null;
    }

    websocketUrl(path) {
      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
      return `${protocol}//${window.location.host}${path}`;
    }

    close() {
      if (this.pollTimer) window.clearInterval(this.pollTimer);
      this.pollTimer = null;
      if (this.socket) {
        this.socket.onclose = null;
        this.socket.close();
      }
      this.socket = null;
    }

    async refresh() {
      if (!this.session?.session_id) return;
      try {
        this.session = await api(`toolbox/boards/${this.session.session_id}/`);
        this.render();
      } catch (error) {
        if (error.status === 404) this.close();
      }
    }

    connect() {
      this.close();
      if (!this.session?.websocket_path) return;
      const socket = new WebSocket(this.websocketUrl(this.session.websocket_path));
      this.socket = socket;
      socket.addEventListener("open", () => {
        this.render("实时连接已建立");
        socket.send(JSON.stringify({ type: "ping" }));
      });
      socket.addEventListener("message", async (event) => {
        let message;
        try {
          message = JSON.parse(event.data);
        } catch {
          return;
        }
        if (
          message.type === "canvas" &&
          message.user_id !== String(state.user?.id)
        ) {
          whiteboard.applySnapshot(message.payload);
        } else if (
          message.type === "geometry" &&
          message.user_id !== String(state.user?.id)
        ) {
          geometry.applyState(message.payload);
        } else if (message.type === "state") {
          await this.refresh();
          if (message.reason === "joined" && this.session?.role === "host") {
            this.send("canvas", whiteboard.canvas.toDataURL("image/png"));
            this.send("geometry", geometry.serialize());
          }
        } else if (message.type === "error") {
          showToast(message.message);
        }
      });
      socket.addEventListener("close", () => {
        this.render("实时连接已断开，正在轮询房间状态");
      });
      this.pollTimer = window.setInterval(() => this.refresh(), 3000);
    }

    send(type, payload) {
      if (this.socket?.readyState !== WebSocket.OPEN) return;
      this.socket.send(JSON.stringify({ type, payload }));
    }

    async create() {
      if (!requireAuth()) return;
      const mode = $tool("#board-session-mode").value;
      try {
        this.session = await api("toolbox/boards/", {
          method: "POST",
          body: { mode },
        });
        this.render();
        this.connect();
      } catch (error) {
        showToast(error.message);
      }
    }

    async join(event) {
      event.preventDefault();
      if (!requireAuth()) return;
      const input = $tool("#board-code-input");
      try {
        this.session = await api("toolbox/boards/join/", {
          method: "POST",
          body: { code: input.value },
        });
        input.value = "";
        this.render();
        this.connect();
      } catch (error) {
        showToast(error.message);
      }
    }

    async guess(event) {
      event.preventDefault();
      if (!this.session) return;
      const input = $tool("#board-guess-input");
      try {
        const result = await api(
          `toolbox/boards/${this.session.session_id}/guess/`,
          {
            method: "POST",
            body: { guess: input.value },
          },
        );
        this.session = result;
        showToast(result.message);
        if (result.correct) input.value = "";
        this.render();
      } catch (error) {
        showToast(error.message);
      }
    }

    render(connectionMessage = "") {
      const status = $tool("#board-session-status");
      const target = $tool("#board-target");
      const guessForm = $tool("#board-guess-form");
      if (!this.session) {
        status.textContent = "当前为本地画板，创建或加入后开始实时同步。";
        target.hidden = true;
        guessForm.hidden = true;
        return;
      }
      const participants = this.session.guest
        ? `${this.session.host} 与 ${this.session.guest}`
        : `${this.session.host} 正在等待另一位用户`;
      status.textContent =
        `${this.session.mode_label} · 联机码 ${this.session.code} · ${participants}` +
        (connectionMessage ? ` · ${connectionMessage}` : "");
      target.hidden = !this.session.target;
      target.textContent = this.session.target
        ? `本轮数学对象：${this.session.target}`
        : "";
      guessForm.hidden = !(
        this.session.mode === "draw_guess" &&
        this.session.role === "guest" &&
        this.session.status === "active"
      );
      if (this.session.status === "completed") {
        status.textContent +=
          ` · 本轮结束，比分 ${this.session.host_score}:${this.session.guest_score}`;
      }
    }
  }

  let whiteboard;
  let geometry;
  let boardRealtime;

  function initDrawingTools() {
    whiteboard = new Whiteboard($tool("#whiteboard-canvas"));
    geometry = new GeometryBoard($tool("#geometry-canvas"));
    boardRealtime = new BoardRealtime();
    whiteboard.onChange = (payload) => boardRealtime.send("canvas", payload);
    geometry.onChange = (payload) => boardRealtime.send("geometry", payload);
    $$tool("[data-board-pane-toggle]").forEach((button) => {
      button.addEventListener("click", () => {
        const pane = button.dataset.boardPaneToggle;
        $$tool("[data-board-pane-toggle]").forEach((item) => {
          item.classList.toggle("active", item === button);
        });
        $$tool("[data-board-pane]").forEach((item) => {
          item.classList.toggle("active", item.dataset.boardPane === pane);
        });
        if (pane === "geometry") window.setTimeout(() => geometry.draw(), 30);
      });
    });
    $$tool("[data-whiteboard-tool]").forEach((button) => {
      button.addEventListener("click", () => {
        whiteboard.tool = button.dataset.whiteboardTool;
        $$tool("[data-whiteboard-tool]").forEach((item) =>
          item.classList.toggle("active", item === button)
        );
      });
    });
    $tool("#whiteboard-undo").addEventListener("click", () => whiteboard.undo());
    $tool("#whiteboard-clear").addEventListener("click", () => whiteboard.clear());
    $tool("#whiteboard-grid").addEventListener("click", () => whiteboard.addGrid());
    $tool("#whiteboard-image").addEventListener("change", (event) => {
      whiteboard.addImage(event.target.files[0]);
      event.target.value = "";
    });
    $tool("#whiteboard-export").addEventListener("click", () =>
      downloadCanvas(whiteboard.canvas, "hulumath-whiteboard")
    );
    $$tool("[data-geometry-tool]").forEach((button) => {
      button.addEventListener("click", () => {
        geometry.tool = button.dataset.geometryTool;
        geometry.pending = [];
        $$tool("[data-geometry-tool]").forEach((item) =>
          item.classList.toggle("active", item === button)
        );
      });
    });
    $tool("#geometry-labels").addEventListener("change", () => geometry.draw());
    $tool("#geometry-undo").addEventListener("click", () => geometry.undo());
    $tool("#geometry-clear").addEventListener("click", () => geometry.clear());
    $tool("#geometry-export").addEventListener("click", () =>
      downloadCanvas(geometry.canvas, "hulumath-geometry")
    );
    $tool("#board-create").addEventListener("click", () => boardRealtime.create());
    $tool("#board-join-form").addEventListener(
      "submit",
      (event) => boardRealtime.join(event),
    );
    $tool("#board-guess-form").addEventListener(
      "submit",
      (event) => boardRealtime.guess(event),
    );
    $tool("#board-code-input").addEventListener("input", (event) => {
      event.target.value = event.target.value
        .toUpperCase()
        .replace(/[^ABCDEFGHJKLMNPQRSTUVWXYZ23456789]/g, "")
        .slice(0, 6);
    });
  }

  function init() {
    $tool("#calc-operation").addEventListener("change", () => {
      setCalculatorCategory(
        calculatorCategoryFor($tool("#calc-operation").value),
        false,
      );
    });
    $$tool("[data-calc-category]").forEach((button) => {
      button.addEventListener("click", () => {
        setCalculatorCategory(button.dataset.calcCategory);
      });
    });
    $tool("#calc-run").addEventListener("click", runCalculator);
    $tool("#calc-input").addEventListener("keydown", (event) => {
      if ((event.metaKey || event.ctrlKey) && event.key === "Enter") runCalculator();
    });
    $$tool("[data-calc-example]").forEach((button) => {
      button.addEventListener("click", () => {
        $tool("#calc-operation").value = button.dataset.calcOperation;
        $tool("#calc-input").value = button.dataset.calcExample;
        setCalculatorCategory(
          calculatorCategoryFor(button.dataset.calcOperation),
          false,
        );
        runCalculator();
      });
    });
    initDrawingTools();
    setCalculatorCategory("algebra", false);
    window.HuluGraph?.init();
  }

  function activate(tool) {
    if (tool === "graph") window.setTimeout(() => window.HuluGraph?.resize(), 30);
    if (tool === "whiteboard") window.setTimeout(() => geometry.draw(), 30);
  }

  window.HuluToolbox = { init, activate, runCalculator };
})();