import type { ReactNode } from "react";
import {
  MATERIAL_PRESETS,
  PAD_PRESETS,
  PLATE_PRESETS,
  THREAD_PRESETS,
  defaultMount,
  type Excitation,
  type Mount,
  type MountType,
  type Pad,
  type PlateShape,
  type ProblemSpec,
  type ValidationIssue,
  type ViseEdge,
} from "@plate-dyn/core";
import { NumberField } from "./NumberField";
import { CflSlider } from "./CflSlider";
import type { WebGpuSupport } from "../hooks/useWebGpu";

export type ParameterSection =
  | "plate"
  | "material"
  | "mount"
  | "gravity"
  | "damping"
  | "excitation"
  | "probe"
  | "listener"
  | "output"
  | "fd";

export const ALL_SECTIONS: ParameterSection[] = [
  "plate",
  "material",
  "mount",
  "gravity",
  "damping",
  "excitation",
  "probe",
  "listener",
  "output",
  "fd",
];

export interface ParameterPanelProps {
  spec: ProblemSpec;
  onChange: (spec: ProblemSpec) => void;
  /** Sections to show; default all */
  sections?: ParameterSection[];
  issues?: ValidationIssue[];
  /** Largest stable step, when known, for the CFL slider */
  fdDtMax?: number;
  /** Sections open initially; default all */
  open?: ParameterSection[];
  /** The GPU option of the time loop: whether it is on, and what this browser offers */
  fdGpu?: { enabled: boolean; onChange: (v: boolean) => void; support: WebGpuSupport };
}

const MOUNT_LABELS: Record<MountType, string> = {
  thread: "hanging from one thread",
  threads: "hanging from two threads",
  pads: "resting on pads",
  cymbal: "on a cymbal stand",
  vise: "one edge in a vise",
  pinched: "pinched between fingers",
};

