import React, {useEffect, useRef, useState} from 'react';
import {
  Bubble, type BubbleListProps,
  Conversations,
  Sender,
  Welcome,
} from '@ant-design/x';
import type { BubbleItemType } from '@ant-design/x';
import {useXConversations, XRequest} from '@ant-design/x-sdk';
import {App, Avatar, Button, Card, Space, Typography, theme, type UploadFile} from 'antd';
import {
  DeleteOutlined,
  EditOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { useNavigate, useSearchParams } from 'react-router';
import { XMarkdown } from '@ant-design/x-markdown';
import '@ant-design/x-markdown/themes/light.css';
import { getConversations, getMessages, deleteConversation } from '@/api/ai/chat.ts';
import { getAgent } from '@/api/ai/agent.ts';
import type { IAgent } from '@/domain/iAgents.ts';
import useGlobalStore from "@/stores/global";

const { Text } = Typography;

/** 自定义气泡扩展字段（通过 extraInfo 传递） */
interface ChatExtraInfo {
  thinking?: string;
  isStreaming?: boolean;
  files?: UploadFile[];
}


const ChatPage: React.FC = () => {
  const { t } = useTranslation();
  const { message: appMessage, modal } = App.useApp();
  const { token } = theme.useToken();
  const themeConfig = useGlobalStore(state => state.themeConfig)
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const agentIdParam = searchParams.get('agent_id');

  const [agent, setAgent] = useState<IAgent | null>(null);

  const bubbleListRef = useRef<any>(null);

  const {
    conversations,
    setConversations,
    activeConversationKey,
    setActiveConversationKey,
  } = useXConversations({});

  // 消息列表
  const [messages, setMessages] = useState<BubbleItemType[]>([]);
  // 加载状态
  const [loading, setLoading] = useState(false);
  // 输入框内容
  const [senderValue, setSenderValue] = useState<string>("");
  // 输入框只读
  const [senderDisabled, setSenderDisabled] = useState<boolean>(false);

  // 加载会话列表
  const loadConversations = async () => {
    const {data} = await getConversations();
    if (data.success && data.data) {
      setConversations(data.data);
    }
  }

  // 加载消息列表
  const loadMessages = async (conversationId: string) => {
    const { data } = await getMessages(conversationId);
    if (data.success && data.data) {
      setMessages(data.data);
      setTimeout(() => {
        bubbleListRef.current?.scrollTo({ top: 'bottom' });
      }, 100);
    }
  }

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

  useEffect(() => {
    if (agentIdParam) {
      getAgent(Number(agentIdParam)).then(({ data }) => {
        if (data.success && data.data) {
          setAgent(data.data);
        }
      });
    }
  }, [agentIdParam]);

  // 会话操作
  const handleActiveChange = (key: string) => {
    setActiveConversationKey(key);
    loadMessages(key);
  }

  // 新建会话
  const handleNewChat = () => {
    setActiveConversationKey('');
    setMessages([]);
  };

  // 删除会话
  const handleDelete = (convId: string) => {
    modal.confirm({
      title: t('ai.chat.delete.confirm'),
      okButtonProps: { danger: true },
      onOk: async () => {
        await deleteConversation(convId);
        appMessage.success(t('ai.chat.delete.success'));
        if (activeConversationKey === convId) {
          setActiveConversationKey('');
          setMessages([]);
        }
        await loadConversations();
      },
    });
  }

  // 发送消息
  const handleSend = async (text: string) => {
    if (!text.trim() || loading) return;

    // 用户消息
    const userMessage: BubbleItemType = {
      key: `user-${Date.now()}`,
      role: 'user',
      content: text,
      status: 'success',
    };

    // AI 占位消息
    const aiMessage: BubbleItemType = {
      key: `assistant-${Date.now()}`,
      role: 'assistant',
      content: '',
      loading: true,
      extraInfo: { isStreaming: true } as ChatExtraInfo,
    };

    setMessages((prev) => [...prev, userMessage, aiMessage]);
    setLoading(true);
    setSenderDisabled(true);

    const token = localStorage.getItem('token');
    const baseUrl = import.meta.env.VITE_BASE_URL || '';
    let aiContent = '';
    XRequest(`${baseUrl}/ai/chat/send`, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`,
        'Accept': 'text/event-stream',
      },
      method: "post",
      params: {
        conversation_id: activeConversationKey,
        message: text,
        agent_id: agentIdParam ? Number(agentIdParam) : undefined,
      },
      callbacks: {
        onSuccess: async () => {
          setLoading(false);
          setSenderValue("");
          setSenderDisabled(false);
          if (!activeConversationKey) {
            const {data} = await getConversations();
            if (data.success && data.data && data.data.length > 0) {
              setConversations(data.data);
              const latest = data.data[0].key;
              setActiveConversationKey(latest as string);
            }
          }
        },
        onError: () => {
          setLoading(false);
          setSenderDisabled(false);
        },
        onUpdate: (msg) => {
          console.log("onUpdate", msg);
          const payload = msg.data;
          if (payload === '[DONE]') return;
          try {
            const event = JSON.parse(payload);
            // 正文内容增量
            if (event.type === 'text_delta' && event.delta) {
              aiContent += event.delta;
              setMessages((prev) => prev.map(m => (
                m.key === aiMessage.key ? {
                  ...m,
                  content: aiContent,
                  loading: false
                } : m
              )));
            }
            // 内容结束
            if (event.type === 'text_end') {
              setMessages((prev) => prev.map(m => (
                m.key === aiMessage.key ? {
                  ...m,
                  key: event.message_id,
                  loading: false
                } : m
              )));
            }
          } catch (err) {
            /* empty */
          }
        },
      }
    })
  }

  // ==================== 角色配置 ====================
  const roleConfig: BubbleListProps['role'] = {
    assistant: {
      placement: 'start',
      variant: 'filled',
      avatar: <Avatar src={agent?.icon || 'https://file.xinadmin.cn/file/favicons.ico'} />,
      // AI 消息内容：Markdown 渲染
      contentRender: (content: string, info: any) => {
        if (!content) return null;
        const isStreaming = info?.extraInfo?.isStreaming === true;
        return (
          <XMarkdown
            content={content}
            streaming={{
              hasNextChunk: isStreaming,
              enableAnimation: true,
              tail: isStreaming,
            }}
            openLinksInNewTab
            escapeRawHtml
          />
        );
      },
    },
    user: {
      placement: 'end',
      variant: 'filled',
      avatar: (
        <Avatar
          icon={<UserOutlined />}
          style={{ background: token.colorFillSecondary, color: token.colorTextSecondary }}
          size={36}
        />
      ),
    },
  };

  const hasMessages = messages.length > 0;

  return (
    <Card
      styles={{ body: { padding: 0, overflow: 'hidden', display: 'flex', height: 'calc(100vh - 180px)' } }}
      title={
        <Space align="center">
          {agent ? (
            <>
              <Avatar src={agent.icon} size={36} />
              <div>
                <span style={{ fontSize: 18, fontWeight: 600, marginRight: 10 }}>{agent.name}</span>
                {agent.description && (
                  <Text type="secondary" style={{ fontSize: 12, lineHeight: 1  }}>{agent.description}</Text>
                )}
              </div>
            </>
          ) : (
            <span>{t('ai.chat.defaultTitle')}</span>
          )}
        </Space>
      }
      extra={
        <Button onClick={() => navigate('/ai/agent')}>
          {t('ai.chat.switchAgent')}
        </Button>
      }
    >
      {/* 左侧会话列表 */}
      <div
        style={{
          width: 280,
          borderRight: `1px solid ${token.colorBorderSecondary}`
        }}
      >
        <Conversations
          items={conversations}
          activeKey={activeConversationKey}
          onActiveChange={handleActiveChange}
          menu={(item) => ({
            items: [
              {
                label: 'Rename',
                key: 'Rename',
                icon: <EditOutlined />,
              },
              {
                type: 'divider',
              },
              {
                label: 'Delete Chat',
                key: 'delete',
                icon: <DeleteOutlined />,
                danger: true,
                onClick: () => handleDelete(item.key as string),
              },
            ],
          })}
          creation={{
            onClick: handleNewChat,
          }}
          style={{ flex: 1, overflow: 'auto' }}
        />
      </div>

      {/* 右侧对话区域 */}
      <div className={"flex-1 flex flex-col min-w-0 px-1"}>
        {/* 空状态 - 欢迎页 */}
        {!hasMessages && (
          <div className={"h-full flex items-center justify-center"}>
            <Welcome
              icon={agent?.icon || "https://file.xinadmin.cn/file/favicons.ico"}
              style={{
                backgroundImage: themeConfig.themeScheme === 'dark' ?
                  'linear-gradient(97deg, rgba(90,196,255,0.12) 0%, rgba(174,136,255,0.12) 100%)'
                  : 'linear-gradient(97deg, #f2f9fe 0%, #f7f3ff 100%)',
                borderRadius: 20,
                width: '80%',
                padding: '20px'
              }}
              title={t('ai.chat.welcome.title')}
              description={t('ai.chat.welcome.description')}
              variant="borderless"
            />
          </div>
        )}

        {/* 消息列表 */}
        {hasMessages && (
          <div style={{ flex: 1, overflow: 'hidden' }}>
            <Bubble.List
              ref={bubbleListRef}
              items={messages}
              autoScroll
              style={{ height: '100%', padding: 16 }}
              role={roleConfig}
            />
          </div>
        )}

        {/* 发送区域 */}
        <div style={{ padding: '0 16px 16px' }}>
          <Sender
            loading={loading}
            disabled={senderDisabled}
            value={senderValue}
            onChange={setSenderValue}
            placeholder={t('ai.chat.placeholder')}
            onSubmit={handleSend}
            onCancel={() => setLoading(false)}
            autoSize={{minRows: 1, maxRows: 6}}
          />
        </div>
      </div>
    </Card>
  );
};

export default ChatPage;