import { useEffect, useRef } from "react";
import { api, type RunState } from "../lib/api";
import type { T } from "../lib/i18n";

interface Props {
  t: T;
  runId: string | null;
  run: RunState | null;
}

export function RunPanel({ t, runId, run }: Props) {
  const logRef = useRef<HTMLPreElement>(null);
  useEffect(() => {
    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
  }, [run?.logs]);

  const status = run?.status;
  return (
    <div className="panel">
      <div className="panel-head">
        <strong>{t("run_log")}</strong>
        {status && (
          <span className={"badge badge-" + status}>
            {status === "running" ? t("status_running") : status === "done" ? t("status_done") : t("status_error")}
          </span>
        )}
        <span className="spacer" />
        {run?.browser_open && runId && (
          <button className="secondary" onClick={() => api.closeBrowser(runId)}>
            {t("close_browser")}
          </button>
        )}
        {run?.trace_ready && runId && (
          <button className="secondary" onClick={() => api.showTrace(runId)}>
            {t("show_trace")}
          </button>
        )}
      </div>
      <pre className="log" ref={logRef}>
        {(run?.logs ?? []).join("\n")}
      </pre>
    </div>
  );
}