/** Controls that edit the spec. Every control maps to one field of the `params` struct. */
export function ParameterPanel(props: ParameterPanelProps) {
  const { spec, onChange, sections = ALL_SECTIONS, issues = [], fdDtMax, open, fdGpu } = props;
  const set = (patch: Partial<ProblemSpec>) => onChange({ ...spec, ...patch });
  const issue = (path: string) =>
    issues.find((i) => i.path === path || i.path.startsWith(path + "."));
  const invalid = (path: string) => issue(path)?.severity === "error";
  const show = (s: ParameterSection) => sections.includes(s);
  const isOpen = (s: ParameterSection) => (open ? open.includes(s) : true);
  const e = spec.excitation;
  const m = spec.mount;
  const setMount = (patch: Partial<Mount>) => set({ mount: { ...m, ...patch } as Mount });

  const materialPresetId = MATERIAL_PRESETS.find(
    (p) => p.material.name === spec.material.name && p.material.E === spec.material.E,
  )?.id;
  const platePresetId = PLATE_PRESETS.find(
    (p) =>
      p.plate.shape === spec.plate.shape &&
      p.plate.Lx === spec.plate.Lx &&
      p.plate.Ly === spec.plate.Ly &&
      p.plate.h === spec.plate.h,
  )?.id;
  const ellipse = spec.plate.shape === "ellipse";

  return (
    <div className="pl-params">
      {show("plate") && (
        <Group title="Plate" issues={issues} prefix="plate" open={isOpen("plate")}>
          <div className="pl-field pl-field-wide">
            <label>Stock</label>
            <select
              className="pl-select"
              value={platePresetId ?? ""}
              onChange={(ev) => {
                const p = PLATE_PRESETS.find((x) => x.id === ev.target.value);
                if (p) set({ plate: { ...p.plate } });
              }}
            >
              <option value="">custom</option>
              {PLATE_PRESETS.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.name}
                </option>
              ))}
            </select>
          </div>
          {platePresetId && (
            <div className="pl-small pl-muted">
              {PLATE_PRESETS.find((p) => p.id === platePresetId)?.note}
            </div>
          )}
          <div className="pl-field pl-field-wide">
            <label>Shape</label>
            <select
              className="pl-select"
              value={spec.plate.shape}
              onChange={(ev) =>
                set({ plate: { ...spec.plate, shape: ev.target.value as PlateShape } })
              }
            >
              <option value="rectangle">rectangle</option>
              <option value="ellipse">ellipse (a disk when Lx = Ly)</option>
            </select>
          </div>
          <NumberField
            label={ellipse ? "Diameter along x, Lx" : "Length Lx"}
            value={spec.plate.Lx}
            scale={1000}
            unit="mm"
            invalid={invalid("plate.Lx")}
            onChange={(v) => set({ plate: { ...spec.plate, Lx: v } })}
          />
          <NumberField
            label={ellipse ? "Diameter along y, Ly" : "Width Ly"}
            value={spec.plate.Ly}
            scale={1000}
            unit="mm"
            invalid={invalid("plate.Ly")}
            onChange={(v) => set({ plate: { ...spec.plate, Ly: v } })}
          />
          <NumberField
            label="Thickness h"
            value={spec.plate.h}
            scale={1000}
            unit="mm"
            step={0.1}
            invalid={invalid("plate.h")}
            onChange={(v) => set({ plate: { ...spec.plate, h: v } })}
          />
          {ellipse && (
            <div className="pl-small pl-muted">
              The ellipse fills the Lx by Ly box, and positions are still measured from the box's
              corner. On the grid the edge becomes a staircase of nodes, first order in the spacing.
            </div>
          )}
        </Group>
      )}
      {show("material") && (
        <Group title="Material" issues={issues} prefix="material" open={isOpen("material")}>
          <div className="pl-field pl-field-wide">
            <label>Preset</label>
            <select
              className="pl-select"
              value={materialPresetId ?? ""}
              onChange={(ev) => {
                const p = MATERIAL_PRESETS.find((x) => x.id === ev.target.value);
                if (p) set({ material: { ...p.material }, damping: { ...p.damping } });
              }}
            >
              <option value="">custom</option>
              {MATERIAL_PRESETS.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.material.name}
                </option>
              ))}
            </select>
          </div>
          {materialPresetId && (
            <div className="pl-small pl-muted">
              {MATERIAL_PRESETS.find((p) => p.id === materialPresetId)?.source} Handbook values, not
              a certificate.
            </div>
          )}
          <NumberField
            label="Young's modulus E"
            value={spec.material.E}
            scale={1e-9}
            unit="GPa"
            invalid={invalid("material.E")}
            onChange={(v) =>
              set({ material: { ...spec.material, E: v, name: customName(spec.material.name) } })
            }
          />
          <NumberField
            label="Poisson's ratio ν"
            value={spec.material.nu}
            step={0.01}
            invalid={invalid("material.nu")}
            onChange={(v) =>
              set({ material: { ...spec.material, nu: v, name: customName(spec.material.name) } })
            }
          />
          <NumberField
            label="Density ρ"
            value={spec.material.rho}
            unit="kg/m³"
            invalid={invalid("material.rho")}
            onChange={(v) =>
              set({ material: { ...spec.material, rho: v, name: customName(spec.material.name) } })
            }
          />
        </Group>
      )}
      {show("mount") && (
        <Group title="Mount" issues={issues} prefix="mount" open={isOpen("mount")}>
          <div className="pl-field pl-field-wide">
            <label>Held</label>
            <select
              className="pl-select"
              value={m.type}
              onChange={(ev) =>
                set({ mount: defaultMount(ev.target.value as MountType, spec.plate, m) })
              }
            >
              {(Object.keys(MOUNT_LABELS) as MountType[]).map((t) => (
                <option key={t} value={t}>
                  {MOUNT_LABELS[t]}
                </option>
              ))}
            </select>
          </div>
          <MountFields mount={m} spec={spec} setMount={setMount} invalid={invalid} />
        </Group>
      )}
      {show("gravity") && (
        <Group title="Gravity" issues={issues} prefix="gravity" open={isOpen("gravity")}>
          <NumberField
            label="g"
            value={spec.gravity.g}
            unit="m/s²"
            step={0.01}
            min={0}
            invalid={invalid("gravity.g")}
            onChange={(v) => set({ gravity: { g: v } })}
          />
          <div className="pl-small pl-muted">
            Zero switches gravity off: a hung plate then has no pendulum stiffness, a plate on pads
            no weight to hold it down. Its direction is set by the mount.
          </div>
        </Group>
      )}
      {show("damping") && (
        <Group title="Damping" issues={issues} prefix="damping" open={isOpen("damping")}>
          <NumberField
            label="σ₀ (all frequencies)"
            value={spec.damping.sigma0}
            unit="1/s"
            step={0.1}
            invalid={invalid("damping")}
            onChange={(v) => set({ damping: { ...spec.damping, sigma0: v } })}
          />
          <NumberField
            label="σ₁ (rises with frequency)"
            value={spec.damping.sigma1}
            unit="m²/s"
            step={0.001}
            invalid={invalid("damping")}
            onChange={(v) => set({ damping: { ...spec.damping, sigma1: v } })}
          />
          <div className="pl-small pl-muted">
            A mode with Laplacian eigenvalue λ decays at rate σ₀ + σ₁λ; σ₀ also slows the pendulum
            motion, as air would. Illustrative values; the mount's own dashpots are set with it.
          </div>
        </Group>
      )}
      {show("excitation") && (
        <Group title="Excitation" issues={issues} prefix="excitation" open={isOpen("excitation")}>
          <div className="pl-field pl-field-wide">
            <label>Type</label>
            <select
              className="pl-select"
              value={e.type}
              onChange={(ev) => {
                const type = ev.target.value as Excitation["type"];
                const next: Excitation =
                  type === "impulse"
                    ? { type, x: e.x, y: e.y, force: 50, duration: 1e-3, radius: e.radius }
                    : { type, x: e.x, y: e.y, displacement: 0.002, radius: e.radius };
                set({ excitation: next });
              }}
            >
              <option value="impulse">hammer strike (half-sine pulse)</option>
              <option value="release">pull aside and let go</option>
            </select>
          </div>
          <NumberField
            label={e.type === "impulse" ? "Strike x" : "Pull x"}
            value={e.x}
            scale={1000}
            unit="mm"
            invalid={invalid("excitation")}
            onChange={(v) => set({ excitation: { ...e, x: v } })}
          />
          <NumberField
            label={e.type === "impulse" ? "Strike y" : "Pull y"}
            value={e.y}
            scale={1000}
            unit="mm"
            invalid={invalid("excitation")}
            onChange={(v) => set({ excitation: { ...e, y: v } })}
          />
          {e.type === "impulse" ? (
            <>
              <NumberField
                label="Peak force"
                value={e.force}
                unit="N"
                invalid={invalid("excitation.force")}
                onChange={(v) => set({ excitation: { ...e, force: v } })}
              />
              <NumberField
                label="Contact time"
                value={e.duration}
                scale={1000}
                unit="ms"
                step={0.1}
                invalid={invalid("excitation.duration")}
                onChange={(v) => set({ excitation: { ...e, duration: v } })}
              />
            </>
          ) : (
            <NumberField
              label="Pull, then release"
              value={e.displacement}
              scale={1000}
              unit="mm"
              step={0.5}
              invalid={invalid("excitation.displacement")}
              onChange={(v) => set({ excitation: { ...e, displacement: v } })}
            />
          )}
          <NumberField
            label="Footprint radius"
            value={e.radius}
            scale={1000}
            unit="mm"
            step={1}
            invalid={invalid("excitation.radius")}
            onChange={(v) => set({ excitation: { ...e, radius: v } })}
          />
          <div className="pl-small pl-muted">
            {e.type === "impulse"
              ? "A finite footprint stands in for the contact patch; a point load would give infinite stress under the hammer."
              : "The plate is held in the static shape a force at this point produces, scaled to the displacement asked for, and let go at t = 0. On one thread the pull is applied without twisting the plate."}
          </div>
        </Group>
      )}
      {show("probe") && (
        <Group title="Probe" issues={issues} prefix="probe" open={isOpen("probe")}>
          <NumberField
            label="x"
            value={spec.probe.x}
            scale={1000}
            unit="mm"
            invalid={invalid("probe")}
            onChange={(v) => set({ probe: { ...spec.probe, x: v } })}
          />
          <NumberField
            label="y"
            value={spec.probe.y}
            scale={1000}
            unit="mm"
            invalid={invalid("probe")}
            onChange={(v) => set({ probe: { ...spec.probe, y: v } })}
          />
          <div className="pl-small pl-muted">
            Time series and spectra are recorded here, at the nearest grid node with a full stencil.
          </div>
        </Group>
      )}
      {show("listener") && (
        <Group title="Listener (sound)" issues={issues} prefix="listener" open={isOpen("listener")}>
          <div className="pl-field pl-field-wide">
            <label>Model</label>
            <select
              className="pl-select"
              value={spec.listener.model}
              onChange={(ev) =>
                set({
                  listener: { ...spec.listener, model: ev.target.value as "baffled" | "unbaffled" },
                })
              }
            >
              <option value="unbaffled">
                unbaffled: plate in free air (front and back cancel)
              </option>
              <option value="baffled">baffled: plate set in a large table or wall</option>
            </select>
          </div>
          <NumberField
            label="x"
            value={spec.listener.x}
            scale={1000}
            unit="mm"
            onChange={(v) => set({ listener: { ...spec.listener, x: v } })}
          />
          <NumberField
            label="y"
            value={spec.listener.y}
            scale={1000}
            unit="mm"
            onChange={(v) => set({ listener: { ...spec.listener, y: v } })}
          />
          <NumberField
            label="Distance from the plate z"
            value={spec.listener.z}
            unit="m"
            step={0.1}
            invalid={invalid("listener.z")}
            onChange={(v) => set({ listener: { ...spec.listener, z: v } })}
          />
          <div className="pl-small pl-muted">
            In plate coordinates, z along the normal. Either model is an estimate of the waveform,
            not a calibrated level; the unbaffled one is a rough account of the front-back
            cancellation.
          </div>
        </Group>
      )}
      {show("output") && (
        <Group title="Output" issues={issues} prefix="output" open={isOpen("output")}>
          <NumberField
            label="Sample rate"
            value={spec.output.fs}
            unit="Hz"
            integer
            invalid={invalid("output.fs")}
            onChange={(v) => set({ output: { ...spec.output, fs: v } })}
          />
          <NumberField
            label="Animation frames"
            value={spec.output.nframes}
            integer
            invalid={invalid("output.nframes")}
            onChange={(v) => set({ output: { ...spec.output, nframes: v } })}
          />
        </Group>
      )}
      {show("fd") && (
        <Group title="Grid and time" issues={issues} prefix="fd" open={isOpen("fd")}>
          <NumberField
            label="Grid nx"
            value={spec.fd.nx}
            integer
            min={5}
            invalid={invalid("fd")}
            onChange={(v) => set({ fd: { ...spec.fd, nx: v } })}
          />
          <NumberField
            label="Grid ny"
            value={spec.fd.ny}
            integer
            min={5}
            invalid={invalid("fd")}
            onChange={(v) => set({ fd: { ...spec.fd, ny: v } })}
          />
          <NumberField
            label="Simulated time"
            value={spec.fd.duration}
            unit="s"
            step={0.1}
            invalid={invalid("fd.duration")}
            onChange={(v) => set({ fd: { ...spec.fd, duration: v } })}
          />
          <div className="pl-small" style={{ marginTop: 6 }}>
            Time step
          </div>
          <CflSlider
            value={spec.fd.cfl}
            dtMax={fdDtMax}
            onChange={(v) => set({ fd: { ...spec.fd, cfl: v } })}
          />
          {fdGpu && <GpuToggle {...fdGpu} />}
        </Group>
      )}
    </div>
  );
}

