import { useEffect, useRef, useState } from 'react';
import { Button, Input, Space, Tag, App as AntApp, Popconfirm, Empty, Collapse, Switch, Drawer, Slider, InputNumber, Upload, Tooltip, Modal, Image as AntImage, Divider, Dropdown } from 'antd';
import { SettingOutlined, ApiOutlined, EditOutlined, DeleteOutlined, PaperClipOutlined, BookOutlined, ArrowUpOutlined, CloseOutlined, DownOutlined } from '@ant-design/icons';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import ReactMarkdown from 'react-markdown';
import {
  Agent,
  AgentAPI,
  AgentAllowedLLMResponse,
  BranchInfo,
  ChatAPI,
  ChatAttachment,
  ChatAttachmentsAPI,
  ChatMessage,
  ImageAPI,
  LLMProviderAPI,
  ModelOverrides,
  RetrievedSnippet,
  SessionAPI,
  regenerateMessage,
  streamChat,
  ToolCallTrace
} from '../api';
import SessionSidebar from '../components/SessionSidebar';
import McpResourcesDrawer from '../components/McpResourcesDrawer';
import PromptLibraryPage from './PromptLibraryPage';

interface StreamingState {
  active: boolean;
  text: string;
  retrieved: RetrievedSnippet[];
  toolCalls: ToolCallTrace[];
}

const parseAllowedModels = (payload?: Pick<AgentAllowedLLMResponse, 'model'> | null) =>
  String(payload?.model || '')
    .split(',')
    .map((item) => item.trim())
    .filter(Boolean);

