import React, { useRef, useEffect, useCallback, useState, forwardRef, useImperativeHandle } from 'react'
import { ArrowDown, MessageCircle } from 'lucide-react'
import { cn } from '@/utils/cn'
import { Button } from '@/components/ui/button'
import { ScrollArea } from '@/components/ui/scroll-area'
import type { ExtendedEvent, Attachment, HandleImageAttachmentClick } from '../types'
import { TaskStatus } from '../types'
import type { ApiEvent } from '../hooks/useNovaEvents'
import { MessageItem } from './message-item'
import useEventStore from '../store/useEventStore'

export interface MessageListProps {
  /** 消息列表（按步骤分组） */
  messages: ExtendedEvent[][]
  /** 任务状态 */
  taskStatus?: TaskStatus
  /** 自定义类名 */
  className?: string
  /** 是否自动滚动到底部 */
  autoScroll?: boolean
  /** 空状态渲染 */
  emptyRender?: React.ReactNode
  /** 加载中状态 */
  loading?: boolean
  /** 附件点击回调 */
  onAttachmentClick?: (attachment: Attachment) => void
  /** 图片附件点击回调 */
  onImageAttachmentClick?: HandleImageAttachmentClick
  /** 工具调用点击回调 */
  onToolCallClick?: (event: ApiEvent) => void
  /** 发送消息（用户交互回调） */
  onSendMessage?: (content: string) => void
}

export interface MessageListRef {
  scrollToBottom: (behavior?: ScrollBehavior) => void
}

/**
 * 消息列表组件 - 展示对话流
 */
