import { useState } from 'react'
import {
  Check,
  CheckCheck,
  Clock,
  AlertCircle,
  Copy,
  Reply,
  Forward,
  StickyNote,
  Star,
  ListTodo,
  BookOpen,
  MoreHorizontal,
  Languages,
  Globe,
  ChevronDown,
  ChevronUp,
  Download,
  FileText,
  LoaderCircle,
} from 'lucide-react'
import { useQuery } from '@tanstack/react-query'
import type { Message } from '@/types'
import { cn } from '@/utils/cn'
import { toast } from '@/app/store/toast'
import { formatTime } from '@/utils/format'
import { languageName } from '@/config/languages'
import { Dropdown } from '@/components/ui/dropdown'
import { Avatar } from '@/components/ui/avatar'
import { getMessageAttachment } from '@/services/api/conversations'

export type ViewMode = 'original' | 'translated' | 'bilingual'

function EmailAttachmentLink({
  conversationId,
  messageId,
  attachment,
}: {
  conversationId: string
  messageId: string
  attachment: NonNullable<Message['emailAttachments']>[number]
}) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['email-attachment', conversationId, messageId, attachment.id],
    queryFn: () => getMessageAttachment(conversationId, messageId, attachment.id),
    enabled: attachment.available,
    staleTime: Infinity,
    retry: 1,
  })
  const size = attachment.size >= 1024 * 1024
    ? `${(attachment.size / 1024 / 1024).toFixed(1)} MB`
    : `${Math.max(1, Math.round(attachment.size / 1024))} KB`

  return (
    <a
      href={data?.dataUrl}
      download={data?.name || attachment.name}
      onClick={(event) => {
        if (!data?.dataUrl) event.preventDefault()
      }}
      className={cn(
        'mt-2 flex items-center gap-2 rounded-xl border border-slate-200/80 bg-white/75 px-3 py-2 transition-colors',
        data?.dataUrl && 'hover:border-sky-200 hover:bg-sky-50',
      )}
    >
      {isLoading ? <LoaderCircle className="h-5 w-5 animate-spin text-sky-500" /> : <FileText className="h-5 w-5 text-sky-500" />}
      <span className="min-w-0 flex-1">
        <span className="block truncate text-xs font-medium text-slate-700">{attachment.name}</span>
        <span className="text-[10px] text-slate-400">{error ? '附件暂不可用' : size}</span>
      </span>
      {data?.dataUrl && <Download className="h-4 w-4 text-slate-400" />}
    </a>
  )
}

