"use client";

import React, { useEffect, useMemo, useRef, useState } from "react";
import { ChevronLeft, History, Network, Plus, Settings, Settings2, Send, Sparkles, User, Wrench, X } from "lucide-react";
import type { Json } from "@/types/supabase";
import { useEditorBridgeStore } from "@/store/editor-bridge";
import { useAiAgentUiStore } from "@/store/ai-agent-ui";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Textarea } from "@/components/ui/textarea";
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";

type AgentMessage = { role: "user" | "assistant"; content: string };

const DEFAULT_SESSION_MESSAGES: AgentMessage[] = [
  {
    role: "assistant",
    content:
      "你好，我是页面 AI Agent。\n- 我可以查找/插入/改写页面内容（直接落入页面）。\n- 我也可以：LightRAG 检索、跨页面搜索/读取、读取图片 OCR、执行斜杠命令（创建/改名）。\n- 建议先说你的目标（例如：把某段改写更简洁，或在某个标题后新增一段总结）。",
  },
];

type ToolName =
  | "search_web"
  | "rag_lightrag_query"
  | "docs_search"
  | "docs_read"
  | "image_read"
  | "slash_run"
  | "doc_get"
  | "doc_find"
  | "doc_insert_blocks"
  | "doc_replace_range";

const TOOL_LABEL: Record<ToolName, string> = {
  search_web: "联网检索（SearxNG）",
  rag_lightrag_query: "LightRAG 检索",
  docs_search: "文档搜索（跨页）",
  docs_read: "文档读取（跨页）",
  image_read: "图片读取（OCR）",
  slash_run: "斜杠命令（写入）",
  doc_get: "读页面（摘要）",
  doc_find: "查找（按块）",
  doc_insert_blocks: "插入块（写入）",
  doc_replace_range: "替换块文本（写入）",
};

const DEFAULT_TOOLS: ToolName[] = [
  "doc_get",
  "doc_find",
  "doc_insert_blocks",
  "doc_replace_range",
  "docs_search",
  "docs_read",
  "image_read",
  "rag_lightrag_query",
  "search_web",
];

type ToolLog =
  | { type: "tool_call"; id: string; tool: string; args: Record<string, unknown> }
  | { type: "tool_result"; id: string; tool: string; ok: boolean; ms: number; result: unknown }
  | { type: "error"; message: string };

type ChatSession = {
  id: string;
  title: string;
  createdAt: number;
  updatedAt: number;
  messages: AgentMessage[];
  toolLogs: ToolLog[];
};

type PanelPage = "chat" | "tools" | "history" | "account" | "settings";

const clamp = (n: number, min: number, max: number) => Math.max(min, Math.min(max, n));

const generateId = () => {
  if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
  return `sess_${Math.random().toString(16).slice(2, 10)}`;
};

const normalizeSessions = (sessions: ChatSession[]) => {
  const maxSessions = 20;
  const maxMessages = 40;
  const maxToolLogs = 80;
  return sessions
    .slice(0, maxSessions)
    .map((s) => ({
      ...s,
      messages: Array.isArray(s.messages) ? s.messages.slice(-maxMessages) : [],
      toolLogs: Array.isArray(s.toolLogs) ? s.toolLogs.slice(-maxToolLogs) : [],
    }))
    .sort((a, b) => b.updatedAt - a.updatedAt);
};

const parseSseChunks = async (
  res: Response,
  onEvent: (event: string, dataText: string) => void,
) => {
  if (!res.body) throw new Error("响应不支持流式读取");
  const reader = res.body.getReader();
  const decoder = new TextDecoder("utf-8");

  let buffer = "";
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    buffer += decoder.decode(value, { stream: true });

    while (true) {
      const sep = buffer.indexOf("\n\n");
      if (sep === -1) break;
      const raw = buffer.slice(0, sep);
      buffer = buffer.slice(sep + 2);

      // 注释/心跳：以 ":" 开头
      if (raw.trimStart().startsWith(":")) continue;

      const lines = raw.split(/\r?\n/);
      let event = "message";
      const dataLines: string[] = [];
      for (const line of lines) {
        if (line.startsWith("event:")) event = line.slice("event:".length).trim() || "message";
        if (line.startsWith("data:")) dataLines.push(line.slice("data:".length).trimStart());
      }
      onEvent(event, dataLines.join("\n"));
    }
  }
};

const safeJsonStringify = (value: unknown) => {
  try {
    return JSON.stringify(value);
  } catch {
    return "";
  }
};

