"use client";

import React, { useEffect, useMemo, useRef, useState } from "react";
import { Network, Paperclip, Settings2, Send, X } from "lucide-react";

type AgentAssetItem = {
  kind: "media" | "local-mindmap" | "test-pdf";
  id: string;
  title: string;
  fileUrl: string;
  mimeType?: string | null;
  assetType?: string | null;
  fileName?: string | null;
};

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

type ToolName =
  | "mindmap_get"
  | "mindmap_get_subtree"
  | "search_web"
  | "mindmap_apply_ops"
  | "pdf_replace_mindmap";

const TOOL_LABEL: Record<ToolName, string> = {
  mindmap_get: "读导图（摘要）",
  mindmap_get_subtree: "读子树（按 uid）",
  search_web: "联网检索（SearxNG）",
  mindmap_apply_ops: "写入导图（ops）",
  pdf_replace_mindmap: "PDF→导图（替换当前）",
};

const DEFAULT_TOOLS: ToolName[] = [
  "mindmap_get",
  "mindmap_get_subtree",
  "search_web",
  "mindmap_apply_ops",
  "pdf_replace_mindmap",
];

const ONLINE_MODELS = [
  "",
  "gemini-2.5-flash",
  "gemini-2.5-pro",
  "gemini-3-pro-preview",
  "gemini-3-flash-preview",
] as const;

