import type { ReactNode } from "react";
import {
  HAMMER_PRESETS,
  MATERIAL_PRESETS,
  PLATE_PRESETS,
  type ProblemSpec,
  type ValidationIssue,
} from "@plate-dyn/core";
import { NumberField } from "./NumberField";

export type ParameterSection =
  | "plate"
  | "material"
  | "suspension"
  | "hammer"
  | "strike"
  | "probe"
  | "mic"
  | "render"
  | "rr"
  | "fem";

export const ALL_SECTIONS: ParameterSection[] = [
  "plate",
  "material",
  "suspension",
  "hammer",
  "strike",
  "probe",
  "mic",
  "render",
  "rr",
  "fem",
];

export interface ParameterPanelProps {
  spec: ProblemSpec;
  onChange: (spec: ProblemSpec) => void;
  /** Sections to show; default all */
  sections?: ParameterSection[];
  issues?: ValidationIssue[];
  /** Sections open initially; default all */
  open?: ParameterSection[];
}

/** 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 = [], open } = 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 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.width === spec.plate.width &&
      p.plate.height === spec.plate.height &&
      p.plate.thickness === spec.plate.thickness,
  )?.id;
  const hammerPresetId = HAMMER_PRESETS.find(
    (p) =>
      p.hammer.mass === spec.hammer.mass &&
      p.hammer.tip_radius === spec.hammer.tip_radius &&
      p.hammer.E === spec.hammer.E,
  )?.id;
  const half = { x: spec.plate.width / 2, y: spec.plate.height / 2 };

  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>
          )}
          <NumberField
            label="Width (x)"
            value={spec.plate.width}
            scale={1000}
            unit="mm"
            invalid={invalid("plate.width")}
            onChange={(v) => set({ plate: { ...spec.plate, width: v } })}
          />
          <NumberField
            label="Height (y, the thread at the top)"
            value={spec.plate.height}
            scale={1000}
            unit="mm"
            invalid={invalid("plate.height")}
            onChange={(v) => set({ plate: { ...spec.plate, height: v } })}
          />
          <NumberField
            label="Thickness"
            value={spec.plate.thickness}
            scale={1000}
            unit="mm"
            invalid={invalid("plate.thickness")}
            onChange={(v) => set({ plate: { ...spec.plate, thickness: v } })}
          />
        </Group>
      )}

      {show("material") && (
        <Group title="Material" issues={issues} prefix="material" open={isOpen("material")}>
          <div className="pl-field pl-field-wide">
            <label>Alloy</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 } });
              }}
            >
              <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}
            </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) } })
            }
          />
          <NumberField
            label="Structural Q"
            value={spec.material.Q}
            invalid={invalid("material.Q")}
            title="Internal loss alone: 1/Q per mode; air loading and the thread's dashpot are added per mode"
            onChange={(v) => set({ material: { ...spec.material, Q: v } })}
          />
        </Group>
      )}

      {show("suspension") && (
        <Group title="Hole and thread" issues={issues} prefix="hole" open={isOpen("suspension")}>
          <NumberField
            label="Hole diameter"
            value={spec.hole.diameter}
            scale={1000}
            unit="mm"
            invalid={invalid("hole.diameter")}
            onChange={(v) => set({ hole: { ...spec.hole, diameter: v } })}
          />
          <NumberField
            label="Hole below the top edge"
            value={spec.hole.edge_offset}
            scale={1000}
            unit="mm"
            invalid={invalid("hole.edge_offset")}
            onChange={(v) => set({ hole: { ...spec.hole, edge_offset: v } })}
          />
          <NumberField
            label="Thread length"
            value={spec.thread.length}
            scale={1000}
            unit="mm"
            invalid={invalid("thread.length")}
            title="Sets the pendulum spring m g / L at the hole"
            onChange={(v) => set({ thread: { ...spec.thread, length: v } })}
          />
          <NumberField
            label="Dashpot at the hole"
            value={spec.thread.dashpot}
            scale={1000}
            unit="mN s/m"
            invalid={invalid("thread.dashpot")}
            onChange={(v) => set({ thread: { ...spec.thread, dashpot: v } })}
          />
          <div className="pl-small pl-muted">
            The thread is a soft point spring at the hole, not a clamp; the plate is free to rotate
            about it. The dashpot is the loss where the thread rubs the hole.
          </div>
        </Group>
      )}

      {show("hammer") && (
        <Group title="Hammer" issues={issues} prefix="hammer" open={isOpen("hammer")}>
          <div className="pl-field pl-field-wide">
            <label>Hammer</label>
            <select
              className="pl-select"
              value={hammerPresetId ?? ""}
              onChange={(ev) => {
                const p = HAMMER_PRESETS.find((x) => x.id === ev.target.value);
                if (p) set({ hammer: { ...p.hammer, speed: spec.hammer.speed } });
              }}
            >
              <option value="">custom</option>
              {HAMMER_PRESETS.map((p) => (
                <option key={p.id} value={p.id}>
                  {p.name}
                </option>
              ))}
            </select>
          </div>
          {hammerPresetId && (
            <div className="pl-small pl-muted">
              {HAMMER_PRESETS.find((p) => p.id === hammerPresetId)?.note}
            </div>
          )}
          <NumberField
            label="Mass"
            value={spec.hammer.mass}
            scale={1000}
            unit="g"
            invalid={invalid("hammer.mass")}
            onChange={(v) => set({ hammer: { ...spec.hammer, mass: v } })}
          />
          <NumberField
            label="Tip radius"
            value={spec.hammer.tip_radius}
            scale={1000}
            unit="mm"
            invalid={invalid("hammer.tip_radius")}
            onChange={(v) => set({ hammer: { ...spec.hammer, tip_radius: v } })}
          />
          <NumberField
            label="Approach speed"
            value={spec.hammer.speed}
            step={0.05}
            unit="m/s"
            invalid={invalid("hammer.speed")}
            onChange={(v) => set({ hammer: { ...spec.hammer, speed: v } })}
          />
          <NumberField
            label="Restitution e"
            value={spec.hammer.restitution}
            step={0.02}
            invalid={invalid("hammer.restitution")}
            title="Nominal: sets the impulse of the prescribed pulse and the loss of the coupled contact"
            onChange={(v) => set({ hammer: { ...spec.hammer, restitution: v } })}
          />
          <NumberField
            label="Tip modulus E"
            value={spec.hammer.E}
            scale={1e-9}
            unit="GPa"
            invalid={invalid("hammer.E")}
            onChange={(v) => set({ hammer: { ...spec.hammer, E: v } })}
          />
          <NumberField
            label="Tip Poisson's ratio"
            value={spec.hammer.nu}
            step={0.01}
            invalid={invalid("hammer.nu")}
            onChange={(v) => set({ hammer: { ...spec.hammer, nu: v } })}
          />
        </Group>
      )}

      {show("strike") && (
        <Group title="Strike point" issues={issues} prefix="strike" open={isOpen("strike")}>
          <NumberField
            label="x from the centre"
            value={spec.strike.x}
            scale={1000}
            unit="mm"
            min={-half.x * 1000}
            max={half.x * 1000}
            invalid={invalid("strike")}
            onChange={(v) => set({ strike: { ...spec.strike, x: v } })}
          />
          <NumberField
            label="y from the centre"
            value={spec.strike.y}
            scale={1000}
            unit="mm"
            min={-half.y * 1000}
            max={half.y * 1000}
            invalid={invalid("strike")}
            title="Positive towards the threaded top edge"
            onChange={(v) => set({ strike: { ...spec.strike, y: v } })}
          />
          <div className="pl-small pl-muted">
            The centre lies on both symmetry axes and leaves most asymmetric modes silent; a few
            millimetres off centre wakes them.
          </div>
        </Group>
      )}

      {show("probe") && (
        <Group title="Probe" issues={issues} prefix="probe" open={isOpen("probe")}>
          <NumberField
            label="x from the centre"
            value={spec.probe.x}
            scale={1000}
            unit="mm"
            invalid={invalid("probe")}
            onChange={(v) => set({ probe: { ...spec.probe, x: v } })}
          />
          <NumberField
            label="y from the centre"
            value={spec.probe.y}
            scale={1000}
            unit="mm"
            invalid={invalid("probe")}
            onChange={(v) => set({ probe: { ...spec.probe, y: v } })}
          />
        </Group>
      )}

      {show("mic") && (
        <Group title="Microphone" issues={issues} prefix="mic" open={isOpen("mic")}>
          <NumberField
            label="Distance on the normal"
            value={spec.mic.distance}
            scale={1000}
            unit="mm"
            invalid={invalid("mic.distance")}
            onChange={(v) => set({ mic: { ...spec.mic, distance: v } })}
          />
          <NumberField
            label="Air density"
            value={spec.mic.air_density}
            step={0.01}
            unit="kg/m³"
            invalid={invalid("mic.air_density")}
            onChange={(v) => set({ mic: { ...spec.mic, air_density: v } })}
          />
          <NumberField
            label="Speed of sound"
            value={spec.mic.sound_speed}
            unit="m/s"
            invalid={invalid("mic.sound_speed")}
            onChange={(v) => set({ mic: { ...spec.mic, sound_speed: v } })}
          />
        </Group>
      )}

      {show("render") && (
        <Group title="Render" issues={issues} prefix="render" open={isOpen("render")}>
          <NumberField
            label="Sample rate"
            value={spec.render.fs}
            unit="Hz"
            integer
            invalid={invalid("render.fs")}
            title="Modes are kept below 0.47 of this; 96 kHz reaches this small plate's ultrasonic partials"
            onChange={(v) => set({ render: { ...spec.render, fs: v } })}
          />
          <NumberField
            label="Duration"
            value={spec.render.duration}
            step={0.5}
            unit="s"
            invalid={invalid("render.duration")}
            onChange={(v) => set({ render: { ...spec.render, duration: v } })}
          />
          <NumberField
            label="Modes kept, at most"
            value={spec.render.modes}
            integer
            invalid={invalid("render.modes")}
            onChange={(v) => set({ render: { ...spec.render, modes: v } })}
          />
          <NumberField
            label="Export peak"
            value={spec.render.normalize_dbfs}
            step={0.5}
            unit="dBFS"
            invalid={invalid("render.normalize_dbfs")}
            onChange={(v) => set({ render: { ...spec.render, normalize_dbfs: v } })}
          />
          <NumberField
            label="Animation frames"
            value={spec.render.nframes}
            integer
            invalid={invalid("render.nframes")}
            onChange={(v) => set({ render: { ...spec.render, nframes: v } })}
          />
          <NumberField
            label="Frames cover the first"
            value={spec.render.frame_span}
            scale={1000}
            step={0.5}
            unit="ms"
            invalid={invalid("render.frame_span")}
            title="The strike transient: a wave leaving the hammer and filling the plate"
            onChange={(v) => set({ render: { ...spec.render, frame_span: v } })}
          />
        </Group>
      )}

      {show("rr") && (
        <Group title="Rayleigh-Ritz numerics" issues={issues} prefix="rr" open={isOpen("rr")}>
          <NumberField
            label="Legendre order per side"
            value={spec.rr.basis_order}
            integer
            invalid={invalid("rr.basis_order")}
            title="(order + 1)^2 coefficients; 12 was stable to 0.01 Hz against 14 on the first ten modes"
            onChange={(v) => set({ rr: { ...spec.rr, basis_order: v } })}
          />
          <NumberField
            label="Quadrature points per side"
            value={spec.rr.quadrature_order}
            integer
            invalid={invalid("rr.quadrature_order")}
            onChange={(v) => set({ rr: { ...spec.rr, quadrature_order: v } })}
          />
          <NumberField
            label="Display grid per side"
            value={spec.rr.grid}
            integer
            invalid={invalid("rr.grid")}
            onChange={(v) => set({ rr: { ...spec.rr, grid: v } })}
          />
        </Group>
      )}

      {show("fem") && (
        <Group title="Finite-element numerics" issues={issues} prefix="fem" open={isOpen("fem")}>
          <NumberField
            label="Elements along x"
            value={spec.fem.mesh_x}
            integer
            invalid={invalid("fem.mesh_x")}
            onChange={(v) => set({ fem: { ...spec.fem, mesh_x: v } })}
          />
          <NumberField
            label="Elements along y"
            value={spec.fem.mesh_y}
            integer
            invalid={invalid("fem.mesh_y")}
            onChange={(v) => set({ fem: { ...spec.fem, mesh_y: v } })}
          />
          <div className="pl-small pl-muted">
            Full-integration Q4 locks in shear on a thin plate: the reference used 80 × 80, where
            the main partial is 1 percent above Rayleigh-Ritz; 48 × 48 is 3 percent above and solves
            in a few seconds, 80 × 80 in tens of seconds.
          </div>
        </Group>
      )}
    </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 prefixes = props.prefix === "hole" ? ["hole", "thread"] : [props.prefix];
  const related = props.issues.filter((i) =>
    prefixes.some((p) => i.path === p || i.path.startsWith(p + ".")),
  );
  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>
  );
}