import type { ReactNode } from "react";
import {
  MATERIAL_PRESETS,
  PLATE_PRESETS,
  type BoundaryCondition,
  type Excitation,
  type MethodDefinition,
  type PlateShape,
  type ProblemSpec,
  type ValidationIssue,
} from "@plate-lab/core";
import { NumberField } from "./NumberField";
import { CflSlider } from "./CflSlider";
import type { WebGpuSupport } from "../hooks/useWebGpu";

export type ParameterSection =
  | "plate"
  | "material"
  | "edges"
  | "damping"
  | "excitation"
  | "probe"
  | "listener"
  | "output"
  | "modal"
  | "fd"
  | "implicit";

export const ALL_SECTIONS: ParameterSection[] = [
  "plate",
  "material",
  "edges",
  "damping",
  "excitation",
  "probe",
  "listener",
  "output",
  "modal",
  "fd",
  "implicit",
];

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

/** 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,
    method,
    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 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>
          {method && !method.supports.shape.includes(spec.plate.shape) && (
            <div className="pl-issue">
              {method.name} has no {spec.plate.shape} solution; the finite-difference methods embed
              it in their grid.
            </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. The finite-difference grid spans the box; the edge becomes a staircase of
              nodes, first order in the grid 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("edges") && (
        <Group title="Edges" issues={issues} prefix="bc" open={isOpen("edges")}>
          <div className="pl-field pl-field-wide">
            <label>Condition</label>
            <select
              className="pl-select"
              value={spec.bc}
              onChange={(ev) => set({ bc: ev.target.value as BoundaryCondition })}
            >
              <option value="simply-supported">simply supported (w = 0, no moment)</option>
              <option value="clamped">clamped (w = 0, no slope)</option>
              <option value="free">free (no moment, no shear): the free-free plate</option>
              <option value="pinned-center">
                free edges, pinned at the centre: a cymbal on its stand
              </option>
            </select>
          </div>
          {method && !method.supports.bc.includes(spec.bc) && (
            <div className="pl-issue">
              {method.name} has no {spec.bc} solution; the finite-difference methods can run this.
            </div>
          )}
          <div className="pl-small pl-muted">
            All three are idealizations: a real clamp has finite stiffness, a real support some
            rotational restraint, a free plate rests on something that takes its rigid-body motion,
            which the solvers remove, and a stand holds a cymbal over a washer, not at a point.
          </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 σ₀ + σ₁λ. Illustrative values; real
            losses depend on the mounting.
          </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: e.force, duration: 1e-3, radius: e.radius }
                    : {
                        type,
                        x: e.x,
                        y: e.y,
                        force: Math.min(e.force, 5),
                        frequency: 500,
                        radius: e.radius,
                      };
                set({ excitation: next });
              }}
            >
              <option value="impulse">hammer strike (half-sine pulse)</option>
              <option value="harmonic">harmonic point force</option>
            </select>
          </div>
          <NumberField
            label="Strike x"
            value={e.x}
            scale={1000}
            unit="mm"
            invalid={invalid("excitation")}
            onChange={(v) => set({ excitation: { ...e, x: v } })}
          />
          <NumberField
            label="Strike y"
            value={e.y}
            scale={1000}
            unit="mm"
            invalid={invalid("excitation")}
            onChange={(v) => set({ excitation: { ...e, y: v } })}
          />
          <NumberField
            label={e.type === "impulse" ? "Peak force" : "Force amplitude"}
            value={e.force}
            unit="N"
            invalid={invalid("excitation.force")}
            onChange={(v) => set({ excitation: { ...e, force: v } })}
          />
          {e.type === "impulse" ? (
            <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="Frequency"
              value={e.frequency}
              unit="Hz"
              invalid={invalid("excitation.frequency")}
              onChange={(v) => set({ excitation: { ...e, frequency: 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">
            A finite footprint stands in for the contact patch; a point load would give infinite
            stress under the hammer.
          </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. Finite differences snap it to the nearest
            grid node.
          </div>
        </Group>
      )}
      {show("listener") && (
        <Group title="Listener (sound)" issues={issues} prefix="listener" open={isOpen("listener")}>
          <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="Height z"
            value={spec.listener.z}
            unit="m"
            step={0.1}
            onChange={(v) => set({ listener: { ...spec.listener, z: v } })}
          />
          <div className="pl-small pl-muted">
            Rayleigh integral in an infinite baffle: an estimate of the waveform, not a calibrated
            level.
          </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="Duration (modal, audio)"
            value={spec.output.duration}
            unit="s"
            step={0.1}
            invalid={invalid("output.duration")}
            onChange={(v) => set({ output: { ...spec.output, duration: v } })}
          />
          <NumberField
            label="Animation frames"
            value={spec.output.nframes}
            integer
            invalid={invalid("output.nframes")}
            onChange={(v) => set({ output: { ...spec.output, nframes: v } })}
          />
          <NumberField
            label="Display grid nx"
            value={spec.output.grid[0]}
            integer
            onChange={(v) => set({ output: { ...spec.output, grid: [v, spec.output.grid[1]] } })}
          />
          <NumberField
            label="Display grid ny"
            value={spec.output.grid[1]}
            integer
            onChange={(v) => set({ output: { ...spec.output, grid: [spec.output.grid[0], v] } })}
          />
        </Group>
      )}
      {show("modal") && (
        <Group
          title="Modal method"
          issues={issues}
          prefix="modal"
          open={isOpen("modal")}
          disabled={method ? method.settingsKey !== "modal" : false}
        >
          <NumberField
            label="Max frequency"
            value={spec.modal.fmax}
            unit="Hz"
            invalid={invalid("modal.fmax")}
            onChange={(v) => set({ modal: { ...spec.modal, fmax: v } })}
          />
          <NumberField
            label="Max modes"
            value={spec.modal.max_modes}
            integer
            onChange={(v) => set({ modal: { ...spec.modal, max_modes: v } })}
          />
          <div className="pl-small pl-muted">
            Truncation of the modal sum: displacement converges fast, stress near the strike slowly.
          </div>
        </Group>
      )}
      {show("fd") && (
        <Group
          title="Explicit finite differences"
          issues={issues}
          prefix="fd"
          open={isOpen("fd")}
          disabled={method ? method.settingsKey !== "fd" : false}
        >
          <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="Duration"
            value={spec.fd.duration}
            scale={1000}
            unit="ms"
            step={0.5}
            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>
      )}
      {show("implicit") && (
        <Group
          title="Implicit finite differences"
          issues={issues}
          prefix="implicit"
          open={isOpen("implicit")}
          disabled={method ? method.settingsKey !== "implicit" : false}
        >
          <NumberField
            label="Grid nx"
            value={spec.implicit.nx}
            integer
            min={5}
            invalid={invalid("implicit")}
            onChange={(v) => set({ implicit: { ...spec.implicit, nx: v } })}
          />
          <NumberField
            label="Grid ny"
            value={spec.implicit.ny}
            integer
            min={5}
            invalid={invalid("implicit")}
            onChange={(v) => set({ implicit: { ...spec.implicit, ny: v } })}
          />
          <NumberField
            label="Duration"
            value={spec.implicit.duration}
            scale={1000}
            unit="ms"
            step={5}
            onChange={(v) => set({ implicit: { ...spec.implicit, duration: v } })}
          />
          <NumberField
            label="Steps per sample"
            value={spec.implicit.steps_per_sample}
            step={0.5}
            min={0.25}
            invalid={invalid("implicit.steps_per_sample")}
            onChange={(v) => set({ implicit: { ...spec.implicit, steps_per_sample: v } })}
          />
          <NumberField
            label="θ (time averaging)"
            value={spec.implicit.theta}
            step={0.05}
            min={0}
            max={1}
            invalid={invalid("implicit.theta")}
            onChange={(v) => set({ implicit: { ...spec.implicit, theta: v } })}
          />
          <div className="pl-small pl-muted">
            No stability limit for θ ≥ 1/4; the step sets accuracy instead. More steps per sample
            tune the high modes better and cost proportionally.
          </div>
        </Group>
      )}
    </div>
  );
}

/**
 * The explicit scheme's time loop has a WebGPU port. The option is off by
 * default: the double-precision loop in numbl is the reference, and the port is
 * the same arithmetic in single precision, many times faster.
 */
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.`}
        {support.status === "available" &&
          (enabled
            ? `plate_fd_loop.m runs as its WebGPU port on ${support.adapter}, in single precision; setup, stresses, sound and spectra stay in numbl. Editing plate_fd_loop.m sends the loop back to numbl.`
            : `Available on ${support.adapter}. The loop then runs in single precision, typically 10 to 50 times faster than in numbl.`)}
      </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>
        )}
        {props.disabled && (
          <span className="pl-badge pl-badge-info" style={{ marginLeft: 6 }}>
            not used by this method
          </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>
  );
}