export function MessageBubble({
  msg,
  viewMode,
  onQuote,
  onMarkImportant,
  onConvertToTask,
  onAddToKnowledge,
  onAddNote,
  customerName,
  customerAvatar,
}: {
  msg: Message
  viewMode: ViewMode
  onQuote: () => void
  onMarkImportant: () => void
  onConvertToTask: () => void
  onAddToKnowledge: () => void
  onAddNote: () => void
  customerName?: string
  customerAvatar?: string
}) {
  const [showActions, setShowActions] = useState(false)
  const [translationExpanded, setTranslationExpanded] = useState(false)
  const isMe = msg.sender === 'agent'
  const isSystem = msg.sender === 'system'
  const rawTranslation = String(msg.translatedText || '')
  const translationCorrupted =
    /(?:^|\n)\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:[\d.]+Z\s+(?:客户|坐席):/m.test(rawTranslation) ||
    rawTranslation.length > (msg.originalText.length <= 20 ? 160 : Math.max(500, msg.originalText.length * 8))
  const translatedText = translationCorrupted ? '' : rawTranslation
  const hasTranslation = translatedText && translatedText !== msg.originalText
  const outgoingChineseNote = isMe
    ? String(
      msg.translationCn ||
      (hasTranslation && /[\u3400-\u9fff]/u.test(msg.originalText) ? msg.originalText : ''),
    ).trim()
    : ''
  const outgoingSentText = isMe && translatedText ? translatedText : msg.originalText
  const longTranslation = translatedText.length > 260 || translatedText.split('\n').length > 6
  const hasKnownLanguage = Boolean(msg.originalLang && !['und', 'auto', 'unknown'].includes(msg.originalLang))
  const sourceLanguage = hasKnownLanguage ? languageName(msg.originalLang) : '原文'
  const { data: attachment, isLoading: attachmentLoading, error: attachmentError } = useQuery({
    queryKey: ['message-attachment', msg.conversationId, msg.id, msg.telegramFileId],
    queryFn: () => getMessageAttachment(msg.conversationId, msg.id),
    enabled: Boolean(msg.telegramFileId),
    staleTime: Infinity,
    retry: 1,
  })

  if (isSystem) {
    return (
      <div className="flex justify-center py-2">
        <span className="rounded-full bg-amber-50 px-3 py-1 text-xs text-amber-700">{msg.originalText}</span>
      </div>
    )
  }

  const translationContent = (muted = true) => (
    <div>
      <p
        className={cn(
          'whitespace-pre-wrap break-words text-sm leading-6',
          muted && 'text-foreground/75',
          longTranslation && !translationExpanded && 'max-h-28 overflow-hidden',
        )}
      >
        {translatedText}
      </p>
      {longTranslation && (
        <button
          type="button"
          onClick={() => setTranslationExpanded((value) => !value)}
          className="mt-1.5 inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[11px] font-medium text-primary hover:bg-primary-50"
        >
          {translationExpanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
          {translationExpanded ? '收起译文' : '展开完整译文'}
        </button>
      )}
    </div>
  )

  const renderContent = () => {
    if (msg.type !== 'text') {
      const labels = { image: '图片', audio: '语音', file: '文件', product: '产品卡片' }
      return msg.originalText ? (
        <p className="mb-2 whitespace-pre-wrap break-words text-sm leading-6 text-slate-700">{msg.originalText}</p>
      ) : (
        <div className="mb-1 flex items-center gap-2 text-xs font-medium text-slate-500">
          <span className="h-1.5 w-1.5 rounded-full bg-primary-400" />
          {labels[msg.type]}
        </div>
      )
    }
    if (!String(msg.originalText || '').trim()) {
      return <p className="text-xs text-slate-500">Telegram 服务通知</p>
    }
    if (
      (viewMode === 'bilingual' || viewMode === 'translated') &&
      msg.sender === 'customer' &&
      msg.type === 'text' &&
      (!translatedText || translationCorrupted)
    ) {
      return (
        <div className="space-y-2.5">
          <p className="whitespace-pre-wrap break-words text-sm leading-6">{msg.originalText}</p>
          <div className="flex items-center gap-1.5 border-t border-border/60 pt-2 text-xs text-muted-foreground">
            <Languages className="h-3.5 w-3.5 text-primary" />
            {translationCorrupted
              ? '检测到异常译文，系统正在自动修复'
              : msg.translationStatus === 'failed'
                ? 'AI 翻译暂时失败，将自动重试'
                : 'AI 正在翻译…'}
          </div>
        </div>
      )
    }
    if (isMe && viewMode === 'bilingual') {
      return (
        <div className="space-y-2.5">
          <div>
            <span className="inline-flex items-center gap-1 rounded-full bg-blue-100/80 px-2 py-0.5 text-[10px] font-medium text-blue-700">
              <Globe className="h-3 w-3" />
              客户收到 · {translatedText ? '英文译文' : '原文'}
            </span>
            <p className="mt-1.5 whitespace-pre-wrap break-words text-sm leading-6">{outgoingSentText}</p>
          </div>
          {outgoingChineseNote ? (
            <div data-testid="outgoing-chinese-note" className="border-t border-blue-200/60 pt-2">
              <span className="inline-flex items-center gap-1 rounded-full bg-white/65 px-2 py-0.5 text-[10px] font-medium text-slate-600">
                <Languages className="h-3 w-3 text-primary" />
                中文备注 · 仅内部可见
              </span>
              <p className="mt-1.5 whitespace-pre-wrap break-words text-sm leading-6 text-slate-600">
                {outgoingChineseNote}
              </p>
            </div>
          ) : msg.translationStatus === 'pending' || msg.translationStatus === 'failed' ? (
            <div className="flex items-center gap-1.5 border-t border-blue-200/60 pt-2 text-xs text-slate-500">
              <Languages className="h-3.5 w-3.5 text-primary" />
              {msg.translationStatus === 'failed' ? '中文备注生成失败，将自动重试' : 'AI 正在生成中文备注…'}
            </div>
          ) : null}
        </div>
      )
    }
    if (isMe && viewMode === 'translated' && !translatedText && outgoingChineseNote) {
      return (
        <div>
          <span className="inline-flex items-center gap-1 rounded-full bg-white/65 px-2 py-0.5 text-[10px] font-medium text-slate-600">
            <Languages className="h-3 w-3 text-primary" />
            中文备注 · 仅内部可见
          </span>
          <p className="mt-1.5 whitespace-pre-wrap break-words text-sm leading-6 text-slate-700">
            {outgoingChineseNote}
          </p>
        </div>
      )
    }
    if (viewMode === 'bilingual' && hasTranslation) {
      return (
        <div className="space-y-2.5">
          <div>
            <span className="inline-flex rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
              {hasKnownLanguage ? `原文 · ${sourceLanguage}` : '原文'}
            </span>
            <p className="mt-1.5 whitespace-pre-wrap break-words text-sm leading-6">{msg.originalText}</p>
          </div>
          <div className="border-t border-border/60 pt-2">
            <span className="inline-flex items-center gap-1 rounded-full bg-primary-50 px-2 py-0.5 text-[10px] font-medium text-primary">
              <Languages className="h-3 w-3" />
              {isMe ? '发送内容 · 英文' : 'AI 译文 · 中文'}
            </span>
            <div className="mt-1.5">{translationContent()}</div>
          </div>
        </div>
      )
    }
    if (viewMode === 'translated' && translatedText) {
      return (
        <div>
          <span className="inline-flex items-center gap-1 rounded-full bg-primary-50 px-2 py-0.5 text-[10px] font-medium text-primary">
            <Languages className="h-3 w-3" />
            {isMe ? `${sourceLanguage} → 英文发送内容` : `${sourceLanguage} → 中文`}
          </span>
          <div className="mt-1.5">{translationContent(false)}</div>
        </div>
      )
    }
    return (
      <div>
        {hasKnownLanguage && (
          <span className="inline-flex rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
            {sourceLanguage}
          </span>
        )}
        <p className={cn('whitespace-pre-wrap break-words text-sm leading-6', hasKnownLanguage && 'mt-1.5')}>
          {msg.originalText}
        </p>
      </div>
    )
  }

  const statusIcon = () => {
    switch (msg.status) {
      case 'sending':
        return <Clock className="h-3 w-3 text-muted-foreground animate-pulse" />
      case 'sent':
        return <Check className="h-3 w-3 text-muted-foreground" />
      case 'delivered':
        return <CheckCheck className="h-3 w-3 text-muted-foreground" />
      case 'read':
        return <CheckCheck className="h-3 w-3 text-primary" />
      case 'failed':
        return <AlertCircle className="h-3 w-3 text-red-500" />
      default:
        return null
    }
  }

  const moreActions = [
    { key: 'copy', label: '复制', icon: Copy, onSelect: () => { navigator.clipboard.writeText(msg.originalText); toast.success('已复制') } },
    { key: 'reply', label: '引用回复', icon: Reply, onSelect: onQuote },
    { key: 'note', label: '添加内部备注', icon: StickyNote, onSelect: onAddNote },
    { key: 'important', label: msg.isImportant ? '取消重要' : '标记重要', icon: Star, onSelect: onMarkImportant },
    { key: 'task', label: '转为待办', icon: ListTodo, onSelect: onConvertToTask },
    { key: 'knowledge', label: '添加到知识库', icon: BookOpen, onSelect: onAddToKnowledge },
  ]

  return (
    <div
      data-testid="message-bubble"
      data-sender={msg.sender}
      className={cn(
        'group flex gap-2 px-3 py-2 will-change-transform sm:px-4 sm:py-2.5',
        isMe ? 'justify-end motion-safe:animate-message-in-right' : 'justify-start motion-safe:animate-message-in-left',
      )}
      onMouseEnter={() => setShowActions(true)}
      onMouseLeave={() => setShowActions(false)}
    >
      {!isMe && (
        <Avatar
          name={customerName || msg.senderName || 'Telegram 用户'}
          src={customerAvatar}
          size="xs"
          className="order-1 mt-1"
        />
      )}
      <div className={cn('min-w-0 max-w-[min(84%,760px)] sm:max-w-[min(74%,760px)]', isMe ? 'order-2' : 'order-1')}>
        {!isMe && (
          <p className="mb-1 px-1 text-[11px] font-medium text-muted-foreground">
            {msg.senderName || customerName}
          </p>
        )}
        {/* 消息气泡 */}
        <div
          data-testid="message-surface"
          data-direction={isMe ? 'outgoing' : 'incoming'}
          className={cn(
            'relative isolate rounded-2xl px-3.5 py-2.5 transition-shadow',
            isMe
              ? 'telegram-bubble-out rounded-br-[5px]'
              : 'telegram-bubble-in rounded-bl-[5px]',
            msg.isImportant && 'ring-1 ring-amber-400',
          )}
        >
          {msg.replyToId && (
            <div className="mb-2 rounded-lg border-s-2 border-primary/70 bg-muted/60 px-2.5 py-1.5">
              <p className="text-[10px] font-medium text-primary">回复消息</p>
              <p className="mt-0.5 line-clamp-2 text-xs text-muted-foreground">
                {msg.replyPreview || `消息 #${msg.replyToId}`}
              </p>
            </div>
          )}
          {renderContent()}
          {msg.telegramFileId && attachmentLoading && (
            <div className="mt-2 flex items-center gap-2 rounded-lg bg-muted/70 px-3 py-2 text-xs text-muted-foreground">
              <LoaderCircle className="h-3.5 w-3.5 animate-spin" /> 正在读取 Telegram 文件…
            </div>
          )}
          {attachment && msg.type === 'image' && (
            <a href={attachment.dataUrl} download={attachment.name} className="mt-2 block overflow-hidden rounded-xl">
              <img src={attachment.dataUrl} alt={attachment.name} className="max-h-80 w-auto max-w-full object-contain" />
            </a>
          )}
          {attachment && msg.type === 'audio' && (
            <audio controls preload="metadata" src={attachment.dataUrl} className="mt-2 h-10 max-w-full" />
          )}
          {attachment && msg.type === 'file' && attachment.mimeType === 'image/webp' && (
            <img src={attachment.dataUrl} alt={msg.stickerEmoji || attachment.name} className="mt-2 h-32 w-32 object-contain" />
          )}
          {attachment && msg.type === 'file' && attachment.mimeType === 'video/webm' && (
            <video src={attachment.dataUrl} autoPlay loop muted playsInline className="mt-2 h-32 w-32 object-contain" />
          )}
          {attachment && msg.type === 'file' && !['image/webp', 'video/webm'].includes(attachment.mimeType) && (
            <a
              href={attachment.dataUrl}
              download={attachment.name}
              className="mt-2 flex items-center gap-2 rounded-xl border border-border bg-muted/50 px-3 py-2 hover:bg-muted"
            >
              <FileText className="h-5 w-5 text-primary" />
              <span className="min-w-0 flex-1 truncate text-xs">{attachment.name}</span>
              <Download className="h-4 w-4 text-muted-foreground" />
            </a>
          )}
          {msg.telegramFileId && attachmentError && (
            <p className="mt-2 rounded-lg bg-red-50 px-2.5 py-1.5 text-xs text-red-600">文件暂时无法下载，请稍后重试</p>
          )}
          {msg.emailAttachments?.map((emailAttachment) => (
            <EmailAttachmentLink
              key={emailAttachment.id}
              conversationId={msg.conversationId}
              messageId={msg.id}
              attachment={emailAttachment}
            />
          ))}
        </div>

        {/* 底栏：时间 + 状态 */}
        <div className={cn('mt-0.5 flex items-center gap-1.5 text-[10px] text-muted-foreground', isMe ? 'justify-end' : 'justify-start')}>
          <span>{formatTime(msg.createdAt)}</span>
          {isMe && statusIcon()}
          {msg.isImportant && <Star className="h-2.5 w-2.5 fill-amber-400 text-amber-400" />}
          {msg.internalNote && <StickyNote className="h-2.5 w-2.5 text-blue-500" />}
        </div>
      </div>

      {/* 悬停操作按钮 */}
      <div className={cn('flex items-center', isMe ? 'order-1' : 'order-2')}>
        {showActions && (
          <Dropdown
            trigger={
              <button className="flex h-7 w-7 items-center justify-center rounded-md hover:bg-muted">
                <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
              </button>
            }
            items={moreActions}
          />
        )}
      </div>
    </div>
  )
}