import { useMemo } from "react";
import { useConsole } from "../../context";
import { Bar } from "../../components/ui";
import { ChatList } from "../../components/chat/Chat";
import { traceEntryToChatMessage, type ChatMessage } from "../../components/chat/mapTrace";

export default function TracePanel() {
  const ctx = useConsole();
  const messages = useMemo<ChatMessage[]>(() => {
    const t = ctx.currentTask;
    const head: ChatMessage[] = t && t.prompt ? [{ id: "task-prompt", role: "user", text: t.prompt }] : [];
    const pool = ctx.traceKind ? ctx.traceEntries.filter((e) => e.kind === ctx.traceKind) : ctx.traceEntries;
    const body = pool.map((e, i) => traceEntryToChatMessage(e, i));
    const tail: ChatMessage[] = ctx.traceDone ? [{ id: "trace-done", role: "status", text: "链路已结束（" + ctx.traceDone + "）" }] : [];
    return [...head, ...body, ...tail];
  }, [ctx.currentTask, ctx.traceEntries, ctx.traceKind, ctx.traceDone]);
  return (
    <>
      <div className="muted">实时链路</div>
      <Bar>
        <select aria-label="链路类型" value={ctx.traceKind} onChange={(e) => ctx.setTraceKind(e.target.value)}>
          <option value="">链路类型：全部</option>
          {["exec", "file", "call", "tool", "message", "reasoning", "plan", "agent-start", "agent-done"].map((k) => (
            <option key={k} value={k}>{k === "exec" ? "命令" : k === "file" ? "文件" : k === "call" ? "调用" : k === "tool" ? "工具" : k === "message" ? "消息" : k === "reasoning" ? "思考" : k === "plan" ? "计划" : "子代理"}</option>
          ))}
        </select>
        <button onClick={ctx.downloadTrace}>下载完整链路</button>
        <span className="muted">{ctx.traceMsg}</span>
      </Bar>
      {ctx.traceNote ? <div><span className="err">{ctx.traceNote}</span></div> : null}
      <div className="chat-column">
        <ChatList messages={messages} empty="（暂无链路条目）" />
      </div>
      <div className="muted">对话时间线：首条是本任务 prompt（用户）；助手回复来自 message 条目，命令/文件/工具/调用是工具评论框，计划/思考/子代理开始结束是时间线上的状态文字。流式进行中时新条目实时追加；你在底部时自动跟随，往上翻时暂停跟随，点“回到最新”恢复。</div>
    </>
  );
}