function MountFields({
  mount: m,
  spec,
  setMount,
  invalid,
}: {
  mount: Mount;
  spec: ProblemSpec;
  setMount: (patch: Partial<Mount>) => void;
  invalid: (path: string) => boolean;
}) {
  const padPresetId = (k: number, c: number) => PAD_PRESETS.find((p) => p.k === k && p.c === c)?.id;
  switch (m.type) {
    case "thread": {
      const threadId = THREAD_PRESETS.find(
        (t) => t.thread.diameter === m.thread.diameter && t.thread.G === m.thread.G,
      )?.id;
      return (
        <>
          <NumberField
            label="Hole x"
            value={m.x}
            scale={1000}
            unit="mm"
            invalid={invalid("mount")}
            onChange={(v) => setMount({ x: v })}
          />
          <NumberField
            label="Hole y"
            value={m.y}
            scale={1000}
            unit="mm"
            invalid={invalid("mount")}
            onChange={(v) => setMount({ y: v })}
          />
          <NumberField
            label="Thread length"
            value={m.length}
            scale={1000}
            unit="mm"
            step={10}
            invalid={invalid("mount.length")}
            onChange={(v) => setMount({ length: v })}
          />
          <div className="pl-field pl-field-wide">
            <label>Thread</label>
            <select
              className="pl-select"
              value={threadId ?? ""}
              onChange={(ev) => {
                const t = THREAD_PRESETS.find((x) => x.id === ev.target.value);
                if (t) setMount({ thread: { ...t.thread } });
              }}
            >
              <option value="">custom</option>
              {THREAD_PRESETS.map((t) => (
                <option key={t.id} value={t.id}>
                  {t.thread.name}
                </option>
              ))}
            </select>
          </div>
          <NumberField
            label="Thread diameter"
            value={m.thread.diameter}
            scale={1000}
            unit="mm"
            step={0.1}
            invalid={invalid("mount.thread")}
            onChange={(v) =>
              setMount({ thread: { ...m.thread, diameter: v, name: customName(m.thread.name) } })
            }
          />
          <NumberField
            label="Thread shear modulus"
            value={m.thread.G}
            scale={1e-9}
            unit="GPa"
            step={0.1}
            invalid={invalid("mount.thread")}
            onChange={(v) =>
              setMount({ thread: { ...m.thread, G: v, name: customName(m.thread.name) } })
            }
          />
          <div className="pl-small pl-muted">
            The plate turns in its plane until its centre of mass hangs below the hole. The thread
            is a transverse spring of stiffness T/L at the hole; its torsion, from the diameter and
            modulus, is the only thing restraining the spin.
          </div>
        </>
      );
    }
    case "threads":
      return (
        <>
          <NumberField
            label="Hole 1 x"
            value={m.x1}
            scale={1000}
            unit="mm"
            invalid={invalid("mount")}
            onChange={(v) => setMount({ x1: v })}
          />
          <NumberField
            label="Hole 1 y"
            value={m.y1}
            scale={1000}
            unit="mm"
            invalid={invalid("mount")}
            onChange={(v) => setMount({ y1: v })}
          />
          <NumberField
            label="Hole 2 x"
            value={m.x2}
            scale={1000}
            unit="mm"
            invalid={invalid("mount")}
            onChange={(v) => setMount({ x2: v })}
          />
          <NumberField
            label="Hole 2 y"
            value={m.y2}
            scale={1000}
            unit="mm"
            invalid={invalid("mount")}
            onChange={(v) => setMount({ y2: v })}
          />
          <NumberField
            label="Thread length"
            value={m.length}
            scale={1000}
            unit="mm"
            step={10}
            invalid={invalid("mount.length")}
            onChange={(v) => setMount({ length: v })}
          />
          <div className="pl-small pl-muted">
            Two threads of one length from hooks at one height: the line of the holes hangs
            horizontal and statics shares the weight. The centre of mass must lie between the holes.
          </div>
        </>
      );
    case "pads": {
      const presetId = padPresetId(m.k, m.c);
      const setPad = (k: number, patch: Partial<Pad>) =>
        setMount({ pads: m.pads.map((p, i) => (i === k ? { ...p, ...patch } : p)) });
      return (
        <>
          <div className="pl-field pl-field-wide">
            <label>Pad material</label>
            <select
              className="pl-select"
              value={presetId ?? ""}
              onChange={(ev) => {
                const p = PAD_PRESETS.find((x) => x.id === ev.target.value);
                if (p) setMount({ k: p.k, c: p.c });
              }}
            >
              <option value="">custom</option>
              {PAD_PRESETS.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.name}
                </option>
              ))}
            </select>
          </div>
          {presetId && (
            <div className="pl-small pl-muted">
              {PAD_PRESETS.find((p) => p.id === presetId)?.note}
            </div>
          )}
          <NumberField
            label="Stiffness per area"
            value={m.k}
            scale={1e-6}
            unit="MN/m³"
            step={0.1}
            invalid={invalid("mount.k")}
            onChange={(v) => setMount({ k: v })}
          />
          <NumberField
            label="Damping per area"
            value={m.c}
            scale={1e-3}
            unit="kN·s/m³"
            step={0.1}
            invalid={invalid("mount.c")}
            onChange={(v) => setMount({ c: v })}
          />
          {m.pads.map((p, k) => (
            <div key={k} className="pl-subgroup">
              <div className="pl-row pl-small" style={{ justifyContent: "space-between" }}>
                <strong>Pad {k + 1}</strong>
                <button
                  className="pl-linkbtn"
                  onClick={() => setMount({ pads: m.pads.filter((_, i) => i !== k) })}
                  disabled={m.pads.length <= 1}
                >
                  remove
                </button>
              </div>
              <NumberField
                label="Centre x"
                value={p.x}
                scale={1000}
                unit="mm"
                onChange={(v) => setPad(k, { x: v })}
              />
              <NumberField
                label="Centre y"
                value={p.y}
                scale={1000}
                unit="mm"
                onChange={(v) => setPad(k, { y: v })}
              />
              <NumberField
                label="Half-width along x"
                value={p.rx}
                scale={1000}
                unit="mm"
                step={1}
                onChange={(v) => setPad(k, { rx: v })}
              />
              <NumberField
                label="Half-width along y"
                value={p.ry}
                scale={1000}
                unit="mm"
                step={1}
                onChange={(v) => setPad(k, { ry: v })}
              />
            </div>
          ))}
          <button
            className="pl-btn"
            onClick={() =>
              setMount({
                pads: [
                  ...m.pads,
                  { x: spec.plate.Lx / 2, y: spec.plate.Ly / 2, rx: 0.02, ry: 0.02 },
                ],
              })
            }
          >
            Add a pad
          </button>
          <div className="pl-small pl-muted">
            The plate lies flat on the pads. A pad pushes only while compressed, so a hard strike
            can lift the plate off it. A long narrow pad is a knife edge or a strip of felt.
          </div>
        </>
      );
    }
    case "cymbal": {
      const presetId = padPresetId(m.k, m.c);
      return (
        <>
          <NumberField
            label="Rod radius"
            value={m.r_rod}
            scale={1000}
            unit="mm"
            step={0.5}
            invalid={invalid("mount")}
            onChange={(v) => setMount({ r_rod: v })}
          />
          <NumberField
            label="Felt outer radius"
            value={m.r_felt}
            scale={1000}
            unit="mm"
            step={1}
            invalid={invalid("mount")}
            onChange={(v) => setMount({ r_felt: v })}
          />
          <div className="pl-field pl-field-wide">
            <label>Felt</label>
            <select
              className="pl-select"
              value={presetId ?? ""}
              onChange={(ev) => {
                const p = PAD_PRESETS.find((x) => x.id === ev.target.value);
                if (p) setMount({ k: p.k, c: p.c });
              }}
            >
              <option value="">custom</option>
              {PAD_PRESETS.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.name}
                </option>
              ))}
            </select>
          </div>
          <NumberField
            label="Felt stiffness per area"
            value={m.k}
            scale={1e-6}
            unit="MN/m³"
            step={1}
            invalid={invalid("mount.k")}
            onChange={(v) => setMount({ k: v })}
          />
          <NumberField
            label="Felt damping per area"
            value={m.c}
            scale={1e-3}
            unit="kN·s/m³"
            step={1}
            invalid={invalid("mount.c")}
            onChange={(v) => setMount({ c: v })}
          />
          <NumberField
            label="Wing-nut preload"
            value={m.preload}
            scale={1000}
            unit="mm"
            step={0.1}
            invalid={invalid("mount.preload")}
            onChange={(v) => setMount({ preload: v })}
          />
          <div className="pl-small pl-muted">
            A felt below and one above the plate, each compressed by the preload at rest: the centre
            is held two-sided until a strike separates one felt. The rod, the hole and the cymbal's
            bow are not modelled.
          </div>
        </>
      );
    }
    case "vise":
      return (
        <>
          <div className="pl-field pl-field-wide">
            <label>Edge in the jaws</label>
            <select
              className="pl-select"
              value={m.edge}
              onChange={(ev) => setMount({ edge: ev.target.value as ViseEdge })}
            >
              <option value="x0">x = 0 (left)</option>
              <option value="x1">x = Lx (right)</option>
              <option value="y0">y = 0 (bottom)</option>
              <option value="y1">y = Ly (top)</option>
            </select>
          </div>
          <NumberField
            label="Jaw depth"
            value={m.depth}
            scale={1000}
            unit="mm"
            step={1}
            invalid={invalid("mount.depth")}
            onChange={(v) => setMount({ depth: v })}
          />
          <NumberField
            label="Tilt"
            value={m.tilt}
            unit="°"
            step={5}
            min={0}
            max={180}
            invalid={invalid("mount.tilt")}
            onChange={(v) => setMount({ tilt: v })}
          />
          <div className="pl-small pl-muted">
            0° hangs the plate straight down from the jaw, 90° is a horizontal cantilever, 180°
            stands it up with its weight in compression. The nodes within the jaws are held still
            and the clamped condition follows from the bending energy.
          </div>
        </>
      );
    case "pinched":
      return (
        <>
          <NumberField
            label="Pinch x"
            value={m.x}
            scale={1000}
            unit="mm"
            invalid={invalid("mount")}
            onChange={(v) => setMount({ x: v })}
          />
          <NumberField
            label="Pinch y"
            value={m.y}
            scale={1000}
            unit="mm"
            invalid={invalid("mount")}
            onChange={(v) => setMount({ y: v })}
          />
          <NumberField
            label="Patch radius"
            value={m.radius}
            scale={1000}
            unit="mm"
            step={1}
            invalid={invalid("mount.radius")}
            onChange={(v) => setMount({ radius: v })}
          />
          <NumberField
            label="Grip stiffness"
            value={m.k}
            unit="N/m"
            step={100}
            invalid={invalid("mount.k")}
            onChange={(v) => setMount({ k: v })}
          />
          <NumberField
            label="Grip damping"
            value={m.c}
            unit="N·s/m"
            step={1}
            invalid={invalid("mount.c")}
            onChange={(v) => setMount({ c: v })}
          />
          <NumberField
            label="Tilt"
            value={m.tilt}
            unit="°"
            step={5}
            min={0}
            max={90}
            invalid={invalid("mount.tilt")}
            onChange={(v) => setMount({ tilt: v })}
          />
          <div className="pl-small pl-muted">
            A two-sided spring and dashpot over the patch, both guesses of the right order for a
            hand; the patch is also fixed in the plane. 0° hangs the plate below the hand, 90° holds
            it flat. The plate hangs with its centre of mass below the pinch.
          </div>
        </>
      );
  }
}

