import { useState } from "react";
import { ApiError, api, type Flow } from "../lib/api";
import type { T } from "../lib/i18n";

interface Props {
  t: T;
  currentName: string | null;
  flow: Flow;
  onApply: (flow: Partial<Flow>) => void;
}

export function AssistPanel({ t, currentName, flow, onApply }: Props) {
  const [text, setText] = useState("");
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState<{ text: string; error: boolean } | null>(null);

  async function submit() {
    if (!text.trim() || !currentName) return;
    setBusy(true);
    setMsg(null);
    try {
      const res = await api.assist(currentName, text.trim(), flow);
      onApply({ nodes: res.nodes, edges: res.edges, start: res.start ?? null, settings: res.settings });
      setMsg({ text: t("assist_applied") + (res.explanation ? "\n\n" + res.explanation : ""), error: false });
    } catch (e) {
      if (e instanceof ApiError && e.status === 501) {
        setMsg({ text: t("assist_unavailable"), error: true });
      } else {
        const detail = e instanceof ApiError ? String(e.detail) : String(e);
        setMsg({ text: t("assist_failed", { msg: detail }), error: true });
      }
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="panel">
      <strong>{t("assist_title")}</strong>
      <p className="hint">{t("assist_hint")}</p>
      <textarea rows={3} placeholder={t("assist_ph")} value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={submit} disabled={busy || !currentName}>
        {busy ? t("assist_working") : t("assist_btn")}
      </button>
      {msg && <p className={"assist-msg" + (msg.error ? " error" : "")}>{msg.text}</p>}
    </div>
  );
}