import { useMemo } from "react";
import { methodById, type MethodId, type PlateResult, type ProblemSpec } from "@plate-dyn/core";
import { AudioPlayer, LinePlot, useSharedAxis } from "@plate-dyn/components";
import type { KeptResult } from "../App";

export interface ComparisonViewProps {
  results: Partial<Record<MethodId, KeptResult>>;
  /** The settings on the bench now, to say whether the kept results match them */
  current: ProblemSpec;
}

const RR_COLOR = "#1f5fa8";
const FEM_COLOR = "#d1495b";

/**
 * The last result of each method, side by side: the modes, the contact, the
 * spectra, the sound. The two are independent solutions of the same object,
 * so where they agree the agreement means something, and where they differ
 * the difference has a cause the tables name.
 */
export function ComparisonView({ results, current }: ComparisonViewProps) {
  const rr = results.rr;
  const fem = results.fem;
  const axis = useSharedAxis();
  const spectrumAxis = useSharedAxis();
  const forceAxis = useSharedAxis();
  const sameInputs = rr && fem && sameProblem(rr.spec, fem.spec);
  const rrStale = rr && !sameProblem(rr.spec, current);
  const femStale = fem && !sameProblem(fem.spec, current);
  const rows = useMemo(() => (rr && fem ? modeRows(rr.result, fem.result) : []), [rr, fem]);

  if (!rr || !fem)
    return (
      <div className="empty">
        <h2>Two results are needed</h2>
        <p className="pl-muted">
          {rr ? "Rayleigh-Ritz has run" : "Rayleigh-Ritz has not run"};{" "}
          {fem ? "the finite-element method has run" : "the finite-element method has not run"}.
          Press <strong>Run both</strong>, or run each method in turn, and the comparison lines up
          the last result of each.
        </p>
      </div>
    );

  const a = rr.result;
  const b = fem.result;
  const ca = a.contact;
  const cb = b.contact;
  const pct = (x: number, y: number) => (x === 0 ? "–" : `${(((y - x) / x) * 100).toFixed(2)} %`);
  const audioT = (r: PlateResult) =>
    Float64Array.from({ length: r.audio.p.length }, (_, i) => i / r.audio.fs);

  return (
    <div className="results">
      {!sameInputs && (
        <div className="banner">
          <span>
            The two results come from different settings (the plate, the hammer, the strike or the
            render differ), so this is not a like-for-like comparison. Run both on one set of
            settings.
          </span>
        </div>
      )}
      {sameInputs && (rrStale || femStale) && (
        <div className="banner">
          <span>The settings changed after these runs; the comparison is of the earlier ones.</span>
        </div>
      )}
      <div className="pl-small pl-muted">
        {methodById("rr").name}: {a.info.size_note}. {methodById("fem").name}: {b.info.size_note}.
        The two share the plate, the hammer, the damping constants and the radiation model, and
        nothing else: different plate theory, different discretization, different eigensolver,
        different contact.
      </div>

      <div className="pl-plot-title">The contact</div>
      <table className="modes-table">
        <thead>
          <tr>
            <th>Quantity</th>
            <th>Rayleigh-Ritz</th>
            <th>Finite elements</th>
            <th>Difference</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Contact time</td>
            <td>{(ca.tc * 1e6).toPrecision(4)} µs</td>
            <td>{(cb.tc * 1e6).toPrecision(4)} µs</td>
            <td>{pct(ca.tc, cb.tc)}</td>
          </tr>
          <tr>
            <td>Peak force</td>
            <td>{ca.peak_force.toPrecision(4)} N</td>
            <td>{cb.peak_force.toPrecision(4)} N</td>
            <td>{pct(ca.peak_force, cb.peak_force)}</td>
          </tr>
          <tr>
            <td>Impulse</td>
            <td>{(ca.impulse * 1e3).toPrecision(4)} mN s</td>
            <td>{(cb.impulse * 1e3).toPrecision(4)} mN s</td>
            <td>{pct(ca.impulse, cb.impulse)}</td>
          </tr>
          <tr>
            <td>Plate under the hammer at separation</td>
            <td>{ca.plate_exit_v.toPrecision(3)} m/s</td>
            <td>{cb.plate_exit_v.toPrecision(3)} m/s</td>
            <td>{pct(ca.plate_exit_v, cb.plate_exit_v)}</td>
          </tr>
          <tr>
            <td>Hammer at separation</td>
            <td>not modelled</td>
            <td>{cb.hammer_exit_v.toPrecision(3)} m/s into the plate</td>
            <td></td>
          </tr>
          <tr>
            <td>Effective restitution</td>
            <td>{ca.effective_restitution} (nominal)</td>
            <td>{cb.effective_restitution.toPrecision(3)}</td>
            <td></td>
          </tr>
          <tr>
            <td>Audible modes</td>
            <td>{a.info.n_audible}</td>
            <td>{b.info.n_audible}</td>
            <td></td>
          </tr>
          <tr>
            <td>Modes stage</td>
            <td>{fmtS(a.info.modes_wall_s)}</td>
            <td>{fmtS(b.info.modes_wall_s)}</td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <div className="pl-small pl-muted">
        The resonances agree to a percent or two although the theories, bases and eigensolvers
        differ; the contact numbers differ sharply for a reason that can be named: the pulse is the
        force on a rigid target, while the coupled model lets this very light plate move away under
        the hammer, so the contact lasts longer, the force is far lower and less momentum is
        transferred.
      </div>

      <LinePlot
        title="Contact force"
        series={[
          { x: ca.t, y: ca.force, label: "Rayleigh-Ritz (prescribed)", color: RR_COLOR },
          { x: cb.t, y: cb.force, label: "finite elements (coupled)", color: FEM_COLOR },
        ]}
        xScale={1e6}
        xLabel="time [µs]"
        yLabel="F [N]"
        yUnit="N"
        height={170}
        {...forceAxis}
      />

      <div className="pl-plot-title">Modes, in order</div>
      <div style={{ overflowX: "auto" }}>
        <table className="modes-table">
          <thead>
            <tr>
              <th>#</th>
              <th>RR f [Hz]</th>
              <th>FEM f [Hz]</th>
              <th>Difference</th>
              <th>RR |at the strike|</th>
              <th>FEM |at the strike|</th>
              <th>RR Q</th>
              <th>FEM Q</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => (
              <tr key={r.k}>
                <td>{r.k + 1}</td>
                <td>{r.fa === null ? "" : r.fa.toFixed(1)}</td>
                <td>{r.fb === null ? "" : r.fb.toFixed(1)}</td>
                <td>{r.fa !== null && r.fb !== null ? pct(r.fa, r.fb) : ""}</td>
                <td>{r.ha === null ? "" : r.ha.toPrecision(3)}</td>
                <td>{r.hb === null ? "" : r.hb.toPrecision(3)}</td>
                <td>{r.qa === null ? "" : r.qa.toFixed(0)}</td>
                <td>{r.qb === null ? "" : r.qb.toFixed(0)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div className="pl-small pl-muted">
        Audible modes matched by order; the rigid-body modes of the finite-element method are left
        out. The finite-element frequencies converge from above as its mesh is refined (the element
        locks in shear), so at a coarse mesh they run high. Degenerate pairs of a square plate can
        swap places between the two lists.
      </div>

      <LinePlot
        title="Amplitude spectrum of the sound"
        series={[
          { x: a.spectrum.f, y: a.spectrum.p, label: "Rayleigh-Ritz", color: RR_COLOR },
          { x: b.spectrum.f, y: b.spectrum.p, label: "finite elements", color: FEM_COLOR },
        ]}
        defaultXRange={[0, Math.max(a.info.f_max, b.info.f_max)]}
        logY
        xLabel="frequency [Hz]"
        yLabel="amplitude [Pa]"
        height={200}
        {...spectrumAxis}
      />
      <LinePlot
        title="Pressure at the microphone, unnormalized"
        series={[
          { x: audioT(a), y: a.audio.p, label: "Rayleigh-Ritz", color: RR_COLOR },
          { x: audioT(b), y: b.audio.p, label: "finite elements", color: FEM_COLOR },
        ]}
        defaultXRange={[0, 0.003]}
        xLabel="time [s]"
        yLabel="p [Pa]"
        yUnit="Pa"
        height={150}
        {...axis}
      />
      <div className="pl-small pl-muted">
        The absolute levels differ with the impulse; the exports below are each peak-normalized, so
        compare pitch, spectral balance and decay, not loudness.
      </div>
      <div className="two-up">
        <div>
          <div className="pl-plot-title">Rayleigh-Ritz</div>
          <AudioPlayer
            p={a.audio.p}
            fs={a.audio.fs}
            normalizeDbfs={a.audio.normalize_dbfs}
            filename="plate-rr"
          />
        </div>
        <div>
          <div className="pl-plot-title">Finite elements</div>
          <AudioPlayer
            p={b.audio.p}
            fs={b.audio.fs}
            normalizeDbfs={b.audio.normalize_dbfs}
            filename="plate-fem"
          />
        </div>
      </div>
    </div>
  );
}

interface ModeRow {
  k: number;
  fa: number | null;
  fb: number | null;
  ha: number | null;
  hb: number | null;
  qa: number | null;
  qb: number | null;
}

function modeRows(a: PlateResult, b: PlateResult): ModeRow[] {
  const pick = (r: PlateResult) => {
    const idx: number[] = [];
    r.modes.audible.forEach((ok, k) => ok && idx.push(k));
    return idx;
  };
  const ia = pick(a);
  const ib = pick(b);
  const n = Math.max(ia.length, ib.length);
  const rows: ModeRow[] = [];
  for (let k = 0; k < n; k++) {
    const ka = ia[k];
    const kb = ib[k];
    rows.push({
      k,
      fa: ka === undefined ? null : a.modes.freq[ka],
      fb: kb === undefined ? null : b.modes.freq[kb],
      ha: ka === undefined ? null : Math.abs(a.modes.hit[ka]),
      hb: kb === undefined ? null : Math.abs(b.modes.hit[kb]),
      qa: ka === undefined ? null : a.modes.q[ka],
      qb: kb === undefined ? null : b.modes.q[kb],
    });
  }
  return rows;
}

/** Whether two specs describe the same physical problem (the numerics may differ). */
function sameProblem(x: ProblemSpec, y: ProblemSpec): boolean {
  const strip = (s: ProblemSpec) => JSON.stringify({ ...s, rr: undefined, fem: undefined });
  return strip(x) === strip(y);
}

function fmtS(s: number): string {
  return s < 1 ? `${(s * 1000).toFixed(0)} ms` : `${s.toFixed(2)} s`;
}