import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  CostModel,
  LIBRARY_FILES,
  METHODS,
  buildCompareBundle,
  buildGpuStages,
  buildPlanBundle,
  buildRunBundle,
  defaultSpec,
  getMethod,
  methodBlockers,
  parseCompareResult,
  parseMethodPlan,
  parsePlateResult,
  validateSpec,
  withEdits,
  type BackendInfo,
  type MethodDefinition,
  type PlateResult,
  type ProblemSpec,
  type SourceBundle,
} from "@plate-lab/core";
import {
  CodeView,
  CompareView,
  EquationsView,
  FieldView,
  ParameterPanel,
  RunStatus,
  useRunner,
  useSolve,
  useWebGpuSupport,
  type ParameterSection,
} from "@plate-lab/components";
import { ResultsView } from "./views/ResultsView";
import { clearPersistentState, usePersistentState } from "./usePersistentState";

/** A method id, or "compare" for two methods side by side */
type Mode = string;
type RightTab = "equations" | "source" | "run";

/** The right column, in the order the tabs appear. Equations first: what is being solved before how. */
const RIGHT_TABS: { id: RightTab; label: string }[] = [
  { id: "equations", label: "Equations" },
  { id: "source", label: "Source" },
  { id: "run", label: "Run details" },
];

const IDLE = { status: "idle" } as const;

/** What the plate is and what happens to it: the settings a first run needs. */
const PROBLEM_SECTIONS: ParameterSection[] = ["plate", "material", "edges", "excitation"];
/** Where things are measured and how the loss model is set: defaults are reasonable, rarely the point. */
const ADVANCED_SECTIONS: ParameterSection[] = ["damping", "probe", "listener"];
/** Validation paths belonging to the advanced sections, so a hidden error can still be found. */
const ADVANCED_PREFIXES = ["damping", "probe", "listener"];
/** Sample rate, window and frame count: numerics, but the same ones for every method. */
const OUTPUT_SECTIONS: ParameterSection[] = ["output"];

const SUMMARIES: Record<string, string> = Object.fromEntries(
  LIBRARY_FILES.map((f) => [f.name, f.summary]),
);
SUMMARIES["main.m"] = "Generated from the controls: the params struct and the solver call";
SUMMARIES["main_a.m"] = "Generated: first method of the comparison, matched in window and grid";
SUMMARIES["main_b.m"] = "Generated: second method of the comparison";
SUMMARIES["compare.m"] = "Compares the two result structs";

/**
 * In compare mode the two runs must cover the same window and, for a field
 * comparison, the same grid. A grid-free method (modal) adopts the other's
 * grid; both are cut to the shorter duration.
 */
function matchedSpecs(
  spec: ProblemSpec,
  a: MethodDefinition,
  b: MethodDefinition,
): [ProblemSpec, ProblemSpec] {
  const duration = Math.min(a.durationOf(spec), b.durationOf(spec));
  const grid = b.gridOf?.(spec) ?? a.gridOf?.(spec) ?? spec.output.grid;
  const adapt = (m: MethodDefinition, other: MethodDefinition): ProblemSpec => {
    let s: ProblemSpec = {
      ...spec,
      output: { ...spec.output, duration: m.gridOf ? spec.output.duration : duration, grid },
    };
    if (m.gridOf && m.durationOf(spec) !== duration) {
      // shorten a grid-based method to the common window
      s = { ...s, [m.settingsKey]: { ...(s[m.settingsKey] as object), duration } } as ProblemSpec;
    }
    if (m.gridOf && other.gridOf) {
      const g = other.gridOf(spec);
      if (m.gridOf(spec)[0] !== g[0] || m.gridOf(spec)[1] !== g[1]) {
        // two grid methods: put both on b's grid so frames can be compared
        s = {
          ...s,
          [m.settingsKey]: { ...(s[m.settingsKey] as object), nx: grid[0], ny: grid[1] },
        } as ProblemSpec;
      }
    }
    return s;
  };
  return [adapt(a, b), adapt(b, a)];
}