export function DocumentAiAgentPanel({
  documentId,
  getLatestBlocks,
}: {
  documentId: string;
  getLatestBlocks: () => Json | null;
}) {
  const editorBridge = useEditorBridgeStore((s) => s.bridge);

  const open = useAiAgentUiStore((s) => s.documentAgentOpen);
  const setOpen = useAiAgentUiStore((s) => s.setDocumentAgentOpen);
  const setAvailable = useAiAgentUiStore((s) => s.setDocumentAgentAvailable);
  const [messages, setMessages] = useState<AgentMessage[]>(() => DEFAULT_SESSION_MESSAGES);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [networkOn, setNetworkOn] = useState(true);
  const [toolAuto, setToolAuto] = useState(true);
  const [toolPickerOpen, setToolPickerOpen] = useState(false);
  const [selectedTools, setSelectedTools] = useState<ToolName[]>(DEFAULT_TOOLS);
  const [maxSteps, setMaxSteps] = useState<number>(10);
  const [aiProvider, setAiProvider] = useState<"online" | "local">("online");
  const [aiModel, setAiModel] = useState<string>("");
  const [page, setPage] = useState<PanelPage>("chat");

  const [toolLogs, setToolLogs] = useState<ToolLog[]>([]);
  const [sessions, setSessions] = useState<ChatSession[]>([]);
  const [activeSessionId, setActiveSessionId] = useState<string>("");

  // 兼容旧实现（已改为侧边栏内切换页面，不再弹出居中对话框）
  const [toolsDialogOpen, setToolsDialogOpen] = useState(false);
  const [historyDialogOpen, setHistoryDialogOpen] = useState(false);
  const [accountDialogOpen, setAccountDialogOpen] = useState(false);
  const [settingsDialogOpen, setSettingsDialogOpen] = useState(false);

  const abortRef = useRef<AbortController | null>(null);
  const syncTimerRef = useRef<number | null>(null);

  useEffect(() => {
    setAvailable(true);
    return () => {
      setAvailable(false);
      setOpen(false);
    };
  }, [setAvailable, setOpen]);

  useEffect(() => {
    try {
      const stepsRaw = window.localStorage.getItem("doc_ai_max_steps") || "";
      const p = (window.localStorage.getItem("doc_ai_provider") || "").trim();
      const m = window.localStorage.getItem("doc_ai_model") || "";
      const parsed = Number(stepsRaw);
      if (Number.isFinite(parsed) && parsed >= 1) {
        setMaxSteps(Math.max(1, Math.min(24, Math.floor(parsed))));
      }
      if (p === "local" || p === "online") setAiProvider(p);
      if (typeof m === "string") setAiModel(m);
    } catch {
      // ignore
    }
  }, []);

  useEffect(() => {
    try {
      window.localStorage.setItem("doc_ai_max_steps", String(maxSteps));
      window.localStorage.setItem("doc_ai_provider", aiProvider);
      window.localStorage.setItem("doc_ai_model", aiModel);
    } catch {
      // ignore
    }
  }, [aiModel, aiProvider, maxSteps]);

  useEffect(() => {
    // 关闭面板时，回到对话页，避免下次打开还停留在设置/历史等子页
    if (!open) setPage("chat");
  }, [open]);

  // 会话/历史：按 documentId 隔离持久化
  useEffect(() => {
    try {
      const key = `doc_ai_sessions:${documentId}`;
      const raw = window.localStorage.getItem(key);
      if (!raw) {
        const id = generateId();
        const now = Date.now();
        const session: ChatSession = {
          id,
          title: "新会话",
          createdAt: now,
          updatedAt: now,
          messages: DEFAULT_SESSION_MESSAGES,
          toolLogs: [],
        };
        setSessions([session]);
        setActiveSessionId(id);
        setMessages(session.messages);
        setToolLogs([]);
        return;
      }

      const parsed = JSON.parse(raw) as unknown;
      const list = typeof parsed === "object" && parsed && "sessions" in parsed ? (parsed as any).sessions : null;
      const active = typeof parsed === "object" && parsed && "activeSessionId" in parsed ? String((parsed as any).activeSessionId ?? "") : "";
      if (!Array.isArray(list) || list.length === 0) return;

      const loaded = normalizeSessions(
        list
          .map((x) => {
            const id = String((x as any)?.id ?? "").trim() || generateId();
            const createdAt = Number((x as any)?.createdAt ?? Date.now());
            const updatedAt = Number((x as any)?.updatedAt ?? createdAt);
            const title = String((x as any)?.title ?? "").trim() || "历史会话";
            const messages = Array.isArray((x as any)?.messages) ? (x as any).messages : DEFAULT_SESSION_MESSAGES;
            const toolLogs = Array.isArray((x as any)?.toolLogs) ? (x as any).toolLogs : [];
            return { id, title, createdAt, updatedAt, messages, toolLogs } as ChatSession;
          })
          .filter((s) => s.id),
      );
      setSessions(loaded);
      const picked = active && loaded.some((s) => s.id === active) ? active : loaded[0]!.id;
      setActiveSessionId(picked);
      const cur = loaded.find((s) => s.id === picked) ?? loaded[0]!;
      setMessages(cur.messages?.length ? cur.messages : DEFAULT_SESSION_MESSAGES);
      setToolLogs(cur.toolLogs ?? []);
    } catch {
      // ignore
    }
    // 只在 documentId 变化时读取一次
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [documentId]);

  useEffect(() => {
    if (!activeSessionId) return;
    if (syncTimerRef.current) window.clearTimeout(syncTimerRef.current);
    syncTimerRef.current = window.setTimeout(() => {
      setSessions((prev) => {
        const now = Date.now();
        const next = prev.some((s) => s.id === activeSessionId)
          ? prev.map((s) =>
              s.id === activeSessionId ? { ...s, messages, toolLogs, updatedAt: now } : s,
            )
          : [
              {
                id: activeSessionId,
                title: "新会话",
                createdAt: now,
                updatedAt: now,
                messages,
                toolLogs,
              },
              ...prev,
            ];
        return normalizeSessions(next);
      });
    }, 200);
    return () => {
      if (syncTimerRef.current) window.clearTimeout(syncTimerRef.current);
    };
  }, [activeSessionId, messages, toolLogs]);

  useEffect(() => {
    if (!documentId) return;
    try {
      const key = `doc_ai_sessions:${documentId}`;
      const payload = JSON.stringify({ activeSessionId, sessions: normalizeSessions(sessions) });
      if (payload.length <= 900_000) window.localStorage.setItem(key, payload);
    } catch {
      // ignore
    }
  }, [activeSessionId, documentId, sessions]);

  const currentSession = useMemo(() => sessions.find((s) => s.id === activeSessionId) ?? null, [activeSessionId, sessions]);
  const currentSessionTitle = currentSession?.title || "新会话";

  const pageTitle = useMemo(() => {
    switch (page) {
      case "tools":
        return "工具（代替 MCP）";
      case "history":
        return "历史会话";
      case "account":
        return "账户 / 模型";
      case "settings":
        return "设置";
      default:
        return "页面 AI Agent";
    }
  }, [page]);

  const startNewSession = () => {
    if (loading) return;
    const id = generateId();
    const now = Date.now();
    const next: ChatSession = {
      id,
      title: "新会话",
      createdAt: now,
      updatedAt: now,
      messages: DEFAULT_SESSION_MESSAGES,
      toolLogs: [],
    };
    setSessions((prev) => normalizeSessions([next, ...prev]));
    setActiveSessionId(id);
    setMessages(next.messages);
    setToolLogs([]);
    setInput("");
  };

  const clearHistory = () => {
    if (loading) return;
    const base: ChatSession =
      currentSession ??
      ({
        id: activeSessionId || generateId(),
        title: "当前会话",
        createdAt: Date.now(),
        updatedAt: Date.now(),
        messages,
        toolLogs,
      } as ChatSession);
    setSessions([
      {
        ...base,
        title: base.title || "当前会话",
        updatedAt: Date.now(),
        messages,
        toolLogs,
      },
    ]);
    setActiveSessionId(base.id);
  };

  const switchSession = (id: string) => {
    if (loading) return;
    const target = sessions.find((s) => s.id === id);
    if (!target) return;
    setActiveSessionId(target.id);
    setMessages(target.messages?.length ? target.messages : DEFAULT_SESSION_MESSAGES);
    setToolLogs(target.toolLogs ?? []);
    setInput("");
  };

  const resetCurrentSession = () => {
    if (loading) return;
    setMessages(DEFAULT_SESSION_MESSAGES);
    setToolLogs([]);
    setInput("");
    if (activeSessionId) {
      setSessions((prev) =>
        normalizeSessions(
          prev.map((s) =>
            s.id === activeSessionId ? { ...s, messages: DEFAULT_SESSION_MESSAGES, toolLogs: [], updatedAt: Date.now(), title: s.title || "当前会话" } : s,
          ),
        ),
      );
    }
  };

  const deleteSession = (id: string) => {
    if (loading) return;
    setSessions((prev) => {
      const next = prev.filter((s) => s.id !== id);
      return normalizeSessions(next);
    });
    if (id === activeSessionId) {
      const fallback = sessions.filter((s) => s.id !== id)[0];
      if (fallback) {
        setActiveSessionId(fallback.id);
        setMessages(fallback.messages?.length ? fallback.messages : DEFAULT_SESSION_MESSAGES);
        setToolLogs(fallback.toolLogs ?? []);
      } else {
        startNewSession();
      }
    }
  };

  const canSend = useMemo(() => input.trim().length > 0 && !loading, [input, loading]);

  const stop = () => {
    abortRef.current?.abort();
    abortRef.current = null;
    setLoading(false);
  };

  const send = async () => {
    const content = input.trim();
    if (!content) return;
    setToolLogs([]);
    if (activeSessionId && currentSessionTitle === "新会话") {
      const title = content.length > 18 ? `${content.slice(0, 18)}…` : content;
      setSessions((prev) =>
        normalizeSessions(
          prev.map((s) => (s.id === activeSessionId ? { ...s, title, updatedAt: Date.now() } : s)),
        ),
      );
    }

    const nextMessages: AgentMessage[] = [...messages, { role: "user", content }];
    setMessages(nextMessages);
    setInput("");
    setLoading(true);

    abortRef.current?.abort();
    const controller = new AbortController();
    abortRef.current = controller;

    // 不把面板的“欢迎语”当作对话历史发送给服务端，避免影响任务执行
    const payloadMessages = nextMessages.filter(
      (m, idx) => !(idx === 0 && m.role === "assistant" && /页面 AI Agent/.test(m.content)),
    );

    const blocks = getLatestBlocks();
    const blocksJson = blocks ? safeJsonStringify(blocks) : "";
    const shouldSendBlocks = blocksJson && blocksJson.length <= 500_000;

    try {
      const res = await fetch("/api/ai-agent/run", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        signal: controller.signal,
        body: JSON.stringify({
          stream: true,
          maxSteps,
          scope: "document",
          messages: payloadMessages.slice(-24),
          toolChoice: toolAuto
            ? {
                mode: "auto",
                toolSets: [
                  "toolset.readonly",
                  "toolset.rag_read",
                  "toolset.docs_read",
                  "toolset.media_read",
                  "toolset.doc_read",
                  "toolset.doc_write",
                  "toolset.slash_write",
                ],
              }
            : { mode: "manual", tools: selectedTools },
          context: { documentId, documentBlocks: shouldSendBlocks ? blocks : null },
          options: { searxng: networkOn, ai: { provider: aiProvider, model: aiModel.trim() || undefined } },
        }),
      });
      if (!res.ok) {
        const j = (await res.json().catch(() => null)) as unknown;
        const err = typeof j === "object" && j && "error" in j ? String((j as Record<string, unknown>).error ?? "") : "";
        throw new Error(err || `请求失败：${res.status}`);
      }

      await parseSseChunks(res, (event, dataText) => {
        if (event === "tool_call") {
          try {
            const data = JSON.parse(dataText || "null") as unknown;
            const obj = (typeof data === "object" && data ? (data as Record<string, unknown>) : {}) as Record<string, unknown>;
            setToolLogs((prev) => [
              ...prev,
              {
                type: "tool_call",
                id: String(obj.id ?? ""),
                tool: String(obj.tool ?? ""),
                args: (typeof obj.args === "object" && obj.args ? (obj.args as Record<string, unknown>) : {}) as Record<
                  string,
                  unknown
                >,
              },
            ]);
          } catch {
            // ignore
          }
          return;
        }

        if (event === "tool_result") {
          try {
            const data = JSON.parse(dataText || "null") as unknown;
            const obj = (typeof data === "object" && data ? (data as Record<string, unknown>) : {}) as Record<string, unknown>;
            const tool = String(obj.tool ?? "");
            const result = "result" in obj ? obj.result : null;
            setToolLogs((prev) => [
              ...prev,
              { type: "tool_result", id: String(obj.id ?? ""), tool, ok: Boolean(obj.ok), ms: Number(obj.ms ?? 0), result },
            ]);

            // doc 写工具返回 data=blocks 时，立即落入编辑器
            if ((tool === "doc_insert_blocks" || tool === "doc_replace_range") && obj.ok) {
              const r = result as unknown;
              const dataNode =
                typeof r === "object" && r && "data" in (r as Record<string, unknown>) ? (r as Record<string, unknown>).data : null;
              if (dataNode && editorBridge?.replaceWithSnapshot) {
                try {
                  editorBridge.replaceWithSnapshot(dataNode as Json);
                } catch {
                  // ignore
                }
              }
            }
          } catch {
            // ignore
          }
          return;
        }

        if (event === "assistant_message") {
          try {
            const data = JSON.parse(dataText || "null") as unknown;
            const assistantText =
              typeof data === "object" && data && "text" in data ? String((data as Record<string, unknown>).text ?? "") : "";
            setMessages((prev) => [...prev, { role: "assistant", content: assistantText.trim() ? assistantText.trim() : "（无输出）" }]);
          } catch {
            setMessages((prev) => [...prev, { role: "assistant", content: "（无输出）" }]);
          }
          return;
        }

        if (event === "error") {
          try {
            const data = JSON.parse(dataText || "null") as unknown;
            const message =
              typeof data === "object" && data && "message" in data ? String((data as Record<string, unknown>).message ?? "") : "";
            setToolLogs((prev) => [...prev, { type: "error", message: message || "未知错误" }]);
          } catch {
            setToolLogs((prev) => [...prev, { type: "error", message: "未知错误" }]);
          }
          return;
        }
      });
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e);
      setToolLogs((prev) => [...prev, { type: "error", message: msg }]);
    } finally {
      abortRef.current = null;
      setLoading(false);
    }
  };

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetContent side="right" className="p-0">
        <SheetHeader className="border-b">
          <SheetTitle className="flex items-center justify-between gap-2">
            <span className="flex items-center gap-2">
              {page === "chat" ? (
                <Sparkles className="h-4 w-4" />
              ) : (
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setPage("chat")}
                  disabled={loading}
                  title="返回对话"
                >
                  <ChevronLeft className="h-4 w-4" />
                </Button>
              )}
              {pageTitle}
            </span>
            <div className="flex items-center gap-1">
              <Button variant="ghost" size="icon" onClick={startNewSession} disabled={loading} title="新建会话">
                <Plus className="h-4 w-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setPage("tools")}
                disabled={loading}
                title="工具（代替 MCP）"
              >
                <Wrench className="h-4 w-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setPage("history")}
                disabled={loading}
                title="历史"
              >
                <History className="h-4 w-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setPage("account")}
                disabled={loading}
                title="账户/模型"
              >
                <User className="h-4 w-4" />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setPage("settings")}
                disabled={loading}
                title="设置"
              >
                <Settings className="h-4 w-4" />
              </Button>
              <Button variant="ghost" size="icon" onClick={() => setOpen(false)} title="关闭">
                <X className="h-4 w-4" />
              </Button>
            </div>
          </SheetTitle>
        </SheetHeader>

        <div className="flex flex-1 flex-col overflow-hidden">
          <div className={page === "chat" ? "" : "hidden"}>
          <div className="hidden">
            <div className="flex items-center gap-2">
              <button
                type="button"
                className={`inline-flex items-center gap-1 rounded border px-2 py-1 ${networkOn ? "bg-white" : "bg-muted"}`}
                onClick={() => setNetworkOn((v) => !v)}
                disabled={loading}
                title="联网检索"
              >
                <Network className="h-3.5 w-3.5" />
                {networkOn ? "联网" : "离线"}
              </button>
              <button
                type="button"
                className={`inline-flex items-center gap-1 rounded border px-2 py-1 ${toolAuto ? "bg-white" : "bg-muted"}`}
                onClick={() => setToolAuto((v) => !v)}
                disabled={loading}
                title="工具自动/手动"
              >
                <Settings2 className="h-3.5 w-3.5" />
                {toolAuto ? "自动工具" : "手动工具"}
              </button>
              {!toolAuto && (
                <button
                  type="button"
                  className="inline-flex items-center gap-1 rounded border bg-white px-2 py-1"
                  onClick={() => setToolPickerOpen((v) => !v)}
                  disabled={loading}
                >
                  <Settings2 className="h-3.5 w-3.5" />
                  选择工具
                </button>
              )}
            </div>

            <div className="flex items-center gap-2">
              <label className="flex items-center gap-2">
                步数
                <input
                  className="w-[72px] rounded border px-2 py-1 text-xs"
                  type="number"
                  min={1}
                  max={24}
                  step={1}
                  value={maxSteps}
                  onChange={(e) => {
                    const v = Number(e.target.value);
                    if (!Number.isFinite(v)) return;
                    setMaxSteps(Math.max(1, Math.min(24, Math.floor(v))));
                  }}
                  disabled={loading}
                />
              </label>

              <select
                className="h-8 rounded border bg-white px-2 text-xs"
                value={aiProvider}
                onChange={(e) => setAiProvider(e.target.value === "local" ? "local" : "online")}
                disabled={loading}
              >
                <option value="online">在线</option>
                <option value="local">本地</option>
              </select>
              <input
                className="h-8 w-[180px] rounded border px-2 text-xs"
                value={aiModel}
                onChange={(e) => setAiModel(e.target.value)}
                placeholder="model（可选）"
                disabled={loading}
              />
            </div>
          </div>

          {false && (
            <div className="border-b p-3 text-sm">
              <div className="mb-2 text-xs text-muted-foreground">允许使用的工具</div>
              <div className="flex flex-wrap gap-2">
                {(Object.keys(TOOL_LABEL) as ToolName[]).map((t) => {
                  const on = selectedTools.includes(t);
                  return (
                    <button
                      key={t}
                      type="button"
                      className={`rounded border px-2 py-1 text-xs ${on ? "bg-[#111827] text-white" : "bg-white"}`}
                      onClick={() =>
                        setSelectedTools((prev) =>
                          prev.includes(t) ? prev.filter((x) => x !== t) : [...prev, t],
                        )
                      }
                      disabled={loading}
                    >
                      {TOOL_LABEL[t]}
                    </button>
                  );
                })}
              </div>
            </div>
          )}

          <div className="flex min-h-0 flex-1 flex-col">
            <div className="grid min-h-0 flex-1 grid-cols-1 gap-0">
              <div className="min-h-0 border-b">
                <div className="px-3 py-2 text-sm font-medium">对话</div>
                <ScrollArea className="h-[38vh] border-t">
                  <div className="space-y-3 p-3 text-sm">
                    {messages.map((m, idx) => (
                      <div key={idx} className="space-y-1">
                        <div className="text-xs text-muted-foreground">{m.role === "user" ? "用户" : "AI"}</div>
                        <div className="whitespace-pre-wrap">{m.content}</div>
                      </div>
                    ))}
                  </div>
                </ScrollArea>
              </div>

              <div className="min-h-0">
                <div className="px-3 py-2 text-sm font-medium">工具日志</div>
                <ScrollArea className="h-[30vh] border-t">
                  <div className="space-y-3 p-3 text-sm">
                    {toolLogs.length === 0 ? <div className="text-muted-foreground">暂无工具日志</div> : null}
                    {toolLogs.map((l, idx) => {
                      if (l.type === "error") {
                        return (
                          <div key={idx} className="rounded border border-red-200 bg-red-50 p-2 text-red-700">
                            错误：{l.message}
                          </div>
                        );
                      }
                      if (l.type === "tool_call") {
                        return (
                          <details key={idx} className="rounded border p-2">
                            <summary className="cursor-pointer select-none text-xs text-muted-foreground">
                              tool_call · {l.tool} · {l.id}
                            </summary>
                            <pre className="mt-2 whitespace-pre-wrap text-xs">{JSON.stringify(l.args, null, 2)}</pre>
                          </details>
                        );
                      }
                      return (
                        <details key={idx} className="rounded border p-2">
                          <summary className="cursor-pointer select-none text-xs text-muted-foreground">
                            tool_result · {l.tool} · {l.id} · {l.ok ? "ok" : "fail"} · {l.ms}ms
                          </summary>
                          <pre className="mt-2 whitespace-pre-wrap text-xs">{JSON.stringify(l.result, null, 2)}</pre>
                        </details>
                      );
                    })}
                  </div>
                </ScrollArea>
              </div>
            </div>
          </div>

          <div className="border-t p-3">
            <div className="flex gap-2">
              <Textarea
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="输入你的需求（Enter 发送，Shift+Enter 换行）"
                className="min-h-[72px] flex-1"
                disabled={loading}
                onKeyDown={(e) => {
                  if (e.key === "Enter" && !e.shiftKey) {
                    e.preventDefault();
                    if (canSend) void send();
                  }
                }}
              />
              <div className="flex flex-col gap-2">
                <Button disabled={!canSend} onClick={() => void send()}>
                  <Send className="mr-2 h-4 w-4" />
                  发送
                </Button>
                <Button variant="secondary" disabled={!loading} onClick={stop}>
                  <X className="mr-2 h-4 w-4" />
                  停止
                </Button>
              </div>
            </div>
            {!editorBridge ? (
              <div className="mt-2 text-xs text-muted-foreground">
                提示：编辑器尚未准备好，写入工具可能无法立即落入页面（稍等或刷新）。
              </div>
            ) : null}
          </div>
          </div>

          <div className={page === "chat" ? "hidden" : "min-h-0 flex-1 overflow-hidden"}>
            {page === "tools" ? (
              <ScrollArea className="h-full">
                <div className="space-y-3 p-3 text-sm">
                  <div className="flex flex-wrap items-center gap-2">
                    <button
                      type="button"
                      className={`inline-flex items-center gap-1 rounded border px-2 py-1 ${toolAuto ? "bg-white" : "bg-muted"}`}
                      onClick={() => setToolAuto((v) => !v)}
                      disabled={loading}
                      title="工具自动/手动"
                    >
                      <Settings2 className="h-3.5 w-3.5" />
                      {toolAuto ? "自动工具" : "手动工具"}
                    </button>
                  </div>

                  {!toolAuto ? (
                    <div>
                      <div className="mb-2 text-xs text-muted-foreground">允许使用的工具（手动模式）</div>
                      <div className="flex flex-wrap gap-2">
                        {(Object.keys(TOOL_LABEL) as ToolName[]).map((t) => {
                          const on = selectedTools.includes(t);
                          return (
                            <button
                              key={t}
                              type="button"
                              className={`rounded border px-2 py-1 text-xs ${on ? "bg-[#111827] text-white" : "bg-white"}`}
                              onClick={() =>
                                setSelectedTools((prev) =>
                                  prev.includes(t) ? prev.filter((x) => x !== t) : [...prev, t],
                                )
                              }
                              disabled={loading}
                            >
                              {TOOL_LABEL[t]}
                            </button>
                          );
                        })}
                      </div>
                    </div>
                  ) : (
                    <div className="text-xs text-muted-foreground">
                      自动模式下：AI 会在允许的 ToolSet 范围内自行选择工具。
                    </div>
                  )}
                </div>
              </ScrollArea>
            ) : null}

            {page === "history" ? (
              <ScrollArea className="h-full">
                <div className="p-3 text-sm">
                  <div className="flex flex-wrap items-center justify-between gap-2">
                    <div className="text-xs text-muted-foreground">最多保留 20 个会话</div>
                    <div className="flex flex-wrap items-center gap-2">
                      <Button variant="outline" onClick={resetCurrentSession} disabled={loading}>
                        清空当前
                      </Button>
                      <Button variant="outline" onClick={startNewSession} disabled={loading}>
                        <Plus className="mr-2 h-4 w-4" />
                        新建会话
                      </Button>
                      <Button variant="destructive" onClick={clearHistory} disabled={loading}>
                        清空历史
                      </Button>
                    </div>
                  </div>
                  <div className="mt-3 space-y-2">
                    {sessions.map((s) => {
                      const active = s.id === activeSessionId;
                      const time = new Date(s.updatedAt || s.createdAt).toLocaleString();
                      return (
                        <div
                          key={s.id}
                          className={`flex items-center gap-2 rounded border px-3 py-2 ${active ? "border-[#111827]" : "border-border"}`}
                        >
                          <button
                            type="button"
                            className="min-w-0 flex-1 text-left"
                            onClick={() => {
                              switchSession(s.id);
                              setPage("chat");
                            }}
                            disabled={loading}
                            title={active ? "当前会话" : "切换到该会话"}
                          >
                            <div className="flex items-center justify-between gap-2">
                              <div className="truncate font-medium">{s.title || "未命名"}</div>
                              <div className="shrink-0 text-xs text-muted-foreground">{time}</div>
                            </div>
                            <div className="mt-1 text-xs text-muted-foreground">消息 {s.messages.length} · 日志 {s.toolLogs.length}</div>
                          </button>
                          <Button
                            variant="ghost"
                            size="sm"
                            onClick={() => deleteSession(s.id)}
                            disabled={loading || active}
                            title={active ? "不能删除当前会话" : "删除会话"}
                          >
                            删除
                          </Button>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </ScrollArea>
            ) : null}

            {page === "account" ? (
              <ScrollArea className="h-full">
                <div className="space-y-3 p-3 text-sm">
                  <div className="flex flex-wrap items-center gap-2">
                    <label className="text-xs text-muted-foreground">推理来源</label>
                    <select
                      className="h-9 rounded border bg-white px-2 text-sm"
                      value={aiProvider}
                      onChange={(e) => setAiProvider(e.target.value === "local" ? "local" : "online")}
                      disabled={loading}
                    >
                      <option value="online">在线</option>
                      <option value="local">本地</option>
                    </select>
                    <label className="ml-2 text-xs text-muted-foreground">模型（可选）</label>
                    <input
                      className="h-9 w-[260px] rounded border px-2 text-sm"
                      value={aiModel}
                      onChange={(e) => setAiModel(e.target.value)}
                      placeholder="例如 gemini-2.5-pro"
                      disabled={loading}
                    />
                  </div>
                  <div className="text-xs text-muted-foreground">
                    说明：在线/本地的 BaseURL 与 Key 仍由配置文件/环境变量控制；这里仅做 provider 与 model 覆盖。
                  </div>
                </div>
              </ScrollArea>
            ) : null}

            {page === "settings" ? (
              <ScrollArea className="h-full">
                <div className="space-y-3 p-3 text-sm">
                  <div className="flex flex-wrap items-center gap-3">
                    <button
                      type="button"
                      className={`inline-flex items-center gap-1 rounded border px-2 py-1 ${networkOn ? "bg-white" : "bg-muted"}`}
                      onClick={() => setNetworkOn((v) => !v)}
                      disabled={loading}
                      title="联网检索"
                    >
                      <Network className="h-3.5 w-3.5" />
                      {networkOn ? "联网" : "离线"}
                    </button>

                    <label className="flex items-center gap-2">
                      步数
                      <input
                        className="w-[92px] rounded border px-2 py-1 text-sm"
                        type="number"
                        min={1}
                        max={24}
                        step={1}
                        value={maxSteps}
                        onChange={(e) => {
                          const v = Number(e.target.value);
                          if (!Number.isFinite(v)) return;
                          setMaxSteps(clamp(Math.floor(v), 1, 24));
                        }}
                        disabled={loading}
                      />
                    </label>
                  </div>
                  <div className="text-xs text-muted-foreground">说明：步数越大越“能做事”，但会更慢且更消耗推理额度。</div>
                </div>
              </ScrollArea>
            ) : null}
          </div>
        </div>

        {/* 工具（代替 MCP） */}
        <Dialog open={toolsDialogOpen} onOpenChange={setToolsDialogOpen}>
          <DialogContent showCloseButton={false} className="max-w-[720px]">
            <DialogHeader>
              <DialogTitle>工具（代替 MCP）</DialogTitle>
            </DialogHeader>
            <div className="space-y-3 text-sm">
              <div className="flex flex-wrap items-center gap-2">
                <button
                  type="button"
                  className={`inline-flex items-center gap-1 rounded border px-2 py-1 ${toolAuto ? "bg-white" : "bg-muted"}`}
                  onClick={() => setToolAuto((v) => !v)}
                  disabled={loading}
                  title="工具自动/手动"
                >
                  <Settings2 className="h-3.5 w-3.5" />
                  {toolAuto ? "自动工具" : "手动工具"}
                </button>
              </div>

              {!toolAuto ? (
                <div>
                  <div className="mb-2 text-xs text-muted-foreground">允许使用的工具（手动模式）</div>
                  <div className="flex flex-wrap gap-2">
                    {(Object.keys(TOOL_LABEL) as ToolName[]).map((t) => {
                      const on = selectedTools.includes(t);
                      return (
                        <button
                          key={t}
                          type="button"
                          className={`rounded border px-2 py-1 text-xs ${on ? "bg-[#111827] text-white" : "bg-white"}`}
                          onClick={() =>
                            setSelectedTools((prev) =>
                              prev.includes(t) ? prev.filter((x) => x !== t) : [...prev, t],
                            )
                          }
                          disabled={loading}
                        >
                          {TOOL_LABEL[t]}
                        </button>
                      );
                    })}
                  </div>
                </div>
              ) : (
                <div className="text-xs text-muted-foreground">
                  自动模式下：AI 会在允许的 ToolSet 范围内自行选择工具。
                </div>
              )}
            </div>
          </DialogContent>
        </Dialog>

        {/* 历史 */}
        <Dialog open={historyDialogOpen} onOpenChange={setHistoryDialogOpen}>
          <DialogContent showCloseButton={false} className="max-w-[720px]">
            <DialogHeader>
              <DialogTitle>历史会话</DialogTitle>
            </DialogHeader>
            <div className="flex flex-wrap items-center justify-between gap-2">
              <div className="text-xs text-muted-foreground">最多保留 20 个会话</div>
              <div className="flex flex-wrap items-center gap-2">
                <Button variant="outline" onClick={resetCurrentSession} disabled={loading}>
                  清空当前
                </Button>
                <Button variant="outline" onClick={startNewSession} disabled={loading}>
                  <Plus className="mr-2 h-4 w-4" />
                  新建会话
                </Button>
                <Button variant="destructive" onClick={clearHistory} disabled={loading}>
                  清空历史
                </Button>
              </div>
            </div>
            <div className="mt-3 space-y-2">
              {sessions.map((s) => {
                const active = s.id === activeSessionId;
                const time = new Date(s.updatedAt || s.createdAt).toLocaleString();
                return (
                  <div key={s.id} className={`flex items-center gap-2 rounded border px-3 py-2 ${active ? "border-[#111827]" : "border-border"}`}>
                    <button
                      type="button"
                      className="min-w-0 flex-1 text-left"
                      onClick={() => {
                        switchSession(s.id);
                        setHistoryDialogOpen(false);
                      }}
                      disabled={loading}
                      title={active ? "当前会话" : "切换到该会话"}
                    >
                      <div className="flex items-center justify-between gap-2">
                        <div className="truncate font-medium">{s.title || "未命名"}</div>
                        <div className="shrink-0 text-xs text-muted-foreground">{time}</div>
                      </div>
                      <div className="mt-1 text-xs text-muted-foreground">
                        消息 {s.messages.length} · 日志 {s.toolLogs.length}
                      </div>
                    </button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => deleteSession(s.id)}
                      disabled={loading || active}
                      title={active ? "不能删除当前会话" : "删除会话"}
                    >
                      删除
                    </Button>
                  </div>
                );
              })}
            </div>
          </DialogContent>
        </Dialog>

        {/* 账户/模型 */}
        <Dialog open={accountDialogOpen} onOpenChange={setAccountDialogOpen}>
          <DialogContent showCloseButton={false} className="max-w-[720px]">
            <DialogHeader>
              <DialogTitle>账户 / 模型</DialogTitle>
            </DialogHeader>
            <div className="space-y-3 text-sm">
              <div className="flex flex-wrap items-center gap-2">
                <label className="text-xs text-muted-foreground">推理来源</label>
                <select
                  className="h-9 rounded border bg-white px-2 text-sm"
                  value={aiProvider}
                  onChange={(e) => setAiProvider(e.target.value === "local" ? "local" : "online")}
                  disabled={loading}
                >
                  <option value="online">在线</option>
                  <option value="local">本地</option>
                </select>
                <label className="ml-2 text-xs text-muted-foreground">模型（可选）</label>
                <input
                  className="h-9 w-[260px] rounded border px-2 text-sm"
                  value={aiModel}
                  onChange={(e) => setAiModel(e.target.value)}
                  placeholder="例如 gemini-2.5-pro"
                  disabled={loading}
                />
              </div>
              <div className="text-xs text-muted-foreground">
                说明：在线/本地的 BaseURL 与 Key 仍由配置文件/环境变量控制；这里仅做 provider 与 model 覆盖。
              </div>
            </div>
          </DialogContent>
        </Dialog>

        {/* 设置 */}
        <Dialog open={settingsDialogOpen} onOpenChange={setSettingsDialogOpen}>
          <DialogContent showCloseButton={false} className="max-w-[720px]">
            <DialogHeader>
              <DialogTitle>设置</DialogTitle>
            </DialogHeader>
            <div className="space-y-3 text-sm">
              <div className="flex flex-wrap items-center gap-3">
                <button
                  type="button"
                  className={`inline-flex items-center gap-1 rounded border px-2 py-1 ${networkOn ? "bg-white" : "bg-muted"}`}
                  onClick={() => setNetworkOn((v) => !v)}
                  disabled={loading}
                  title="联网检索"
                >
                  <Network className="h-3.5 w-3.5" />
                  {networkOn ? "联网" : "离线"}
                </button>

                <label className="flex items-center gap-2">
                  步数
                  <input
                    className="w-[92px] rounded border px-2 py-1 text-sm"
                    type="number"
                    min={1}
                    max={24}
                    step={1}
                    value={maxSteps}
                    onChange={(e) => {
                      const v = Number(e.target.value);
                      if (!Number.isFinite(v)) return;
                      setMaxSteps(clamp(Math.floor(v), 1, 24));
                    }}
                    disabled={loading}
                  />
                </label>
              </div>
              <div className="text-xs text-muted-foreground">说明：步数越大越“能做事”，但会更慢且更消耗推理额度。</div>
            </div>
          </DialogContent>
        </Dialog>
      </SheetContent>
    </Sheet>
  );
}