/**
 * The time loop has a WebGPU port, on by default: a run of a few seconds is
 * hundreds of thousands of steps, which numbl takes minutes over and the GPU
 * seconds. The double-precision loop in numbl remains the reference.
 */
function GpuToggle({
  enabled,
  onChange,
  support,
}: {
  enabled: boolean;
  onChange: (v: boolean) => void;
  support: WebGpuSupport;
}) {
  const available = support.status === "available";
  return (
    <div className="pl-gpu">
      <label className={`pl-check${available ? "" : " pl-disabled"}`}>
        <input
          type="checkbox"
          checked={enabled && available}
          disabled={!available}
          onChange={(ev) => onChange(ev.target.checked)}
        />
        Run the time loop on the GPU (WebGPU)
      </label>
      <div className="pl-small pl-muted">
        {support.status === "checking" && "Looking for WebGPU…"}
        {support.status === "unavailable" &&
          `Not available here (${support.reason}); the loop runs in numbl, which takes minutes for a run of seconds.`}
        {support.status === "available" &&
          (enabled
            ? `plate_fd_loop.m runs as its WebGPU port on ${support.adapter}, in single precision; setup, statics, stresses, sound and spectra stay in numbl. Editing plate_fd_loop.m sends the loop back to numbl.`
            : `Available on ${support.adapter}. Off, the double-precision loop runs in numbl, typically 30 to 100 times slower.`)}
      </div>
    </div>
  );
}

function customName(name: string): string {
  return name.endsWith(" (edited)") ? name : `${name} (edited)`;
}

function Group(props: {
  title: string;
  prefix: string;
  issues: ValidationIssue[];
  open: boolean;
  disabled?: boolean;
  children: ReactNode;
}) {
  const related = props.issues.filter(
    (i) => i.path === props.prefix || i.path.startsWith(props.prefix + "."),
  );
  return (
    <details className={`pl-group${props.disabled ? " pl-disabled" : ""}`} open={props.open}>
      <summary>
        {props.title}
        {related.some((i) => i.severity === "error") && (
          <span className="pl-badge pl-badge-error" style={{ marginLeft: 6 }}>
            check
          </span>
        )}
      </summary>
      {props.children}
      {related.map((i) => (
        <div
          key={i.path + i.message}
          className={`pl-issue${i.severity === "warning" ? " pl-issue-warning" : ""}`}
        >
          {i.path}: {i.message}
        </div>
      ))}
    </details>
  );
}