function renameEntry(b: SourceBundle, name: string): SourceBundle {
  return {
    ...b,
    entry: name,
    files: b.files.map((f) => (f.name === b.entry ? { ...f, name } : f)),
  };
}

const isSpec = (v: unknown): v is ProblemSpec => {
  const s = v as ProblemSpec | null;
  return (
    !!s && typeof s === "object" && !!s.plate && !!s.fd && !!s.listener?.patches && !!s.output?.grid
  );
};
const isMode = (v: unknown): v is Mode =>
  typeof v === "string" && (v === "compare" || METHODS.some((m) => m.id === v));
const isPair = (v: unknown): v is [string, string] =>
  Array.isArray(v) && v.length === 2 && v.every((x) => METHODS.some((m) => m.id === x));
/** Older stored specs lack sections and fields added later; fill them from the defaults. */
const migrateSpec = (v: unknown): ProblemSpec => {
  const d = defaultSpec();
  const s = (v ?? {}) as Partial<ProblemSpec>;
  // plate.shape arrived after the first release; a stored plate without it is a rectangle
  return { ...d, ...s, plate: { ...d.plate, ...(s.plate ?? {}) } };
};
const isRightTab = (v: unknown): v is RightTab => RIGHT_TABS.some((t) => t.id === v);
const isBool = (v: unknown): v is boolean => typeof v === "boolean";
const isEdits = (v: unknown): v is Record<string, string> =>
  !!v && typeof v === "object" && Object.values(v as object).every((x) => typeof x === "string");