export function MindmapAiAgentPanel({
  documentId,
  mindmapId,
  mindmap,
  activeNodes,
}: {
  documentId: string;
  mindmapId: string;
  mindmap: any;
  activeNodes: any[];
}) {
  const [messages, setMessages] = useState<AgentMessage[]>([
    {
      role: "assistant",
      content:
        "你好，我是思维导图 AI Agent。你可以：\n- 直接说需求（例如：补完选中节点、总结 @PDF 并写入导图、从 @PDF 生成章/节结构导图）\n- 使用 @ 选择文件或上传文件\n- 让 AI 自动选择工具，或手动勾选允许使用的工具",
    },
  ]);
  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 [aiProvider, setAiProvider] = useState<"online" | "local">("online");
  const [aiModel, setAiModel] = useState<string>("");

  const [assets, setAssets] = useState<AgentAssetItem[]>([]);
  const [workspaceId, setWorkspaceId] = useState<string>("");
  const [attachments, setAttachments] = useState<AgentAssetItem[]>([]);
  const [debug, setDebug] = useState<string>("");

  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
  const fileInputRef = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    try {
      const p = (window.localStorage.getItem("mindmap_ai_provider") || "").trim();
      const m = window.localStorage.getItem("mindmap_ai_model") || "";
      if (p === "local" || p === "online") setAiProvider(p);
      if (typeof m === "string") setAiModel(m);
    } catch {
      // ignore
    }
  }, []);

  useEffect(() => {
    try {
      window.localStorage.setItem("mindmap_ai_provider", aiProvider);
      window.localStorage.setItem("mindmap_ai_model", aiModel);
    } catch {
      // ignore
    }
  }, [aiProvider, aiModel]);

  // @ 选择
  const [mentionOpen, setMentionOpen] = useState(false);
  const [mentionQuery, setMentionQuery] = useState("");
  const [mentionRange, setMentionRange] = useState<{ start: number; end: number } | null>(null);

  const persistMindmapData = (data: unknown): boolean => {
    try {
      const w = window as unknown as {
        __mindmapPersistById?: Record<string, (data: unknown) => void>;
      };
      const fn = w.__mindmapPersistById?.[mindmapId];
      if (typeof fn === "function") {
        fn(data);
        return true;
      }
    } catch {
      // ignore
    }
    return false;
  };

  const selectedUids = useMemo(() => {
    const list = Array.isArray(activeNodes) ? activeNodes : [];
    return list
      .slice(0, 3)
      .map((n) => String(n?.nodeData?.data?.uid ?? n?.nodeData?.uid ?? n?.getData?.("uid") ?? n?.uid ?? ""))
      .filter(Boolean);
  }, [activeNodes]);

  useEffect(() => {
    let cancelled = false;
    if (!documentId) return;
    void (async () => {
      try {
        const res = await fetch(`/api/mindmap-ai/assets?documentId=${encodeURIComponent(documentId)}`);
        const json = (await res.json().catch(() => null)) as any;
        if (!res.ok) return;
        if (cancelled) return;
        setWorkspaceId(String(json?.workspaceId ?? ""));
        setAssets(Array.isArray(json?.items) ? (json.items as AgentAssetItem[]) : []);
      } catch {
        // ignore
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [documentId]);

  const filteredAssets = useMemo(() => {
    const q = mentionQuery.trim().toLowerCase();
    const base = assets.slice(0, 200);
    if (!q) return base.slice(0, 12);
    return base
      .filter((a) => {
        const hay = `${a.title} ${a.fileName ?? ""}`.toLowerCase();
        return hay.includes(q);
      })
      .slice(0, 12);
  }, [assets, mentionQuery]);

  const updateMentionState = (value: string, cursor: number) => {
    const before = value.slice(0, Math.max(0, cursor));
    const at = before.lastIndexOf("@");
    if (at === -1) {
      setMentionOpen(false);
      setMentionQuery("");
      setMentionRange(null);
      return;
    }
    // 若 @ 前是非空白字符，视为 email/路径等，避免误触发
    if (at > 0 && /\S/.test(before[at - 1] || "")) {
      setMentionOpen(false);
      setMentionQuery("");
      setMentionRange(null);
      return;
    }
    const token = before.slice(at + 1);
    // 遇到换行/空格则不触发
    if (/\s/.test(token)) {
      setMentionOpen(false);
      setMentionQuery("");
      setMentionRange(null);
      return;
    }
    setMentionOpen(true);
    setMentionQuery(token);
    setMentionRange({ start: at, end: cursor });
  };

  const insertMention = (item: AgentAssetItem) => {
    const el = textareaRef.current;
    if (!el || !mentionRange) return;
    const next = `${input.slice(0, mentionRange.start)}@${item.title}${input.slice(mentionRange.end)}`;
    setInput(next);
    setMentionOpen(false);
    setMentionQuery("");
    setMentionRange(null);
    // 去重加入附件
    setAttachments((prev) => (prev.some((x) => x.id === item.id) ? prev : [...prev, item]));
    // 光标移动到插入后
    window.setTimeout(() => {
      try {
        const pos = mentionRange.start + 1 + item.title.length;
        el.focus();
        el.setSelectionRange(pos, pos);
      } catch {
        // ignore
      }
    }, 0);
  };

  const toggleTool = (tool: ToolName) => {
    setSelectedTools((prev) => {
      if (prev.includes(tool)) return prev.filter((t) => t !== tool);
      return [...prev, tool];
    });
  };

  const uploadFiles = async (files: FileList | null) => {
    if (!files || files.length === 0) return;
    if (!workspaceId || !documentId) {
      window.alert("缺少 workspaceId/documentId，无法上传。请刷新后重试。");
      return;
    }
    const file = files[0];
    const form = new FormData();
    form.append("file", file);
    form.append("workspaceId", workspaceId);
    form.append("documentId", documentId);

    setLoading(true);
    try {
      const res = await fetch("/api/media/upload", { method: "POST", body: form });
      const json = (await res.json().catch(() => null)) as any;
      if (!res.ok) throw new Error(String(json?.error ?? `上传失败：${res.status}`));
      const asset = json?.asset;
      const item: AgentAssetItem = {
        kind: "media",
        id: String(asset?.id ?? `media:${Date.now()}`),
        title: String(asset?.file_name ?? file.name),
        fileUrl: String(asset?.file_url ?? ""),
        mimeType: String(asset?.mime_type ?? file.type ?? ""),
        assetType: String(asset?.asset_type ?? "file"),
        fileName: String(asset?.file_name ?? file.name),
      };
      setAttachments((prev) => (prev.some((x) => x.id === item.id) ? prev : [...prev, item]));
      // 刷新资产列表
      try {
        const listRes = await fetch(`/api/mindmap-ai/assets?documentId=${encodeURIComponent(documentId)}`);
        const listJson = (await listRes.json().catch(() => null)) as any;
        if (listRes.ok && Array.isArray(listJson?.items)) {
          setAssets(listJson.items as AgentAssetItem[]);
          setWorkspaceId(String(listJson?.workspaceId ?? workspaceId));
        }
      } catch {
        // ignore
      }
    } catch (e) {
      window.alert(e instanceof Error ? e.message : String(e));
    } finally {
      setLoading(false);
      if (fileInputRef.current) fileInputRef.current.value = "";
    }
  };

  const send = async () => {
    const content = input.trim();
    if (!content) return;
    setDebug("");

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

    try {
      const res = await fetch("/api/mindmap-ai/agent", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          documentId,
          mindmapId,
          selectedUids,
          messages: nextMessages,
          attachments: attachments.map((a) => ({
            id: a.id,
            title: a.title,
            fileUrl: a.fileUrl,
            mimeType: a.mimeType ?? null,
          })),
          toolChoice: toolAuto ? { mode: "auto" } : { mode: "manual", tools: selectedTools },
          options: { searxng: networkOn, ai: { provider: aiProvider, model: aiModel.trim() || undefined } },
        }),
      });
      const json = (await res.json().catch(() => null)) as any;
      if (!res.ok) throw new Error(String(json?.error ?? `请求失败：${res.status}`));

      const assistantText = String(json?.message ?? "");
      setMessages((prev) => [...prev, { role: "assistant", content: assistantText || "（无输出）" }]);

      if (json?.data) {
        mindmap?.setData?.(json.data);
        mindmap?.command?.clearHistory?.();
        persistMindmapData(json.data);
      }

      if (json?.trace) {
        setDebug(JSON.stringify(json.trace, null, 2));
      }
    } catch (e) {
      const msg = e instanceof Error ? e.message : String(e);
      setMessages((prev) => [...prev, { role: "assistant", content: `执行失败：${msg}` }]);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex h-full flex-col">
      <div className="flex items-center justify-between gap-2 pb-3">
        <div className="text-xs text-gray-500">
          {selectedUids.length ? `选中节点：${selectedUids[0]}` : "未选中节点（将以整图为上下文）"}
        </div>
        <div className="flex items-center gap-1">
          <button
            type="button"
            className={`inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs ${networkOn ? "border-blue-200 bg-blue-50 text-blue-700" : "border-gray-200 text-gray-500"}`}
            title="联网检索（SearxNG）"
            onClick={() => setNetworkOn((v) => !v)}
          >
            <Network className="h-3 w-3" />
            联网
          </button>
          <button
            type="button"
            className={`inline-flex items-center gap-1 rounded-md border px-2 py-1 text-xs ${toolPickerOpen ? "border-gray-300 bg-gray-50 text-gray-700" : "border-gray-200 text-gray-600"}`}
            title="选择允许使用的工具"
            onClick={() => setToolPickerOpen((v) => !v)}
          >
            <Settings2 className="h-3 w-3" />
            工具
          </button>
        </div>
      </div>

      {toolPickerOpen && (
        <div className="mb-3 rounded-md border border-gray-200 bg-white p-2">
          <div className="mb-2 flex items-center justify-between">
            <div className="text-xs font-medium text-gray-700">工具选择</div>
            <button
              type="button"
              className={`rounded px-2 py-1 text-xs ${toolAuto ? "bg-blue-500 text-white" : "border border-gray-200 text-gray-600"}`}
              onClick={() => setToolAuto((v) => !v)}
              title="自动：AI 自行选择；手动：仅允许勾选工具"
            >
              {toolAuto ? "自动" : "手动"}
            </button>
          </div>
          <div className="space-y-1">
            {DEFAULT_TOOLS.map((t) => (
              <label key={t} className={`flex cursor-pointer items-center gap-2 text-xs ${toolAuto ? "opacity-50" : ""}`}>
                <input
                  type="checkbox"
                  disabled={toolAuto}
                  checked={selectedTools.includes(t)}
                  onChange={() => toggleTool(t)}
                />
                <span className="text-gray-700">{TOOL_LABEL[t]}</span>
              </label>
            ))}
          </div>
          <div className="mt-2 text-[11px] text-gray-400">
            提示：如果你希望 AI 一定要“写入导图”，请在需求中明确说“请写入并保存”。
          </div>
        </div>
      )}

      <div className="flex-1 overflow-y-auto rounded-md border border-gray-200 bg-white p-2">
        <div className="space-y-2">
          {messages.map((m, idx) => (
            <div
              key={idx}
              className={`whitespace-pre-wrap rounded-md px-2 py-2 text-sm ${m.role === "user" ? "bg-gray-50 text-gray-900" : "bg-white text-gray-800"}`}
            >
              <div className="mb-1 text-[11px] text-gray-400">{m.role === "user" ? "你" : "AI"}</div>
              <div>{m.content}</div>
            </div>
          ))}
        </div>
      </div>

      {attachments.length > 0 && (
        <div className="mt-2 flex flex-wrap gap-1">
          {attachments.map((a) => (
            <span
              key={a.id}
              className="inline-flex items-center gap-1 rounded-full border border-gray-200 bg-gray-50 px-2 py-1 text-[11px] text-gray-700"
              title={a.fileUrl}
            >
              @{a.title}
              <button
                type="button"
                className="text-gray-400 hover:text-gray-700"
                onClick={() => setAttachments((prev) => prev.filter((x) => x.id !== a.id))}
              >
                <X className="h-3 w-3" />
              </button>
            </span>
          ))}
        </div>
      )}

      <div className="mt-2 rounded-md border border-gray-200 bg-white px-2 py-2 text-xs text-gray-700">
        <div className="flex flex-wrap items-center gap-3">
          <div className="text-gray-500">AI：</div>
          <label className="inline-flex cursor-pointer items-center gap-1">
            <input
              type="radio"
              name="mindmap-ai-provider"
              data-testid="mindmap-ai-provider-online"
              checked={aiProvider === "online"}
              onChange={() => setAiProvider("online")}
            />
            在线
          </label>
          <label className="inline-flex cursor-pointer items-center gap-1">
            <input
              type="radio"
              name="mindmap-ai-provider"
              data-testid="mindmap-ai-provider-local"
              checked={aiProvider === "local"}
              onChange={() => setAiProvider("local")}
            />
            本地
          </label>
          <div className="flex items-center gap-2">
            <div className="text-gray-500">模型：</div>
            {aiProvider === "online" ? (
              <select
                data-testid="mindmap-ai-model-select"
                className="rounded border border-gray-200 bg-white px-2 py-1 text-xs outline-none focus:border-blue-300"
                value={aiModel}
                onChange={(e) => setAiModel(e.target.value)}
              >
                {ONLINE_MODELS.map((m) => (
                  <option key={m || "__default__"} value={m}>
                    {m ? m : "默认（ai.md）"}
                  </option>
                ))}
              </select>
            ) : (
              <input
                data-testid="mindmap-ai-model-input"
                className="w-[220px] rounded border border-gray-200 bg-white px-2 py-1 text-xs outline-none focus:border-blue-300"
                value={aiModel}
                onChange={(e) => setAiModel(e.target.value)}
                placeholder="默认（ai.local.md/环境变量）"
              />
            )}
          </div>
        </div>
        {aiProvider === "local" ? (
          <div className="mt-1 text-[11px] text-gray-400">
            本地 AI 需配置 `LOCAL_AI_BASE_URL`/`LOCAL_AI_MODEL` 或 `ai.local.md` / `ai-local.md`
          </div>
        ) : null}
      </div>

      <div className="relative mt-2">
        {mentionOpen && filteredAssets.length > 0 && (
          <div className="absolute bottom-[calc(100%+8px)] left-0 right-0 z-30 max-h-56 overflow-auto rounded-md border border-gray-200 bg-white shadow">
            {filteredAssets.map((a) => (
              <button
                key={a.id}
                type="button"
                className="flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50"
                onClick={() => insertMention(a)}
              >
                <span className="truncate text-gray-800">{a.title}</span>
                <span className="shrink-0 text-[11px] text-gray-400">{a.kind}</span>
              </button>
            ))}
          </div>
        )}

        <textarea
          ref={textareaRef}
          data-testid="mindmap-ai-input"
          className="w-full resize-none rounded-md border border-gray-200 bg-white p-2 text-sm outline-none focus:border-blue-300"
          rows={4}
          value={input}
          placeholder="输入你的需求。使用 @ 选择文件（PDF/附件/本地导图），例如：总结 @卤化反应原理_1-9.pdf 并写入导图（章->节->要点）。"
          onChange={(e) => {
            const v = e.target.value;
            setInput(v);
            updateMentionState(v, e.target.selectionStart ?? v.length);
          }}
          onKeyDown={(e) => {
            // 焦点在 AI 输入框时，不应触发导图 Enter/Tab 快捷键
            e.stopPropagation();
            if (e.key === "Escape") {
              setMentionOpen(false);
              setToolPickerOpen(false);
              return;
            }
            if (e.key === "Enter") {
              // Enter 发送；Shift+Enter 换行
              if (!e.shiftKey && !e.isComposing) {
                e.preventDefault();
                if (!loading) void send();
              }
              return;
            }
          }}
          onClick={(e) => {
            const el = e.currentTarget;
            updateMentionState(el.value, el.selectionStart ?? el.value.length);
          }}
        />

        <div className="mt-2 flex items-center justify-between gap-2">
          <div className="flex items-center gap-2">
            <button
              type="button"
              className="inline-flex items-center gap-1 rounded-md border border-gray-200 px-2 py-1 text-xs text-gray-600 hover:bg-gray-50"
              onClick={() => fileInputRef.current?.click()}
              title="上传文件到当前页面附件"
              disabled={loading}
            >
              <Paperclip className="h-3 w-3" />
              上传
            </button>
            <input
              ref={fileInputRef}
              type="file"
              className="hidden"
              onChange={(e) => {
                void uploadFiles(e.target.files);
              }}
              accept="*/*"
            />
            <div className="text-[11px] text-gray-400">Enter 发送 · Shift+Enter 换行</div>
          </div>

          <button
            type="button"
            className="inline-flex items-center gap-2 rounded-md bg-blue-600 px-3 py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-50"
            disabled={loading || !input.trim()}
            onClick={() => void send()}
          >
            <Send className="h-4 w-4" />
            {loading ? "执行中..." : "发送"}
          </button>
        </div>
      </div>

      {debug ? (
        <details className="mt-2 rounded-md border border-gray-200 bg-white p-2 text-xs text-gray-600">
          <summary className="cursor-pointer select-none">调试信息（tool trace）</summary>
          <pre className="mt-2 max-h-56 overflow-auto whitespace-pre-wrap">{debug}</pre>
        </details>
      ) : null}
    </div>
  );
}