import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react'
import { cn } from '@/utils/cn'
import type { TaskArtifact } from '../types'
import { ArtifactList } from './ArtifactList'
import { isImageFile } from './utils'
import { ArtifactPreview } from './ArtifactPreview'
import { useEventStore } from '../store/useEventStore'
import { extractToolOutputArtifact } from './Preview/previewUtils'
import { useNovaKit } from '../context/useNovaKit'
import { Dialog, DialogContent } from '@/components/ui/dialog'

export interface TaskPanelProps {
  /** 文件列表 */
  artifacts: TaskArtifact[]
  /** 是否可见 */
  visible?: boolean
  /** 面板宽度 */
  width?: number | string
  /** 获取文件 URL 的函数 */
  getUrl?: (artifact: TaskArtifact) => string | Promise<string>
  /** 下载文件回调 */
  onDownload?: (artifact: TaskArtifact) => void
  /** 关闭面板回调 */
  onClose?: () => void
  /** 自定义类名 */
  className?: string
  /** 初始选中的文件 */
  initialSelected?: TaskArtifact | null
}

/**
 * 任务面板组件 - 展示图片和文件
 */
function InnerTaskPanel({
  artifacts: artifactsProp,
  visible = true,
  width = '50%',
  getUrl,
  onDownload,
  onClose,
  className,
  initialSelected,
}: TaskPanelProps) {
  const { panelMode } = useNovaKit()
  const [selectedArtifact, setSelectedArtifact] = useState<TaskArtifact | null>(initialSelected || null)
  const [fromFileList, setFromFileList] = useState(false)
  // 记录用户是否已主动选择过文件，避免流式消息到来时强制刷新预览
  const userSelectedRef = useRef(false)
  
  // 从 store 获取 events 和 artifacts
  const events = useEventStore((state) => state.events)
  const artifactsFromStore = useEventStore((state) => state.artifacts)

  // 将 tool_call 类型的 events 转换为 artifacts
  const toolCallArtifacts = useMemo((): TaskArtifact[] => {
    return events
      .filter((event) => event.event_type === 'tool_call')
      .map((event) => {
        const actionType = (event.content?.action_type as string | undefined) || undefined
        const toolName = event.content?.tool_name as string | undefined
        const actionName = event.content?.action_name as string | undefined

        const isSkillLoader =
          actionType === 'skill_loader' ||
          actionName === 'skill_loader' ||
          toolName === 'skill_loader'

        const base: TaskArtifact = {
          path: event.event_id,
          file_name: toolName || '工具调用',
          file_type: 'tool_call',
          event_type: 'tool_call',
          action_type: isSkillLoader
            ? 'skill_loader'
            : actionType || actionName || toolName,
          tool_name: toolName,
          event_arguments: event.content?.arguments,
          tool_input: event.content?.tool_input,
          tool_output: event.content?.tool_output,
        }

        // Skill Loader：按照 remix 中的逻辑，作为 Markdown 文件渲染
        if (isSkillLoader) {
          const metaToolName = (event.content?.metadata as Record<string, unknown>)?.tool_name as string | undefined
          const output = event.content?.tool_output
          const content =
            typeof output === 'string'
              ? output
              : output != null
                ? JSON.stringify(output, null, 2)
                : ''

          return {
            ...base,
            file_type: 'md',
            file_name: metaToolName || base.file_name || 'Skill 文档',
            content,
          }
        }

        const outputArtifact = extractToolOutputArtifact(base)
        if (outputArtifact) {
          return outputArtifact
        }

        return base
      })
  }, [events])

  // 合并所有 artifacts：优先使用 store 中的，然后是 props 传入的，最后是 tool_call
  const allArtifacts = useMemo(() => {
    // 如果 store 中有数据，优先使用 store
    const baseArtifacts = artifactsFromStore.length > 0 ? artifactsFromStore : artifactsProp
    const merged = [...baseArtifacts, ...toolCallArtifacts]

    // 过滤掉 http(s) URL 中，看起来不像「文件」的条目（避免普通网页链接出现在文件列表）
    return merged.filter((artifact) => {
      const path = artifact.path || artifact.file_name || ''

      // 不是 http(s) 链接的，一律保留
      if (!/^https?:\/\//.test(path)) return true

      try {
        const url = new URL(path)
        const pathname = url.pathname || ''

        // 没有路径（如 https://example.com）——按非文件处理，过滤掉
        if (!pathname || pathname === '/') return false

        // 根据路径末尾扩展名判断是否是「文件」
        const lastSegment = pathname.split('/').filter(Boolean).pop() || ''
        const match = lastSegment.match(/\.([a-zA-Z0-9]+)$/)
        if (!match) return false

        const ext = match[1].toLowerCase()
        const fileLikeExts = [
          'pdf',
          'png',
          'jpg',
          'jpeg',
          'gif',
          'webp',
          'csv',
          'ppt',
          'pptx',
          'doc',
          'docx',
          'xls',
          'xlsx',
          'md',
          'markdown',
          'txt',
          'json',
        ]

        // 只有在扩展名属于常见文件类型时，才当作文件保留；否则视为网页链接，过滤掉
        return fileLikeExts.includes(ext)
      } catch {
        // URL 解析失败时保留，避免误删正常路径
        return true
      }
    })
  }, [artifactsFromStore, artifactsProp, toolCallArtifacts])

  // 仅在 initialSelected 实际变化时同步（不依赖 allArtifacts，避免流推时反复触发）
  useEffect(() => {
    if (initialSelected) {
      userSelectedRef.current = false
      setSelectedArtifact(initialSelected)
      setFromFileList(false)
    }
  }, [initialSelected])

  // 只有「当前没有选中」时才自动选中单一文件，防止流式推送中途重置预览
  useEffect(() => {
    if (!initialSelected && allArtifacts.length === 1) {
      setSelectedArtifact(prev => prev ?? allArtifacts[0])
      setFromFileList(false)
    }
  // 用 length 而非整个 allArtifacts，避免每次新事件导致数组引用变化而触发
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [allArtifacts.length, initialSelected])

  // 筛选出所有图片
  const images = useMemo(() => {
    return allArtifacts.filter(a => isImageFile(a.path))
  }, [allArtifacts])

  // 选择文件
  const handleSelect = useCallback((artifact: TaskArtifact) => {
    userSelectedRef.current = true
    setSelectedArtifact(artifact)
    setFromFileList(true)
  }, [])

  // 返回列表
  const handleBack = useCallback(() => {
    setSelectedArtifact(null)
    setFromFileList(false)
  }, [])

  const panel = (
    <div
      className={cn(
        'h-full flex flex-col rounded-none border-l border-border',
        'transition-all duration-300 ease-in-out',
        className
      )}
      style={{ width: panelMode === 'dialog' ? '100%' : width }}
    >
      {/* 内容区 */}
      <div className="flex-1 overflow-hidden relative">
        {selectedArtifact || (allArtifacts.length === 1 && allArtifacts[0]) ? (
          <div className="absolute inset-0 animate-in fade-in-0 slide-in-from-right-4 duration-300">
            <ArtifactPreview
              artifact={selectedArtifact || allArtifacts[0]}
              fromFileList={fromFileList}
              images={images}
              getUrl={getUrl}
              onBack={allArtifacts.length > 1 ? handleBack : undefined}
              onDownload={onDownload}
              onClose={onClose}
            />
          </div>
        ) : (
          <div className="absolute inset-0 animate-in fade-in-0 slide-in-from-left-4 duration-300">
            <ArtifactList
              artifacts={allArtifacts}
              onClick={handleSelect}
              selected={selectedArtifact}
              className="h-full"
            />
          </div>
        )}
      </div>
    </div>
  )

  if (panelMode === 'dialog') {
    return (
      <Dialog open={visible} onOpenChange={(open) => { if (!open) onClose?.() }}>
        <DialogContent className="max-w-5xl w-[90vw] h-[80vh] p-0 overflow-hidden">
          {panel}
        </DialogContent>
      </Dialog>
    )
  }

  return panel
}

export const TaskPanel = React.memo(InnerTaskPanel)
export default TaskPanel

// 导出子组件
export { ArtifactList } from './ArtifactList'
export { ArtifactPreview } from './ArtifactPreview'