// <ReviewTryOutPage> — write a review classification and see how the model
// answers it on a real PR, before it goes into a repo's config
// (`docs/swarm/review-classifier.md`, "Try-out"). Pick a repo and a PR, write
// one or more classifications, run: the page posts them to
// swarm-controller's `POST /api/review-classifier/try-out`, which answers
// `202 {id}`, and polls `GET .../try-out/{id}` until the run is `done` or
// `failed`. A run takes a minute or more, so the page says it is running.
//
// **load the repo's rules** fills the rows from the rules on the repo's default
// branch (`GET /api/review-classifier/rules`), to run as they are or to edit.
//
// The inputs stay as typed after a run, so the operator can edit and run
// again. The page keeps nothing you typed and no result, and posts nothing to
// the forge; the only thing the browser remembers is the result table's
// column filters, as for every table in the UI.
import { useEffect, useState } from "preact/hooks";
import { ApiErrorPanel } from "@hive/shared/api-error-panel.js";
import { readApiError, type ProblemDetails } from "@hive/shared/api-error.js";
import { Button } from "../../ui/button/Button.js";
import { ConfirmDialog } from "../../ui/confirm-dialog/ConfirmDialog.js";
import { Panel } from "../../ui/panel/Panel.js";
import { TextField } from "../../ui/text-field/TextField.js";
import { ClassificationEditor } from "./ClassificationEditor.js";
import { TryOutResult } from "./TryOutResult.js";
import {
  draftFromRule,
  draftProblem,
  duplicateName,
  hasTypedText,
  prNumber,
  repoProblem,
  toBody,
  type ClassificationDraft,
  type RulesAnswer,
  type TryOutResult as Result,
} from "./TryOutTypes.js";
import "./ReviewTryOutPage.css";

const TRY_OUT = "/api/review-classifier/try-out";
const RULES = "/api/review-classifier/rules";
const POLL_MS = 2000;
// More classifications than this are not offered a row. It is the try-out
// endpoint's own cap, which answers a longer list with a 400 that the page
// shows as it is.
const MAX_CLASSIFICATIONS = 10;

let nextKey = 0;
function blankDraft(): ClassificationDraft {
  return {
    key: nextKey++,
    name: "",
    description: "",
    polarity: "positive",
    threshold: "80",
  };
}