const InnerMessageList = forwardRef<MessageListRef, MessageListProps>(({
  messages,
  taskStatus = TaskStatus.PENDING,
  className,
  autoScroll = true,
  emptyRender,
  loading = false,
  onAttachmentClick,
  onImageAttachmentClick,
  onToolCallClick,
  onSendMessage,
}, ref) => {
  const setProcessEvents = useEventStore(store=>store.setProcessEvents)
  const scrollRef = useRef<HTMLDivElement>(null)
  const bottomRef = useRef<HTMLDivElement>(null)
  const [showScrollButton, setShowScrollButton] = useState(false)
  const [showScrollTopButton, setShowScrollTopButton] = useState(false)
  const userTouchedRef = useRef(false)
  const autoScrollEnabledRef = useRef(autoScroll)

  // 扁平化消息列表
  const flatMessages = messages.flat()

   useEffect(() => {
    setProcessEvents(flatMessages)
  },[flatMessages])

  // 根据 taskStatus + loading 统一计算「是否展示 loading」
  const isLoading =
    loading || taskStatus === TaskStatus.IN_PROGRESS

  // 滚动到底部（使用 scrollIntoView）
  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
    // 等下一帧，确保 DOM 和高度都已经更新
    requestAnimationFrame(() => {
      if (bottomRef.current) {
        bottomRef.current.scrollIntoView({
          behavior,
          block: 'end',
        })
      }
      userTouchedRef.current = false
      autoScrollEnabledRef.current = true
    })
  }, [])

  // 暴露滚动方法给父组件
  useImperativeHandle(ref, () => ({
    scrollToBottom,
  }), [scrollToBottom])

  // 监听滚动事件
  const handleScroll = useCallback(() => {
    if (!scrollRef.current) return

    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current
    const distanceFromBottom = scrollHeight - scrollTop - clientHeight
    const isAtBottom = distanceFromBottom < 50

    // 用户主动滚动
    if (!isAtBottom && !userTouchedRef.current) {
      userTouchedRef.current = true
      autoScrollEnabledRef.current = false
    }

    setShowScrollButton(!isAtBottom && flatMessages.length > 3)
    setShowScrollTopButton(scrollTop > 50)
  }, [flatMessages.length])

  // 消息变化时自动滚动
  useEffect(() => {
    if (autoScroll && autoScrollEnabledRef.current && !userTouchedRef.current) {
      const behavior = taskStatus === TaskStatus.IN_PROGRESS ? 'smooth' : 'auto'
      scrollToBottom(behavior)
    }
  }, [flatMessages.length, autoScroll, taskStatus, scrollToBottom])



  // // 初始化滚动 - 延迟一段时间，等待历史消息和布局稳定
  useEffect(() => {
    const timer = setTimeout(() => {
      if (flatMessages.length > 0) {
        scrollToBottom('auto')
      }
    }, 0)

    return () => clearTimeout(timer)
  }, [flatMessages.length])

  // 空状态
  if (flatMessages.length === 0 && !isLoading) {
    return (
      <div className={cn('flex-1 flex items-center justify-center', className)}>
        {emptyRender || (
          <div className="text-center text-muted-foreground">
            <MessageCircle className="w-16 h-16 mx-auto mb-4 text-muted" />
            <p>暂无消息</p>
          </div>
        )}
      </div>
    )
  }

  return (
    <div className={cn('relative flex-1 h-full overflow-hidden', className)}>

      {/* 底部渐变遮罩，消息穿过时淡出 */}
      <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-32 z-10 bg-gradient-to-t from-white to-transparent backdrop-blur-[2px] [mask-image:linear-gradient(to_top,black_40%,transparent)]" />

      {/* 消息列表滚动区域 - 使用 shadcn ScrollArea，ref 绑定在 Viewport 上 */}
      <ScrollArea
        ref={scrollRef}
        className="h-full"
        onScroll={handleScroll}
      >
        <div className="h-full px-4 pt-4 pb-36">
          <div className="px-4 max-w-2xl mx-auto w-full">
            {flatMessages.map((event, index) => (
              <MessageItem
                key={event.event_id || index}
                event={event}
                onAttachmentClick={onAttachmentClick}
                onImageAttachmentClick={onImageAttachmentClick}
                onToolCallClick={onToolCallClick}
                onSendMessage={onSendMessage}
              />
            ))}

            {/* 加载中指示器：task_status === "in_progress" 或 loading=true 时显示，"paused" 时不显示 */}
            {isLoading && taskStatus !== TaskStatus.PAUSED && (
              <div className="flex items-center gap-3 mt-2 mb-2">
                <div className="w-7 h-7 rounded-lg bg-primary/10 flex items-center justify-center shrink-0 border border-primary/20">
                  <span className="w-3 h-3 rounded-full border-2 border-primary border-t-transparent animate-spin inline-block" />
                </div>
                <div className="flex items-center gap-1.5">
                  <span className="w-1.5 h-1.5 bg-primary/60 rounded-full animate-bounce" />
                  <span
                    className="w-1.5 h-1.5 bg-primary/60 rounded-full animate-bounce"
                    style={{ animationDelay: '0.15s' }}
                  />
                  <span
                    className="w-1.5 h-1.5 bg-primary/60 rounded-full animate-bounce"
                    style={{ animationDelay: '0.3s' }}
                  />
                  <span className="ml-1 text-xs text-muted-foreground">正在处理...</span>
                </div>
              </div>
            )}
          </div>
          {/* 滚动锚点，保证始终能精确滚到底部，并预留 10px 间距 */}
          <div ref={bottomRef} className="h-[10px] w-full" />
        </div>
      </ScrollArea>

      {/* 右侧中部：滚动置顶 / 滚动到底部控制条 */}
      {(showScrollButton) && (
        <div className="pointer-events-none absolute zoom-in transition-all h-max bottom-2 left-0 right-0 mx-auto flex items-center justify-center">
          <div className="pointer-events-auto flex flex-col items-center gap-1 rounded-full border border-border bg-popover/88 p-1 backdrop-blur">
            {/* 底部 */}
            <Button
              variant="ghost"
              size="icon"
              className={cn(
                'h-8 w-8 rounded-full text-muted-foreground hover:text-primary hover:bg-accent transition-all',
                !showScrollButton && 'opacity-40 cursor-default hover:bg-transparent hover:text-muted-foreground'
              )}
              onClick={() => {
                if (!showScrollButton) return
                scrollToBottom()
              }}
            >
              <ArrowDown className="w-5 h-5" />
            </Button>
          </div>
        </div>
      )}
    </div>
  )
})

InnerMessageList.displayName = 'MessageList'

export const MessageList = React.memo(InnerMessageList)
export default MessageList

// 导出 MessageItem
export { MessageItem } from './message-item'