import { useEffect, useRef, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { AlertCircle, ArrowLeft, ChevronDown, ChevronRight, FileText, FolderOpen, Loader2, MessageSquareText, X, Zap } from 'lucide-react';
import './AgentChatPage.css';
import { useTheme } from '../../contexts/ThemeContext';
import { useExpertAuthBootstrap } from '../../hooks';
import MarkdownRenderer from '../MarkdownRenderer';
import AgentConversationList, { type ConversationMessage, type ConversationStep } from './AgentConversationList';
import ChatInputComposer from './ChatInputComposer';
import SkillCreatorThreadSidebar from './SkillCreatorThreadSidebar';
import { knowledgetoolUrl } from '@/hooks/useExpertAuthBootstrap';

interface FileNode {
  name: string;
  path: string;
  type: 'file' | 'directory';
  size: number | null;
  extension: string | null;
  children: FileNode[] | null;
}

interface Agent {
  id: string;
  name: string;
  description: string;
  status: string;
  icon?: string;
  capabilities?: string[];
}

interface HistoryMessageApiItem {
  created_at: string;
  id: number;
  role: 'user' | 'assistant';
  content: unknown;
  thread_id: number;
}

const defaultAgent: Agent = {
  id: '1',
  name: '测试1',
  description: '描述01',
  status: '随时准备为您服务',
  capabilities: ['告诉我的能力', '给我一些建议', '帮我分析问题'],
};

const MIN_CHAT_WIDTH = 360;
const MIN_FILE_SIDEBAR_WIDTH = 420;
const DEFAULT_FILE_SIDEBAR_WIDTH = 560;

const formatFileSize = (size: number | null) => {
  if (!size) return '';
  if (size < 1024) return `${size} B`;
  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
  return `${(size / 1024 / 1024).toFixed(1)} MB`;
};

const getFileLanguage = (extension: string | null) => {
  const normalized = extension?.replace('.', '').toLowerCase();
  if (!normalized) return 'TEXT';
  return normalized.toUpperCase();
};

const isRecord = (value: unknown): value is Record<string, unknown> => typeof value === 'object' && value !== null;

const normalizeHistoryContent = (content: unknown) => {
  const steps: ConversationStep[] = [];
  const thinkings: Array<{ duration: number; content: string }> = [];
  const texts: string[] = [];

  const visit = (value: unknown) => {
    if (typeof value === 'string') {
      if (value.trim()) texts.push(value);
      return;
    }

    if (Array.isArray(value)) {
      value.forEach(visit);
      return;
    }

    if (!isRecord(value)) return;

    const type = typeof value.type === 'string' ? value.type : '';
    const text = typeof value.text === 'string' ? value.text : '';

    if (type === 'thinking-steps' && Array.isArray(value.steps)) {
      value.steps.forEach((stepItem) => {
        if (!isRecord(stepItem)) return;
        const title = typeof stepItem.title === 'string' ? stepItem.title : '处理中';
        const status = stepItem.status === 'completed' ? 'done' : 'processing';
        const items = Array.isArray(stepItem.items) ? stepItem.items.filter((item): item is string => typeof item === 'string') : [];
        steps.push({
          text: title,
          subText: items[0]?.replace('正在处理: ', ''),
          status,
        });
      });
      return;
    }

    if (type === 'reasoning' && text) {
      const duration = typeof value.duration === 'number' ? value.duration / 1000 : 0;
      thinkings.push({ duration, content: text });
      return;
    }

    if (text) {
      texts.push(text);
      return;
    }

    if ('content' in value) {
      visit(value.content);
    }
  };

  visit(content);

  return {
    content: texts.join('\n\n').trim(),
    steps,
    thinkings,
  };
};

const toConversationMessage = (message: HistoryMessageApiItem): ConversationMessage => {
  const normalized = normalizeHistoryContent(message.content);

  return {
    id: String(message.id),
    role: message.role,
    content: normalized.content,
    steps: normalized.steps,
    thinkings: normalized.thinkings,
    toolCalls: [],
  };
};

interface FileTreeItemProps {
  node: FileNode;
  depth?: number;
  isDark: boolean;
  expandedPaths: Set<string>;
  selectedPath: string | null;
  onToggle: (path: string) => void;
  onSelect: (node: FileNode) => void;
}

function FileTreeItem({
  node,
  depth = 0,
  isDark,
  expandedPaths,
  selectedPath,
  onToggle,
  onSelect,
}: FileTreeItemProps) {
  const isFolder = node.extension === null;
  const isExpanded = expandedPaths.has(node.path);
  const isSelected = selectedPath === node.path;
  const hasChildren = Boolean(node.children?.length);

  return (
    <div>
      <button
        type="button"
        onClick={() => (isFolder ? onToggle(node.path) : onSelect(node))}
        className={`group flex w-full items-center gap-2 rounded-xl px-2.5 py-2 text-left text-sm transition-all duration-200 ${isSelected
            ? isDark
              ? 'bg-blue-500/20 text-blue-200 ring-1 ring-blue-400/40 shadow-sm'
              : 'bg-blue-50 text-blue-700 ring-1 ring-blue-200 shadow-sm'
            : isDark
              ? 'text-slate-300 hover:bg-slate-800 hover:text-slate-100'
              : 'text-gray-700 hover:bg-gray-100 hover:text-gray-950'
          }`}
        style={{ paddingLeft: `${10 + depth * 18}px` }}
        title={node.path}
      >
        <span className="flex w-4 shrink-0 justify-center">
          {isFolder && hasChildren ? (
            isExpanded ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />
          ) : null}
        </span>
        <span
          className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-lg ${isFolder
              ? isDark ? 'bg-amber-500/15 text-amber-300' : 'bg-amber-100 text-amber-600'
              : isDark ? 'bg-slate-700 text-slate-300' : 'bg-white text-gray-500 shadow-sm ring-1 ring-gray-200'
            }`}
        >
          {isFolder ? <FolderOpen className="h-4 w-4" /> : <FileText className="h-4 w-4" />}
        </span>
        <span className="min-w-0 flex-1 truncate font-medium">{node.name}</span>
        {!isFolder && node.size !== null && (
          <span className={`shrink-0 text-[11px] ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{formatFileSize(node.size)}</span>
        )}
      </button>
      {isFolder && isExpanded && hasChildren && (
        <div className="mt-1 space-y-1">
          {node.children!.map((child) => (
            <FileTreeItem
              key={child.path}
              node={child}
              depth={depth + 1}
              isDark={isDark}
              expandedPaths={expandedPaths}
              selectedPath={selectedPath}
              onToggle={onToggle}
              onSelect={onSelect}
            />
          ))}
        </div>
      )}
    </div>
  );
}

