(function () {
  const $graph = (selector, root = document) => root.querySelector(selector);
  const COLORS = [
    "#196548",
    "#d86f45",
    "#5d73e8",
    "#8667b5",
    "#c44f83",
    "#198b9a",
    "#b07b24",
    "#3d4852",
  ];
  const graph = {
    functions: [],
    nextId: 1,
    viewport: { xMin: -10, xMax: 10, yMin: -6, yMax: 6 },
    dragging: null,
    frame: null,
    initialized: false,
    observer: null,
  };

  function schedule() {
    if (graph.frame) window.cancelAnimationFrame(graph.frame);
    graph.frame = window.requestAnimationFrame(() => {
      graph.frame = null;
      draw();
    });
  }

  function activeFunctions() {
    return graph.functions.filter(
      (item) => item.visible && item.expression.trim(),
    );
  }

  function addFunction(expression = "", color) {
    if (graph.functions.length >= 8) {
      showToast("最多同时绘制 8 条曲线");
      return;
    }
    graph.functions.push({
      id: graph.nextId,
      expression,
      color: color || COLORS[(graph.nextId - 1) % COLORS.length],
      visible: true,
    });
    graph.nextId += 1;
    renderFunctionList();
    schedule();
  }

  function renderFunctionList() {
    const root = $graph("#graph-function-list");
    root.replaceChildren(
      ...graph.functions.map((item, index) => {
        const row = document.createElement("div");
        row.className = "graph-function-row";
        const visible = document.createElement("input");
        visible.type = "checkbox";
        visible.checked = item.visible;
        visible.setAttribute("aria-label", `显示曲线 ${index + 1}`);
        visible.addEventListener("change", () => {
          item.visible = visible.checked;
          schedule();
        });
        const color = document.createElement("input");
        color.type = "color";
        color.value = item.color;
        color.setAttribute("aria-label", `曲线 ${index + 1} 颜色`);
        color.addEventListener("input", () => {
          item.color = color.value;
          schedule();
        });
        const prefix = document.createElement("span");
        prefix.textContent = `f${index + 1}(x)`;
        const input = document.createElement("input");
        input.className = "formula-input";
        input.value = item.expression;
        input.placeholder = "例如 sin(x)";
        input.setAttribute("aria-label", `函数 ${index + 1}`);
        input.addEventListener("input", () => {
          item.expression = input.value;
          schedule();
        });
        const remove = document.createElement("button");
        remove.type = "button";
        remove.textContent = "×";
        remove.title = "删除曲线";
        remove.disabled = graph.functions.length === 1;
        remove.addEventListener("click", () => {
          graph.functions = graph.functions.filter(
            (candidate) => candidate.id !== item.id,
          );
          renderFunctionList();
          schedule();
        });
        row.append(visible, color, prefix, input, remove);
        return row;
      }),
    );
  }

  function readViewport() {
    const viewport = {
      xMin: Number($graph("#graph-x-min").value),
      xMax: Number($graph("#graph-x-max").value),
      yMin: Number($graph("#graph-y-min").value),
      yMax: Number($graph("#graph-y-max").value),
    };
    if (
      !Object.values(viewport).every(Number.isFinite) ||
      viewport.xMin >= viewport.xMax ||
      viewport.yMin >= viewport.yMax ||
      viewport.xMax - viewport.xMin > 1_000_000 ||
      viewport.yMax - viewport.yMin > 1_000_000
    ) {
      throw new Error("坐标范围必须有限、最小值小于最大值，跨度不超过 1,000,000");
    }
    return viewport;
  }

  function writeViewport(viewport = graph.viewport) {
    $graph("#graph-x-min").value = Number(viewport.xMin.toPrecision(8));
    $graph("#graph-x-max").value = Number(viewport.xMax.toPrecision(8));
    $graph("#graph-y-min").value = Number(viewport.yMin.toPrecision(8));
    $graph("#graph-y-max").value = Number(viewport.yMax.toPrecision(8));
  }

  function sampleFunction(item, viewport, count) {
    const parameter = Number($graph("#graph-parameter").value);
    const samples = [];
    let lastError = null;
    for (let index = 0; index <= count; index += 1) {
      const x =
        viewport.xMin +
        (index / count) * (viewport.xMax - viewport.xMin);
      let y = Number.NaN;
      try {
        y = evaluateExpression(item.expression, { x, a: parameter });
      } catch (error) {
        lastError = error;
      }
      samples.push({ x, y: Number.isFinite(y) ? y : Number.NaN });
    }
    if (!samples.some((point) => Number.isFinite(point.y))) {
      throw lastError || new Error(`函数 ${item.expression} 在当前视窗没有有效值`);
    }
    return samples;
  }

  function autoY(functions, viewport) {
    const values = functions
      .flatMap((item) => sampleFunction(item, viewport, 500))
      .map((item) => item.y)
      .filter(Number.isFinite)
      .sort((left, right) => left - right);
    if (!values.length) return { ...viewport, yMin: -6, yMax: 6 };
    const low = values[Math.floor(values.length * 0.02)];
    const high = values[Math.min(values.length - 1, Math.ceil(values.length * 0.98))];
    const span = Math.max(high - low, Math.abs(high) * 0.1, 2);
    return {
      ...viewport,
      yMin: low - span * 0.12,
      yMax: high + span * 0.12,
    };
  }

  function niceStep(span, target = 9) {
    const rough = span / target;
    const power = 10 ** Math.floor(Math.log10(rough));
    const fraction = rough / power;
    return (fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 5 ? 5 : 10) * power;
  }

  function tickLabel(value, step) {
    if (Math.abs(value) < step * 0.001) return "0";
    if (Math.abs(value) >= 10000 || Math.abs(value) < 0.001) {
      return value.toExponential(1);
    }
    return value.toFixed(Math.min(6, Math.max(0, -Math.floor(Math.log10(step)))));
  }

  function canvasSize() {
    const canvas = $graph("#graph-canvas");
    const rect = canvas.getBoundingClientRect();
    const ratio = Math.min(window.devicePixelRatio || 1, 2);
    const width = Math.max(320, Math.round(rect.width));
    const height = Math.max(320, Math.round(rect.height));
    if (
      canvas.width !== Math.round(width * ratio) ||
      canvas.height !== Math.round(height * ratio)
    ) {
      canvas.width = Math.round(width * ratio);
      canvas.height = Math.round(height * ratio);
    }
    const context = canvas.getContext("2d");
    context.setTransform(ratio, 0, 0, ratio, 0, 0);
    return { context, width, height };
  }

  function drawGrid(context, viewport, width, height, toX, toY) {
    context.fillStyle = "#fcfcf8";
    context.fillRect(0, 0, width, height);
    if (!$graph("#graph-grid").checked) return;
    const xStep = niceStep(viewport.xMax - viewport.xMin);
    const yStep = niceStep(viewport.yMax - viewport.yMin);
    context.font = "11px system-ui, sans-serif";
    context.lineWidth = 1;
    context.strokeStyle = "#e1e6e0";
    context.fillStyle = "#6d796f";
    context.textAlign = "center";
    context.textBaseline = "top";
    for (
      let value = Math.ceil(viewport.xMin / xStep) * xStep;
      value <= viewport.xMax + xStep * 0.001;
      value += xStep
    ) {
      const x = toX(value);
      context.beginPath();
      context.moveTo(x, 0);
      context.lineTo(x, height);
      context.stroke();
      const labelY =
        viewport.yMin <= 0 && viewport.yMax >= 0
          ? Math.min(height - 18, Math.max(4, toY(0) + 6))
          : height - 18;
      context.fillText(tickLabel(value, xStep), x, labelY);
    }
    context.textAlign = "left";
    context.textBaseline = "middle";
    for (
      let value = Math.ceil(viewport.yMin / yStep) * yStep;
      value <= viewport.yMax + yStep * 0.001;
      value += yStep
    ) {
      const y = toY(value);
      context.beginPath();
      context.moveTo(0, y);
      context.lineTo(width, y);
      context.stroke();
      const labelX =
        viewport.xMin <= 0 && viewport.xMax >= 0
          ? Math.min(width - 50, Math.max(6, toX(0) + 7))
          : 7;
      context.fillText(tickLabel(value, yStep), labelX, y);
    }
  }

  function drawAxes(context, viewport, width, height, toX, toY) {
    context.strokeStyle = "#263b30";
    context.fillStyle = "#263b30";
    context.lineWidth = 2;
    context.beginPath();
    if (viewport.yMin <= 0 && viewport.yMax >= 0) {
      const y = toY(0);
      context.moveTo(0, y);
      context.lineTo(width, y);
      context.moveTo(width - 9, y - 5);
      context.lineTo(width, y);
      context.lineTo(width - 9, y + 5);
    }
    if (viewport.xMin <= 0 && viewport.xMax >= 0) {
      const x = toX(0);
      context.moveTo(x, height);
      context.lineTo(x, 0);
      context.moveTo(x - 5, 9);
      context.lineTo(x, 0);
      context.lineTo(x + 5, 9);
    }
    context.stroke();
    context.font = "700 12px system-ui, sans-serif";
    context.fillText("x", width - 16, Math.min(height - 16, Math.max(14, toY(0) - 15)));
    context.fillText("y", Math.min(width - 18, Math.max(10, toX(0) + 10)), 14);
  }

  function drawPath(context, samples, color, viewport, toX, toY) {
    const ySpan = viewport.yMax - viewport.yMin;
    context.strokeStyle = color;
    context.lineWidth = 2.6;
    context.lineJoin = "round";
    context.beginPath();
    let drawing = false;
    let previous;
    samples.forEach((item) => {
      const discontinuity =
        previous &&
        Number.isFinite(previous.y) &&
        Number.isFinite(item.y) &&
        Math.abs(item.y - previous.y) > ySpan * 3;
      if (
        !Number.isFinite(item.y) ||
        item.y < viewport.yMin - ySpan ||
        item.y > viewport.yMax + ySpan ||
        discontinuity
      ) {
        drawing = false;
      } else if (!drawing) {
        context.moveTo(toX(item.x), toY(item.y));
        drawing = true;
      } else {
        context.lineTo(toX(item.x), toY(item.y));
      }
      previous = item;
    });
    context.stroke();
  }

  function analyze(samples, xSpan) {
    const roots = [];
    let extrema = 0;
    for (let index = 1; index < samples.length; index += 1) {
      const before = samples[index - 1];
      const current = samples[index];
      if (!Number.isFinite(before.y) || !Number.isFinite(current.y)) continue;
      if (before.y === 0 || before.y * current.y < 0) {
        const root = (before.x + current.x) / 2;
        if (!roots.length || Math.abs(root - roots.at(-1)) > xSpan / 300) {
          roots.push(root);
        }
      }
      if (index > 1) {
        const older = samples[index - 2];
        if (!Number.isFinite(older.y)) continue;
        if ((before.y - older.y) * (current.y - before.y) < 0) extrema += 1;
      }
    }
    return { roots: roots.slice(0, 8), extrema };
  }

  function renderLegend(functions) {
    $graph("#graph-legend").replaceChildren(
      ...functions.map((item) => {
        const badge = document.createElement("span");
        const dot = document.createElement("i");
        dot.style.background = item.color;
        badge.append(dot, document.createTextNode(item.expression));
        return badge;
      }),
    );
  }

  function draw() {
    const canvas = $graph("#graph-canvas");
    if (!canvas) return;
    const functions = activeFunctions();
    const { context, width, height } = canvasSize();
    $graph("#graph-error").textContent = "";
    $graph("#graph-parameter-label").textContent =
      Number($graph("#graph-parameter").value).toFixed(1);
    try {
      let viewport = readViewport();
      if ($graph("#graph-auto-y").checked && functions.length) {
        viewport = autoY(functions, viewport);
        $graph("#graph-y-min").value = Number(viewport.yMin.toPrecision(7));
        $graph("#graph-y-max").value = Number(viewport.yMax.toPrecision(7));
      }
      graph.viewport = viewport;
      const toX = (x) =>
        ((x - viewport.xMin) / (viewport.xMax - viewport.xMin)) * width;
      const toY = (y) =>
        height - ((y - viewport.yMin) / (viewport.yMax - viewport.yMin)) * height;
      drawGrid(context, viewport, width, height, toX, toY);
      drawAxes(context, viewport, width, height, toX, toY);
      if (!functions.length) {
        $graph("#graph-error").textContent = "请至少输入并启用一个函数";
        renderLegend([]);
        return;
      }
      const count = Math.max(500, Math.min(1600, Math.round(width * 1.5)));
      const sampled = functions.map((item) => ({
        item,
        samples: sampleFunction(item, viewport, count),
      }));
      const first = sampled[0].samples;
      if ($graph("#graph-integral").checked) {
        context.fillStyle = `${functions[0].color}22`;
        context.beginPath();
        context.moveTo(toX(viewport.xMin), toY(0));
        first.forEach((point) => {
          if (Number.isFinite(point.y)) context.lineTo(toX(point.x), toY(point.y));
        });
        context.lineTo(toX(viewport.xMax), toY(0));
        context.closePath();
        context.fill();
      }
      sampled.forEach(({ item, samples }) => {
        drawPath(context, samples, item.color, viewport, toX, toY);
      });
      if ($graph("#graph-derivative").checked) {
        const derivative = first.slice(1, -1).map((point, index) => {
          const before = first[index];
          const after = first[index + 2];
          return { x: point.x, y: (after.y - before.y) / (after.x - before.x) };
        });
        context.setLineDash([8, 6]);
        drawPath(context, derivative, "#111827", viewport, toX, toY);
        context.setLineDash([]);
      }
      const analysis = analyze(first, viewport.xMax - viewport.xMin);
      const rootText = analysis.roots.length
        ? analysis.roots.map((item) => item.toPrecision(4)).join("、")
        : "当前视窗未发现";
      $graph("#graph-analysis").textContent =
        `第一条曲线：近似零点 ${rootText}；检测到 ${analysis.extrema} 个极值转折。`;
      renderLegend(functions);
    } catch (error) {
      context.clearRect(0, 0, width, height);
      $graph("#graph-error").textContent = error.message;
    }
  }

  function setViewport(viewport, disableAutoY = true) {
    graph.viewport = viewport;
    if (disableAutoY) $graph("#graph-auto-y").checked = false;
    writeViewport(viewport);
    schedule();
  }

  function resetViewport() {
    $graph("#graph-auto-y").checked = true;
    setViewport({ xMin: -10, xMax: 10, yMin: -6, yMax: 6 }, false);
  }

  function autoFit() {
    $graph("#graph-auto-y").checked = true;
    schedule();
  }

  function bindCanvasNavigation() {
    const canvas = $graph("#graph-canvas");
    canvas.addEventListener("pointerdown", (event) => {
      if (event.button !== 0) return;
      graph.dragging = {
        x: event.clientX,
        y: event.clientY,
        viewport: { ...graph.viewport },
      };
      canvas.setPointerCapture(event.pointerId);
      canvas.classList.add("dragging");
    });
    canvas.addEventListener("pointermove", (event) => {
      if (!graph.dragging) return;
      const rect = canvas.getBoundingClientRect();
      const start = graph.dragging;
      const dx =
        ((event.clientX - start.x) / rect.width) *
        (start.viewport.xMax - start.viewport.xMin);
      const dy =
        ((event.clientY - start.y) / rect.height) *
        (start.viewport.yMax - start.viewport.yMin);
      setViewport({
        xMin: start.viewport.xMin - dx,
        xMax: start.viewport.xMax - dx,
        yMin: start.viewport.yMin + dy,
        yMax: start.viewport.yMax + dy,
      });
    });
    const stopDragging = () => {
      graph.dragging = null;
      canvas.classList.remove("dragging");
    };
    canvas.addEventListener("pointerup", stopDragging);
    canvas.addEventListener("pointercancel", stopDragging);
    canvas.addEventListener(
      "wheel",
      (event) => {
        event.preventDefault();
        const rect = canvas.getBoundingClientRect();
        const viewport = graph.viewport;
        const xRatio = (event.clientX - rect.left) / rect.width;
        const yRatio = 1 - (event.clientY - rect.top) / rect.height;
        const centerX = viewport.xMin + xRatio * (viewport.xMax - viewport.xMin);
        const centerY = viewport.yMin + yRatio * (viewport.yMax - viewport.yMin);
        const factor = event.deltaY > 0 ? 1.14 : 0.88;
        setViewport({
          xMin: centerX + (viewport.xMin - centerX) * factor,
          xMax: centerX + (viewport.xMax - centerX) * factor,
          yMin: centerY + (viewport.yMin - centerY) * factor,
          yMax: centerY + (viewport.yMax - centerY) * factor,
        });
      },
      { passive: false },
    );
    canvas.addEventListener("dblclick", autoFit);
  }

  function init() {
    if (graph.initialized) return;
    graph.initialized = true;
    addFunction("sin(x) + a*x/3", COLORS[0]);
    addFunction("0.08*x^2 - 2", COLORS[1]);
    $graph("#graph-add-function").addEventListener("click", () => addFunction());
    $graph("#graph-run").addEventListener("click", draw);
    $graph("#graph-auto-fit").addEventListener("click", autoFit);
    $graph("#graph-reset-view").addEventListener("click", resetViewport);
    [
      "#graph-parameter",
      "#graph-x-min",
      "#graph-x-max",
      "#graph-auto-y",
      "#graph-grid",
      "#graph-derivative",
      "#graph-integral",
    ].forEach((selector) => {
      $graph(selector).addEventListener("input", schedule);
    });
    ["#graph-y-min", "#graph-y-max"].forEach((selector) => {
      $graph(selector).addEventListener("input", () => {
        $graph("#graph-auto-y").checked = false;
        schedule();
      });
    });
    bindCanvasNavigation();
    if ("ResizeObserver" in window) {
      graph.observer = new ResizeObserver(schedule);
      graph.observer.observe($graph(".graph-stage"));
    } else {
      window.addEventListener("resize", schedule);
    }
    schedule();
  }

  window.HuluGraph = { init, draw, resize: schedule, addFunction };
})();