export function App() {
  // Everything the user chooses is remembered in this browser; "Reset to defaults" forgets it all.
  const [storedSpec, setSpec] = usePersistentState<ProblemSpec>("spec-v2", defaultSpec, isSpec);
  const spec = useMemo(() => migrateSpec(storedSpec), [storedSpec]);
  const [mode, setMode] = usePersistentState<Mode>("mode", () => "modal", isMode);
  const [pair, setPair] = usePersistentState<[string, string]>(
    "comparePair",
    () => ["modal", "fd"],
    isPair,
  );
  const [edits, setEdits] = usePersistentState<Record<string, string>>(
    "edits",
    () => ({}),
    isEdits,
  );
  // v3: the default view became the equations, so the old stored preference is dropped on purpose.
  const [rightTab, setRightTab] = usePersistentState<RightTab>(
    "rightTab-v3",
    () => "equations",
    isRightTab,
  );
  const [advancedOpen, setAdvancedOpen] = usePersistentState<boolean>(
    "advancedOpen",
    () => false,
    isBool,
  );
  // The explicit scheme's loop can run as its WebGPU port; off by default, the numbl loop being the reference.
  const [fdGpu, setFdGpu] = usePersistentState<boolean>("fdGpu", () => false, isBool);
  const gpuSupport = useWebGpuSupport();
  const gpuOn = fdGpu && gpuSupport.status === "available";
  const runner = useRunner();
  const [backend, setBackend] = useState<BackendInfo | null>(null);
  useEffect(() => {
    void runner.backend.then(setBackend);
  }, [runner]);

  const issues = useMemo(() => validateSpec(spec), [spec]);
  const hasErrors = issues.some((i) => i.severity === "error");
  const method = mode === "compare" ? null : getMethod(mode);
  const methodA = getMethod(pair[0]);
  const methodB = getMethod(pair[1]);
  const blockers = method
    ? methodBlockers(method, spec)
    : methodBlockers(methodA, spec).concat(methodBlockers(methodB, spec));
  /** The grid-based method whose plan drives the estimate and the CFL slider */
  const planMethod: MethodDefinition | null = method
    ? method.planFunction
      ? method
      : null
    : methodB.planFunction
      ? methodB
      : methodA.planFunction
        ? methodA
        : null;

  // Only the settings the methods in play actually read are shown; the rest would be dead controls.
  const methodSections = useMemo<ParameterSection[]>(
    () => [...new Set(method ? [method.settingsKey] : [methodA.settingsKey, methodB.settingsKey])],
    [method, methodA, methodB],
  );

  const mainEdited = ["main.m", "main_a.m", "main_b.m"].some((n) => n in edits);

  // Source bundles: what the code view shows is what runs. With the GPU option on, a method
  // with a ported loop gets its script written as the three stages the host then runs, and
  // the stage scripts themselves; an edited main script runs as written, in numbl.
  const bundles = useMemo(() => {
    const gpuFor = (m: MethodDefinition) => gpuOn && !!m.gpu;
    const stagesFor = (s: ProblemSpec, m: MethodDefinition) =>
      gpuFor(m) && !mainEdited ? (buildGpuStages(s, m) ?? undefined) : undefined;
    if (mode === "compare") {
      const [specA, specB] = matchedSpecs(spec, methodA, methodB);
      const a = renameEntry(buildRunBundle(specA, methodA, { gpu: gpuFor(methodA) }), "main_a.m");
      const b = renameEntry(buildRunBundle(specB, methodB, { gpu: gpuFor(methodB) }), "main_b.m");
      const c = buildCompareBundle();
      const display: SourceBundle = {
        files: [a.files[0], b.files[0], c.files[0], ...LIBRARY_FILES],
        entry: "compare.m",
        resultVariable: "cmp",
      };
      return {
        display,
        runA: withEdits(a, edits),
        runB: withEdits(b, edits),
        runC: withEdits(c, edits),
        gpuA: stagesFor(specA, methodA),
        gpuB: stagesFor(specB, methodB),
      };
    }
    const single = buildRunBundle(spec, method!, { gpu: gpuFor(method!) });
    return { display: single, run: withEdits(single, edits), gpu: stagesFor(spec, method!) };
  }, [mode, spec, edits, method, methodA, methodB, gpuOn, mainEdited]);

  // Two result slots: the single method uses A; compare uses A and B
  const solveA = useSolve(parsePlateResult);
  const solveB = useSolve(parsePlateResult);
  const solveCmp = useSolve(parseCompareResult);
  const plan = useSolve(parseMethodPlan);
  const cost = useRef(new CostModel());

  // Keep the plan (step, cost, stability bound) current for the grid-based method in play
  useEffect(() => {
    if (!planMethod) return;
    const t = window.setTimeout(() => {
      const pb = buildPlanBundle(spec, planMethod);
      if (pb) void plan.run({ bundle: withEdits(pb, edits) });
    }, 250);
    return () => window.clearTimeout(t);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [spec, planMethod, edits]);
  const methodPlan = planMethod ? plan.last : null;

  const running =
    solveA.state.status === "running" ||
    solveB.state.status === "running" ||
    solveCmp.state.status === "running";

  const observe = (
    m: MethodDefinition,
    r: { ok: boolean; wallMs: number; value?: unknown; compute?: { loop: string } } | undefined,
  ) => {
    if (!r?.ok || !m.planFunction) return;
    const res = parsePlateResult(r.value as never);
    cost.current.observe(
      m,
      Number(res.info.extra.cell_steps),
      r.wallMs,
      r.compute?.loop === "webgpu",
    );
  };

  /** Identifies the inputs a result came from, so a result from other settings can say so. */
  const stamp = useMemo(
    () => JSON.stringify({ spec, edits, mode, pair, gpuOn }),
    [spec, edits, mode, pair, gpuOn],
  );
  const [ranWith, setRanWith] = useState<{ mode: Mode; stamp: string } | null>(null);

  const run = useCallback(async () => {
    if (running || hasErrors || blockers.length) return;
    // A run starts from a clean slate: the previous frames, plots and sound go away
    // immediately, so nothing on screen is ever left over from different settings.
    solveA.reset();
    solveB.reset();
    solveCmp.reset();
    setRanWith({ mode, stamp });
    if (method) {
      const r = await solveA.run({ bundle: bundles.run!, gpu: bundles.gpu });
      observe(method, r);
    } else {
      const a = await solveA.run({ bundle: bundles.runA!, gpu: bundles.gpuA });
      if (!a?.ok) return;
      observe(methodA, a);
      const b = await solveB.run({ bundle: bundles.runB!, gpu: bundles.gpuB });
      if (!b?.ok) return;
      observe(methodB, b);
      await solveCmp.run({ bundle: bundles.runC!, inputs: { A: a.value, B: b.value } });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [
    running,
    hasErrors,
    blockers.length,
    method,
    methodA,
    methodB,
    bundles,
    solveA,
    solveB,
    solveCmp,
    mode,
    stamp,
  ]);

  const cancel = () => {
    solveA.cancel();
    solveB.cancel();
    solveCmp.cancel();
  };

  const resetAll = () => {
    if (!window.confirm("Reset every setting and source edit to the defaults?")) return;
    clearPersistentState();
    setSpec(defaultSpec());
    setMode("modal");
    setEdits({});
    setRightTab("equations");
    setAdvancedOpen(false);
    setFdGpu(false);
    solveA.reset();
    solveB.reset();
    solveCmp.reset();
    setRanWith(null);
  };

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
        e.preventDefault();
        void run();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [run]);

  // Results belong to the mode that produced them; switching method tabs shows that tab's own
  // empty state rather than someone else's frames.
  const showing = !!ranWith && ranWith.mode === mode;
  // A comparison is three runs; whichever one failed is the state worth reporting.
  const activeState = method
    ? solveA.state
    : solveA.state.status === "error"
      ? solveA.state
      : solveB.state.status === "error"
        ? solveB.state
        : solveCmp.state;
  const currentState = showing ? activeState : IDLE;
  const currentResult: PlateResult | null = method && showing ? solveA.last : null;
  /** A result is on screen but the settings have moved on since it was computed. */
  const stale =
    !!ranWith &&
    ranWith.mode === mode &&
    !running &&
    ranWith.stamp !== stamp &&
    (currentResult !== null || solveCmp.last !== null);
  const estimateMs =
    planMethod && methodPlan
      ? cost.current.estimateMs(planMethod, methodPlan.cell_steps, gpuOn && !!planMethod.gpu)
      : undefined;
  const slow = estimateMs !== undefined && estimateMs > 5000;
  const advancedIssue = issues.some(
    (i) =>
      i.severity === "error" &&
      ADVANCED_PREFIXES.some((p) => i.path === p || i.path.startsWith(p + ".")),
  );
  const runLabel = method
    ? `Run ${method.shortName}`
    : `Run ${methodA.shortName} vs ${methodB.shortName}`;

  return (
    <div className="app">
      <header className="app-header">
        <div>
          <h1>Plate Mechanics Lab</h1>
          <div className="sub">
            Vibration, stress and sound of a struck metal plate, solved by MATLAB code running in
            your browser.
          </div>
        </div>
        <div className="method-picker">
          <span className="picker-label">Method</span>
          <div className="mode-tabs" role="tablist">
            {METHODS.map((m) => (
              <button
                key={m.id}
                role="tab"
                className={mode === m.id ? "active" : ""}
                onClick={() => setMode(m.id)}
                aria-selected={mode === m.id}
                title={`${m.name}: ${m.summary}`}
              >
                {m.shortName}
              </button>
            ))}
            <button
              role="tab"
              className={mode === "compare" ? "active" : ""}
              onClick={() => setMode("compare")}
              aria-selected={mode === "compare"}
              title="Run two methods on the same problem and difference them"
            >
              Compare
            </button>
          </div>
        </div>
      </header>
      <div className="app-body">
        <aside className="col">
          <div className="action-bar">
            {running ? (
              <button className="pl-btn pl-btn-danger run-btn" onClick={cancel}>
                Cancel
              </button>
            ) : (
              <button
                className={`pl-btn pl-btn-primary run-btn${stale ? " run-btn-stale" : ""}`}
                onClick={() => void run()}
                disabled={hasErrors || blockers.length > 0}
                title="Ctrl+Enter or Cmd+Enter"
              >
                {runLabel}
              </button>
            )}
            <div className="action-meta">
              {running && <span className="pl-badge pl-badge-info">running</span>}
              {!running && currentState.status === "done" && (
                <span className="pl-badge pl-badge-ok">finished</span>
              )}
              {!running && currentState.status === "error" && (
                <span className="pl-badge pl-badge-error">error</span>
              )}
              {slow && (
                <span className="pl-badge pl-badge-warn">
                  about {(estimateMs! / 1000).toFixed(0)} s
                </span>
              )}
              {!slow && estimateMs !== undefined && (
                <span className="pl-muted">
                  about{" "}
                  {estimateMs < 1000
                    ? `${estimateMs.toFixed(0)} ms`
                    : `${(estimateMs / 1000).toFixed(1)} s`}
                </span>
              )}
              <span style={{ flex: 1 }} />
              <button
                className="pl-btn"
                onClick={resetAll}
                title="Forget every setting and source edit saved in this browser"
              >
                Reset to defaults
              </button>
            </div>
            {hasErrors && !running && (
              <div className="pl-issue">
                Some settings are out of range; the groups that need attention are marked below.
              </div>
            )}
          </div>
          <div className="method-note">
            <strong>{method ? method.name : `${methodA.name} vs ${methodB.name}`}</strong>
            <div className="pl-muted">
              {method
                ? method.summary
                : "The same problem solved twice, matched in window and grid, then differenced."}
            </div>
          </div>
          {mainEdited && (
            <div className="banner">
              <span>
                The generated script was edited, so the controls no longer feed the run. Keep
                editing the source, or restore it to reconnect the controls.
              </span>
              <button
                className="pl-btn"
                onClick={() =>
                  setEdits((e) =>
                    Object.fromEntries(Object.entries(e).filter(([k]) => !k.startsWith("main"))),
                  )
                }
              >
                Restore
              </button>
            </div>
          )}
          {mode === "compare" && (
            <div className="pl-panel pair-picker">
              <h3>Which two</h3>
              <div className="pl-row">
                <select
                  className="pl-select"
                  value={pair[0]}
                  onChange={(e) => setPair([e.target.value, pair[1]])}
                  aria-label="first method"
                >
                  {METHODS.map((m) => (
                    <option key={m.id} value={m.id}>
                      {m.name}
                    </option>
                  ))}
                </select>
                <span className="pl-muted">against</span>
                <select
                  className="pl-select"
                  value={pair[1]}
                  onChange={(e) => setPair([pair[0], e.target.value])}
                  aria-label="second method"
                >
                  {METHODS.map((m) => (
                    <option key={m.id} value={m.id}>
                      {m.name}
                    </option>
                  ))}
                </select>
              </div>
              <div className="pl-small pl-muted">
                Both runs are cut to the shorter window; a grid-free method adopts the other's grid
                so fields can be compared point by point.
              </div>
            </div>
          )}
          {blockers.map((b) => (
            <div className="pl-note" key={b}>
              {b}
            </div>
          ))}
          <div className={mainEdited ? "pl-disabled" : undefined}>
            <div className="panel-head">The problem</div>
            <ParameterPanel
              spec={spec}
              onChange={setSpec}
              method={method ?? undefined}
              issues={issues}
              sections={PROBLEM_SECTIONS}
              open={["plate", "material", "excitation"]}
            />
            <div className="panel-head">Numerics</div>
            <ParameterPanel
              spec={spec}
              onChange={setSpec}
              method={method ?? undefined}
              issues={issues}
              fdDtMax={planMethod?.id === "fd" ? methodPlan?.dt_max : undefined}
              sections={methodSections}
              open={methodSections}
              fdGpu={{ enabled: fdGpu, onChange: setFdGpu, support: gpuSupport }}
            />
            {methodPlan && planMethod && (
              <div className="pl-small pl-muted plan-line">
                {planMethod.shortName}: {methodPlan.nsteps.toLocaleString()} steps of{" "}
                {(methodPlan.dt * 1e6).toPrecision(3)} µs, {methodPlan.cell_steps.toLocaleString()}{" "}
                cell-steps{gpuOn && planMethod.gpu ? ", time loop on the GPU" : ""}.
              </div>
            )}
            {/* The modal method has no grid or step of its own, so its simulated window lives here. */}
            <ParameterPanel
              spec={spec}
              onChange={setSpec}
              method={method ?? undefined}
              issues={issues}
              sections={OUTPUT_SECTIONS}
              open={methodSections.includes("modal") ? OUTPUT_SECTIONS : []}
            />
            <details
              className="advanced"
              open={advancedOpen || advancedIssue}
              onToggle={(e) => setAdvancedOpen((e.currentTarget as HTMLDetailsElement).open)}
            >
              <summary>
                More settings: damping, probe, listener, output
                {advancedIssue && (
                  <span className="pl-badge pl-badge-error" style={{ marginLeft: 6 }}>
                    check
                  </span>
                )}
              </summary>
              <ParameterPanel
                spec={spec}
                onChange={setSpec}
                method={method ?? undefined}
                issues={issues}
                sections={ADVANCED_SECTIONS}
                open={ADVANCED_SECTIONS}
              />
            </details>
          </div>
          <div className="pl-small pl-muted">
            Settings, source edits and the chosen method are saved in this browser. Ctrl+Enter runs.
          </div>
        </aside>

        <main className="col">
          {stale && (
            <div className="banner">
              <span>
                The settings changed after this run, so what you see below is from the earlier ones.
              </span>
              <button className="pl-btn" onClick={() => void run()}>
                Run again
              </button>
            </div>
          )}
          {currentState.status === "error" && (
            <div className="pl-error">{currentState.run.error}</div>
          )}
          {mode !== "compare" && currentResult && method && (
            <ResultsView result={currentResult} spec={spec} method={method} />
          )}
          {mode !== "compare" && !currentResult && (
            <EmptyState status={currentState.status} label={runLabel} />
          )}
          {mode === "compare" && (
            <CompareResults
              cmp={showing ? solveCmp.last : null}
              status={currentState.status}
              a={showing ? solveA.last : null}
              b={showing ? solveB.last : null}
              labelA={methodA.name}
              labelB={methodB.name}
              spec={spec}
              label={runLabel}
            />
          )}
        </main>

        <section className="col-right">
          <div className="tabs" role="tablist">
            {RIGHT_TABS.map((t) => (
              <button
                key={t.id}
                className={rightTab === t.id ? "active" : ""}
                onClick={() => setRightTab(t.id)}
                role="tab"
                aria-selected={rightTab === t.id}
              >
                {t.label}
              </button>
            ))}
          </div>
          {rightTab === "equations" && (
            <div className="tab-body">
              <div className="pl-small pl-muted tab-intro">
                What {mode === "compare" ? methodB.name.toLowerCase() : "this method"} discretizes
                and solves. Read the code that does it under Source.
              </div>
              <EquationsView equations={(method ?? methodB).equations} />
              {mode === "compare" && (
                <div className="pl-small pl-muted">
                  Shown: {methodB.name}. The other method's equations are under its own tab.
                </div>
              )}
            </div>
          )}
          {rightTab === "source" && (
            <CodeView
              files={bundles.display.files}
              edits={edits}
              onEditsChange={setEdits}
              order={
                mode === "compare"
                  ? [
                      "main_a.m",
                      "main_b.m",
                      "compare.m",
                      "plate_compare.m",
                      ...methodA.readingOrder,
                      ...methodB.readingOrder,
                    ]
                  : ["main.m", ...(method?.readingOrder ?? [])]
              }
              summaries={SUMMARIES}
              height="100%"
            />
          )}
          {rightTab === "run" && (
            <div className="tab-body" style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {method && (
                <RunStatus
                  state={currentState}
                  result={currentResult}
                  method={method}
                  backend={backend}
                  estimateMs={estimateMs}
                  onCancel={cancel}
                />
              )}
              {mode === "compare" && (
                <>
                  <h3 className="pl-small pl-muted">{methodA.name}</h3>
                  <RunStatus
                    state={showing ? solveA.state : IDLE}
                    result={showing ? solveA.last : null}
                    method={methodA}
                    backend={backend}
                    onCancel={cancel}
                  />
                  <h3 className="pl-small pl-muted">{methodB.name}</h3>
                  <RunStatus
                    state={showing ? solveB.state : IDLE}
                    result={showing ? solveB.last : null}
                    method={methodB}
                    backend={backend}
                    estimateMs={estimateMs}
                    onCancel={cancel}
                  />
                  <h3 className="pl-small pl-muted">Comparison</h3>
                  <RunStatus
                    state={showing ? solveCmp.state : IDLE}
                    backend={backend}
                    onCancel={cancel}
                  />
                </>
              )}
            </div>
          )}
        </section>
      </div>
    </div>
  );
}

/** What the middle column says before anything has been solved. */
function EmptyState({ status, label }: { status: string; label: string }) {
  if (status === "running") return <div className="empty">Solving…</div>;
  if (status === "error")
    return (
      <div className="empty">
        The run failed. The message is above, and the full log is under Run details.
      </div>
    );
  return (
    <div className="empty">
      <h2>Nothing solved yet</h2>
      <ol>
        <li>Set the plate, material and strike on the left.</li>
        <li>
          Press <strong>{label}</strong>, or Ctrl+Enter.
        </li>
        <li>Displacement, stress, the probe traces and the radiated sound appear here.</li>
      </ol>
      <p className="pl-muted">
        The equations for the chosen method are on the right; Source shows the MATLAB that runs, and
        you can edit it.
      </p>
    </div>
  );
}

function CompareResults({
  cmp,
  status,
  a: modal,
  b: fd,
  labelA,
  labelB,
  spec,
  label,
}: {
  cmp: ReturnType<typeof parseCompareResult> | null;
  status: string;
  a: PlateResult | null;
  b: PlateResult | null;
  labelA: string;
  labelB: string;
  spec: ProblemSpec;
  label: string;
}) {
  const [k, setK] = useState(0);
  if (!cmp || !modal || !fd) {
    if (status === "running") return <div className="empty">Solving both methods…</div>;
    return <EmptyState status={status} label={label} />;
  }
  const nf = Math.min(modal.frames.t.length, fd.frames.t.length);
  const idx = Math.min(k, nf - 1);
  const la = labelA.toLowerCase();
  const lb = labelB.toLowerCase();
  return (
    <div className="results">
      <CompareView cmp={cmp} labelA={la} labelB={lb} />
      <div className="pl-row pl-small">
        <span>Frame</span>
        <input
          type="range"
          min={0}
          max={Math.max(0, nf - 1)}
          value={idx}
          onChange={(e) => setK(Number(e.target.value))}
          style={{ flex: 1 }}
        />
        <span className="pl-mono">{(modal.frames.t[idx] * 1000).toFixed(2)} ms</span>
      </div>
      <div className="two-up">
        <FieldView
          frames={modal.frames.w}
          frameIndex={idx}
          Lx={spec.plate.Lx}
          Ly={spec.plate.Ly}
          shape={spec.plate.shape}
          title={`w, ${la}`}
          unit="µm"
          scale={1e6}
          symmetric
          width={300}
        />
        <FieldView
          frames={fd.frames.w}
          frameIndex={idx}
          Lx={spec.plate.Lx}
          Ly={spec.plate.Ly}
          shape={spec.plate.shape}
          title={`w, ${lb}`}
          unit="µm"
          scale={1e6}
          symmetric
          width={300}
        />
      </div>
      {cmp.frames_diff && (
        <FieldView
          frames={cmp.frames_diff}
          frameIndex={idx}
          Lx={spec.plate.Lx}
          Ly={spec.plate.Ly}
          shape={spec.plate.shape}
          title={`difference, ${la} − ${lb}`}
          unit="µm"
          scale={1e6}
          symmetric
          width={300}
          caption="Same colour convention; the range is that of the difference itself."
        />
      )}
      <div className="two-up">
        <FieldView
          frames={modal.frames.vm}
          frameIndex={idx}
          Lx={spec.plate.Lx}
          Ly={spec.plate.Ly}
          shape={spec.plate.shape}
          title={`von Mises, ${la}`}
          unit="MPa"
          scale={1e-6}
          width={300}
        />
        <FieldView
          frames={fd.frames.vm}
          frameIndex={idx}
          Lx={spec.plate.Lx}
          Ly={spec.plate.Ly}
          shape={spec.plate.shape}
          title={`von Mises, ${lb}`}
          unit="MPa"
          scale={1e-6}
          width={300}
        />
      </div>
    </div>
  );
}