import React, { useState, useEffect, useRef } from 'react'
import { Card, Button, Input, List, Badge, Modal, Form, Select, Tabs, Avatar, Empty, message, Popconfirm, Space, Tag, Tooltip, Popover, Image } from 'antd'
import { PlusOutlined, SendOutlined, TeamOutlined, UserOutlined, ArrowLeftOutlined, DeleteOutlined, SettingOutlined, UserDeleteOutlined, UserAddOutlined, CheckCircleFilled, ClockCircleOutlined, SmileOutlined, PictureOutlined, VideoCameraOutlined, PaperClipOutlined, FileOutlined, DownloadOutlined } from '@ant-design/icons'
import axios from 'axios'

const { TextArea } = Input

// 常用表情面板
const EMOJIS = ['😀', '😄', '😂', '🤣', '😊', '😍', '😘', '😎', '🤔', '😅', '😭', '😡', '👍', '👎', '👏', '🙏', '🤝', '💪', '❤️', '💔', '🎉', '🎂', '🌹', '☕', '🍺', '⚽', '🌙', '☀️', '⛅', '🌈', '🔥', '✨', '💯', '✅', '❌', '⚠️', '📷', '🎬', '🎤', '📱', '💻', '🚗', '✈️', '⏰', '📅', '💰', '🎁', '🏆']

// 文件大小格式化
function formatSize(size) {
  if (!size && size !== 0) return ''
  if (size < 1024) return size + ' B'
  if (size < 1024 * 1024) return (size / 1024).toFixed(1) + ' KB'
  if (size < 1024 * 1024 * 1024) return (size / 1024 / 1024).toFixed(1) + ' MB'
  return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB'
}

// 附件访问地址：拼上 baseURL 与 token（img/video/下载链接无法携带 Authorization 头）
function fileSrc(url) {
  if (!url) return ''
  const token = localStorage.getItem('token') || ''
  return axios.getUri({ url }) + (url.includes('?') ? '&' : '?') + 'token=' + encodeURIComponent(token)
}

// 移动端检测
function useIsMobile() {
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768)
  useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < 768)
    window.addEventListener('resize', onResize)
    return () => window.removeEventListener('resize', onResize)
  }, [])
  return isMobile
}

