import type { CompareResult } from "@plate-lab/core";
import { LinePlot } from "../plots/LinePlot";
import { useSharedAxis } from "../plots/useSharedAxis";

export interface CompareViewProps {
  cmp: CompareResult;
  labelA?: string;
  labelB?: string;
}

/** Side-by-side metrics and overlaid probe series for two solutions of one problem. */
export function CompareView({ cmp, labelA = "modal", labelB = "finite differences" }: CompareViewProps) {
  const pct = (x: number) => `${(100 * x).toFixed(2)} %`;
  const axis = useSharedAxis();
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <table className="pl-metrics">
        <thead>
          <tr>
            <th>Quantity</th>
            <th>{labelA}</th>
            <th>{labelB}</th>
            <th>relative L2 difference</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Peak displacement at probe</td>
            <td>{(cmp.w_peak_a * 1e6).toPrecision(4)} µm</td>
            <td>{(cmp.w_peak_b * 1e6).toPrecision(4)} µm</td>
            <td>{pct(cmp.w_rel_l2)}</td>
          </tr>
          <tr>
            <td>Peak von Mises stress at probe</td>
            <td>{(cmp.vm_peak_a * 1e-6).toPrecision(4)} MPa</td>
            <td>{(cmp.vm_peak_b * 1e-6).toPrecision(4)} MPa</td>
            <td>{pct(cmp.vm_rel_l2)}</td>
          </tr>
          <tr>
            <td>Strongest spectral peak</td>
            <td>{cmp.f_peak_a.toFixed(0)} Hz</td>
            <td>{cmp.f_peak_b.toFixed(0)} Hz</td>
            <td>–</td>
          </tr>
        </tbody>
      </table>
      <div className="pl-small pl-muted">
        Stress is a second derivative of displacement, so its difference is expected to exceed the displacement difference. The window is the shorter of the two runs.
      </div>
      <LinePlot
        title="Displacement at the probe"
        series={[
          { x: cmp.t, y: cmp.w_a, label: labelA },
          { x: cmp.t, y: cmp.w_b, label: labelB, dash: [4, 3] },
        ]}
        xScale={1000}
        yScale={1e6}
        xLabel="time [ms]"
        yLabel="w [µm]"
        yUnit="µm"
        height={180}
        {...axis}
      />
      <LinePlot
        title="Von Mises stress at the probe"
        series={[
          { x: cmp.t, y: cmp.vm_a, label: labelA },
          { x: cmp.t, y: cmp.vm_b, label: labelB, dash: [4, 3] },
        ]}
        xScale={1000}
        yScale={1e-6}
        xLabel="time [ms]"
        yLabel="σ_vM [MPa]"
        yUnit="MPa"
        height={180}
        {...axis}
      />
      {cmp.frames_rel_l2.length > 0 && (
        <LinePlot
          title="Relative L2 difference of the displacement field, frame by frame"
          series={[{ x: cmp.frames_t, y: cmp.frames_rel_l2, label: "‖w_a − w_b‖ / ‖w_a‖" }]}
          xScale={1000}
          xLabel="time [ms]"
          yLabel="relative difference"
          height={150}
          {...axis}
        />
      )}
    </div>
  );
}