export default function ChatPage() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const { message: msg } = AntApp.useApp();
  const [agent, setAgent] = useState<Agent | null>(null);
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [branches, setBranches] = useState<Record<string, BranchInfo>>({});
  const [input, setInput] = useState('');
  const [sending, setSending] = useState(false);
  const [useStream, setUseStream] = useState(true);
  const [sessionId, setSessionId] = useState<string | null>(null);
  const [highlightId, setHighlightId] = useState<string | null>(null);
  const [sessionRefresh, setSessionRefresh] = useState(0);
  const [agentList, setAgentList] = useState<Agent[]>([]);
  const [historyDrawerOpen, setHistoryDrawerOpen] = useState(false);
  const [mcpDrawerOpen, setMcpDrawerOpen] = useState(false);
  const [paramsDrawerOpen, setParamsDrawerOpen] = useState(false);
  const [tplDrawerOpen, setTplDrawerOpen] = useState(false);
  const [overrides, setOverrides] = useState<ModelOverrides>({});
  const [allowedModels, setAllowedModels] = useState<string[]>([]);
  const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
  const [imageUrls, setImageUrls] = useState<string[]>([]);
  const [uploadingAtt, setUploadingAtt] = useState(false);
  const [streaming, setStreaming] = useState<StreamingState>({
    active: false,
    text: '',
    retrieved: [],
    toolCalls: []
  });
  const bodyRef = useRef<HTMLDivElement>(null);
  const abortRef = useRef<AbortController | null>(null);

  // URL 参数 ?session=xxx&msg=yyy
  useEffect(() => {
    const s = searchParams.get('session');
    const m = searchParams.get('msg');
    if (s) {
      setSessionId(s);
      if (m) setHighlightId(m);
      const next = new URLSearchParams(searchParams);
      next.delete('session');
      next.delete('msg');
      setSearchParams(next, { replace: true });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchParams]);

  const scrollBottom = () => {
    requestAnimationFrame(() => {
      bodyRef.current?.scrollTo({ top: bodyRef.current.scrollHeight, behavior: 'smooth' });
    });
  };

  const loadAgent = async () => {
    if (!id) {
      setAgent(null);
      setMessages([]);
      return;
    }
    const a = await AgentAPI.detail(id);
    setAgent(a);
  };

  const loadAgentList = async () => {
    try {
      const list = await AgentAPI.list();
      setAgentList(list);
    } catch (e) {
      // ignore
    }
  };

  const loadAllowedModels = async (agentId: string) => {
    try {
      const result = await LLMProviderAPI.allowedModels(agentId);
      setAllowedModels(parseAllowedModels(result));
    } catch (e: any) {
      setAllowedModels([]);
      msg.error('加载智能体模型失败：' + (e?.message ?? e));
    }
  };

  const loadMessages = async () => {
    if (!id || !sessionId) return;
    const his = await ChatAPI.history(id, sessionId);
    setMessages(his.messages);
    setBranches(his.branches);
    requestAnimationFrame(() => {
      if (highlightId) {
        const el = document.getElementById('msg-' + highlightId);
        if (el) {
          el.scrollIntoView({ behavior: 'smooth', block: 'center' });
          setTimeout(() => setHighlightId(null), 3000);
          return;
        }
      }
      scrollBottom();
    });
  };

  useEffect(() => {
    loadAgentList();
  }, []);

  useEffect(() => {
    if (!id) {
      setAgent(null);
      setMessages([]);
      setAllowedModels([]);
      setOverrides({});
      return () => abortRef.current?.abort();
    }
    loadAgent();
    loadAllowedModels(id);
    setOverrides({});
    return () => abortRef.current?.abort();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id]);

  useEffect(() => {
    if (!id) return;
    loadMessages();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sessionId, highlightId, id]);

  /** 把附件文本拼成 system 注入字符串 */
  const buildAttachmentsText = () => {
    if (!attachments.length) return '';
    return attachments
      .map(
        (a, i) =>
          `### 附件 ${i + 1}: ${a.name}${a.truncated ? ' (已截断)' : ''}\n${a.text}`
      )
      .join('\n\n---\n\n');
  };

  const handleSendStream = async (text: string) => {
    if (!id || !sessionId) return;
    const tempUser: ChatMessage = {
      id: 'tmp-' + Date.now(),
      role: 'user',
      content: text,
      createdAt: Date.now()
    };
    setMessages((m) => [...m, tempUser]);
    setStreaming({ active: true, text: '', retrieved: [], toolCalls: [] });
    scrollBottom();

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

    const attText = buildAttachmentsText();

    try {
      await streamChat(
        id,
        text,
        {
          onMeta: (m) => setStreaming((s) => ({ ...s, retrieved: m.retrieved || [] })),
          onDelta: (chunk) =>
            setStreaming((s) => {
              const next = { ...s, text: s.text + chunk };
              scrollBottom();
              return next;
            }),
          onToolCall: (data) =>
            setStreaming((s) => ({
              ...s,
              toolCalls: [...s.toolCalls, { name: data.name, args: data.args, result: { pending: true } }]
            })),
          onToolResult: (data) =>
            setStreaming((s) => {
              const list = [...s.toolCalls];
              for (let i = list.length - 1; i >= 0; i--) {
                if (list[i].name === data.name && (list[i].result as any)?.pending) {
                  list[i] = { ...list[i], result: data.result };
                  break;
                }
              }
              return { ...s, toolCalls: list };
            }),
          onDone: (data) => {
            setMessages((m) => [...m.filter((x) => x.id !== tempUser.id), data.user, data.assistant]);
            setStreaming({ active: false, text: '', retrieved: [], toolCalls: [] });
            setSessionRefresh((t) => t + 1);
            setAttachments([]); // 用完即清
            setImageUrls([]);
            scrollBottom();
          },
          onAborted: (data) => {
            // 已停止：保留已生成内容；user 消息也留下（用 tempUser 占位）
            setMessages((m) => [
              ...m.filter((x) => x.id !== tempUser.id),
              { ...tempUser, id: 'u-' + data.assistant.id }, // 占位
              data.assistant
            ]);
            setStreaming({ active: false, text: '', retrieved: [], toolCalls: [] });
            setSessionRefresh((t) => t + 1);
            // 重新拉一次确保和后端一致（user 真实 id 在那边）
            loadMessages();
          },
          onError: (errMsg) => {
            msg.error('流式失败：' + errMsg);
            setMessages((m) => m.filter((x) => x.id !== tempUser.id));
            setStreaming({ active: false, text: '', retrieved: [], toolCalls: [] });
          }
        },
        ctrl.signal,
        sessionId,
        overrides,
        attText || undefined,
        imageUrls.length > 0 ? imageUrls : undefined
      );
    } catch (e: any) {
      if (e?.name !== 'AbortError') {
        msg.error('请求失败：' + (e?.message ?? e));
      }
      setMessages((m) => m.filter((x) => x.id !== tempUser.id));
      setStreaming({ active: false, text: '', retrieved: [], toolCalls: [] });
    }
  };

  const handleSendNonStream = async (text: string) => {
    if (!id || !sessionId) return;
    const tempUser: ChatMessage = {
      id: 'tmp-' + Date.now(),
      role: 'user',
      content: text,
      createdAt: Date.now()
    };
    setMessages((m) => [...m, tempUser]);
    scrollBottom();
    const attText = buildAttachmentsText();
    try {
      const res = await ChatAPI.send(
        id,
        text,
        sessionId,
        overrides,
        attText || undefined,
        imageUrls.length > 0 ? imageUrls : undefined
      );
      setMessages((m) => [...m.filter((x) => x.id !== tempUser.id), res.user, res.assistant]);
      setSessionRefresh((t) => t + 1);
      setAttachments([]);
      setImageUrls([]);
      scrollBottom();
    } catch (e: any) {
      msg.error('发送失败：' + (e?.message ?? e));
      setMessages((m) => m.filter((x) => x.id !== tempUser.id));
    }
  };

  const handleSend = async () => {
    const text = input.trim();
    if (!text || !id || sending || !sessionId) return;
    setInput('');
    setSending(true);
    try {
      if (useStream) await handleSendStream(text);
      else await handleSendNonStream(text);
    } finally {
      setSending(false);
    }
  };

  const handleStop = () => {
    abortRef.current?.abort();
    setSending(false);
  };

  const handleClear = async () => {
    if (!id || !sessionId) return;
    await ChatAPI.clear(id, sessionId);
    setMessages([]);
    setBranches({});
    msg.success('对话已清空');
  };

  const handleRegenerate = async (assistantId: string) => {
    if (!id || sending) return;
    setSending(true);
    setStreaming({ active: true, text: '', retrieved: [], toolCalls: [] });
    abortRef.current?.abort();
    const ctrl = new AbortController();
    abortRef.current = ctrl;
    try {
      await regenerateMessage(
        id,
        assistantId,
        {
          onMeta: (m) => setStreaming((s) => ({ ...s, retrieved: m.retrieved || [] })),
          onDelta: (chunk) =>
            setStreaming((s) => {
              const next = { ...s, text: s.text + chunk };
              scrollBottom();
              return next;
            }),
          onToolCall: (data) =>
            setStreaming((s) => ({
              ...s,
              toolCalls: [...s.toolCalls, { name: data.name, args: data.args, result: { pending: true } }]
            })),
          onToolResult: (data) =>
            setStreaming((s) => {
              const list = [...s.toolCalls];
              for (let i = list.length - 1; i >= 0; i--) {
                if (list[i].name === data.name && (list[i].result as any)?.pending) {
                  list[i] = { ...list[i], result: data.result };
                  break;
                }
              }
              return { ...s, toolCalls: list };
            }),
          onDone: () => {
            setStreaming({ active: false, text: '', retrieved: [], toolCalls: [] });
            loadMessages();
          },
          onAborted: () => {
            setStreaming({ active: false, text: '', retrieved: [], toolCalls: [] });
            loadMessages();
          },
          onError: (errMsg) => {
            msg.error('重新生成失败：' + errMsg);
            setStreaming({ active: false, text: '', retrieved: [], toolCalls: [] });
            loadMessages();
          }
        },
        ctrl.signal,
        overrides
      );
    } finally {
      setSending(false);
    }
  };

  const handleSwitchBranch = async (userMsgId: string, branchId: string) => {
    if (!id) return;
    await ChatAPI.switchBranch(id, userMsgId, branchId);
    await loadMessages();
  };

  const handleAttach = async (files: File[]) => {
    if (!files.length) return;
    setUploadingAtt(true);
    try {
      // v1.0: 自动按类型分流。图片 → 图床；其他 → 文本附件
      const images = files.filter((f) => f.type.startsWith('image/'));
      const docs = files.filter((f) => !f.type.startsWith('image/'));
      let imgN = 0, docN = 0;
      if (images.length) {
        const r = await ImageAPI.upload(images);
        setImageUrls((arr) => [...arr, ...r.files.map((f) => f.url)]);
        imgN = r.files.length;
      }
      if (docs.length) {
        const r = await ChatAttachmentsAPI.upload(docs);
        setAttachments((a) => [...a, ...r.files]);
        docN = r.files.length;
      }
      const parts = [];
      if (imgN) parts.push(`${imgN} 张图片`);
      if (docN) parts.push(`${docN} 个文档`);
      if (parts.length) msg.success(`已附加 ${parts.join(' + ')}`);
    } catch (e: any) {
      msg.error('附件上传失败：' + (e?.message ?? e));
    } finally {
      setUploadingAtt(false);
    }
  };

  const isImageUrl = (url: string) => url?.startsWith('http') || url?.startsWith('/');
  const agentModel = agent?.model || '';
  const modelOptions = allowedModels.map((modelName) => ({
    value: modelName,
    label: modelName
  }));
  const activeModelValue = overrides.model || '';
  const activeModelOption = modelOptions.find((item) => item.value === activeModelValue);
  const defaultModelLabel = allowedModels.length > 0 ? allowedModels.join(', ') : agentModel || '默认模型';
  const currentModelName = activeModelOption?.label || activeModelValue || defaultModelLabel;

  return (
    <div className="chat-shell">
      {/* 1. 二级侧边栏：智能体列表 */}
      <aside className="chat-side">
        <div style={{ padding: '16px', borderBottom: '1px solid var(--color-border)' }}>
          <Button block type="dashed" onClick={() => navigate('/agents/new')}>+ 创建智能体</Button>
        </div>
        <div style={{ flex: 1, overflowY: 'auto', padding: '8px 0' }}>
          {agentList.map((a) => {
            const isActive = a.id === id;
            return (
              <div
                key={a.id}
                onClick={() => navigate(`/chat/${a.id}`)}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 12,
                  padding: '10px 16px',
                  cursor: 'pointer',
                  background: isActive ? 'var(--color-surface-2)' : 'transparent',
                  borderLeft: `3px solid ${isActive ? 'var(--color-brand)' : 'transparent'}`,
                  transition: 'background 0.2s'
                }}
              >
                <div
                  style={{
                    width: 32,
                    height: 32,
                    borderRadius: '50%',
                    background: a.avatar || 'var(--gradient-brand)',
                    color: '#fff',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontWeight: 700,
                    fontSize: 14,
                    overflow: 'hidden'
                  }}
                >
                  {isImageUrl(a.avatar) ? (
                    <img src={a.avatar} className="w-full h-full object-cover" alt="avatar" />
                  ) : (
                    (a.name?.charAt(0) || '?').toUpperCase()
                  )}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: isActive ? 600 : 500, fontSize: 14, color: 'var(--color-text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    {a.name}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </aside>

      {/* 2. 主聊天区 */}
      <section className="chat-main">
        {!agent ? (
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Empty description="请在左侧选择一个智能体开始对话" />
          </div>
        ) : (
          <>
            {/* Header */}
            <div className="chat-header">
              <div>
                <div style={{ fontWeight: 600, fontSize: 16, color: 'var(--color-text)' }}>{agent.name}</div>
                <div style={{ fontSize: 12, color: 'var(--color-text-tertiary)' }}>
                  {agent.model || '默认模型'} · T={agent.temperature}
                </div>
              </div>
              <Space>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginRight: 12 }}>
                  <span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>流式输出</span>
                  <Switch size="small" checked={useStream} onChange={setUseStream} />
                </div>
                <Button size="small" onClick={() => setHistoryDrawerOpen(true)}>历史对话</Button>
                <Dropdown
                  menu={{
                    items: [
                      { key: 'params', label: '模型参数', icon: <SettingOutlined />, onClick: () => setParamsDrawerOpen(true) },
                      { key: 'mcp', label: 'MCP 资源', icon: <ApiOutlined />, onClick: () => setMcpDrawerOpen(true) },
                      { key: 'edit', label: '管理 Agent', icon: <EditOutlined />, onClick: () => navigate(`/agents/${id}`) },
                      { type: 'divider' },
                      { key: 'clear', label: '清空对话', icon: <DeleteOutlined />, danger: true, onClick: () => {
                          Modal.confirm({
                            title: '清空当前会话所有消息？',
                            onOk: handleClear
                          });
                        }
                      }
                    ]
                  }}
                >
                  <Button size="small">更多 <DownOutlined /></Button>
                </Dropdown>
              </Space>
            </div>

            {/* Body */}
            <div ref={bodyRef} className="chat-body">
          <div className="messages-container">
            {messages.length === 0 && !streaming.active ? (
              <div style={{ textAlign: 'center', marginTop: 120 }}>
                <div
                  style={{
                  width: 68, height: 68, borderRadius: '50%',
                  background: agent.avatar || 'var(--gradient-brand)',
                  color: '#fff', display: 'flex', alignItems: 'center',
                  justifyContent: 'center', fontWeight: 700, fontSize: 32,
                  margin: '0 auto 20px', boxShadow: 'var(--shadow-lg)',
                  overflow: 'hidden'
                }}>
                  {isImageUrl(agent.avatar) ? (
                    <img src={agent.avatar} className="w-full h-full object-cover" alt="avatar" />
                  ) : (
                    (agent.name?.charAt(0) || '?').toUpperCase()
                  )}
                </div>
                <h2
                  style={{
                    fontSize: 28,
                    fontWeight: 700,
                    color: 'var(--color-text)',
                    marginBottom: 8,
                    letterSpacing: '-0.02em'
                  }}
                >
                  你好，今天想一起完成什么？
                </h2>
                <p style={{ color: 'var(--color-text-secondary)', fontSize: 15, lineHeight: 1.7 }}>
                  {agent.description || '我是你的专属 AI 助手，随时准备为你服务。'}
                </p>
              </div>
            ) : (
              <>
                {messages.map((m) => (
                  <MessageItem
                    key={m.id}
                    message={m}
                    highlighted={highlightId === m.id}
                    branch={m.role === 'assistant' && m.parentId ? branches[m.parentId] : undefined}
                    busy={sending}
                    onRegenerate={handleRegenerate}
                    onSwitchBranch={handleSwitchBranch}
                    onCopy={(text) => {
                      navigator.clipboard?.writeText(text).then(() => msg.success('已复制'));
                    }}
                  />
                ))}
                {streaming.active && (
                  <div style={{ marginBottom: 24 }}>
                    <div className="bubble assistant">
                      {streaming.text ? (
                        <ReactMarkdown>{streaming.text + '▍'}</ReactMarkdown>
                      ) : (
                        <span style={{ color: 'var(--color-text-tertiary)' }}>思考中…</span>
                      )}
                    </div>
                    {(streaming.retrieved.length > 0 || streaming.toolCalls.length > 0) && (
                      <div style={{ maxWidth: '85%' }}>
                        {streaming.retrieved.length > 0 && (
                          <RetrievedView retrieved={streaming.retrieved} liveStyle />
                        )}
                        {streaming.toolCalls.length > 0 && (
                          <ToolCallView calls={streaming.toolCalls} liveStyle />
                        )}
                      </div>
                    )}
                  </div>
                )}
              </>
            )}
          </div>
        </div>

        {/* Input Footer */}
        <div className="chat-input-wrapper">
          {/* Attachments Preview */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 8 }}>
            {attachments.map((a, i) => (
              <Tag
                key={i}
                color="blue"
                closable
                style={{ borderRadius: 6, padding: '4px 8px' }}
                onClose={() => setAttachments((arr) => arr.filter((_, j) => j !== i))}
              >
                📎 {a.name}
              </Tag>
            ))}
            {imageUrls.map((u, i) => (
              <div key={i} style={{ position: 'relative' }}>
                <AntImage
                  src={u}
                  width={48}
                  height={48}
                  style={{ objectFit: 'cover', borderRadius: 8, border: '1px solid var(--color-border)' }}
                />
                <Button
                  size="small"
                  type="primary"
                  shape="circle"
                  icon={<CloseOutlined style={{ fontSize: 8 }} />}
                  style={{
                    position: 'absolute', top: -6, right: -6,
                    width: 16, height: 16, display: 'flex', alignItems: 'center', justifyContent: 'center'
                  }}
                  onClick={() => setImageUrls((arr) => arr.filter((_, j) => j !== i))}
                />
              </div>
            ))}
          </div>

          <div className="chat-input-card">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: '100%' }}>
              <Input.TextArea
                value={input}
                onChange={(e) => setInput(e.target.value)}
                placeholder="问我任何问题..."
                autoSize={{ minRows: 3, maxRows: 10 }}
                onPressEnter={(e) => {
                  if (!e.shiftKey) {
                    e.preventDefault();
                    handleSend();
                  }
                }}
                className="chat-input-textarea"
                disabled={sending}
                style={{ width: '100%' }}
              />

              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  gap: 12,
                  paddingTop: 8,
                  borderTop: '1px solid var(--color-border)'
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, minWidth: 0 }}>
                  <Dropdown
                    trigger={['hover']}
                    placement="topLeft"
                    menu={{
                      selectedKeys: [activeModelValue || '__default__'],
                      onClick: ({ key }) =>
                        setOverrides((o) => ({
                          ...o,
                          model: String(key) === '__default__' ? undefined : String(key)
                        })),
                      items: [
                        {
                          key: '__default__',
                          label: `跟随默认 · ${defaultModelLabel}`
                        },
                        ...modelOptions.map((item) => ({
                          key: item.value,
                          label: `${item.label}`
                        }))
                      ]
                    }}
                  >
                    <button
                      type="button"
                      style={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        gap: 6,
                        minWidth: 0,
                        padding: '0 2px',
                        background: 'transparent',
                        border: 'none',
                        color: 'var(--color-text-secondary)',
                        cursor: 'pointer',
                        fontSize: 13,
                        lineHeight: 1.2
                      }}
                    >
                      <span
                        style={{
                          maxWidth: 240,
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap',
                          fontWeight: 500,
                          color: 'var(--color-text)'
                        }}
                      >
                        {currentModelName}
                      </span>
                      <DownOutlined style={{ fontSize: 10, color: 'var(--color-text-tertiary)' }} />
                    </button>
                  </Dropdown>

                  <Upload
                    multiple
                    beforeUpload={(_f, files) => {
                      handleAttach(files as File[]);
                      return false;
                    }}
                    showUploadList={false}
                    accept=".txt,.md,.markdown,.json,.csv,.pdf,.docx,.html,.htm,image/png,image/jpeg,image/webp,image/gif"
                  >
                    <Button type="text" icon={<PaperClipOutlined style={{ fontSize: 18 }} />} />
                  </Upload>
                  <Button type="text" icon={<BookOutlined style={{ fontSize: 18 }} />} onClick={() => setTplDrawerOpen(true)} />
                </div>

                {sending ? (
                  <Button
                    danger
                    shape="circle"
                    onClick={handleStop}
                    icon={<div style={{ width: 10, height: 10, background: 'currentColor', borderRadius: 2 }} />}
                    style={{ width: 40, height: 40, flexShrink: 0 }}
                  />
                ) : (
                  <Button
                    type="primary"
                    shape="circle"
                    onClick={handleSend}
                    icon={<ArrowUpOutlined />}
                    disabled={!input.trim()}
                    style={{ background: 'var(--color-brand)', border: 'none', width: 40, height: 40, flexShrink: 0 }}
                  />
                )}
              </div>
            </div>
          </div>
          <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--color-text-tertiary)', marginTop: 8 }}>
            AI 可能会产生错误信息，请核实重要信息。
          </div>
        </div>
          </>
        )}
      </section>

      {/* ---- 抽屉组件保持不变 ---- */}
      {id && (
        <McpResourcesDrawer
          agentId={id}
          open={mcpDrawerOpen}
          onClose={() => setMcpDrawerOpen(false)}
          onUse={(text) => setInput((cur) => cur + text)}
        />
      )}

      <Drawer
        title="📚 选择 Prompt 模板"
        open={tplDrawerOpen}
        onClose={() => setTplDrawerOpen(false)}
        width={520}
      >
        <PromptLibraryPage
          onSelect={(t) => {
            setInput((cur) => (cur ? cur + '\n\n' : '') + t.body);
            setTplDrawerOpen(false);
            msg.success('已插入到输入框');
          }}
        />
      </Drawer>

      <Drawer
        title="⚙️ 模型参数（仅本会话临时生效）"
        open={paramsDrawerOpen}
        onClose={() => setParamsDrawerOpen(false)}
        width={380}
      >
        <div
          style={{
            marginBottom: 16,
            padding: 12,
            background: 'var(--color-warning-soft)',
            borderRadius: 10,
            fontSize: 12,
            color: 'var(--color-warning)',
            border: '1px solid var(--color-border)'
          }}
        >
          💡 这里设置的参数会临时覆盖智能体的默认配置，<b>仅作用于当前浏览器会话</b>，不会写回到智能体本身。<br />
          关闭页面或清空字段即可恢复默认。
        </div>

        <div style={{ marginBottom: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
            <span>🌡 Temperature（创造性）</span>
            <span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>
              默认：{agent?.temperature ?? 0.7}
            </span>
          </div>
          <Slider
            min={0}
            max={2}
            step={0.05}
            value={overrides.temperature ?? agent?.temperature ?? 0.7}
            onChange={(v) => setOverrides((o) => ({ ...o, temperature: v as number }))}
            marks={{ 0: '严谨', 0.7: '默认', 1.4: '发散', 2: '混沌' }}
          />
          {overrides.temperature !== undefined && (
            <Button size="small" type="link" style={{ padding: 0 }} onClick={() => setOverrides((o) => ({ ...o, temperature: undefined }))}>
              ↺ 恢复默认
            </Button>
          )}
        </div>

        <div style={{ marginBottom: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
            <span>🎯 Top P（核采样）</span>
            <span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>未设置时跟随模型默认</span>
          </div>
          <Slider
            min={0.1}
            max={1}
            step={0.05}
            value={overrides.topP ?? 1}
            onChange={(v) => setOverrides((o) => ({ ...o, topP: v as number }))}
            disabled={overrides.topP === undefined}
          />
          {overrides.topP === undefined ? (
            <Button size="small" type="link" style={{ padding: 0 }} onClick={() => setOverrides((o) => ({ ...o, topP: 1 }))}>
              ✚ 启用 Top P
            </Button>
          ) : (
            <Button size="small" type="link" style={{ padding: 0 }} onClick={() => setOverrides((o) => ({ ...o, topP: undefined }))}>
              ↺ 取消
            </Button>
          )}
        </div>

        <div style={{ marginBottom: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
            <span>📏 Max Tokens（生成长度上限）</span>
            <span style={{ fontSize: 12, color: 'var(--color-text-secondary)' }}>未设置时由模型决定</span>
          </div>
          <InputNumber
            value={overrides.maxTokens}
            onChange={(v) => setOverrides((o) => ({ ...o, maxTokens: v == null ? undefined : Number(v) }))}
            min={1}
            max={16384}
            placeholder="例如 2048"
            style={{ width: '100%' }}
          />
        </div>

        <Button block onClick={() => setOverrides({})}>
          🔄 全部恢复默认
        </Button>
      </Drawer>

      <Drawer
        title="历史对话"
        placement="right"
        width={320}
        onClose={() => setHistoryDrawerOpen(false)}
        open={historyDrawerOpen}
        bodyStyle={{ padding: 0 }}
      >
        {id && (
          <SessionSidebar
            agentId={id}
            activeSessionId={sessionId}
            onChange={(sid, opts) => {
              setSessionId(sid);
              setHighlightId(opts?.highlightMessageId || null);
              setHistoryDrawerOpen(false);
            }}
            refreshTick={sessionRefresh}
          />
        )}
      </Drawer>
    </div>
  );
}

/** 输入栏子组件 */
function MonicaInputBar({
  input, setInput, sending, attachments, imageUrls, uploadingAtt,
  onSend, onStop, onAttach, onRemoveAtt, onRemoveImg, onOpenTpl
}: {
  input: string;
  setInput: (v: string) => void;
  sending: boolean;
  attachments: ChatAttachment[];
  imageUrls: string[];
  uploadingAtt: boolean;
  onSend: () => void;
  onStop: () => void;
  onAttach: (files: File[]) => void;
  onRemoveAtt: (i: number) => void;
  onRemoveImg: (i: number) => void;
  onOpenTpl: () => void;
}) {
  return (
    <div className="monica-input-card">
      {/* 附件/图片预览 */}
      {(attachments.length > 0 || imageUrls.length > 0) && (
        <div className="monica-attach-area">
          {attachments.map((a, i) => (
            <Tag
              key={`att-${i}`}
              color="blue"
              closable
              style={{ borderRadius: 6, padding: '2px 8px', margin: 0 }}
              onClose={() => onRemoveAtt(i)}
            >
              📎 {a.name}
            </Tag>
          ))}
          {imageUrls.map((u, i) => (
            <div key={`img-${i}`} style={{ position: 'relative' }}>
              <AntImage
                src={u}
                width={44}
                height={44}
                style={{ objectFit: 'cover', borderRadius: 8, border: '1px solid #e5e7eb' }}
              />
              <Button
                size="small"
                type="primary"
                shape="circle"
                danger
                style={{
                  position: 'absolute', top: -6, right: -6,
                  width: 18, height: 18, fontSize: 8, padding: 0, minWidth: 18
                }}
                onClick={() => onRemoveImg(i)}
              >
                ✕
              </Button>
            </div>
          ))}
        </div>
      )}

      {/* 输入行 */}
      <div className="monica-input-row">
        <Input.TextArea
          className="monica-input-textarea"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="问我任何问题..."
          autoSize={{ minRows: 1, maxRows: 6 }}
          onPressEnter={(e) => {
            if (!e.shiftKey) {
              e.preventDefault();
              onSend();
            }
          }}
          disabled={sending}
        />
        {sending ? (
          <Button danger shape="circle" onClick={onStop} icon="■" style={{ marginBottom: 4 }} />
        ) : (
          <button
            className="monica-send-btn"
            onClick={onSend}
            disabled={!input.trim()}
            title="发送"
          >
            ↑
          </button>
        )}
      </div>

      {/* 工具栏 */}
      <div className="monica-toolbar">
        <Upload
          multiple
          beforeUpload={(_f, files) => {
            onAttach(files as File[]);
            return false;
          }}
          showUploadList={false}
          accept=".txt,.md,.markdown,.json,.csv,.pdf,.docx,.html,.htm,image/png,image/jpeg,image/webp,image/gif"
        >
          <Button type="text" icon="📎" size="small" style={{ color: '#6b7280' }} loading={uploadingAtt} />
        </Upload>
        <Button type="text" icon="📚" size="small" style={{ color: '#6b7280' }} onClick={onOpenTpl} />
        <div style={{ flex: 1 }} />
      </div>
    </div>
  );
}

function MessageItem({
  message,
  highlighted,
  branch,
  busy,
  onRegenerate,
  onSwitchBranch,
  onCopy
}: {
  message: ChatMessage;
  highlighted?: boolean;
  branch?: BranchInfo;
  busy?: boolean;
  onRegenerate?: (id: string) => void;
  onSwitchBranch?: (userMsgId: string, branchId: string) => void;
  onCopy?: (text: string) => void;
}) {
  const hasBranches = !!branch && branch.total > 1;
  const activeIdx = branch?.activeIndex ?? 0;
  const total = branch?.total ?? 1;

  const goPrev = () => {
    if (!branch || !message.parentId) return;
    const i = Math.max(0, activeIdx - 1);
    onSwitchBranch?.(message.parentId, branch.ids[i]);
  };
  const goNext = () => {
    if (!branch || !message.parentId) return;
    const i = Math.min(total - 1, activeIdx + 1);
    onSwitchBranch?.(message.parentId, branch.ids[i]);
  };

  return (
    <div
      id={'msg-' + message.id}
      style={{
        marginBottom: 12,
        padding: highlighted ? 8 : 0,
        borderRadius: highlighted ? 10 : 0,
        background: highlighted ? 'rgba(254, 243, 199, 0.6)' : 'transparent',
        transition: 'background 0.4s, padding 0.4s'
      }}
    >
      <div className={`bubble ${message.role}`}>
        {message.role === 'assistant' ? (
          <ReactMarkdown>{message.content}</ReactMarkdown>
        ) : message.content.includes('![image](') ? (
          // user 消息含图片：用 markdown 渲染
          <ReactMarkdown>{message.content}</ReactMarkdown>
        ) : (
          message.content
        )}
      </div>
      {message.role === 'assistant' && (
        <div className="monica-msg-actions" style={{ maxWidth: '78%' }}>
          {hasBranches && (
            <Space size={2}>
              <Button size="small" type="text" disabled={activeIdx === 0} onClick={goPrev}>
                ‹
              </Button>
              <span>
                {activeIdx + 1} / {total}
              </span>
              <Button size="small" type="text" disabled={activeIdx === total - 1} onClick={goNext}>
                ›
              </Button>
            </Space>
          )}
          {message.meta?.aborted && <Tag color="orange">已停止</Tag>}
          <Tooltip title="复制">
            <Button size="small" type="text" onClick={() => onCopy?.(message.content)}>
              📋
            </Button>
          </Tooltip>
          <Tooltip title="重新生成（开新分支）">
            <Button
              size="small"
              type="text"
              disabled={busy}
              onClick={() => onRegenerate?.(message.id)}
            >
              🔄
            </Button>
          </Tooltip>
        </div>
      )}
      {message.role === 'assistant' && message.meta && (
        <div style={{ maxWidth: '78%' }}>
          {!!message.meta.retrieved?.length && <RetrievedView retrieved={message.meta.retrieved} />}
          {!!message.meta.toolCalls?.length && <ToolCallView calls={message.meta.toolCalls} />}
        </div>
      )}
    </div>
  );
}

function RetrievedView({ retrieved, liveStyle }: { retrieved: RetrievedSnippet[]; liveStyle?: boolean }) {
  return (
    <Collapse
      size="small"
      ghost
      defaultActiveKey={liveStyle ? ['rag'] : undefined}
      items={[
        {
          key: 'rag',
          label: (
            <span style={{ fontSize: 12, color: '#6366f1' }}>
              🔍 RAG 命中片段 ({retrieved.length})
            </span>
          ),
          children: (
            <div style={{ fontSize: 12 }}>
              {retrieved.map((r, i) => (
                <div
                  key={i}
                  style={{
                    padding: 8,
                    background: '#f6f8ff',
                    borderRadius: 6,
                    marginBottom: 6,
                    borderLeft: '3px solid #6366f1'
                  }}
                >
                  <div style={{ color: '#6366f1', fontWeight: 600, marginBottom: 4 }}>
                    📄 {r.fileName} · 切片#{r.chunkIndex} · score {r.score.toFixed(3)}
                  </div>
                  <div style={{ color: '#374151', whiteSpace: 'pre-wrap' }}>
                    {r.preview}
                    {r.preview.length >= 200 ? '…' : ''}
                  </div>
                </div>
              ))}
            </div>
          )
        }
      ]}
    />
  );
}

function ToolCallView({ calls, liveStyle }: { calls: ToolCallTrace[]; liveStyle?: boolean }) {
  return (
    <Collapse
      size="small"
      ghost
      defaultActiveKey={liveStyle ? ['tc'] : undefined}
      items={[
        {
          key: 'tc',
          label: (
            <span style={{ fontSize: 12, color: '#f97316' }}>
              🛠 工具调用 ({calls.length})
            </span>
          ),
          children: (
            <div style={{ fontSize: 12 }}>
              {calls.map((t, i) => {
                const isPending = (t.result as any)?.pending;
                const isFailed = t.result?.ok === false;
                return (
                  <div
                    key={i}
                    style={{
                      padding: 8,
                      background: '#fff7ed',
                      borderRadius: 6,
                      marginBottom: 6,
                      borderLeft: '3px solid #f97316'
                    }}
                  >
                    <div style={{ color: '#c2410c', fontWeight: 600, marginBottom: 4 }}>
                      ⚙️ {t.name}{' '}
                      {isPending && <Tag color="processing">运行中…</Tag>}
                      {!isPending && t.result?.durationMs != null && <Tag>{t.result.durationMs}ms</Tag>}
                      {isFailed && <Tag color="error">失败</Tag>}
                    </div>
                    <div style={{ color: '#6b7280' }}>
                      <b>args:</b> {JSON.stringify(t.args)}
                    </div>
                    {!isPending && (
                      <div style={{ color: '#374151', marginTop: 4 }}>
                        <b>result:</b>{' '}
                        <code style={{ wordBreak: 'break-all' }}>
                          {JSON.stringify(t.result?.result ?? t.result?.error ?? t.result).slice(0, 500)}
                        </code>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          )
        }
      ]}
    />
  );
}