/**
 * 旧版画布的节点AI浮层。通过useCanvasAI返回的控制接口管理生成，模型目录由旧画布AI接口读取。
 * 配置草稿保存在本地state，save回调将配置写回旧节点；本组件不承担新版ledger调度与恢复。
 */
"use client";
import { useEffect, useState } from "react";
import { NodeToolbar, Position } from "@xyflow/react";
import { ArrowUp, Square, Sparkles } from "lucide-react";
import { api, errorText } from "@/lib/api";
import { canvasPath } from "@/lib/canvas-sync";
import { CANVAS_ACCEPT, managedImageSource } from "@/lib/canvas-v2";
import type { CanvasNode } from "@/lib/canvas";
import type { CanvasModel, useCanvasAI } from "./use-canvas-ai";
import styles from "./canvas.module.css";
/** 以boardId+node.id定位run步骤，列表最后一项作为当前任务；NodeToolbar将面板附着在显示节点下方。 */
export function AIPanel({ id, node, workspace, boardId, ai, save }: { id: string; node: CanvasNode; workspace: string; boardId: string; ai: ReturnType<typeof useCanvasAI>; save: (patch: NonNullable<CanvasNode["data"]["ai"]>) => void }) {
  const [models, setModels] = useState<CanvasModel[]>([]);
  const [model, setModel] = useState(node.data.ai?.modelId || "");
  const [prompt, setPrompt] = useState(node.data.ai?.prompt || "");
  const [propagate, setPropagate] = useState(node.data.ai?.propagate || false);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(true);
  const [starting, setStarting] = useState(false);
  const image = ["image", "plain-image"].includes(node.data.kind);
  const relevant = [...ai.runs.values()].filter((run) => run.steps?.some((step) => step.board_id === boardId && step.node_id === node.id));
  const run = relevant.at(-1), step = run?.steps?.find((step) => step.board_id === boardId && step.node_id === node.id);
  // starting防止本地重复启动，之后以步骤queued/running判断生成忙碌；这不是整份画布的同步锁。
  const busy = starting || step?.status === "queued" || step?.status === "running";
  // 演示/非live路径不请求模型；真实路径按输出模态筛选，并保留仍兼容选择或回退到首个可用模型。
  // 清理时abort，失败和finally检查signal再更新；成功分支直接采用api返回的结果。
  useEffect(() => {
    if (!ai.live) { setLoading(false); return; }
    const controller = new AbortController();
    setLoading(true); setError("");
    api<{ models: CanvasModel[] }>(canvasPath(workspace, boardId) + "/ai/models", { signal: controller.signal, headers: { Accept: CANVAS_ACCEPT } }).then((result) => {
      const compatible = result.models.filter((model) => model.output_modalities.includes(image ? "image" : "text"));
      setModels(compatible); setModel((id) => compatible.some((model) => model.id === id) ? id : compatible.find((model) => model.available)?.id || "");
    }).catch((error) => { if (!controller.signal.aborted) setError(errorText(error)); }).finally(() => { if (!controller.signal.aborted) setLoading(false); });
    return () => controller.abort();
  }, [workspace, boardId, image, ai.live]);
  /** 构造当前输入配置，参数固定为空对象；状态切换事件需显式替换刚改变的值，避免读取旧React state。 */
  const config = () => ({ enabled: true, modelId: model, prompt, propagate, parameters: {} });
  /** 输入blur时，有模型且live才调用save；仅持久化配置，不启动服务端任务。 */
  const persist = () => { if (model && ai.live) save(config()); };
  // output取当前步骤资源，文本内容则从最后一个step.output事件取；两者按同一board/node限定。
  const output = run?.outputs?.find((item) => item.step_id === step?.step_id)?.output;
  const textOutput = run?.events?.filter((event) => event.type === "step.output" && event.node_id === node.id && event.board_id === boardId).at(-1)?.output?.text;
  // 模型和传播开关变化即时save，正文blur保存；执行由ai.run负责，starting在finally复位。
  // 上传中、演示或没有可用模型禁止启动；与新版不同，此处未要求prompt非空，也未在busy时禁用textarea。
  // 冲突时保留结果并给显式apply入口，错误优先显示本面板错误；关闭/取消任务的行为交由父层与ai接口决定。
  return <NodeToolbar nodeId={id} isVisible position={Position.Bottom} offset={26} style={{ zIndex: 110 }}><section className={`${styles.aiPanel} nodrag nopan nowheel`} aria-label="元素 AI 工具"
    onPointerDown={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()} onDoubleClick={(event) => event.stopPropagation()} onKeyDown={(event) => event.stopPropagation()}>
    <header><Sparkles size={14} /><strong>{image ? "图像创作" : "文本创作"}</strong><span>{node.data.title}</span></header>
    <textarea aria-label="AI 指令" placeholder={image ? "描述你希望生成或修改的画面…" : "希望如何处理当前内容？"} value={prompt} maxLength={16000} onChange={(event) => setPrompt(event.target.value)} onBlur={persist} />
    <footer><select aria-label="AI 模型" disabled={loading || !ai.live || busy} value={model} onChange={(event) => { setModel(event.target.value); if (ai.live) save({ ...config(), modelId: event.target.value }); }}>{!model && <option value="">{loading ? "正在读取模型…" : "暂无可用模型"}</option>}{models.map((model) => <option key={model.id} value={model.id} disabled={!model.available}>{model.label || model.display_name || model.id}{!model.available ? " · 不可用" : ""}</option>)}</select>
      <label><input type="checkbox" aria-label="继续向下传播" disabled={!!busy} checked={propagate} onChange={(event) => { setPropagate(event.target.checked); if (model && ai.live) save({ ...config(), propagate: event.target.checked }); }} />继续向下传播</label>
      {busy && run ? <button aria-label="取消生成" title="取消生成" onClick={() => void ai.cancel(run).catch((error) => setError(errorText(error)))}><Square size={15} /></button> : <button aria-label="执行 AI" title="在当前元素生成结果" disabled={!!node.pendingUpload || starting || !ai.live || !model || loading || !models.some((item) => item.id === model && item.available)} onClick={async () => {
        setStarting(true); setError(""); try { await ai.run(boardId, node.id, model, prompt, propagate); } catch (error) { setError(errorText(error)); } finally { setStarting(false); }
      }}><ArrowUp size={18} /></button>}
    </footer>
    <p role="status">{node.pendingUpload ? "图片正在上传，可继续编辑；上传完成后即可生成" : !ai.live ? "演示画布暂不执行生成" : ai.conflicts.has(boardId) ? "生成已完成，本地草稿存在冲突，尚未替换当前内容" : busy ? "正在生成，结果将显示在当前元素…" : step ? ({ succeeded: "已更新当前元素", conflict: "内容已改变，生成结果已保留", failed: "生成未完成，原内容已保留", cancelled: "已取消生成", skipped: "此步骤未执行" }[step.status] || step.status) : "结果将显示在当前元素"}</p>
    {(step?.status === "conflict" || ai.conflicts.has(boardId)) && output && run && <div className={styles.aiConflict}>{textOutput && <pre>{textOutput}</pre>}{output.src && <img src={managedImageSource(output.src)} alt="待应用的生成结果" />}<button onClick={() => void ai.apply(run, node.id, output.output_id, boardId).catch((error) => setError(errorText(error)))}>使用此结果替换当前内容</button></div>}
    {(error || ai.error) && <p role="alert">{error || errorText(new Error(ai.error))}</p>}
  </section></NodeToolbar>;
}