import { useEffect, useRef, useState } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';
import {
  ArrowLeft,
  Bot,
  Copy,
  Download,
  ImagePlus,
  Paperclip,
  Pencil,
  Save,
  Sparkles,
  Wrench,
  Flower2,
  CheckCircle2,
  X,
  ChevronDown,
  Edit,
} from 'lucide-react';
import AgentConversationList, { type ConversationMessage } from './AgentConversationList';
import ChatInputComposer from './ChatInputComposer';
import { Input, Select, Tabs, Textarea, Dialog, MessagePlugin } from 'tdesign-react';
import { useTheme } from '../../contexts/ThemeContext';
import { useExpertAuthBootstrap } from '../../hooks';
import { knowledgetoolUrl } from '@/hooks/useExpertAuthBootstrap';

interface AgentExpertEditPageProps {
  agentId?: string | null;
}

export default function AgentExpertEditPage({ agentId: propAgentId }: AgentExpertEditPageProps) {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  const { llmList, authedFetch } = useExpertAuthBootstrap();
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const agentId = propAgentId || searchParams.get('id') || '12';
  const [tab, setTab] = useState('edit');
  const [toolDialogVisible, setToolDialogVisible] = useState(false);
  const [skillDialogVisible, setSkillDialogVisible] = useState(false);
  const [selectedTools, setSelectedTools] = useState<string[]>([]);
  const [pendingTools, setPendingTools] = useState<string[]>([]);
  const [boundToolIdMap, setBoundToolIdMap] = useState<Record<string, string>>({});
  const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
  const [skillKeyword, setSkillKeyword] = useState('');
  const [skillOptions, setSkillOptions] = useState<{ id: string; name: string; desc: string }[]>([]);
  const [boundSkillMap, setBoundSkillMap] = useState<Record<string, { name: string; desc: string }>>({});
  const [isSkillLoading, setIsSkillLoading] = useState(false);
  const [bindingSkillIds, setBindingSkillIds] = useState<string[]>([]);
  const [unbindingSkillIds, setUnbindingSkillIds] = useState<string[]>([]);
  const [isToolSubmitting, setIsToolSubmitting] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [toolOptions, setToolOptions] = useState<{ id: string; name: string; desc: string }[]>([]);
  const [messages, setMessages] = useState<ConversationMessage[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [threadId, setThreadId] = useState<number | null>(null);
  const [isStreaming, setIsStreaming] = useState(false);
  const thinkingStartRef = useRef<number>(0);
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
  const [showScrollButton, setShowScrollButton] = useState(false);
  const router = useNavigate();

  const scrollToBottom = (smooth = true) => {
    if (scrollContainerRef.current) {
      scrollContainerRef.current.scrollTo({
        top: scrollContainerRef.current.scrollHeight,
        behavior: smooth ? 'smooth' : 'auto',
      });
    }
  };

  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
    const container = e.currentTarget;
    const isAtBottom = container.scrollHeight - container.scrollTop - container.clientHeight < 50;
    setShowScrollButton(!isAtBottom && messages.length > 0);
    if (!isAtBottom) {
      setAutoScrollEnabled(false);
    }
  };

  useEffect(() => {
    if (autoScrollEnabled && messages.length > 0) {
      const timer = setTimeout(() => scrollToBottom(false), 100);
      return () => clearTimeout(timer);
    }
  }, [messages, autoScrollEnabled]);

  const ensureThreadId = async () => {
    if (threadId) return threadId;

    const threadRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/no_real/${agentId}`, {
      method: 'GET',
    });
    if (!threadRes.ok) {
      throw new Error(`获取会话失败: ${threadRes.status}`);
    }

    const threadData = (await threadRes.json()) as { id: number };
    setThreadId(threadData.id);
    return threadData.id;
  };

  const sendMessage = async () => {
    const text = inputValue.trim();
    if (!text || isStreaming) return;
    setInputValue('');
    setIsStreaming(true);

    const userMsg: ConversationMessage = {
      id: `user-${Date.now()}`,
      role: 'user',
      content: text,
    };
    setMessages((prev) => [...prev, userMsg]);

    try {
      // 1. GET or reuse thread
      let tid = threadId;
      if (!tid) {
        const threadRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/no_real/${agentId}`, {
          method: 'GET',
        });
        if (!threadRes.ok) {
          console.error('创建会话失败:', threadRes.status);
          return;
        }
        const threadData = (await threadRes.json()) as { id: number };
        tid = threadData.id;
        setThreadId(tid);
      }

      // 2. POST user message
      const msgRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/messages`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ thread_id: tid, role: 'user', content: { type: 'text', text } }),
      });
      if (!msgRes.ok) {
        console.error('发送消息失败:', msgRes.status);
        return;
      }

      // 3. Stream assistant response
      const assistantId = `assistant-${Date.now()}`;
      setMessages((prev) => [
        ...prev,
        { id: assistantId, role: 'assistant', content: '', steps: [], thinkings: [], toolCalls: [] },
      ]);

      const streamRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/run/stream/help_expert`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ chat_id: tid, expert_agent_id: Number(agentId), user_query: text, messages: [] }),
      });
      if (!streamRes.ok || !streamRes.body) {
        console.error('流式接口失败:', streamRes.status);
        return;
      }

      const reader = streamRes.body.getReader();
      const decoder = new TextDecoder();
      let buffer = '';

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        buffer += decoder.decode(value, { stream: true });
        const lines = buffer.split('\n');
        buffer = lines.pop() ?? '';

        for (const line of lines) {
          if (!line.startsWith('data: ')) continue;
          const raw = line.slice(6).trim();
          if (raw === '[DONE]') break;

          let event: { type: string; data?: { id: string; title: string; status: string; items?: string[] }; id?: string; delta?: string } | null = null;
          try { event = JSON.parse(raw) as typeof event; } catch { continue; }
          if (!event) continue;

          setMessages((prev) =>
            prev.map((msg) => {
              if (msg.id !== assistantId) return msg;
              switch (event!.type) {
                case 'data-thinking-step': {
                  const step = event!.data!;
                  const newStep = {
                    text: step.title,
                    subText: step.items?.[0]?.replace('正在处理: ', '') ?? undefined,
                    status: (step.status === 'completed' ? 'done' : 'processing') as 'done' | 'processing',
                  };
                  const steps = [...(msg.steps ?? [])];
                  const idx = steps.findIndex((s) => s.text === step.title);
                  if (idx >= 0) steps[idx] = newStep; else steps.push(newStep);
                  return { ...msg, steps };
                }
                case 'reasoning-start': {
                  thinkingStartRef.current = Date.now();
                  return { ...msg, thinkings: [...(msg.thinkings ?? []), { duration: 0, content: '' }] };
                }
                case 'reasoning-delta': {
                  const thinkings = [...(msg.thinkings ?? [])];
                  if (thinkings.length === 0) {
                    thinkings.push({ duration: 0, content: event!.delta ?? '' });
                  } else {
                    const last = thinkings[thinkings.length - 1];
                    thinkings[thinkings.length - 1] = { ...last, content: last.content + (event!.delta ?? '') };
                  }
                  return { ...msg, thinkings };
                }
                case 'reasoning-end': {
                  const duration = (Date.now() - thinkingStartRef.current) / 1000;
                  const thinkings = [...(msg.thinkings ?? [])];
                  if (thinkings.length > 0) {
                    thinkings[thinkings.length - 1] = { ...thinkings[thinkings.length - 1], duration };
                  }
                  return { ...msg, thinkings };
                }
                case 'text-delta': {
                  return { ...msg, content: msg.content + (event!.delta ?? '') };
                }
                default:
                  return msg;
              }
            }),
          );
        }
      }
    } catch (error) {
      console.error('对话异常:', error);
    } finally {
      setIsStreaming(false);
    }
  };

  const handleUploadFile = async (file: File) => {
    try {
      const tid = await ensureThreadId();
      const formData = new FormData();
      formData.append('file', file);

      const response = await authedFetch(
        `${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${tid}/files/upload`,
        {
          method: 'POST',
          body: formData,
        },
      );

      if (!response.ok) {
        throw new Error(`上传失败: ${response.status} ${response.statusText}`);
      }
    } catch (error) {
      console.error('上传专家编辑文件失败:', error);
    }
  };


  const [formValues, setFormValues] = useState({
    name: '未命名专家',
    modelName: 'Qwen3.5-plus',
    description: '',
    systemPrompt: '你是一个专业的助手，能够回答用户的问题。',
  });

  const modelOptions = llmList.map((item) => ({ label: item.name, value: item.id }));

  useEffect(() => {
    const fetchExpertDetail = async () => {
      try {
        const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}`, {
          method: 'GET',
        });

        if (!res.ok) {
          console.error('查询专家详情失败:', res.status, res.statusText);
          return;
        }

        const data: unknown = await res.json();
        const detail = data as {
          name?: string;
          description?: string | null;
          system_prompt?: string | null;
          model_name?: string | null;
        };

        setFormValues((prev) => ({
          ...prev,
          name: detail.name || '',
          description: detail.description || '',
          systemPrompt: detail.system_prompt || '',
          modelName: detail.model_name || prev.modelName,
        }));
      } catch (error) {
        console.error('查询专家详情异常:', error);
      }
    };

    void fetchExpertDetail();
  }, [authedFetch, agentId]);

  useEffect(() => {
    const fetchBuiltinTools = async () => {
      try {
        const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/tools/builtin`, {
          method: 'GET',
        });

        if (!res.ok) {
          console.error('builtin tools接口调用失败:', res.status, res.statusText);
          setToolOptions([]);
          return;
        }

        const data: unknown = await res.json();
        const list = Array.isArray(data)
          ? (data as { name: string; description: string }[]).map((item) => ({
              id: item.name,
              name: item.name,
              desc: item.description,
            }))
          : [];

        setToolOptions(list);
      } catch (error) {
        console.error('builtin tools接口异常:', error);
        setToolOptions([]);
      }
    };

    void fetchBuiltinTools();
  }, [authedFetch]);

  useEffect(() => {
    const fetchSkills = async () => {
      setIsSkillLoading(true);
      try {
        const keyword = encodeURIComponent(skillKeyword.trim());
        const res = await authedFetch(`${knowledgetoolUrl}/api/v1/skills?type=all&keyword=${keyword}&page=1&page_size=100`, {
          method: 'GET',
        });

        if (!res.ok) {
          console.error('skills接口调用失败:', res.status, res.statusText);
          setSkillOptions([]);
          return;
        }

        const data: unknown = await res.json();
        const items =
          data && typeof data === 'object' && Array.isArray((data as { items?: unknown[] }).items)
            ? ((data as { items: Array<{ id: number; name: string; description: string }> }).items || [])
            : [];

        setSkillOptions(
          items.map((item) => ({
            id: String(item.id),
            name: item.name,
            desc: item.description,
          })),
        );
      } catch (error) {
        console.error('skills接口异常:', error);
        setSkillOptions([]);
      } finally {
        setIsSkillLoading(false);
      }
    };

    void fetchSkills();
  }, [authedFetch, skillKeyword]);

  useEffect(() => {
    const fetchBoundSkills = async () => {
      try {
        const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/skills`, {
          method: 'GET',
        });

        if (!res.ok) {
          console.error('查询已绑定技能失败:', res.status, res.statusText);
          return;
        }

        const data: unknown = await res.json();
        const list = Array.isArray(data)
          ? (data as Array<{ id: number; name: string; description: string }>).map((item) => ({
              id: String(item.id),
              name: item.name,
              desc: item.description,
            }))
          : [];

        setSelectedSkills(list.map((item) => item.id));
        setBoundSkillMap(
          list.reduce<Record<string, { name: string; desc: string }>>((acc, item) => {
            acc[item.id] = { name: item.name, desc: item.desc };
            return acc;
          }, {}),
        );
      } catch (error) {
        console.error('查询已绑定技能异常:', error);
      }
    };

    void fetchBoundSkills();
  }, [authedFetch, agentId]);

  useEffect(() => {
    const fetchBoundTools = async () => {
      try {
        const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/tools`, {
          method: 'GET',
        });

        if (!res.ok) {
          console.error('查询已绑定内置工具失败:', res.status, res.statusText);
          return;
        }

        const data: unknown = await res.json();
        const list = Array.isArray(data)
          ? (data as Array<{ id: number; name: string }>).map((item) => ({
              id: String(item.id),
              name: item.name,
            }))
          : [];

        setSelectedTools(list.map((item) => item.name));
        setBoundToolIdMap(
          list.reduce<Record<string, string>>((acc, item) => {
            acc[item.name] = item.id;
            return acc;
          }, {}),
        );
      } catch (error) {
        console.error('查询已绑定内置工具异常:', error);
      }
    };

    void fetchBoundTools();
  }, [authedFetch, agentId]);

  const refreshBoundTools = async () => {
    try {
      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/tools`, {
        method: 'GET',
      });

      if (!res.ok) {
        console.error('刷新已绑定内置工具失败:', res.status, res.statusText);
        return;
      }

      const data: unknown = await res.json();
      const list = Array.isArray(data)
        ? (data as Array<{ id: number; name: string }>).map((item) => ({ id: String(item.id), name: item.name }))
        : [];

      setSelectedTools(list.map((item) => item.name));
      setBoundToolIdMap(
        list.reduce<Record<string, string>>((acc, item) => {
          acc[item.name] = item.id;
          return acc;
        }, {}),
      );
    } catch (error) {
      console.error('刷新已绑定内置工具异常:', error);
    }
  };

  const unbindTool = async (toolName: string) => {
    const toolId = boundToolIdMap[toolName];
    if (!toolId) return;

    try {
      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/tools/${toolId}`, {
        method: 'DELETE',
      });

      if (!res.ok) {
        console.error('删除内置工具失败:', res.status, res.statusText);
        return;
      }

      await refreshBoundTools();
    } catch (error) {
      console.error('删除内置工具异常:', error);
    }
  };

  const bindSelectedTools = async () => {
    setIsToolSubmitting(true);
    try {
      const toAdd = pendingTools.filter((name) => !selectedTools.includes(name));
      for (const toolName of toAdd) {
        const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/tools`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ tool_name: toolName }),
        });

        if (!res.ok) {
          console.error('绑定内置工具失败:', res.status, res.statusText);
          return;
        }
      }

      await refreshBoundTools();
      setToolDialogVisible(false);
    } catch (error) {
      console.error('绑定内置工具异常:', error);
    } finally {
      setIsToolSubmitting(false);
    }
  };

  const bindSkill = async (skillId: string) => {
    if (bindingSkillIds.includes(skillId)) return;

    setBindingSkillIds((prev) => [...prev, skillId]);
    try {
      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/skills`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ skill_id: Number(skillId) }),
      });

      if (!res.ok) {
        console.error('绑定技能失败:', res.status, res.statusText);
        return;
      }

      const refreshRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/skills`, {
        method: 'GET',
      });

      if (!refreshRes.ok) {
        console.error('刷新已绑定技能失败:', refreshRes.status, refreshRes.statusText);
        return;
      }

      const refreshData: unknown = await refreshRes.json();
      const refreshList = Array.isArray(refreshData)
        ? (refreshData as Array<{ id: number; name: string; description: string }>).map((item) => ({
            id: String(item.id),
            name: item.name,
            desc: item.description,
          }))
        : [];

      setSelectedSkills(refreshList.map((item) => item.id));
      setBoundSkillMap(
        refreshList.reduce<Record<string, { name: string; desc: string }>>((acc, item) => {
          acc[item.id] = { name: item.name, desc: item.desc };
          return acc;
        }, {}),
      );
    } catch (error) {
      console.error('绑定技能异常:', error);
    } finally {
      setBindingSkillIds((prev) => prev.filter((id) => id !== skillId));
    }
  };

  const unbindSkill = async (skillId: string) => {
    if (unbindingSkillIds.includes(skillId)) return;

    setUnbindingSkillIds((prev) => [...prev, skillId]);
    try {
      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/skills/${skillId}`, {
        method: 'DELETE',
      });

      if (!res.ok) {
        console.error('解除绑定技能失败:', res.status, res.statusText);
        return;
      }

      const refreshRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}/skills`, {
        method: 'GET',
      });

      if (!refreshRes.ok) {
        console.error('刷新已绑定技能失败:', refreshRes.status, refreshRes.statusText);
        return;
      }

      const refreshData: unknown = await refreshRes.json();
      const refreshList = Array.isArray(refreshData)
        ? (refreshData as Array<{ id: number; name: string; description: string }>).map((item) => ({
            id: String(item.id),
            name: item.name,
            desc: item.description,
          }))
        : [];

      setSelectedSkills(refreshList.map((item) => item.id));
      setBoundSkillMap(
        refreshList.reduce<Record<string, { name: string; desc: string }>>((acc, item) => {
          acc[item.id] = { name: item.name, desc: item.desc };
          return acc;
        }, {}),
      );
    } catch (error) {
      console.error('解除绑定技能异常:', error);
    } finally {
      setUnbindingSkillIds((prev) => prev.filter((id) => id !== skillId));
    }
  };

  const saveExpert = async () => {
    setIsSaving(true);
    try {
      const res = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agents/${agentId}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: formValues.name,
          avatar_url: null,
          description: formValues.description,
          system_prompt: formValues.systemPrompt,
          model_name: formValues.modelName,
        }),
      });

      if (!res.ok) {
        console.error('保存专家失败:', res.status, res.statusText);
        return;
      }
      MessagePlugin.success('保存成功');
      console.log('保存专家成功');
    } catch (error) {
      console.error('保存专家异常:', error);
    } finally {
      setIsSaving(false);
    }
  };


  return (
    <>
      <style>{`
        @keyframes marquee {
          0% { background-position: 0% center; }
          100% { background-position: 200% center; }
        }
        .animate-marquee {
          background-size: 200% 100%;
          animation: marquee 2s linear infinite;
        }
        @keyframes text-marquee {
          0% { transform: translateX(100%); }
          100% { transform: translateX(-100%); }
        }
        .animate-text-marquee {
          display: inline-block;
          animation: text-marquee 3s linear infinite;
          white-space: nowrap;
        }
      `}</style>
      <div className={`h-[calc(100vh-120px)] rounded-2xl border overflow-hidden ${isDark ? 'border-slate-700 bg-slate-900/40' : 'border-gray-200 bg-white'}`}>
      <div className={`h-14 px-4 border-b flex items-center justify-between ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
        <div className="flex items-center gap-3">
          <button
            onClick={() => router('/agent-expert-center')}
            className={`p-1.5 rounded-md ${isDark ? 'hover:bg-slate-800 text-slate-300' : 'hover:bg-gray-100 text-gray-600'}`}
          >
            <ArrowLeft className="w-4 h-4" />
          </button>
          <div className="w-8 h-8 rounded-xl bg-gradient-to-br from-fuchsia-500 to-violet-600 text-white flex items-center justify-center">
            <Edit className="w-4 h-4" />
          </div>
          <div>
            <h2 className={`text-base font-semibold leading-5 ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>编辑专家</h2>
            <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>修改 未命名专家 的配置</p>
          </div>
        </div>

        <button
          onClick={() => {
            void saveExpert();
          }}
          disabled={isSaving}
          className="inline-flex items-center gap-1.5 h-9 px-3 rounded-lg bg-slate-900 text-white text-sm hover:bg-slate-800 disabled:opacity-60"
        >
          <Save className="w-4 h-4" /> 保存修改
        </button>
      </div>

      <div className="grid grid-cols-2 h-[calc(100%-56px)]">
        <section className={`border-r flex flex-col h-full min-h-0 relative ${isDark ? 'border-slate-700 bg-slate-900/20' : 'border-gray-200 bg-white'}`}>
          <div
            ref={scrollContainerRef}
            onScroll={handleScroll}
            className={`flex-1 ${ messages.length === 0 && 'flex items-center'} min-h-0 overflow-y-auto px-4 py-4`}
          >
            {messages.length === 0 ? (
               <div className="flex-1 flex items-center justify-center">
                <div className="text-center">
                  <div className="mx-auto w-16 h-16 rounded-2xl bg-gradient-to-br from-fuchsia-500 to-violet-600 text-white flex items-center justify-center shadow-lg shadow-violet-300/30">
                    <Bot className="w-7 h-7" />
                  </div>
                  <h3 className={`mt-6 text-3xl font-bold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>你好，我是 {formValues.name || '未命名专家'}</h3>
                  <p className={`mt-3 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>创建你的专属 AI 助手</p>

                  <div className={`mt-4 inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs ${isDark ? 'border-slate-700 bg-slate-800/60 text-slate-300' : 'border-gray-200 bg-white text-gray-500'}`}>
                    <Sparkles className="w-3.5 h-3.5 text-emerald-400" /> 想和你聊些什么呀
                  </div>

                  <div className={`mt-7 flex items-center gap-8 text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
                    <span>告诉我你的想法</span>
                    <span>给我一些建议</span>
                    <span>帮我分析问题</span>
                  </div>
                </div>
              </div>
            ) : (
              <>
                <AgentConversationList messages={messages} />
              </>
            )}
          </div>

          {showScrollButton && (
            <button
              onClick={() => {
                setAutoScrollEnabled(true);
                scrollToBottom(true);
              }}
              className={`absolute bottom-20 left-1/2 -translate-x-1/2 w-10 h-10 rounded-full flex items-center justify-center backdrop-blur-sm text-xs font-medium transition ${
                isDark
                  ? 'bg-slate-300/25 hover:bg-slate-300/35 text-slate-100 border border-slate-200/25'
                  : 'bg-gray-300/45 hover:bg-gray-300/60 text-gray-700 border border-gray-200/70'
              }`}
              aria-label="自动下滑"
              title="自动下滑"
            >
              <ChevronDown className="w-4 h-4" />
            </button>
          )}

          <ChatInputComposer
            value={inputValue}
            onChange={setInputValue}
            onSend={() => void sendMessage()}
            onUploadFile={(file) => void handleUploadFile(file)}
            isSending={isStreaming}
            isDarkMode={isDark}
            showBorderTop
            placeholder={isStreaming ? '正在思考中...' : '输入你的问题...'}
            trailingActions={
              <Paperclip className={`h-4 w-4 ${isDark ? 'text-slate-500' : 'text-[#8a94a6]'}`} />
            }
            className={isStreaming ? 'ring-1 ring-violet-300/40' : ''}
          />
        </section>

        <section className={`${isDark ? 'bg-slate-900/10' : 'bg-white'} flex flex-col h-full min-h-0`}>
          {/* <div className={`h-14 border-b px-4 flex items-center ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
            <Tabs value={tab} onChange={(v) => setTab(String(v))} size="medium" className="w-full">
              <Tabs.TabPanel value="preview" label="对话" />
              <Tabs.TabPanel value="config" label="配置" />
            </Tabs>
          </div> */}

          {tab === 'preview' ? (
            <>
              <div className="flex-1 flex items-center justify-center">
                <div className="text-center">
                  <div className="mx-auto w-16 h-16 rounded-2xl bg-gradient-to-br from-fuchsia-500 to-violet-600 text-white flex items-center justify-center shadow-lg shadow-violet-300/30">
                    <Bot className="w-7 h-7" />
                  </div>
                  <h3 className={`mt-6 text-3xl font-bold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>你好，我是 {formValues.name || '未命名专家'}</h3>
                  <p className={`mt-3 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>创建你的专属 AI 助手</p>

                  <div className={`mt-4 inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs ${isDark ? 'border-slate-700 bg-slate-800/60 text-slate-300' : 'border-gray-200 bg-white text-gray-500'}`}>
                    <Sparkles className="w-3.5 h-3.5 text-emerald-400" /> 想和你聊些什么呀
                  </div>

                  <div className={`mt-7 flex items-center gap-8 text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
                    <span>告诉我你的想法</span>
                    <span>给我一些建议</span>
                    <span>帮我分析问题</span>
                  </div>
                </div>
              </div>

              <ChatInputComposer
                value=""
                isDarkMode={isDark}
                placeholder="输入你的问题..."
                readOnly
                disabled
                showUpload={false}
                showBorderTop
                trailingActions={
                  <>
                    <ImagePlus className={`h-4 w-4 ${isDark ? 'text-slate-500' : 'text-[#8a94a6]'}`} />
                    <Paperclip className={`h-4 w-4 ${isDark ? 'text-slate-500' : 'text-[#8a94a6]'}`} />
                  </>
                }
              />
            </>
          ) : (
            <div className="flex-1 min-h-0 overflow-y-auto px-6 py-5 space-y-6">
              <div>
                <h3 className={`text-sm font-semibold mb-3 ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>基本信息</h3>
                <div className="grid grid-cols-[1fr_auto] gap-4 items-start">
                  <div>
                    <label className={`text-xs mb-1 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>专家名称 *</label>
                    <Input
                      value={formValues.name}
                      onChange={(value) => setFormValues((prev) => ({ ...prev, name: String(value) }))}
                    />
                  </div>
                  <div>
                    <label className={`text-xs mb-1 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>头像 URL</label>
                    <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-fuchsia-500 to-violet-600 text-white flex items-center justify-center mt-1">
                      <Bot className="w-4 h-4" />
                    </div>
                  </div>
                </div>

                <div className="mt-3">
                  <label className={`text-xs mb-1 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>LLM 模型</label>
                  <Select
                    value={formValues.modelName}
                    options={modelOptions}
                    placeholder="选择用于该专家的 LLM 模型"
                    onChange={(value) => setFormValues((prev) => ({ ...prev, modelName: String(value) }))}
                  />
                </div>

                <div className="mt-3">
                  <label className={`text-xs mb-1 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>描述</label>
                  <Textarea
                    autosize={{ minRows: 3, maxRows: 3 }}
                    placeholder="简单描述这个专家的能力和场景..."
                    value={formValues.description}
                    onChange={(value) => setFormValues((prev) => ({ ...prev, description: String(value) }))}
                  />
                </div>

                <div className="mt-3">
                  <label className={`text-xs mb-1 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>系统提示词</label>
                  <div className={`rounded-lg border ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
                    <div className={`h-8 border-b px-3 flex items-center justify-end gap-2 ${isDark ? 'border-slate-700' : 'border-gray-100'}`}>
                      <Copy className="w-3.5 h-3.5 text-gray-400" />
                      <Download className="w-3.5 h-3.5 text-gray-400" />
                    </div>
                    <div className="p-3">
                      <Textarea
                        autosize={{ minRows: 6, maxRows: 10 }}
                        value={formValues.systemPrompt}
                        onChange={(value) => setFormValues((prev) => ({ ...prev, systemPrompt: String(value) }))}
                        placeholder="请输入系统提示词"
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div>
                <h3 className={`text-sm font-semibold mb-3 ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>内置工具</h3>
                <div
                  role="button"
                  tabIndex={0}
                  onClick={() => {
                    setPendingTools(selectedTools);
                    setToolDialogVisible(true);
                  }}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                      setPendingTools(selectedTools);
                      setToolDialogVisible(true);
                    }
                  }}
                  className={`w-full min-h-[170px] rounded-xl border px-3 py-3 text-left cursor-pointer ${isDark ? 'border-slate-700 hover:border-slate-500' : 'border-gray-200 hover:border-gray-300'}`}
                >
                  <div className="flex flex-wrap gap-2">
                    {selectedTools.map((toolName) => (
                      <span
                        key={toolName}
                        className="inline-flex items-center gap-2 h-10 pl-2 pr-3 rounded-full border border-sky-200 bg-sky-50 text-[#0F2B6B] text-sm"
                        onClick={(e) => e.stopPropagation()}
                      >
                        <span className="w-5 h-5 rounded-full bg-sky-500 text-white flex items-center justify-center">
                          <Wrench className="w-3 h-3" />
                        </span>
                        <span className="text-sm leading-none">{toolName}</span>
                        <button
                          type="button"
                          className="text-slate-500 hover:text-slate-700"
                          onClick={(e) => {
                            e.stopPropagation();
                            void unbindTool(toolName);
                          }}
                        >
                          <X className="w-3.5 h-3.5" />
                        </button>
                      </span>
                    ))}
                  </div>

                  <div className="mt-4 h-[90px] flex items-end justify-between">
                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                      已选择 {selectedTools.length} 个工具
                    </span>
                    <Wrench className="w-5 h-5 text-[#2B78FF]" />
                  </div>
                </div>
              </div>

              <div>
                <h3 className={`text-sm font-semibold mb-1 ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>绑定的技能</h3>
                <p className={`text-xs mb-3 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>为专家添加技能，增强其专业能力</p>
                <div className={`min-h-[120px] rounded-lg border p-3 ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
                  <div className="flex flex-wrap gap-2">
                    {selectedSkills.map((skillId) => {
                      const skillName = boundSkillMap[skillId]?.name || skillOptions.find((item) => item.id === skillId)?.name || skillId;
                      return (
                        <span key={skillId} className="inline-flex items-center gap-2 h-8 px-3 rounded-full border border-emerald-200 bg-emerald-50 text-emerald-700 text-xs">
                          <span className="w-4 h-4 rounded-full bg-emerald-500 text-white flex items-center justify-center">✓</span>
                          {skillName}
                          <button
                            type="button"
                            className="text-emerald-600 hover:text-emerald-800"
                            onClick={() => {
                              void unbindSkill(skillId);
                            }}
                          >
                            <X className="w-3.5 h-3.5" />
                          </button>
                        </span>
                      );
                    })}
                  </div>
                  <div className="h-[70px] flex items-end justify-end text-emerald-500">
                    <button type="button" onClick={() => setSkillDialogVisible(true)}>
                      <Sparkles className="w-4 h-4" />
                    </button>
                  </div>
                </div>
              </div>

              <div className="flex justify-end pt-2">
                <button className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>取消</button>
              </div>
            </div>
          )}
        </section>
      </div>

      <Dialog
        visible={toolDialogVisible}
        onClose={() => {
          setPendingTools(selectedTools);
          setToolDialogVisible(false);
        }}
        header="添加工具"
        width={720}
        confirmBtn={null}
        cancelBtn={null}
      >
        <div className="-mt-1">
          <p className="text-xs text-gray-500 mb-4">选择要为专家启用的工具</p>

          <div className="grid grid-cols-2 gap-3">
            {toolOptions.map((tool) => {
              const checked = pendingTools.includes(tool.id);
              return (
                <button
                  key={tool.id}
                  type="button"
                  onClick={() => {
                    setPendingTools((prev) =>
                      prev.includes(tool.id) ? prev.filter((id) => id !== tool.id) : [...prev, tool.id],
                    );
                  }}
                  className={`rounded-lg border p-3 text-left transition ${checked ? 'border-sky-400 bg-sky-50' : 'border-gray-200 hover:border-gray-300'}`}
                >
                  <div className="flex items-start justify-between gap-2">
                    <div>
                      <div className="text-sm font-semibold text-gray-900">{tool.name}</div>
                      <div className="text-xs text-gray-500 mt-1 line-clamp-2">{tool.desc}</div>
                    </div>
                    <div className="mt-0.5">
                      {checked ? (
                        <CheckCircle2 className="w-4 h-4 text-sky-500" />
                      ) : (
                        <div className="w-4 h-4 rounded-full border border-gray-300" />
                      )}
                    </div>
                  </div>
                </button>
              );
            })}
          </div>

          <div className="mt-5 flex items-center justify-between border-t pt-3">
            <div className="text-xs text-gray-500">已选择 {pendingTools.length} 个工具</div>
            <button
              type="button"
              onClick={() => {
                void bindSelectedTools();
              }}
              disabled={isToolSubmitting}
              className="h-8 px-4 rounded-lg bg-sky-500 text-white text-sm hover:bg-sky-600 disabled:opacity-60"
            >
              确认添加
            </button>
          </div>
        </div>
      </Dialog>

      <Dialog
        visible={skillDialogVisible}
        onClose={() => setSkillDialogVisible(false)}
        header="绑定技能"
        width={560}
        confirmBtn={null}
        cancelBtn={null}
      >
        <div className="-mt-1">
          <div className="flex items-center gap-2 mb-3">
            <Input
              value={skillKeyword}
              onChange={(value) => setSkillKeyword(String(value))}
              placeholder="搜索技能"
              className="flex-1"
            />
            <button
              type="button"
              onClick={async () => {
                for (const item of skillOptions) {
                  if (!selectedSkills.includes(item.id)) {
                    await bindSkill(item.id);
                  }
                }
              }}
              className="h-9 px-4 rounded-lg bg-emerald-500 text-white text-sm hover:bg-emerald-600"
            >
              一键绑定全部
            </button>
          </div>

          <div className="rounded-lg border border-gray-200 overflow-hidden max-h-[260px] overflow-y-auto">
            {isSkillLoading ? (
              <div className="px-3 py-6 text-sm text-gray-500">加载技能中...</div>
            ) : skillOptions.length === 0 ? (
              <div className="px-3 py-6 text-sm text-gray-500">暂无技能</div>
            ) : (
              skillOptions.map((skill) => {
                const checked = selectedSkills.includes(skill.id);
                return (
                  <button
                    key={skill.id}
                    type="button"
                    onClick={async () => {
                      if (checked) {
                        await unbindSkill(skill.id);
                        return;
                      }
                      await bindSkill(skill.id);
                    }}
                    className={`w-full px-3 py-2.5 text-left border-b last:border-b-0 transition ${checked ? 'bg-emerald-50' : 'bg-white hover:bg-gray-50'}`}
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div>
                        <div className="text-sm font-semibold text-gray-900">{skill.name}</div>
                        <div className="text-xs text-gray-500 mt-1 line-clamp-2">{skill.desc}</div>
                      </div>
                      <div className="mt-0.5">
                        {bindingSkillIds.includes(skill.id) || unbindingSkillIds.includes(skill.id) ? (
                          <div className="w-4 h-4 rounded-full border-2 border-emerald-400 border-t-transparent animate-spin" />
                        ) : checked ? (
                          <CheckCircle2 className="w-4 h-4 text-emerald-500" />
                        ) : (
                          <div className="w-4 h-4 rounded-full border border-gray-300" />
                        )}
                      </div>
                    </div>
                  </button>
                );
              })
            )}
          </div>
        </div>
      </Dialog>
    </div>
    </>
  );
}