import { useEffect, useMemo, useState } from "react";
import type { FieldFrames, MethodDefinition, PlateResult, ProblemSpec } from "@plate-lab/core";
import {
  AudioPlayer,
  FieldView,
  FramePlayer,
  LinePlot,
  ValidityNotes,
  useFramePlayer,
  useSharedAxis,
  type FieldMarker,
} from "@plate-lab/components";

type Quantity = "w" | "vm" | "sp" | "env_vm" | "env_sp";

const QUANTITIES: {
  id: Quantity;
  label: string;
  unit: string;
  scale: number;
  symmetric: boolean;
}[] = [
  { id: "w", label: "Displacement w", unit: "µm", scale: 1e6, symmetric: true },
  { id: "vm", label: "Von Mises stress (surface)", unit: "MPa", scale: 1e-6, symmetric: false },
  {
    id: "sp",
    label: "Principal stress, signed (surface)",
    unit: "MPa",
    scale: 1e-6,
    symmetric: true,
  },
  { id: "env_vm", label: "Peak von Mises over time", unit: "MPa", scale: 1e-6, symmetric: false },
  {
    id: "env_sp",
    label: "Peak |principal stress| over time",
    unit: "MPa",
    scale: 1e-6,
    symmetric: false,
  },
];

export interface ResultsViewProps {
  result: PlateResult;
  spec: ProblemSpec;
  method: MethodDefinition;
  fieldWidth?: number;
}

/** Fields, probe series, spectrum, sound and validity for one result. */
export function ResultsView({ result, spec, method, fieldWidth = 460 }: ResultsViewProps) {
  // Displacement first: it is the primary unknown, and the stresses below are derived from it.
  const [quantity, setQuantity] = useState<Quantity>("w");
  const [rangeMode, setRangeMode] = useState<"global" | "frame">("global");
  const q = QUANTITIES.find((x) => x.id === quantity)!;
  const nf = result.frames.t.length;
  // The animation waits to be started; a run that finishes should not take over the screen.
  const player = useFramePlayer(nf, 15, false);
  // A paused animation would otherwise open on t = 0, which is a blank plate.
  const startFrame = useMemo(() => peakFrame(result.frames.w), [result]);
  const setIndex = player.setIndex;
  useEffect(() => setIndex(startFrame), [startFrame, setIndex]);
  const frames: FieldFrames | undefined =
    quantity === "w"
      ? result.frames.w
      : quantity === "vm"
        ? result.frames.vm
        : quantity === "sp"
          ? result.frames.sp
          : undefined;
  const field =
    quantity === "env_vm"
      ? result.envelope.vm
      : quantity === "env_sp"
        ? result.envelope.sp
        : undefined;
  const tFrame = result.frames.t[Math.min(player.index, nf - 1)] ?? 0;

  const supportX = result.info.extra.support_x;
  const supportY = result.info.extra.support_y;
  const markers: FieldMarker[] = useMemo(() => {
    const m: FieldMarker[] = [
      { x: spec.excitation.x, y: spec.excitation.y, label: "strike", color: "#d1495b" },
      { x: result.probe.x, y: result.probe.y, label: "probe", color: "#1f5fa8" },
    ];
    // a centre-pinned plate reports the node it is held at
    if (typeof supportX === "number" && typeof supportY === "number")
      m.push({ x: supportX, y: supportY, label: "support", color: "#2a9d8f" });
    return m;
  }, [spec.excitation.x, spec.excitation.y, result.probe.x, result.probe.y, supportX, supportY]);

  const onPlotClick = (t: number) => {
    let best = 0;
    for (let k = 1; k < nf; k++)
      if (Math.abs(result.frames.t[k] - t) < Math.abs(result.frames.t[best] - t)) best = k;
    player.setIndex(best);
    player.setPlaying(false);
  };

  const fNyq = result.info.fs / 2;
  const axis = useSharedAxis();
  const spectrumAxis = useSharedAxis();
  const audioT = useMemo(
    () => Float64Array.from({ length: result.audio.p.length }, (_, i) => i / result.audio.fs),
    [result.audio],
  );

  return (
    <div className="results">
      <div className="results-toolbar sound-bar">
        <AudioPlayer
          p={result.audio.p}
          fs={result.audio.fs}
          label="sound"
          filename={`plate-${result.method}`}
        />
      </div>
      <div className="results-toolbar">
        <label className="pl-small pl-muted">show</label>
        <select
          className="pl-select"
          style={{ width: "auto" }}
          value={quantity}
          onChange={(e) => setQuantity(e.target.value as Quantity)}
        >
          {QUANTITIES.map((x) => (
            <option key={x.id} value={x.id}>
              {x.label}
            </option>
          ))}
        </select>
        {frames && (
          <label className="pl-small pl-muted">
            colour range{" "}
            <select
              className="pl-select"
              style={{ width: "auto" }}
              value={rangeMode}
              onChange={(e) => setRangeMode(e.target.value as "global" | "frame")}
            >
              <option value="global">fixed over all frames</option>
              <option value="frame">rescaled each frame</option>
            </select>
          </label>
        )}
        {!result.info.stable && (
          <span className="pl-badge pl-badge-error">
            diverged at step {result.info.diverged_step}: frames stop there
          </span>
        )}
      </div>
      <FieldView
        frames={frames}
        field={field}
        frameIndex={player.index}
        Lx={spec.plate.Lx}
        Ly={spec.plate.Ly}
        shape={spec.plate.shape}
        title={q.label}
        unit={q.unit}
        scale={q.scale}
        symmetric={q.symmetric}
        range={rangeMode}
        markers={markers}
        width={fieldWidth}
        caption={
          quantity.startsWith("env")
            ? "Peak over the saved frames, so a sample of the true peak. Surface z = h/2; the opposite face carries the opposite sign."
            : quantity === "w"
              ? "Transverse displacement; positive towards the listener."
              : "Surface stress at z = h/2 from the curvature of w; the opposite face carries the opposite sign."
        }
      />
      {spec.plate.shape === "ellipse" && result.method !== "modal" && (
        <div className="pl-small pl-muted">
          The solver's grid spans the box around the ellipse; the edge is a staircase of grid nodes,
          drawn here clipped to the true outline. Stress on the outermost ring is copied from the
          nearest node with a full stencil.
        </div>
      )}
      {frames && <FramePlayer {...player} times={result.frames.t} />}

      <LinePlot
        title={`Displacement at the probe (${(result.probe.x * 1000).toFixed(0)}, ${(result.probe.y * 1000).toFixed(0)}) mm`}
        series={[{ x: result.t, y: result.probe.w, label: "w" }]}
        xScale={1000}
        yScale={1e6}
        xLabel="time [ms]"
        yLabel="w [µm]"
        yUnit="µm"
        cursorX={tFrame}
        onClick={onPlotClick}
        height={170}
        {...axis}
      />
      <LinePlot
        title="Surface stress at the probe"
        series={[
          { x: result.t, y: result.probe.vm, label: "von Mises" },
          { x: result.t, y: result.probe.sp, label: "principal (signed)", color: "#d1495b" },
        ]}
        xScale={1000}
        yScale={1e-6}
        xLabel="time [ms]"
        yLabel="σ [MPa]"
        yUnit="MPa"
        cursorX={tFrame}
        onClick={onPlotClick}
        height={170}
        {...axis}
      />
      <LinePlot
        title="Amplitude spectrum at the probe (Hann window)"
        series={[
          { x: result.spectrum.f, y: result.spectrum.w, label: "w [m]" },
          {
            x: result.spectrum.f,
            y: result.spectrum.vm,
            label: "von Mises [Pa]",
            color: "#d1495b",
          },
        ]}
        defaultXRange={[0, Math.min(fNyq, spec.modal.fmax * 1.1)]}
        logY
        xLabel="frequency [Hz]"
        yLabel="amplitude"
        height={170}
        {...spectrumAxis}
      />
      <div className="pl-small pl-muted">
        Frequency resolution {(1 / (result.t[result.t.length - 1] - result.t[0])).toFixed(1)} Hz
        from a {((result.t[result.t.length - 1] - result.t[0]) * 1000).toFixed(1)} ms record.
        {result.method === "fd"
          ? " The finite-difference record is short, so peaks are broad."
          : ""}
      </div>

      <div>
        <div className="pl-plot-title">Radiated sound at the listener</div>
        <LinePlot
          series={[{ x: audioT, y: result.audio.p, label: "pressure" }]}
          xScale={1000}
          xLabel="time after first arrival [ms]"
          yLabel="p [Pa]"
          yUnit="Pa"
          height={120}
          {...axis}
        />
        <div className="pl-small pl-muted">
          Rayleigh integral, listener {spec.listener.z} m above the plate;{" "}
          {method.supports.audio === "clip"
            ? "only the simulated window is available, so this is a short clip."
            : "propagation delay of the nearest patch removed."}
        </div>
      </div>

      {result.modes && <ModesTable result={result} />}

      <details>
        <summary className="pl-small">What this result idealizes</summary>
        <ValidityNotes method={method} result={result} />
      </details>
    </div>
  );
}

