import type { BackendInfo, MethodDefinition, PlateResult } from "@plate-dyn/core";
import type { SolveState } from "../hooks/useSolve";

export interface RunStatusProps {
  state: SolveState<unknown>;
  result?: PlateResult | null;
  method?: MethodDefinition;
  backend?: BackendInfo | null;
  /** Predicted wall time for the next run [ms], shown while idle */
  estimateMs?: number;
  onCancel?: () => void;
}

/** Makes the execution visible: what ran, where, how big it was and how long it took. */
export function RunStatus({
  state,
  result,
  method,
  backend,
  estimateMs,
  onCancel,
}: RunStatusProps) {
  const be = state.status === "done" || state.status === "error" ? state.run.backend : backend;
  const wallMs = state.status === "done" || state.status === "error" ? state.run.wallMs : null;
  const compute =
    state.status === "done" || state.status === "error" ? state.run.compute : undefined;
  const onGpu = compute?.loop === "webgpu";
  return (
    <div className="pl-status">
      <div className="pl-row">
        {state.status === "idle" && <span className="pl-badge pl-badge-info">ready</span>}
        {state.status === "running" && (
          <>
            <span className="pl-badge pl-badge-info">running</span>
            {onCancel && (
              <button className="pl-btn pl-btn-danger" onClick={onCancel}>
                Cancel
              </button>
            )}
          </>
        )}
        {state.status === "done" && <span className="pl-badge pl-badge-ok">finished</span>}
        {state.status === "error" && (
          <span className="pl-badge pl-badge-error">
            {state.run.cancelled ? "cancelled" : "error"}
          </span>
        )}
        {result && !result.info.stable && (
          <span className="pl-badge pl-badge-error">
            diverged at step {result.info.diverged_step}
          </span>
        )}
        {method && <span className="pl-muted">{method.name}</span>}
      </div>
      {state.status === "running" && (
        <div className="pl-progress">
          <div />
        </div>
      )}
      {state.status === "error" && <div className="pl-error">{state.run.error}</div>}
      <table>
        <tbody>
          <tr>
            <td>Backend</td>
            <td>
              {be
                ? `${be.engine} ${be.version}, ${be.optimization === "1" ? "JS JIT (opt 1)" : "interpreter (opt 0)"}, ${be.host === "web-worker" ? "Web Worker in this browser" : "Node.js"}`
                : "numbl (not yet started)"}
            </td>
          </tr>
          <tr>
            <td>Wall time</td>
            <td>
              {wallMs !== null ? (
                onGpu ? (
                  <>
                    {fmtMs(wallMs)} in total: {fmtMs(compute.gpuMs ?? 0)} for the time loop on the
                    GPU, {fmtMs(compute.numblMs ?? 0)} in numbl for setup and output
                  </>
                ) : (
                  <>
                    {fmtMs(wallMs)} in numbl
                    {result
                      ? ` (${fmtMs(result.info.wall_s * 1000)} inside the solver by tic/toc)`
                      : ""}
                  </>
                )
              ) : state.status === "running" ? (
                "…"
              ) : estimateMs !== undefined ? (
                `about ${fmtMs(estimateMs)} expected`
              ) : (
                "–"
              )}
            </td>
          </tr>
          {compute && (
            <tr>
              <td>Time loop</td>
              <td>
                {onGpu
                  ? `WebGPU port of plate_fd_loop.m on ${compute.adapter ?? "the GPU"}, single precision`
                  : `numbl${compute.note ? `: ${compute.note}` : ""}`}
              </td>
            </tr>
          )}
          {result && (
            <tr>
              <td>Problem size</td>
              <td>{problemSize(result)}</td>
            </tr>
          )}
          {result && (
            <tr>
              <td>Time step</td>
              <td>
                {fmtTime(result.info.dt)}, {result.info.nsteps.toLocaleString()} steps,{" "}
                {result.t.length.toLocaleString()} samples in the series
              </td>
            </tr>
          )}
        </tbody>
      </table>
      {result && result.info.notes.length > 0 && (
        <div>
          {result.info.notes.map((n, i) => (
            <div className="pl-note" key={i}>
              {n}
            </div>
          ))}
        </div>
      )}
      {(state.status === "running" || state.status === "done" || state.status === "error") &&
        state.output.length > 0 && (
          <details>
            <summary className="pl-small pl-muted">
              Script output ({state.output.length} lines)
            </summary>
            <div className="pl-log">{state.output.join("")}</div>
          </details>
        )}
    </div>
  );
}

function problemSize(r: PlateResult): string {
  const x = r.info.extra;
  return `${x.nx} × ${x.ny} = ${r.info.ncells.toLocaleString()} nodes, ${Number(x.nunknowns).toLocaleString()} unknowns, ${r.rigid.nr} rigid-body coordinates, ${Number(x.cell_steps).toLocaleString()} cell-steps, ${r.frames.t.length} frames`;
}

export function fmtMs(ms: number): string {
  if (ms < 1000) return `${ms.toFixed(0)} ms`;
  return `${(ms / 1000).toFixed(2)} s`;
}

export function fmtTime(s: number): string {
  if (s >= 1) return `${s.toPrecision(3)} s`;
  if (s >= 1e-3) return `${(s * 1e3).toPrecision(3)} ms`;
  return `${(s * 1e6).toPrecision(3)} µs`;
}