import { useState } from "react";
import { post } from "../api";
import { toast } from "../dialogs";
import { useT } from "../i18n";
import { useStore } from "../store";
import { Spinner } from "./Activity";
import { Icon } from "./Icon";

/** Green/red badge of the project's check (tests, build …) for one turn; output and "let the agent fix it" on click. */
export function TurnCheck({ sessionId, messageId, canSend }: { sessionId: string; messageId: string; canSend: boolean }) {
  const t = useT();
  const check = useStore((s) => s.checks[sessionId]?.[messageId]);
  const [open, setOpen] = useState(false);
  if (!check) return null;
  const seconds = check.duration_ms >= 1000 ? ` · ${(check.duration_ms / 1000).toFixed(check.duration_ms >= 10_000 ? 0 : 1)} s` : "";
  const label =
    check.status === "running" ? t("check.running") : check.status === "passed" ? t("check.passed") : check.status === "timeout" ? t("check.timeout") : t("check.failed");
  const fix = async () => {
    try {
      await post(`/sessions/${sessionId}/prompt`, { text: `${t("check.fixPrompt")}\n\n\`\`\`\n${check.output}\n\`\`\`` });
    } catch (e: any) {
      toast(e.message);
    }
  };
  return (
    <div className="turn-check">
      <button className={`chip check-${check.status}`} onClick={() => setOpen(!open)} aria-expanded={open} disabled={check.status === "running"}>
        {check.status === "running" ? <Spinner small /> : <Icon name={check.status === "passed" ? "check" : "x-mark"} className="tiny" />} {label}
        {seconds}
      </button>
      {open && check.status !== "running" && (
        <div className="turn-check-body">
          <pre className="mono">{check.output || t("check.noOutput")}</pre>
          {check.status !== "passed" && canSend && (
            <button className="small primary" onClick={fix}>
              <Icon name="sparkle" /> {t("check.fix")}
            </button>
          )}
        </div>
      )}
    </div>
  );
}