export function ReviewTryOutPage() {
  const [repo, setRepo] = useState("");
  const [pr, setPr] = useState("");
  const [drafts, setDrafts] = useState<ClassificationDraft[]>(() => [
    blankDraft(),
  ]);
  // The id of the run being polled; null when none is in flight.
  const [runId, setRunId] = useState<string | null>(null);
  const [starting, setStarting] = useState(false);
  const [result, setResult] = useState<Result | null>(null);
  const [error, setError] = useState<ProblemDetails | null>(null);
  // Whole seconds since the run started, so a long wait shows it is alive.
  const [elapsed, setElapsed] = useState(0);

  const [loadingRules, setLoadingRules] = useState(false);
  const [rulesError, setRulesError] = useState<ProblemDetails | null>(null);
  // Where the rows came from, until the next load replaces it.
  const [loaded, setLoaded] = useState<(RulesAnswer & { repo: string }) | null>(
    null,
  );
  const [confirmLoad, setConfirmLoad] = useState(false);

  const running = starting || runId !== null;

  useEffect(() => {
    if (!running) return;
    setElapsed(0);
    const t = setInterval(() => setElapsed((s) => s + 1), 1000);
    return () => clearInterval(t);
  }, [running]);

  // Polls the run until it leaves `running`. Cancelled by the next run, or by
  // leaving the page.
  useEffect(() => {
    if (runId === null) return;
    let cancelled = false;
    let timer: ReturnType<typeof setTimeout> | undefined;
    const stop = (problem: ProblemDetails) => {
      setError(problem);
      setRunId(null);
    };
    async function poll() {
      try {
        const res = await fetch(
          `${TRY_OUT}/${encodeURIComponent(runId ?? "")}`,
        );
        if (cancelled) return;
        if (res.status === 404) {
          stop({
            detail:
              "the result is gone, because it expired or the controller restarted: run it again",
          });
          return;
        }
        if (!res.ok) {
          const problem = await readApiError(res);
          if (!cancelled) stop(problem);
          return;
        }
        const body = (await res.json()) as Result;
        if (cancelled) return;
        setResult(body);
        if (body.state === "running")
          timer = setTimeout(() => void poll(), POLL_MS);
        else setRunId(null);
      } catch (e: unknown) {
        if (!cancelled) stop({ detail: String(e) });
      }
    }
    void poll();
    return () => {
      cancelled = true;
      if (timer !== undefined) clearTimeout(timer);
    };
  }, [runId]);

  const problem =
    repoProblem(repo) ??
    (prNumber(pr) === null ? "a PR number is a whole number above 0" : null) ??
    drafts.map(draftProblem).find((p) => p !== null) ??
    duplicateName(drafts) ??
    null;

  async function run(e: Event) {
    e.preventDefault();
    const number = prNumber(pr);
    if (problem !== null || number === null) return;
    setStarting(true);
    setError(null);
    setResult(null);
    try {
      const res = await fetch(TRY_OUT, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          repo: repo.trim(),
          pr: number,
          classifications: drafts.map(toBody),
        }),
      });
      if (!res.ok) {
        setError(await readApiError(res));
        return;
      }
      setRunId(((await res.json()) as { id: string }).id);
    } catch (err: unknown) {
      setError({ detail: String(err) });
    } finally {
      setStarting(false);
    }
  }

  // Reads the repo's rules from its default branch into the rows. A failed
  // load leaves the rows as they were.
  async function loadRules() {
    const target = repo.trim();
    setConfirmLoad(false);
    setLoadingRules(true);
    setRulesError(null);
    try {
      const res = await fetch(`${RULES}?repo=${encodeURIComponent(target)}`);
      if (!res.ok) {
        setRulesError(await readApiError(res));
        return;
      }
      const answer = (await res.json()) as RulesAnswer;
      setDrafts(answer.classifications.map((c) => draftFromRule(c, nextKey++)));
      setLoaded({ ...answer, repo: target });
    } catch (err: unknown) {
      setRulesError({ detail: String(err) });
    } finally {
      setLoadingRules(false);
    }
  }

  // Typed rows are the operator's work, so replacing them is asked first.
  function askLoadRules() {
    if (hasTypedText(drafts)) setConfirmLoad(true);
    else void loadRules();
  }

  function changeDraft(next: ClassificationDraft) {
    setDrafts((ds) => ds.map((d) => (d.key === next.key ? next : d)));
  }

  return (
    <div class="ui-tryout-page">
      <Panel title="review try-out" icon="🧪">
        <p>
          Run a review classification against a real PR and see how the model
          answers it. Nothing is posted to the forge, and nothing is saved:
          change the classification and run it again until it answers the way
          you want.
        </p>
        <form class="ui-tryout-form" onSubmit={(e) => void run(e)}>
          <div class="ui-tryout-target">
            <TextField
              id="tryout-repo"
              label="repo"
              value={repo}
              placeholder="owner/name"
              onInput={setRepo}
            />
            <TextField
              id="tryout-pr"
              label="PR number"
              value={pr}
              pattern="[0-9]+"
              onInput={setPr}
            />
            <Button
              onClick={askLoadRules}
              disabled={loadingRules || running || repoProblem(repo) !== null}
            >
              {loadingRules ? "loading…" : "load the repo's rules"}
            </Button>
          </div>
          {rulesError ? (
            <ApiErrorPanel
              context="the repo's rules could not be loaded"
              problem={rulesError}
            />
          ) : null}
          {loaded ? (
            <p class="ui-tryout-loaded">
              Loaded {loaded.classifications.length} from{" "}
              <code>{loaded.path}</code> on <code>{loaded.branch}</code> of{" "}
              {loaded.repo}, read at commit{" "}
              <code>{loaded.commit.slice(0, 12)}</code>. Edit them below, then
              run.
            </p>
          ) : null}
          {drafts.map((d) => (
            <ClassificationEditor
              key={d.key}
              draft={d}
              onChange={changeDraft}
              onRemove={
                drafts.length > 1
                  ? () => setDrafts((ds) => ds.filter((x) => x.key !== d.key))
                  : undefined
              }
            />
          ))}
          <div class="ui-tryout-actions">
            <Button
              onClick={() => setDrafts((ds) => [...ds, blankDraft()])}
              disabled={drafts.length >= MAX_CLASSIFICATIONS}
            >
              add a classification
            </Button>
            <Button
              variant="primary"
              type="submit"
              disabled={running || problem !== null}
            >
              {running ? "running…" : "run"}
            </Button>
          </div>
          {problem !== null ? <p class="ui-tryout-hint">{problem}</p> : null}
        </form>
      </Panel>
      <ConfirmDialog
        open={confirmLoad}
        label="replace the classifications"
        confirmLabel="replace them"
        onCancel={() => setConfirmLoad(false)}
        onConfirm={() => void loadRules()}
      >
        <p>
          Loading the rules of {repo.trim()} replaces the classifications you
          have written below.
        </p>
      </ConfirmDialog>
      {running || result || error ? (
        <Panel title="result" icon="📋">
          {running ? (
            <p class="ui-tryout-running" role="status">
              Running — a run takes a minute or more, and up to half an hour for
              a long list ({elapsed}s so far).
            </p>
          ) : null}
          {error ? (
            <ApiErrorPanel context="the try-out failed" problem={error} />
          ) : null}
          {result?.state === "failed" ? (
            <ApiErrorPanel
              context="the run failed"
              problem={{
                title: "the classifier could not finish",
                detail: result.error ?? "no reason given",
              }}
            />
          ) : null}
          {result?.state === "done" ? <TryOutResult result={result} /> : null}
        </Panel>
      ) : null}
    </div>
  );
}