/**
 * The frame of largest displacement. The player starts here so a run that has just
 * finished shows the plate in motion rather than the flat state before the strike.
 */
function peakFrame(f: FieldFrames | undefined): number {
  if (!f) return 0;
  const n = f.nx * f.ny;
  let best = 0;
  let bestv = -1;
  for (let k = 0; k < f.nf; k++) {
    let v = 0;
    for (let i = k * n; i < (k + 1) * n; i++) {
      const a = Math.abs(f.data[i]);
      if (a > v) v = a;
    }
    if (v > bestv) {
      bestv = v;
      best = k;
    }
  }
  return best;
}

function ModesTable({ result }: { result: PlateResult }) {
  const m = result.modes!;
  const n = Math.min(12, m.f_hz.length);
  return (
    <details>
      <summary className="pl-small">
        Modes used: {m.f_hz.length} below {result.info.extra.fmax} Hz
        {m.truncated ? " (truncated)" : ""}
      </summary>
      <table className="modes-table">
        <thead>
          <tr>
            <th>(m, n)</th>
            <th>f [Hz]</th>
            <th>ζ = σ/ω</th>
            <th>T60 [s]</th>
            <th>force factor G</th>
          </tr>
        </thead>
        <tbody>
          {Array.from({ length: n }, (_, k) => (
            <tr key={k}>
              <td>
                ({m.m[k]}, {m.n[k]})
              </td>
              <td>{m.f_hz[k].toFixed(1)}</td>
              <td>{(m.sigma[k] / (2 * Math.PI * m.f_hz[k])).toExponential(2)}</td>
              <td>{(6.91 / m.sigma[k]).toFixed(2)}</td>
              <td>{m.G[k].toExponential(2)}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="pl-small pl-muted">
        First {n} of {m.f_hz.length}. T60 is the time for a mode to decay by 60 dB under this
        damping model.
      </div>
    </details>
  );
}