import React, { useState, useEffect } from 'react';
import { 
  Layout, 
  List, 
  Input, 
  Button, 
  Avatar, 
  Typography, 
  Space, 
  Modal,
  Form,
  Select,
  Tag,
  message,
  Dropdown,
  Popconfirm,
  Alert
} from 'antd';
import { 
  SendOutlined, 
  PlusOutlined, 
  RobotOutlined, 
  UserOutlined,
  SettingOutlined,
  MessageOutlined,
  DeleteOutlined,
  EditOutlined,
  PlusSquareOutlined
} from '@ant-design/icons';

const { Sider, Content } = Layout;
const { Title, Text } = Typography;
const { TextArea } = Input;

interface Message {
  id: string;
  content: string;
  role: 'user' | 'assistant';
  timestamp: string;
}

interface Conversation {
  id: string;
  title: string;
  botName: string;
  botType: 'feishu' | 'other';
  lastMessage: string;
  timestamp: string;
  messages: Message[];
}

interface BotConfig {
  id: string;
  name: string;
  type: 'feishu' | 'other';
  appId: string;
  appSecret: string;
  description: string;
}

const ConversationsPage: React.FC = () => {
  const [conversations, setConversations] = useState<Conversation[]>([]);
  const [selectedConversation, setSelectedConversation] = useState<Conversation | null>(null);
  const [messageInput, setMessageInput] = useState('');
  const [botConfigs, setBotConfigs] = useState<BotConfig[]>([]);
  const [showBotModal, setShowBotModal] = useState(false);
  const [showConversationModal, setShowConversationModal] = useState(false);
  const [editingBot, setEditingBot] = useState<BotConfig | null>(null);
  const [form] = Form.useForm();
  const [conversationForm] = Form.useForm();

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

  const loadData = () => {
    // 加载飞书机器人配置
    const savedBots = localStorage.getItem('botConfigs');
    if (savedBots) {
      setBotConfigs(JSON.parse(savedBots));
    } else {
      // 默认配置示例
      const defaultBots: BotConfig[] = [
        {
          id: '1',
          name: '助手机器人',
          type: 'feishu',
          appId: 'cli_xxxxxxxxxxxxx',
          appSecret: 'xxxxxxxxxxxxx',
          description: '用于日常事务处理和提醒'
        }
      ];
      setBotConfigs(defaultBots);
      localStorage.setItem('botConfigs', JSON.stringify(defaultBots));
    }

    // 加载会话列表
    const savedConversations = localStorage.getItem('conversations');
    if (savedConversations) {
      setConversations(JSON.parse(savedConversations));
    } else {
      // 默认会话示例
      const defaultConversations: Conversation[] = [
        {
          id: '1',
          title: '欢迎使用飞书机器人',
          botName: '助手机器人',
          botType: 'feishu',
          lastMessage: '你好！我是飞书助手机器人，有什么可以帮助您的吗？',
          timestamp: new Date().toISOString(),
          messages: [
            {
              id: '1',
              content: '你好！我是飞书助手机器人，有什么可以帮助您的吗？',
              role: 'assistant',
              timestamp: new Date().toISOString()
            }
          ]
        }
      ];
      setConversations(defaultConversations);
      localStorage.setItem('conversations', JSON.stringify(defaultConversations));
    }
  };

  const handleSendMessage = async () => {
    if (!messageInput.trim() || !selectedConversation) return;

    const newMessage: Message = {
      id: Date.now().toString(),
      content: messageInput,
      role: 'user',
      timestamp: new Date().toISOString()
    };

    const updatedConversation = {
      ...selectedConversation,
      messages: [...selectedConversation.messages, newMessage],
      lastMessage: messageInput,
      timestamp: new Date().toISOString()
    };

    setSelectedConversation(updatedConversation);
    setConversations(conversations.map(conv => 
      conv.id === selectedConversation.id ? updatedConversation : conv
    ));

    // 保存到本地存储
    localStorage.setItem('conversations', JSON.stringify(
      conversations.map(conv => conv.id === selectedConversation.id ? updatedConversation : conv)
    ));

    setMessageInput('');

    // 模拟飞书应用回复
    setTimeout(() => {
      const botReply: Message = {
        id: (Date.now() + 1).toString(),
        content: `收到您的消息："${messageInput}"。这是一个模拟的飞书应用回复。在实际使用中，这里会调用飞书自建应用API来发送消息。`,
        role: 'assistant',
        timestamp: new Date().toISOString()
      };

      const updatedWithReply = {
        ...updatedConversation,
        messages: [...updatedConversation.messages, botReply],
        lastMessage: botReply.content,
        timestamp: new Date().toISOString()
      };

      setSelectedConversation(updatedWithReply);
      setConversations(conversations.map(conv => 
        conv.id === selectedConversation.id ? updatedWithReply : conv
      ));

      localStorage.setItem('conversations', JSON.stringify(
        conversations.map(conv => conv.id === selectedConversation.id ? updatedWithReply : conv)
      ));
    }, 1000);
  };


  const handleSubmitConversation = () => {
    conversationForm.validateFields().then(values => {
      const selectedBot = botConfigs.find(bot => bot.id === values.botId);
      if (!selectedBot) return;

      const newConversation: Conversation = {
        id: Date.now().toString(),
        title: values.title,
        botName: selectedBot.name,
        botType: selectedBot.type,
        lastMessage: '新会话已创建',
        timestamp: new Date().toISOString(),
        messages: []
      };

      setConversations([newConversation, ...conversations]);
      localStorage.setItem('conversations', JSON.stringify([newConversation, ...conversations]));
      setShowConversationModal(false);
      conversationForm.resetFields();
      setSelectedConversation(newConversation);
      message.success('会话创建成功');
    });
  };

  const handleAddBot = () => {
    setEditingBot(null);
    form.resetFields();
    setShowBotModal(true);
  };

  const handleEditBot = (bot: BotConfig) => {
    setEditingBot(bot);
    form.setFieldsValue(bot);
    setShowBotModal(true);
  };

  const handleDeleteBot = (botId: string) => {
    const updatedBots = botConfigs.filter(bot => bot.id !== botId);
    setBotConfigs(updatedBots);
    localStorage.setItem('botConfigs', JSON.stringify(updatedBots));
    message.success('机器人配置已删除');
  };

  const handleSubmitBot = () => {
    form.validateFields().then(values => {
      if (editingBot) {
        // 编辑模式
        const updatedBot: BotConfig = {
          ...editingBot,
          name: values.name,
          type: values.type,
          appId: values.appId,
          appSecret: values.appSecret,
          description: values.description
        };
        const updatedBots = botConfigs.map(bot => 
          bot.id === editingBot.id ? updatedBot : bot
        );
        setBotConfigs(updatedBots);
        localStorage.setItem('botConfigs', JSON.stringify(updatedBots));
        message.success('飞书应用配置已更新');
      } else {
        // 新增模式
        const newBot: BotConfig = {
          id: Date.now().toString(),
          name: values.name,
          type: values.type,
          appId: values.appId,
          appSecret: values.appSecret,
          description: values.description
        };
        setBotConfigs([...botConfigs, newBot]);
        localStorage.setItem('botConfigs', JSON.stringify([...botConfigs, newBot]));
        message.success('飞书应用配置已添加');
      }
      setShowBotModal(false);
      form.resetFields();
      setEditingBot(null);
    });
  };

  const handleDeleteConversation = (conversationId: string) => {
    const updatedConversations = conversations.filter(conv => conv.id !== conversationId);
    setConversations(updatedConversations);
    localStorage.setItem('conversations', JSON.stringify(updatedConversations));
    if (selectedConversation?.id === conversationId) {
      setSelectedConversation(null);
    }
    message.success('会话已删除');
  };

  const getBotItems = () => {
    return [
      {
        key: 'add',
        label: (
          <div onClick={() => handleAddBot()}>
            <PlusSquareOutlined style={{ marginRight: '8px' }} />
            添加飞书应用
          </div>
        )
      },
      {
        type: 'divider' as const,
      },
      ...botConfigs.map(bot => ({
        key: bot.id,
        label: (
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span>
              <RobotOutlined style={{ marginRight: '8px', color: '#1890ff' }} />
              {bot.name}
              <Tag color={bot.type === 'feishu' ? 'blue' : 'green'} style={{ marginLeft: '8px' }}>
                {bot.type === 'feishu' ? '飞书' : '其他'}
              </Tag>
            </span>
            <Space size={4}>
              <EditOutlined 
                style={{ color: '#52c41a', cursor: 'pointer' }} 
                onClick={(e) => { e.stopPropagation(); handleEditBot(bot); }}
              />
              <Popconfirm
                title="确认删除"
                description="确定要删除这个飞书应用配置吗？"
                onConfirm={(e) => { 
                  e?.stopPropagation(); 
                  handleDeleteBot(bot.id); 
                }}
                okText="确定"
                cancelText="取消"
              >
                <DeleteOutlined 
                  style={{ color: '#ff4d4f', cursor: 'pointer' }}
                  onClick={(e) => e.stopPropagation()}
                />
              </Popconfirm>
            </Space>
          </div>
        )
      }))
    ];
  };

  return (
    <div style={{ height: 'calc(100vh - 184px)' }}>
      <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Title level={2} style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '12px' }}>
            <MessageOutlined style={{ color: '#1890ff' }} />
            飞书机器人会话
          </Title>
          <Text type="secondary" style={{ marginTop: '8px', display: 'block' }}>
            与飞书自建应用进行对话，指挥AI助手完成各种任务
          </Text>
        </div>
        <Dropdown 
          menu={{ items: getBotItems() }}
          trigger={['click']}
          placement="bottomRight"
        >
          <Button icon={<SettingOutlined />}>
            飞书应用配置 ({botConfigs.length})
          </Button>
        </Dropdown>
      </div>

      <Layout style={{ 
        background: 'white', 
        borderRadius: '12px', 
        height: 'calc(100% - 80px)',
        overflow: 'hidden'
      }}>
        {/* 左侧会话列表 */}
        <Sider 
          width={320} 
          style={{ 
            background: '#fafafa', 
            borderRight: '1px solid #f0f0f0',
            height: '100%',
            display: 'flex',
            flexDirection: 'column'
          }}
        >
          <div style={{ padding: '16px', borderBottom: '1px solid #f0f0f0' }}>
            <Input.Search 
              placeholder="搜索会话..." 
              style={{ width: '100%' }}
            />
          </div>
          
          {/* 飞书应用列表 */}
          <div style={{ padding: '12px 16px', borderBottom: '1px solid #f0f0f0' }}>
            <div style={{ fontSize: '12px', color: '#999', marginBottom: '8px', fontWeight: 'bold' }}>
              飞书应用
            </div>
            {botConfigs.length > 0 ? (
              <Space direction="vertical" style={{ width: '100%' }} size={8}>
                {botConfigs.map(bot => {
                  const hasConversation = conversations.some(conv => conv.botName === bot.name);
                  return (
                    <div
                      key={bot.id}
                      onClick={() => {
                        if (hasConversation) {
                          const existingConv = conversations.find(conv => conv.botName === bot.name);
                          if (existingConv) {
                            setSelectedConversation(existingConv);
                          }
                        } else {
                          // 创建新会话
                          const newConversation: Conversation = {
                            id: Date.now().toString(),
                            title: bot.name,
                            botName: bot.name,
                            botType: bot.type,
                            lastMessage: '新会话已创建',
                            timestamp: new Date().toISOString(),
                            messages: []
                          };
                          setConversations([newConversation, ...conversations]);
                          localStorage.setItem('conversations', JSON.stringify([newConversation, ...conversations]));
                          setSelectedConversation(newConversation);
                        }
                      }}
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        gap: '12px',
                        padding: '10px 12px',
                        background: selectedConversation?.botName === bot.name ? '#e6f7ff' : 'white',
                        borderRadius: '8px',
                        cursor: 'pointer',
                        border: '1px solid #f0f0f0',
                        transition: 'all 0.3s'
                      }}
                      onMouseEnter={(e) => {
                        if (selectedConversation?.botName !== bot.name) {
                          e.currentTarget.style.background = '#f5f5f5';
                          e.currentTarget.style.borderColor = '#d9d9d9';
                        }
                      }}
                      onMouseLeave={(e) => {
                        if (selectedConversation?.botName !== bot.name) {
                          e.currentTarget.style.background = 'white';
                          e.currentTarget.style.borderColor = '#f0f0f0';
                        }
                      }}
                    >
                      <Avatar 
                        icon={<RobotOutlined />} 
                        style={{ backgroundColor: '#1890ff' }}
                      />
                      <div style={{ flex: 1 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                          <Text strong style={{ fontSize: '14px' }}>
                            {bot.name}
                          </Text>
                          <Tag color={bot.type === 'feishu' ? 'blue' : 'green'}>
                            {bot.type === 'feishu' ? '飞书' : '其他'}
                          </Tag>
                        </div>
                        <Text type="secondary" style={{ fontSize: '11px' }}>
                          {hasConversation ? '点击继续对话' : '点击开始对话'}
                        </Text>
                      </div>
                    </div>
                  );
                })}
              </Space>
            ) : (
              <div style={{ textAlign: 'center', padding: '20px 0', color: '#999' }}>
                <Text type="secondary">暂无飞书应用</Text>
                <div style={{ marginTop: '8px' }}>
                  <Button type="link" size="small" onClick={handleAddBot}>
                    添加飞书应用
                  </Button>
                </div>
              </div>
            )}
          </div>
          
          {/* 会话列表 */}
          <div style={{ padding: '12px 16px 0', flex: 1, overflowY: 'auto' }}>
            <div style={{ fontSize: '12px', color: '#999', marginBottom: '8px', fontWeight: 'bold' }}>
              会话列表
            </div>
            <List
              dataSource={conversations}
              renderItem={(conversation) => (
                <List.Item
                  key={conversation.id}
                  onClick={() => setSelectedConversation(conversation)}
                  style={{
                    padding: '12px',
                    cursor: 'pointer',
                    background: selectedConversation?.id === conversation.id ? '#e6f7ff' : 'transparent',
                    borderRadius: '8px',
                    marginBottom: '8px',
                    border: '1px solid #f0f0f0',
                    transition: 'all 0.3s'
                  }}
                  onMouseEnter={(e) => {
                    if (selectedConversation?.id !== conversation.id) {
                      e.currentTarget.style.background = '#f5f5f5';
                      e.currentTarget.style.borderColor = '#d9d9d9';
                    }
                  }}
                  onMouseLeave={(e) => {
                    if (selectedConversation?.id !== conversation.id) {
                      e.currentTarget.style.background = 'transparent';
                      e.currentTarget.style.borderColor = '#f0f0f0';
                    }
                  }}
                >
                  <List.Item.Meta
                    avatar={
                      <Avatar 
                        icon={<RobotOutlined />} 
                        style={{ backgroundColor: '#1890ff' }}
                      />
                    }
                    title={
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <Text strong ellipsis style={{ maxWidth: '140px' }}>
                          {conversation.title}
                        </Text>
                        <Tag color={conversation.botType === 'feishu' ? 'blue' : 'green'}>
                          {conversation.botType === 'feishu' ? '飞书' : '其他'}
                        </Tag>
                      </div>
                    }
                    description={
                      <div>
                        <Text ellipsis style={{ fontSize: '11px', color: '#666' }}>
                          {conversation.lastMessage}
                        </Text>
                        <Text style={{ fontSize: '10px', color: '#999', display: 'block', marginTop: '2px' }}>
                          {new Date(conversation.timestamp).toLocaleString()}
                        </Text>
                      </div>
                    }
                  />
                </List.Item>
              )}
            />
          </div>
        </Sider>

        {/* 右侧会话内容 */}
        <Content style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
          {selectedConversation ? (
            <>
              {/* 会话头部 */}
              <div style={{ 
                padding: '16px 24px', 
                borderBottom: '1px solid #f0f0f0',
                background: '#fafafa'
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <Space>
                    <Avatar icon={<RobotOutlined />} style={{ backgroundColor: '#1890ff' }} />
                    <div>
                      <Title level={4} style={{ margin: 0 }}>
                        {selectedConversation.title}
                      </Title>
                      <Text type="secondary" style={{ fontSize: '12px' }}>
                        飞书机器人：{selectedConversation.botName}
                      </Text>
                    </div>
                  </Space>
                  <Popconfirm
                    title="确认删除"
                    description="确定要删除这个会话吗？"
                    onConfirm={() => handleDeleteConversation(selectedConversation.id)}
                    okText="确定"
                    cancelText="取消"
                  >
                    <Button danger icon={<DeleteOutlined />}>
                      删除会话
                    </Button>
                  </Popconfirm>
                </div>
              </div>

              {/* 消息列表 */}
              <div style={{ 
                flex: 1, 
                padding: '24px', 
                overflowY: 'auto',
                background: 'white'
              }}>
                {selectedConversation.messages.length === 0 ? (
                  <div style={{ 
                    textAlign: 'center', 
                    padding: '100px 0', 
                    color: '#999' 
                  }}>
                    <MessageOutlined style={{ fontSize: '64px', color: '#d9d9d9', marginBottom: '16px' }} />
                    <div>暂无消息，开始与机器人对话吧！</div>
                  </div>
                ) : (
                  <Space direction="vertical" style={{ width: '100%' }} size={16}>
                    {selectedConversation.messages.map((message) => (
                      <div
                        key={message.id}
                        style={{
                          display: 'flex',
                          justifyContent: message.role === 'user' ? 'flex-end' : 'flex-start',
                          marginBottom: '16px'
                        }}
                      >
                        <div style={{ 
                          maxWidth: '70%',
                          display: 'flex',
                          gap: '8px',
                          alignItems: 'flex-start'
                        }}>
                          {message.role === 'assistant' && (
                            <Avatar icon={<RobotOutlined />} style={{ backgroundColor: '#1890ff' }} />
                          )}
                          <div>
                            {message.role === 'assistant' && (
                              <Text type="secondary" style={{ fontSize: '12px', marginLeft: '8px' }}>
                                {selectedConversation.botName}
                              </Text>
                            )}
                            <div style={{
                              background: message.role === 'user' ? '#1890ff' : '#f5f5f5',
                              color: message.role === 'user' ? 'white' : 'black',
                              padding: '12px 16px',
                              borderRadius: '8px',
                              marginTop: '4px',
                              wordBreak: 'break-word'
                            }}>
                              {message.content}
                            </div>
                            <Text type="secondary" style={{ fontSize: '11px', marginTop: '4px', display: 'block' }}>
                              {new Date(message.timestamp).toLocaleString()}
                            </Text>
                          </div>
                          {message.role === 'user' && (
                            <Avatar icon={<UserOutlined />} style={{ backgroundColor: '#52c41a' }} />
                          )}
                        </div>
                      </div>
                    ))}
                  </Space>
                )}
              </div>

              {/* 消息输入区 */}
              <div style={{ 
                padding: '16px 24px', 
                borderTop: '1px solid #f0f0f0',
                background: '#fafafa'
              }}>
                <Space.Compact style={{ width: '100%' }}>
                  <TextArea
                    value={messageInput}
                    onChange={(e) => setMessageInput(e.target.value)}
                    placeholder="输入消息，按Enter发送，Shift+Enter换行"
                    autoSize={{ minRows: 1, maxRows: 4 }}
                    onPressEnter={(e) => {
                      if (!e.shiftKey) {
                        e.preventDefault();
                        handleSendMessage();
                      }
                    }}
                  />
                  <Button 
                    type="primary" 
                    icon={<SendOutlined />}
                    onClick={handleSendMessage}
                    style={{ height: 'auto' }}
                  >
                    发送
                  </Button>
                </Space.Compact>
              </div>
            </>
          ) : (
            <div style={{ 
              flex: 1, 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center',
              background: 'white'
            }}>
              <div style={{ textAlign: 'center', color: '#999' }}>
                <MessageOutlined style={{ fontSize: '64px', color: '#d9d9d9', marginBottom: '16px' }} />
                <div style={{ fontSize: '16px', marginBottom: '16px' }}>
                  选择左侧的飞书应用开始对话
                </div>
                {botConfigs.length === 0 && (
                  <div>
                    <div style={{ marginBottom: '16px' }}>或先添加飞书应用配置</div>
                    <Button 
                      type="primary" 
                      icon={<PlusOutlined />}
                      onClick={handleAddBot}
                    >
                      添加飞书应用
                    </Button>
                  </div>
                )}
              </div>
            </div>
          )}
        </Content>
      </Layout>

      {/* 飞书应用配置弹窗 */}
      <Modal
        title={
          <Space>
            <RobotOutlined style={{ color: '#1890ff' }} />
            {editingBot ? '编辑飞书应用配置' : '添加飞书自建应用'}
          </Space>
        }
        open={showBotModal}
        onOk={handleSubmitBot}
        onCancel={() => {
          setShowBotModal(false);
          form.resetFields();
          setEditingBot(null);
        }}
        width={700}
        okText="确定"
        cancelText="取消"
      >
        <Alert
          message="飞书自建应用配置说明"
          description={
            <div>
              <p>1. 在飞书开放平台创建自建应用</p>
              <p>2. 在「凭证与基础信息」页面复制 App ID 和 App Secret</p>
              <p>3. 在「权限管理」配置必要权限（如 im:message、im:resource 等）</p>
            </div>
          }
          type="info"
          showIcon
          style={{ marginBottom: '16px' }}
        />

        <Form
          form={form}
          layout="vertical"
          style={{ marginTop: '24px' }}
          initialValues={{ 
            type: 'feishu'
          }}
        >
          <Form.Item
            name="name"
            label="应用名称"
            rules={[{ required: true, message: '请输入应用名称' }]}
          >
            <Input placeholder="例如：AI助手" />
          </Form.Item>

          <Form.Item
            name="type"
            label="应用类型"
            rules={[{ required: true, message: '请选择应用类型' }]}
          >
            <Select>
              <Select.Option value="feishu">飞书自建应用</Select.Option>
              <Select.Option value="other">其他应用</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item
            name="appId"
            label="App ID"
            rules={[{ required: true, message: '请输入 App ID' }]}
          >
            <Input 
              placeholder="cli_xxxxxxxxxxxxx" 
              prefix={<span style={{ color: '#999' }}>App ID:</span>}
            />
          </Form.Item>

          <Form.Item
            name="appSecret"
            label="App Secret"
            rules={[{ required: true, message: '请输入 App Secret' }]}
          >
            <Input.Password 
              placeholder="xxxxxxxxxxxxx"
              prefix={<span style={{ color: '#999' }}>Secret:</span>}
            />
          </Form.Item>

          <Form.Item
            name="description"
            label="应用描述"
          >
            <TextArea 
              placeholder="描述应用的用途和功能" 
              rows={3}
              showCount
              maxLength={200}
            />
          </Form.Item>
        </Form>
      </Modal>

      {/* 新建会话弹窗 */}
      <Modal
        title={
          <Space>
            <MessageOutlined style={{ color: '#1890ff' }} />
            新建会话
          </Space>
        }
        open={showConversationModal}
        onOk={handleSubmitConversation}
        onCancel={() => {
          setShowConversationModal(false);
          conversationForm.resetFields();
        }}
        okText="创建"
        cancelText="取消"
      >
        <Form
          form={conversationForm}
          layout="vertical"
          style={{ marginTop: '24px' }}
        >
          <Form.Item
            name="title"
            label="会话标题"
            rules={[{ required: true, message: '请输入会话标题' }]}
          >
            <Input placeholder="例如：工作安排助手" />
          </Form.Item>

          <Form.Item
            name="botId"
            label="选择飞书应用"
            rules={[{ required: true, message: '请选择飞书应用' }]}
          >
            <Select placeholder="选择要使用的飞书应用">
              {botConfigs.map(bot => (
                <Select.Option key={bot.id} value={bot.id}>
                  <Space>
                    <RobotOutlined />
                    {bot.name}
                    <Tag color={bot.type === 'feishu' ? 'blue' : 'green'}>
                      {bot.type === 'feishu' ? '飞书' : '其他'}
                    </Tag>
                  </Space>
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default ConversationsPage;