import { useEffect, useMemo, useState } from "react";
import {
  FD_METHOD,
  buildPlanBundle,
  buildRunBundle,
  parseFdPlan,
  parsePlateResult,
  withEdits,
} from "@plate-lab/core";
import { CflSlider, CodeView, FieldView, FramePlayer, LinePlot, RunStatus, useFramePlayer, useSolve } from "@plate-lab/components";
import { tutorialSpec } from "./tutorialSpec";

/**
 * Turn the time step past the stability limit and watch the scheme blow up.
 * The FD source is shown and editable; the run uses the edited text.
 */
export function CflExperiment() {
  const [cfl, setCfl] = useState(0.9);
  const [edits, setEdits] = useState<Record<string, string>>({});
  const [showCode, setShowCode] = useState(false);
  const spec = useMemo(() => {
    const s = tutorialSpec();
    s.fd.cfl = cfl;
    return s;
  }, [cfl]);
  const bundle = useMemo(() => withEdits(buildRunBundle(spec, FD_METHOD), edits), [spec, edits]);
  const solve = useSolve(parsePlateResult);
  const plan = useSolve(parseFdPlan);
  useEffect(() => {
    const pb = buildPlanBundle(spec, FD_METHOD);
    if (pb) void plan.run({ bundle: pb });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [spec.fd.cfl]);

  const result = solve.last;
  const nf = result?.frames.t.length ?? 0;
  const player = useFramePlayer(nf, 12, true);
  const absW = useMemo(() => (result ? Float64Array.from(result.probe.w, (v) => Math.abs(v)) : null), [result]);

  return (
    <div className="embed">
      <div className="embed-title">Experiment: the time step against the stability limit</div>
      <CflSlider value={cfl} onChange={setCfl} dtMax={plan.last?.dt_max} />
      <div className="pl-row" style={{ margin: "8px 0" }}>
        <button className="pl-btn pl-btn-primary" onClick={() => void solve.run({ bundle })} disabled={solve.state.status === "running"}>
          Run finite differences
        </button>
        <button className="pl-btn" onClick={() => setShowCode((s) => !s)}>
          {showCode ? "Hide" : "Show"} the source that runs
        </button>
        {plan.last && (
          <span className="pl-muted pl-small">
            {plan.last.nx} × {plan.last.ny} grid, {plan.last.nsteps} steps
          </span>
        )}
      </div>
      {showCode && (
        <CodeView files={bundle.files} edits={edits} onEditsChange={setEdits} order={["main.m", "plate_fd.m", "plate_fd_plan.m"]} initialFile="plate_fd_plan.m" />
      )}
      {result && (
        <div style={{ display: "grid", gap: 8, marginTop: 8 }}>
          <FieldView frames={result.frames.w} frameIndex={player.index} Lx={spec.plate.Lx} Ly={spec.plate.Ly} title={result.info.stable ? "Displacement" : `Displacement until the blow-up at step ${result.info.diverged_step}`} unit="µm" scale={1e6} symmetric range="frame" width={420} />
          <FramePlayer {...player} times={result.frames.t} />
          <LinePlot
            title="|w| at the probe, logarithmic"
            series={[{ x: result.t, y: absW!, label: "|w|" }]}
            xScale={1000}
            xLabel="time [ms]"
            yLabel="|w| [m]"
            logY
            height={160}
          />
          <div className="pl-small pl-muted">
            {result.info.stable
              ? "Stable: the amplitude stays bounded and decays through the damping terms."
              : "Unstable: the shortest wave the grid can hold is amplified by a fixed factor every step, so |w| grows exponentially until the run stops itself."}
          </div>
        </div>
      )}
      <details style={{ marginTop: 8 }}>
        <summary className="pl-small">Run details</summary>
        <RunStatus state={solve.state} result={result} method={FD_METHOD} onCancel={solve.cancel} />
      </details>
    </div>
  );
}