import { useEffect, useState } from "react";
import { FD_METHOD, buildPlanBundle, parseFdPlan, type FdPlan } from "@plate-lab/core";
import { useRunner } from "@plate-lab/components";
import { tutorialSpec } from "./tutorialSpec";

const GRIDS: [number, number][] = [
  [16, 11],
  [31, 21],
  [61, 41],
  [121, 81],
];

/** plate_fd_plan evaluated for a sequence of grids: the numbers come from numbl, not from a formula typed here. */
export function RefinementTable() {
  const runner = useRunner();
  const [rows, setRows] = useState<(FdPlan | null)[]>(GRIDS.map(() => null));
  useEffect(() => {
    let cancelled = false;
    (async () => {
      const out: (FdPlan | null)[] = [];
      for (const [nx, ny] of GRIDS) {
        const s = tutorialSpec();
        s.fd.nx = nx;
        s.fd.ny = ny;
        s.fd.duration = 0.01;
        const r = await runner.run({ bundle: buildPlanBundle(s, FD_METHOD)! });
        out.push(r.ok ? parseFdPlan(r.value) : null);
        if (!cancelled) setRows([...out, ...GRIDS.slice(out.length).map(() => null)]);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [runner]);
  return (
    <div className="embed">
      <div className="embed-title">Cost of 10 ms of simulated time on the default steel plate, from plate_fd_plan</div>
      <table>
        <thead>
          <tr>
            <th>grid</th>
            <th>dx [mm]</th>
            <th>dt_max [µs]</th>
            <th>steps</th>
            <th>cell-steps</th>
          </tr>
        </thead>
        <tbody>
          {GRIDS.map(([nx, ny], i) => {
            const p = rows[i];
            return (
              <tr key={nx}>
                <td>
                  {nx} × {ny}
                </td>
                <td>{p ? (p.dx * 1000).toFixed(1) : "…"}</td>
                <td>{p && p.dt_max !== undefined ? (p.dt_max * 1e6).toPrecision(3) : "…"}</td>
                <td>{p ? p.nsteps.toLocaleString() : "…"}</td>
                <td>{p ? p.cell_steps.toExponential(2) : "…"}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
      <div className="pl-small pl-muted" style={{ marginTop: 6 }}>
        Halving dx quarters dt and quadruples the node count: sixteen times the work per unit of simulated time.
      </div>
    </div>
  );
}