interface AgentChatPageProps {
  agent?: Agent;
}

export default function AgentChatPage({ agent: propAgent }: AgentChatPageProps) {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  const { authedFetch } = useExpertAuthBootstrap();
  const [searchParams] = useSearchParams();
  const agentId = searchParams.get('id');
  const threadStorageKey = `agent_chat_thread_id_${agentId ?? 'default'}`;

  const [agent, setAgent] = useState<Agent>(propAgent || defaultAgent);
  const [currentThreadId, setCurrentThreadId] = useState(() => localStorage.getItem(threadStorageKey) || '');
  const [inputValue, setInputValue] = useState('');
  const [messages, setMessages] = useState<ConversationMessage[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [isStreaming, setIsStreaming] = useState(false);
  const [isThreadSidebarOpen, setIsThreadSidebarOpen] = useState(false);
  const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
  const [showScrollButton, setShowScrollButton] = useState(false);
  const [fileList, setFileList] = useState<FileNode[]>([]);
  const [fileListThreadId, setFileListThreadId] = useState<number | null>(null);
  const [isFileSidebarOpen, setIsFileSidebarOpen] = useState(false);
  const [fileSidebarWidth, setFileSidebarWidth] = useState(DEFAULT_FILE_SIDEBAR_WIDTH);
  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => new Set());
  const [selectedFile, setSelectedFile] = useState<FileNode | null>(null);
  const [filePreviewContent, setFilePreviewContent] = useState('');
  const [isFilePreviewLoading, setIsFilePreviewLoading] = useState(false);
  const [filePreviewError, setFilePreviewError] = useState('');
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const thinkingStartRef = useRef<number>(0);
  const abortControllerRef = useRef<AbortController | null>(null);
  const navigate = useNavigate();

  useEffect(() => {
    setCurrentThreadId(localStorage.getItem(threadStorageKey) || '');
  }, [threadStorageKey]);

  useEffect(() => {
    const fetchAgentDetail = async () => {
      if (!agentId) return;

      setIsLoading(true);
      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 agentDetail = data as {
          id: number;
          name?: string;
          description?: string | null;
        };

        const agentName = agentDetail.name || '未命名专家';
        setAgent({
          id: String(agentDetail.id),
          name: agentName,
          description: agentDetail.description || '暂无描述',
          status: '随时准备为您服务',
          capabilities: ['告诉我的能力', '给我一些建议', '帮我分析问题'],
        });
      } catch (error) {
        console.error('初始化专家信息异常:', error);
      } finally {
        setIsLoading(false);
      }
    };

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

  useEffect(() => {
    if (!fileList.length) return;

    setExpandedPaths((prev) => {
      if (prev.size > 0) return prev;
      const firstLevelFolders = fileList.filter((node) => node.extension === null).map((node) => node.path);
      return new Set(firstLevelFolders);
    });
  }, [fileList]);

  const clearLoadingStates = () => {
    setMessages((prev) =>
      prev.map((msg) => {
        if (msg.role === 'assistant') {
          return {
            ...msg,
            steps: [],
            thinkings: [],
            toolCalls: [],
          };
        }
        return msg;
      }),
    );
  };

  const syncThreadId = (nextThreadId: string) => {
    setCurrentThreadId(nextThreadId);
    if (nextThreadId) {
      localStorage.setItem(threadStorageKey, nextThreadId);
    } else {
      localStorage.removeItem(threadStorageKey);
    }
  };

  const fetchThreadFiles = async (id: number) => {
    if (!id) {
      setFileList([]);
      setFileListThreadId(null);
      return;
    }

    try {
      const filesRes = await authedFetch(
        `${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${id}/files/all`,
        { method: 'GET' },
      );
      if (filesRes.ok) {
        const filesData: unknown = await filesRes.json();
        setFileList(Array.isArray(filesData) ? (filesData as FileNode[]) : []);
        setFileListThreadId(id);
      } else {
        setFileList([]);
        setFileListThreadId(null);
      }
    } catch (e) {
      console.error('获取文件列表失败:', e);
      setFileList([]);
      setFileListThreadId(null);
    }
  };

  const fetchThreadMessages = async (id: number) => {
    setIsLoading(true);
    try {
      const response = await authedFetch(
        `${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${id}/messages`,
        { method: 'GET' },
      );

      if (!response.ok) {
        throw new Error(`获取会话消息失败: ${response.status}`);
      }

      const data = (await response.json()) as HistoryMessageApiItem[];
      const nextMessages = Array.isArray(data) ? data.map(toConversationMessage) : [];
      setMessages(nextMessages);
    } catch (error) {
      console.error('获取聊天记录消息失败:', error);
      setMessages([]);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    const id = Number(currentThreadId);

    setSelectedFile(null);
    setFilePreviewContent('');
    setFilePreviewError('');
    setExpandedPaths(new Set());

    if (!id) {
      setMessages([]);
      setFileList([]);
      setFileListThreadId(null);
      return;
    }

    void fetchThreadMessages(id);
    void fetchThreadFiles(id);
  }, [currentThreadId]);

  const handleStopStream = () => {
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
      abortControllerRef.current = null;
      setIsStreaming(false);
      clearLoadingStates();
    }
  };

  const handleUploadFile = async (file: File) => {
    if (!currentThreadId) return;

    try {
      const formData = new FormData();
      formData.append('file', file);

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

      if (!response.ok) {
        throw new Error(`上传失败: ${response.status} ${response.statusText}`);
      }

      await fetchThreadFiles(Number(currentThreadId));
    } catch (error) {
      console.error('上传专家会话文件失败:', error);
    }
  };

  const handleSendMessage = async () => {
    const text = inputValue.trim();
    const numericThreadId = Number(currentThreadId);
    if (!text || !numericThreadId || isStreaming) return;
    const assistantId = `assistant-${Date.now()}`;

    setInputValue('');
    setIsStreaming(true);
    setAutoScrollEnabled(true);
    abortControllerRef.current = new AbortController();

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

      const msgRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/messages`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          thread_id: numericThreadId,
          role: 'user',
          content: { type: 'text', text },
        }),
      });

      if (!msgRes.ok) {
        console.error('发送消息失败:', msgRes.status, msgRes.statusText);
        setMessages((prev) => prev.filter((msg) => msg.id !== assistantId));
        return;
      }

      const streamRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/run/stream`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          chat_id: numericThreadId,
          expert_agent_id: Number(agentId),
          user_query: text,
          messages: [{ role: 'user', content: text }],
        }),
        signal: abortControllerRef.current.signal,
      });

      if (!streamRes.ok || !streamRes.body) {
        console.error('流式接口失败:', streamRes.status);
        setMessages((prev) => prev.filter((msg) => msg.id !== assistantId));
        return;
      }

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

      const thinkingStepsAcc: Array<{ id: string; title: string; status: string; items: string[] }> = [];
      const reasoningsAcc: Array<{ text: string; duration: number }> = [];
      let assistantTextAcc = '';
      let reasoningStartAt = 0;

      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[] };
            delta?: string;
            toolCallId?: string;
            toolName?: string;
            input?: Record<string, unknown>;
            output?: { result?: string } | unknown;
          } | null = null;

          try {
            event = JSON.parse(raw);
          } catch {
            continue;
          }

          if (!event) continue;

          switch (event.type) {
            case 'data-thinking-step': {
              const step = event.data!;
              const stepData = {
                id: step.id,
                title: step.title,
                status: step.status,
                items: step.items ?? [],
              };
              const existingIdx = thinkingStepsAcc.findIndex((s) => s.id === step.id);
              if (existingIdx >= 0) thinkingStepsAcc[existingIdx] = stepData;
              else thinkingStepsAcc.push(stepData);
              break;
            }
            case 'reasoning-start': {
              reasoningStartAt = Date.now();
              reasoningsAcc.push({ text: '', duration: 0 });
              break;
            }
            case 'reasoning-delta': {
              if (reasoningsAcc.length === 0) {
                reasoningsAcc.push({ text: event.delta ?? '', duration: 0 });
              } else {
                reasoningsAcc[reasoningsAcc.length - 1].text += event.delta ?? '';
              }
              break;
            }
            case 'reasoning-end': {
              if (reasoningsAcc.length > 0) {
                reasoningsAcc[reasoningsAcc.length - 1].duration = Date.now() - reasoningStartAt;
              }
              break;
            }
            case 'text-delta': {
              assistantTextAcc += event.delta ?? '';
              break;
            }
          }

          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 stepIdx = steps.findIndex((s) => s.text === step.title);
                  if (stepIdx >= 0) steps[stepIdx] = 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 'tool-input-available': {
                  const toolCalls = [...(msg.toolCalls ?? [])];
                  const tcIdx = toolCalls.findIndex((t) => t.id === event!.toolCallId);
                  const newTc = { id: event!.toolCallId!, name: event!.toolName!, input: event!.input };
                  if (tcIdx >= 0) toolCalls[tcIdx] = { ...toolCalls[tcIdx], ...newTc };
                  else toolCalls.push(newTc);
                  return { ...msg, toolCalls };
                }
                case 'tool-output-available': {
                  const toolCalls = [...(msg.toolCalls ?? [])];
                  const tcIdx = toolCalls.findIndex((t) => t.id === event!.toolCallId);
                  if (tcIdx >= 0) {
                    const rawOutput = event!.output;
                    const outputStr =
                      typeof rawOutput === 'object' && rawOutput !== null && 'result' in rawOutput
                        ? String((rawOutput as { result: unknown }).result)
                        : JSON.stringify(rawOutput);
                    toolCalls[tcIdx] = { ...toolCalls[tcIdx], output: outputStr };
                  }
                  return { ...msg, toolCalls };
                }
                case 'text-delta': {
                  return { ...msg, content: msg.content + (event!.delta ?? '') };
                }
                default:
                  return msg;
              }
            }),
          );
        }
      }

      const persistedContent: Array<Record<string, unknown>> = [];
      if (thinkingStepsAcc.length > 0) {
        persistedContent.push({ type: 'thinking-steps', steps: thinkingStepsAcc });
      }
      for (const reasoning of reasoningsAcc) {
        if (reasoning.text) {
          persistedContent.push({ type: 'reasoning', text: reasoning.text, duration: reasoning.duration });
        }
      }
      if (assistantTextAcc) {
        persistedContent.push({ type: 'text', text: assistantTextAcc });
      }

      if (persistedContent.length > 0) {
        const persistRes = await authedFetch(`${knowledgetoolUrl}/api/v1/expert-agent-chat/messages`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            thread_id: numericThreadId,
            role: 'assistant',
            content: persistedContent,
          }),
        });
        if (!persistRes.ok) {
          console.error('保存助手消息失败:', persistRes.status, persistRes.statusText);
        }
      }

      await fetchThreadFiles(numericThreadId);
    } catch (error) {
      if (error instanceof Error && error.name === 'AbortError') {
        console.log('流已被取消');
      } else {
        console.error('对话异常:', error);
      }
    } finally {
      setIsStreaming(false);
      abortControllerRef.current = null;
    }
  };

  const handleCapabilityClick = (capability: string) => {
    setInputValue(capability);
  };

  const handleToggleFolder = (path: string) => {
    setExpandedPaths((prev) => {
      const next = new Set(prev);
      if (next.has(path)) next.delete(path);
      else next.add(path);
      return next;
    });
  };

  const handleSelectFile = async (file: FileNode) => {
    if (!fileListThreadId) {
      setFilePreviewError('当前文件列表还没有关联到可预览的会话');
      return;
    }

    setSelectedFile(file);
    setFilePreviewContent('');
    setFilePreviewError('');
    setIsFilePreviewLoading(true);

    try {
      const previewRes = await authedFetch(
        `${knowledgetoolUrl}/api/v1/expert-agent-chat/threads/${fileListThreadId}/files/preview?path=${encodeURIComponent(file.path)}`,
        { method: 'GET' },
      );

      if (!previewRes.ok) {
        setFilePreviewError(`文件预览获取失败，状态码 ${previewRes.status}`);
        return;
      }

      const contentType = previewRes.headers.get('content-type') ?? '';
      if (contentType.includes('application/json')) {
        const data: unknown = await previewRes.json();
        if (typeof data === 'string') {
          setFilePreviewContent(data);
        } else if (data && typeof data === 'object' && 'content' in data) {
          setFilePreviewContent(String((data as { content: unknown }).content ?? ''));
        } else {
          setFilePreviewContent(JSON.stringify(data, null, 2));
        }
      } else {
        setFilePreviewContent(await previewRes.text());
      }
    } catch (error) {
      console.error('获取文件预览失败:', error);
      setFilePreviewError('文件预览获取失败，请稍后重试');
    } finally {
      setIsFilePreviewLoading(false);
    }
  };

  const handleResizeStart = (event: React.MouseEvent<HTMLDivElement>) => {
    event.preventDefault();
    const startX = event.clientX;
    const startWidth = fileSidebarWidth;

    const handleMouseMove = (moveEvent: MouseEvent) => {
      const containerWidth = window.innerWidth - 160;
      const maxWidth = Math.max(MIN_FILE_SIDEBAR_WIDTH, containerWidth - MIN_CHAT_WIDTH);
      const nextWidth = Math.min(Math.max(startWidth - (moveEvent.clientX - startX), MIN_FILE_SIDEBAR_WIDTH), maxWidth);
      setFileSidebarWidth(nextWidth);
    };

    const handleMouseUp = () => {
      document.body.classList.remove('agent-resizing');
      window.removeEventListener('mousemove', handleMouseMove);
      window.removeEventListener('mouseup', handleMouseUp);
    };

    document.body.classList.add('agent-resizing');
    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseup', handleMouseUp);
  };

  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 handleThreadSelect = (nextThreadId: string) => {
    if (abortControllerRef.current) {
      abortControllerRef.current.abort();
      abortControllerRef.current = null;
      setIsStreaming(false);
      clearLoadingStates();
    }
    syncThreadId(nextThreadId);
  };

  return (
    <div className={`flex h-[calc(100vh-80px)] w-full flex-col ${isDark ? 'bg-slate-900' : 'bg-white'}`}>
      <div className={`border-b px-6 py-4 ${isDark ? 'border-slate-700' : 'border-gray-200'}`}>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <button
              onClick={() => navigate('/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="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-purple-600 text-sm font-semibold text-white">
              {agent.name.charAt(0)}
            </div>
            <div>
              <h2 className={`text-base font-semibold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>
                {agent.name}
              </h2>
              <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{agent.description}</p>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <button
              type="button"
              onClick={() => setIsThreadSidebarOpen((prev) => !prev)}
              className={`inline-flex h-9 items-center gap-2 rounded-lg border px-3 text-sm font-medium transition ${isDark
                  ? 'border-slate-700 bg-slate-800 text-slate-100 hover:bg-slate-700'
                  : 'border-gray-200 bg-gray-50 text-gray-700 hover:border-red-200 hover:bg-red-50 hover:text-red-600'
                }`}
              title="打开聊天记录"
            >
              <MessageSquareText className="h-4 w-4" />
              聊天记录
            </button>
            <button
              onClick={() => setIsFileSidebarOpen(true)}
              className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-cyan-400 via-blue-500 to-purple-600 text-white transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-blue-500/50"
              title="文件"
            >
              <FolderOpen className="h-5 w-5" />
            </button>
          </div>
        </div>
      </div>

      <div className="flex min-h-0 flex-1 overflow-hidden">
        <SkillCreatorThreadSidebar
          authedFetch={authedFetch}
          currentThreadId={currentThreadId}
          isDarkMode={isDark}
          isOpen={isThreadSidebarOpen}
          isBusy={isStreaming}
          createButtonText="新建聊天"
          emptyText="当前专家暂无聊天记录"
          subtitle="仅展示当前专家的聊天记录"
          createThreadPayload={{
            title: `与 ${agent.name} 的对话`,
            expert_agent_id: agentId ? Number(agentId) : null,
          }}
          threadFilter={(thread) => String(thread.expert_agent_id ?? '') === String(agentId ?? '')}
          onClose={() => setIsThreadSidebarOpen(false)}
          onThreadSelect={handleThreadSelect}
        />

        <div className="flex min-w-0 flex-1 flex-col">
          <div
            ref={scrollContainerRef}
            onScroll={handleScroll}
            className="relative flex min-h-0 flex-1 flex-col overflow-y-auto px-6 py-8"
          >
            {isLoading ? (
              <div className="flex h-full items-center justify-center">
                <div className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>加载对话中...</div>
              </div>
            ) : messages.length === 0 ? (
              <div className="flex flex-1 flex-col items-center justify-center">
                <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-purple-600 text-white shadow-lg shadow-violet-300/30">
                  <Zap className="h-10 w-10" />
                </div>

                <h3 className={`mb-2 text-2xl font-bold ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>
                  你好，我是 {agent.name}
                </h3>
                <p className={`mb-6 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{agent.description}</p>

                <div className={`mb-8 inline-flex items-center gap-2 rounded-full border px-4 py-2 ${isDark ? 'border-emerald-800 bg-emerald-950/50 text-emerald-300' : 'border-emerald-200 bg-emerald-50 text-emerald-700'}`}>
                  <span className="h-2 w-2 rounded-full bg-emerald-500" />
                  <span className="text-xs font-medium">{agent.status}</span>
                </div>

                <div className="flex flex-wrap justify-center gap-3">
                  {agent.capabilities?.map((capability, idx) => (
                    <button
                      key={idx}
                      onClick={() => handleCapabilityClick(capability)}
                      className={`rounded-lg px-4 py-2 text-xs font-medium transition ${isDark
                          ? 'bg-slate-800 text-slate-300 hover:bg-slate-700'
                          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                        }`}
                    >
                      {capability}
                    </button>
                  ))}
                </div>
              </div>
            ) : (
              <div className="flex flex-col gap-4">
                <AgentConversationList messages={messages} isConnecting={isStreaming} />
              </div>
            )}

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

          <ChatInputComposer
            value={inputValue}
            onChange={setInputValue}
            onSend={() => void handleSendMessage()}
            onStop={handleStopStream}
            onUploadFile={(file) => void handleUploadFile(file)}
            isSending={isStreaming}
            isDarkMode={isDark}
            showBorderTop
            placeholder="输入你的问题..."
          />
        </div>

        {isFileSidebarOpen && (
          <aside
            className={`relative flex min-h-0 shrink-0 border-l shadow-2xl ${isDark ? 'border-slate-700 bg-slate-950 text-slate-100 shadow-black/30' : 'border-gray-200 bg-white text-gray-900 shadow-gray-200/70'
              }`}
            style={{ width: fileSidebarWidth }}
          >
            <div
              onMouseDown={handleResizeStart}
              className={`absolute left-0 top-0 z-20 h-full w-2 -translate-x-1/2 cursor-col-resize transition-colors ${isDark ? 'hover:bg-blue-400/40' : 'hover:bg-blue-500/25'
                }`}
              title="拖拽调整文件侧边栏宽度"
            />

            <div className={`flex w-[46%] min-w-[220px] flex-col border-r ${isDark ? 'border-slate-800' : 'border-gray-200'}`}>
              <div className={`border-b px-4 py-3 ${isDark ? 'border-slate-800 bg-slate-900/70' : 'border-gray-200 bg-gray-50/80'}`}>
                <div>
                  <h3 className="text-sm font-semibold">文件</h3>
                  <p className={`mt-0.5 text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>{fileList.length} 个根节点</p>
                </div>
              </div>

              <div className="agent-file-tree-scroll min-h-0 flex-1 overflow-y-auto p-3">
                {fileList.length > 0 ? (
                  <div className="space-y-1">
                    {fileList.map((node) => (
                      <FileTreeItem
                        key={node.path}
                        node={node}
                        isDark={isDark}
                        expandedPaths={expandedPaths}
                        selectedPath={selectedFile?.path ?? null}
                        onToggle={handleToggleFolder}
                        onSelect={(file) => void handleSelectFile(file)}
                      />
                    ))}
                  </div>
                ) : (
                  <div className={`rounded-2xl border border-dashed px-4 py-8 text-center text-sm ${isDark ? 'border-slate-700 text-slate-500' : 'border-gray-200 text-gray-400'}`}>
                    暂无文件
                  </div>
                )}
              </div>
            </div>

            <div className="flex min-w-0 flex-1 flex-col">
              <div className={`flex items-center justify-between gap-3 border-b px-5 py-3 ${isDark ? 'border-slate-800 bg-slate-900/70' : 'border-gray-200 bg-gray-50/80'}`}>
                <div className="min-w-0">
                  <h3 className="truncate text-sm font-semibold">{selectedFile?.name ?? '文件预览'}</h3>
                  <p className={`mt-0.5 truncate text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
                    {selectedFile ? selectedFile.path : '选择左侧文件查看内容'}
                  </p>
                </div>
                <button
                  type="button"
                  onClick={() => setIsFileSidebarOpen(false)}
                  className={`flex shrink-0 items-center justify-center rounded-lg transition ${isDark ? 'text-slate-400 hover:bg-slate-800 hover:text-slate-100' : 'text-gray-500 hover:bg-gray-200 hover:text-gray-900'
                    }`}
                  title="关闭文件侧边栏"
                >
                  <X className="h-4 w-4" />
                </button>
              </div>

              <div className="agent-file-preview-scroll min-h-0 flex-1 overflow-auto p-5">
                {!selectedFile ? (
                  <div className={`flex h-full flex-col items-center justify-center rounded-3xl border border-dashed text-center ${isDark ? 'border-slate-800 bg-slate-900/40 text-slate-500' : 'border-gray-200 bg-gray-50 text-gray-400'}`}>
                    <FileText className="mb-3 h-10 w-10 opacity-60" />
                    <p className="text-sm font-medium">请选择一个文件</p>
                    <p className="mt-1 text-xs">文件内容会显示在这里</p>
                  </div>
                ) : isFilePreviewLoading ? (
                  <div className={`flex h-full items-center justify-center gap-2 text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                    <Loader2 className="h-4 w-4 animate-spin" />
                    加载文件内容中...
                  </div>
                ) : filePreviewError ? (
                  <div className={`flex h-full flex-col items-center justify-center gap-2 text-sm ${isDark ? 'text-red-300' : 'text-red-500'}`}>
                    <AlertCircle className="h-8 w-8" />
                    {filePreviewError}
                  </div>
                ) : (
                  <div className={`overflow-hidden rounded-2xl border ${isDark ? 'border-slate-800 bg-slate-900' : 'border-gray-200 bg-white'}`}>
                    <div className={`flex items-center justify-between border-b px-4 py-2.5 ${isDark ? 'border-slate-800 bg-slate-950/70' : 'border-gray-100 bg-gray-50'}`}>
                      <span className={`text-xs font-semibold tracking-wide ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{getFileLanguage(selectedFile.extension)}</span>
                      <span className={`text-xs ${isDark ? 'text-slate-600' : 'text-gray-400'}`}>{formatFileSize(selectedFile.size)}</span>
                    </div>
                    <div className={`p-5 text-sm leading-7 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
                      <MarkdownRenderer
                        content={filePreviewContent || '文件内容为空'}
                        className="agent-file-markdown-preview"
                      />
                    </div>
                  </div>
                )}
              </div>
            </div>
          </aside>
        )}
      </div>
    </div>
  );
}