function Messages({ user }) {
  const isMobile = useIsMobile()
  const [conversations, setConversations] = useState([])
  const [allUsers, setAllUsers] = useState([])
  const [activeConv, setActiveConv] = useState(null)
  const [messages, setMessages] = useState([])
  const [inputValue, setInputValue] = useState('')
  const [sending, setSending] = useState(false)
  const [createVisible, setCreateVisible] = useState(false)
  const [membersVisible, setMembersVisible] = useState(false)
  const [inviteVisible, setInviteVisible] = useState(false)
  const [inviteIds, setInviteIds] = useState([])
  const [createForm] = Form.useForm()
  const [creating, setCreating] = useState(false)
  const [uploading, setUploading] = useState(false)
  const imgInputRef = useRef(null)
  const videoInputRef = useRef(null)
  const fileInputRef = useRef(null)
  const bottomRef = useRef(null)
  const activeConvRef = useRef(null)
  const lastMsgIdRef = useRef(0)
  const readStatusRef = useRef({})

  // 打开会话时同步到 ref（供轮询闭包使用）
  const openConversation = (conv) => {
    setActiveConv(conv)
    activeConvRef.current = conv
    lastMsgIdRef.current = 0
    readStatusRef.current = {}
    setMessages([])
  }

  const closeConversation = () => {
    setActiveConv(null)
    activeConvRef.current = null
    readStatusRef.current = {}
    setMessages([])
  }

  const fetchConversations = async () => {
    try {
      const res = await axios.get('/api/chat/conversations')
      if (res.data.success) setConversations(res.data.data)
    } catch (err) { /* 静默 */ }
  }

  const fetchUsers = async () => {
    try {
      const res = await axios.get('/api/chat/users')
      if (res.data.success) setAllUsers(res.data.data)
    } catch (err) { /* 静默 */ }
  }

  // 拉取当前打开会话的消息（首次全量，之后增量）
  const fetchMessages = async (conv) => {
    if (!conv) return
    try {
      const after = lastMsgIdRef.current
      const res = await axios.get(`/api/chat/conversations/${conv.id}/messages`, { params: after ? { after } : {} })
      if (res.data.success) {
        const rows = res.data.data
        if (rows.length > 0) {
          lastMsgIdRef.current = rows[rows.length - 1].id
          setMessages(prev => after > 0 ? [...prev, ...rows] : rows)
        }
      }
    } catch (err) { /* 静默 */ }
  }

  // 拉取当前打开会话的已读回执，合并进消息列表
  const fetchReadStatus = async (conv) => {
    if (!conv) return
    try {
      const res = await axios.get(`/api/chat/conversations/${conv.id}/read-status`)
      if (res.data.success) {
        readStatusRef.current = res.data.data
        setMessages(prev => prev.map(m => res.data.data[m.id] ? { ...m, read_status: res.data.data[m.id] } : m))
      }
    } catch (err) { /* 静默 */ }
  }

  // 会话列表 5 秒轮询；打开的会话 3 秒轮询消息，4 秒轮询已读回执
  useEffect(() => {
    fetchConversations()
    fetchUsers()
    const convTimer = setInterval(fetchConversations, 5000)
    const msgTimer = setInterval(() => fetchMessages(activeConvRef.current), 3000)
    const readTimer = setInterval(() => fetchReadStatus(activeConvRef.current), 4000)
    return () => { clearInterval(convTimer); clearInterval(msgTimer); clearInterval(readTimer) }
  }, [])

  // 新消息自动滚动到底部
  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [messages.length])

  const handleSend = async () => {
    const content = inputValue.trim()
    if (!content || !activeConv || sending) return
    setSending(true)
    try {
      const res = await axios.post(`/api/chat/conversations/${activeConv.id}/messages`, { content })
      if (res.data.success) {
        setInputValue('')
        await fetchMessages(activeConvRef.current)
        fetchConversations()
      }
    } catch (err) {
      message.error(err.response?.data?.message || '发送失败')
    } finally {
      setSending(false)
    }
  }

  // 选择并发送图片/视频/文件：先上传拿 fileId，再发媒体消息
  const handlePickMedia = async (type, file) => {
    if (!file || !activeConv || uploading) return
    if (file.size > 100 * 1024 * 1024) {
      message.error('文件超过 100MB 限制')
      return
    }
    setUploading(true)
    const hide = message.loading(type === 'image' ? '图片上传中…' : type === 'video' ? '视频上传中…' : '文件上传中…', 0)
    try {
      const fd = new FormData()
      fd.append('file', file)
      const up = await axios.post('/api/chat/upload', fd)
      if (!up.data.success) throw new Error(up.data.message)
      const res = await axios.post(`/api/chat/conversations/${activeConv.id}/messages`, {
        type, fileId: up.data.data.fileId, content: up.data.data.fileName
      })
      if (res.data.success) {
        await fetchMessages(activeConvRef.current)
        fetchConversations()
      }
    } catch (err) {
      message.error(err.response?.data?.message || err.message || '发送失败')
    } finally {
      hide()
      setUploading(false)
    }
  }

  const handleCreate = async (values) => {
    setCreating(true)
    try {
      const payload = values.tab === 'group'
        ? { type: 'group', name: values.name, memberIds: values.memberIds }
        : { type: 'direct', userId: values.userId }
      const res = await axios.post('/api/chat/conversations', payload)
      if (res.data.success) {
        message.success(res.data.message)
        setCreateVisible(false)
        createForm.resetFields()
        await fetchConversations()
        // 自动打开新会话
        const list = (await axios.get('/api/chat/conversations')).data
        if (list.success) {
          const conv = list.data.find(c => c.id === res.data.data.id)
          if (conv) openConversation(conv)
        }
      }
    } catch (err) {
      message.error(err.response?.data?.message || '创建失败')
    } finally {
      setCreating(false)
    }
  }

  const handleDeleteConv = async (conv) => {
    try {
      const res = await axios.delete(`/api/chat/conversations/${conv.id}`)
      if (res.data.success) {
        message.success(res.data.message)
        if (activeConv?.id === conv.id) closeConversation()
        fetchConversations()
      }
    } catch (err) {
      message.error(err.response?.data?.message || '删除失败')
    }
  }

  const canDelete = (conv) => conv.type === 'direct' || conv.creator_id === user?.id

  // 群主移除群成员
  const handleRemoveMember = async (memberId) => {
    try {
      const res = await axios.delete(`/api/chat/conversations/${activeConv.id}/members/${memberId}`)
      if (res.data.success) {
        message.success(res.data.message)
        setMembersVisible(false)
        // 刷新会话列表与当前会话
        const list = await axios.get('/api/chat/conversations')
        if (list.data.success) {
          setConversations(list.data.data)
          const conv = list.data.data.find(c => c.id === activeConv.id)
          if (conv) {
            setActiveConv(conv)
            activeConvRef.current = conv
          } else {
            closeConversation()
          }
        }
      }
    } catch (err) {
      message.error(err.response?.data?.message || '操作失败')
    }
  }

  // 群主邀请成员加入群聊（拉人）
  const handleInviteMembers = async () => {
    if (!inviteIds.length) {
      message.warning('请选择要邀请的成员')
      return
    }
    try {
      const res = await axios.post(`/api/chat/conversations/${activeConv.id}/members`, { user_ids: inviteIds })
      if (res.data.success) {
        message.success(res.data.message)
        setInviteVisible(false)
        setInviteIds([])
        const list = await axios.get('/api/chat/conversations')
        if (list.data.success) {
          setConversations(list.data.data)
          const conv = list.data.data.find(c => c.id === activeConv.id)
          if (conv) {
            setActiveConv(conv)
            activeConvRef.current = conv
          }
        }
      }
    } catch (err) {
      message.error(err.response?.data?.message || '邀请失败')
    }
  }

  // 可邀请的用户（尚未在群内）
  const inviteOptions = allUsers
    .filter(u => !(activeConv?.members || []).some(m => m.id === u.id))
    .map(u => ({ value: u.id, label: `${u.display_name || u.username}${u.role === 'admin' ? '（管理员）' : ''}` }))

  const otherOptions = allUsers.filter(u => u.id !== user?.id).map(u => ({
    value: u.id,
    label: (
      <span>
        <Badge status={u.is_online ? 'success' : 'default'} />
        {u.display_name || u.username}
        <span style={{ color: '#999', fontSize: 12 }}>（{u.username}）</span>
      </span>
    )
  }))

  // ============ 会话列表 ============
  const conversationList = (
    <>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
        <span style={{ fontWeight: 500 }}>我的会话</span>
        <Button type="primary" size="small" icon={<PlusOutlined />} onClick={() => { createForm.resetFields(); setCreateVisible(true) }}>
          发起对话 / 建群
        </Button>
      </div>
      {conversations.length === 0 ? (
        <Empty description="暂无会话，点击右上角发起对话" image={Empty.PRESENTED_IMAGE_SIMPLE} />
      ) : (
        <List
          dataSource={conversations}
          renderItem={(conv) => (
            <List.Item
              className={`conv-item ${activeConv?.id === conv.id ? 'conv-item-active' : ''}`}
              onClick={() => openConversation(conv)}
              style={{ cursor: 'pointer', padding: '10px 8px' }}
              extra={
                <Space size={4}>
                  {conv.unread > 0 && <Badge count={conv.unread} />}
                  {canDelete(conv) && (
                    <Popconfirm
                      title={conv.type === 'group' ? '确定解散该群组吗？' : '确定删除该会话吗？'}
                      onConfirm={(e) => { e?.stopPropagation(); handleDeleteConv(conv) }}
                      onCancel={(e) => e?.stopPropagation()}
                      okText="确定"
                      cancelText="取消"
                    >
                      <Button type="text" size="small" danger icon={<DeleteOutlined />} onClick={(e) => e.stopPropagation()} />
                    </Popconfirm>
                  )}
                </Space>
              }
            >
              <List.Item.Meta
                avatar={
                  <Avatar
                    style={{ backgroundColor: conv.type === 'group' ? '#faad14' : '#7c3aed' }}
                    icon={conv.type === 'group' ? <TeamOutlined /> : <UserOutlined />}
                  />
                }
                title={
                  <span>
                    {conv.name || '未命名'}
                    {conv.type === 'group' && <Tag style={{ marginLeft: 8 }}>{conv.member_count}人</Tag>}
                  </span>
                }
                description={
                  conv.last_message
                    ? `${conv.last_message.sender_name}：${conv.last_message.content.slice(0, 20)}`
                    : '暂无消息'
                }
              />
            </List.Item>
          )}
        />
      )}
    </>
  )

  // ============ 聊天窗口 ============
  const chatWindow = activeConv ? (
    <div className="chat-window">
      <div className="chat-header">
        {isMobile && (
          <Button type="text" icon={<ArrowLeftOutlined />} onClick={closeConversation} style={{ marginRight: 4 }} />
        )}
        <span style={{ fontWeight: 500 }}>{activeConv.name || '未命名'}</span>
        {activeConv.type === 'group' && (
          <Tooltip title={activeConv.members.map(m => m.display_name || m.username).join('、')}>
            <Tag style={{ marginLeft: 8 }}>{activeConv.member_count}人</Tag>
          </Tooltip>
        )}
        {activeConv.type === 'group' && activeConv.creator_id === user?.id && (
          <Button size="small" type="text" icon={<SettingOutlined />} onClick={() => setMembersVisible(true)} style={{ marginLeft: 'auto' }}>
            成员管理
          </Button>
        )}
      </div>
      <div className="chat-messages">
        {messages.length === 0 && <Empty description="还没有消息，发送第一条吧" image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ marginTop: 40 }} />}
        {messages.map(m => {
          const mine = m.sender_id === user?.id
          const rs = m.read_status
          const allRead = rs && rs.total_others > 0 && rs.read_count >= rs.total_others
          let readEl = null
          if (mine && rs && rs.total_others > 0) {
            if (activeConv.type === 'group' && !allRead) {
              const names = rs.unread_users.map(u => u.name).slice(0, 5).join('、')
              const extra = rs.unread_users.length > 5 ? ` 等${rs.unread_users.length}人` : ''
              readEl = (
                <Tooltip title={`未读：${names}${extra}`}>
                  <span className="chat-msg-status chat-msg-unread">
                    <ClockCircleOutlined /> 未读（{rs.read_count}/{rs.total_others}人已读）
                  </span>
                </Tooltip>
              )
            } else {
              readEl = allRead
                ? <span className="chat-msg-status chat-msg-read"><CheckCircleFilled /> 已读</span>
                : <span className="chat-msg-status chat-msg-unread"><ClockCircleOutlined /> 未读</span>
            }
          }
          // 按消息类型渲染内容：图片/视频/文件/文本
          let body
          if (m.msg_type === 'image' && m.file_url) {
            body = (
              <div className="chat-bubble chat-bubble-media">
                <Image src={fileSrc(m.file_url)} style={{ maxWidth: 240, maxHeight: 240, borderRadius: 6, display: 'block' }} />
              </div>
            )
          } else if (m.msg_type === 'video' && m.file_url) {
            body = (
              <div className="chat-bubble chat-bubble-media">
                <video src={fileSrc(m.file_url)} controls preload="metadata" style={{ maxWidth: 320, maxHeight: 240, borderRadius: 6, display: 'block' }} />
              </div>
            )
          } else if (m.msg_type === 'file' && m.file_url) {
            body = (
              <div className="chat-bubble chat-bubble-media chat-file-card">
                <FileOutlined style={{ fontSize: 28, color: '#7c3aed' }} />
                <div className="chat-file-info">
                  <div className="chat-file-name">{m.file_name || m.content}</div>
                  <div className="chat-file-size">{formatSize(m.file_size)}</div>
                </div>
                <a href={fileSrc(m.file_url)} download={m.file_name} className="chat-file-download" title="下载">
                  <DownloadOutlined />
                </a>
              </div>
            )
          } else {
            body = <div className={`chat-bubble ${mine ? 'chat-bubble-mine' : ''}`}>{m.content}</div>
          }
          return (
            <div key={m.id} className={`chat-msg ${mine ? 'chat-msg-mine' : ''}`}>
              {!mine && <div className="chat-msg-sender">{m.sender_name}</div>}
              {body}
              <div className="chat-msg-time">
                {m.created_at?.slice(5, 16)}
                {readEl}
              </div>
            </div>
          )
        })}
        <div ref={bottomRef} />
      </div>
      <div className="chat-input">
        <div className="chat-toolbar">
          <Popover
            trigger="click"
            placement="topLeft"
            content={
              <div className="emoji-panel">
                {EMOJIS.map(e => (
                  <span key={e} className="emoji-item" onClick={() => setInputValue(v => v + e)}>{e}</span>
                ))}
              </div>
            }
          >
            <Button type="text" size="small" icon={<SmileOutlined />} title="表情" />
          </Popover>
          <Button type="text" size="small" icon={<PictureOutlined />} title="发送图片" onClick={() => imgInputRef.current?.click()} />
          <Button type="text" size="small" icon={<VideoCameraOutlined />} title="发送视频" onClick={() => videoInputRef.current?.click()} />
          <Button type="text" size="small" icon={<PaperClipOutlined />} title="发送文件" onClick={() => fileInputRef.current?.click()} />
        </div>
        <input ref={imgInputRef} type="file" accept="image/*" style={{ display: 'none' }}
          onChange={(e) => { handlePickMedia('image', e.target.files?.[0]); e.target.value = '' }} />
        <input ref={videoInputRef} type="file" accept="video/*" style={{ display: 'none' }}
          onChange={(e) => { handlePickMedia('video', e.target.files?.[0]); e.target.value = '' }} />
        <input ref={fileInputRef} type="file" style={{ display: 'none' }}
          onChange={(e) => { handlePickMedia('file', e.target.files?.[0]); e.target.value = '' }} />
        <div className="chat-input-row">
          <TextArea
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            onPressEnter={(e) => { if (!e.shiftKey) { e.preventDefault(); handleSend() } }}
            placeholder="输入消息，Enter 发送，Shift+Enter 换行"
            autoSize={{ minRows: 1, maxRows: 4 }}
            style={{ flex: 1 }}
          />
          <Button type="primary" icon={<SendOutlined />} loading={sending || uploading} onClick={handleSend}>发送</Button>
        </div>
      </div>
    </div>
  ) : (
    <div className="chat-placeholder">
      <Empty description="选择一个会话开始聊天" />
    </div>
  )

  // ============ 发起对话 / 建群弹窗 ============
  // 注意：这里必须用普通 JSX 变量而非内部函数组件，
  // 否则轮询重新渲染时组件类型变化会导致弹窗被卸载重建（闪退）
  const createModal = (
    <Modal
      title="发起对话"
      open={createVisible}
      onCancel={() => setCreateVisible(false)}
      footer={null}
      width={480}
    >
      <Form form={createForm} layout="vertical" onFinish={handleCreate} initialValues={{ tab: 'direct' }}>
        <Form.Item name="tab" noStyle>
          <Tabs
            centered
            destroyInactiveTabPane
            items={[
              {
                key: 'direct',
                label: '单聊',
                children: (
                  <Form.Item name="userId" label="选择对话对象" rules={[{ required: true, message: '请选择对话对象' }]}>
                    <Select placeholder="选择用户（绿点为在线）" options={otherOptions} showSearch optionFilterProp="label" />
                  </Form.Item>
                )
              },
              {
                key: 'group',
                label: '创建群聊',
                children: (
                  <>
                    <Form.Item name="name" label="群名称" rules={[{ required: true, message: '请输入群名称' }]}>
                      <Input placeholder="例如：拍摄组工作群" />
                    </Form.Item>
                    <Form.Item name="memberIds" label="群成员（除自己外至少选1人）" rules={[{ required: true, message: '请选择群成员' }]}>
                      <Select mode="multiple" placeholder="选择群成员" options={otherOptions} showSearch optionFilterProp="label" />
                    </Form.Item>
                  </>
                )
              }
            ]}
          />
        </Form.Item>
        <div style={{ textAlign: 'right' }}>
          <Space>
            <Button onClick={() => setCreateVisible(false)}>取消</Button>
            <Button type="primary" htmlType="submit" loading={creating}>确定</Button>
          </Space>
        </div>
      </Form>
    </Modal>
  )

  // ============ 群成员管理弹窗（仅群主可见） ============
  const membersModal = (
    <Modal
      title={`群成员管理（${activeConv?.member_count || 0}人）`}
      open={membersVisible}
      onCancel={() => setMembersVisible(false)}
      footer={null}
      width={420}
    >
      {activeConv?.creator_id === user?.id && (
        <Button
          type="primary"
          icon={<UserAddOutlined />}
          block
          style={{ marginBottom: 12 }}
          onClick={() => { setInviteIds([]); setInviteVisible(true) }}
        >
          邀请成员（拉人入群）
        </Button>
      )}
      <List
        dataSource={activeConv?.members || []}
        renderItem={(m) => (
          <List.Item
            actions={
              m.id !== activeConv?.creator_id
                ? [
                    <Popconfirm
                      key="del"
                      title={`确定将 ${m.display_name || m.username} 移出群聊吗？`}
                      onConfirm={() => handleRemoveMember(m.id)}
                      okText="确定"
                      cancelText="取消"
                    >
                      <Button type="text" size="small" danger icon={<UserDeleteOutlined />} />
                    </Popconfirm>
                  ]
                : []
            }
          >
            <List.Item.Meta
              avatar={<Avatar icon={<UserOutlined />} />}
              title={
                <span>
                  {m.display_name || m.username}
                  {m.id === activeConv?.creator_id && <Tag color="gold" style={{ marginLeft: 8 }}>群主</Tag>}
                  {m.id === user?.id && <Tag style={{ marginLeft: 8 }}>我</Tag>}
                </span>
              }
            />
          </List.Item>
        )}
      />
    </Modal>
  )

  // ============ 邀请成员弹窗（仅群主，拉人） ============
  const inviteModal = (
    <Modal
      title="邀请成员加入群聊"
      open={inviteVisible}
      onCancel={() => setInviteVisible(false)}
      onOk={handleInviteMembers}
      okText="邀请"
      cancelText="取消"
      width={420}
    >
      <Select
        mode="multiple"
        placeholder="选择要拉入群聊的成员"
        value={inviteIds}
        onChange={setInviteIds}
        options={inviteOptions}
        showSearch
        optionFilterProp="label"
        style={{ width: '100%' }}
      />
      <p style={{ color: '#999', fontSize: 12, marginTop: 8 }}>被邀请成员将收到系统通知，并立即加入群聊。</p>
    </Modal>
  )

  // ============ 布局 ============
  if (isMobile) {
    return (
      <div className="page-content">
        <Card bodyStyle={{ padding: 12 }}>
          {activeConv ? chatWindow : conversationList}
        </Card>

        {createModal}
        {membersModal}
        {inviteModal}
      </div>
    )
  }

  return (
    <div className="page-content">
      <Card bodyStyle={{ padding: 0 }}>
        <div className="messages-layout">
          <div className="messages-list">{conversationList}</div>
          <div className="messages-chat">{chatWindow}</div>
        </div>
      </Card>

      {createModal}
      {membersModal}
      {inviteModal}
    </div>
  )
}

export default Messages