import { CloudUploadOutlined, PlusOutlined } from '@ant-design/icons'
import { App, Typography, Upload } from 'antd'
import type { UploadFile, UploadProps } from 'antd'
import { useEffect, useRef, useState } from 'react'
import type { ClipboardEvent, DragEvent, FocusEvent, MouseEvent } from 'react'

import { uploadFile } from '@/services/files'
import type { UploadedFile } from '@/types/worker-platform'

type ImageUploadProps = {
  value?: UploadedFile[]
  onChange?: (files: UploadedFile[]) => void
  scene: string
  scope: 'admin' | 'worker' | 'collect'
  maxCount?: number
  showPasteHint?: boolean
  /** 开启后，页面任意位置粘贴剪贴板截图都会上传到本组件（多实例时以最近点击/挂载的为准） */
  captureGlobalPaste?: boolean
}

type GlobalPasteTarget = {
  id: number
  uploadImages: (files: File[]) => void
}

type UploadSource = 'default' | 'drag'

let nextTargetId = 1
const globalPasteTargets: GlobalPasteTarget[] = []
let globalPasteListenerAttached = false

function handleDocumentPaste(event: DocumentEventMap['paste']) {
  const files = Array.from(event.clipboardData?.files || [])
  const images = files.filter((file) => file.type.startsWith('image/'))
  if (images.length === 0) return
  const target = globalPasteTargets[globalPasteTargets.length - 1]
  if (!target || event.defaultPrevented) return
  event.preventDefault()
  target.uploadImages(images)
}

function ensureGlobalPasteListener() {
  if (globalPasteListenerAttached) return
  globalPasteListenerAttached = true
  document.addEventListener('paste', handleDocumentPaste)
}

function registerGlobalPasteTarget(target: GlobalPasteTarget): () => void {
  globalPasteTargets.push(target)
  ensureGlobalPasteListener()
  return () => {
    const index = globalPasteTargets.findIndex((item) => item.id === target.id)
    if (index >= 0) globalPasteTargets.splice(index, 1)
  }
}

export default function ImageUpload({
  value = [],
  onChange,
  scene,
  scope,
  maxCount = 6,
  showPasteHint = false,
  captureGlobalPaste = false,
}: ImageUploadProps) {
  const { message } = App.useApp()
  const [isDragging, setIsDragging] = useState(false)
  const dragCounterRef = useRef(0)
  const targetIdRef = useRef(0)
  const valueRef = useRef(value)
  valueRef.current = value

  const fileList: UploadFile[] = value.map((file) => ({
    uid: file.objectKey || file.url,
    name: file.filename || '图片',
    status: 'done',
    url: file.thumbnailUrl || file.url,
    thumbUrl: file.thumbnailUrl || file.url,
  }))

  async function uploadImages(
    images: File[],
    source: UploadSource = 'default',
  ) {
    const remaining = maxCount - valueRef.current.length
    if (remaining <= 0) {
      message.warning(`最多上传 ${maxCount} 张图片`)
      return
    }
    const next = [...valueRef.current]
    for (const file of images.slice(0, remaining)) {
      try {
        const uploaded = await uploadFile(file, scene, scope)
        next.push(uploaded)
      } catch (error) {
        message.error(resolveUploadErrorMessage(error, source))
      }
    }
    if (next.length > valueRef.current.length) {
      valueRef.current = next
      onChange?.(next)
    }
  }

  async function uploadFiles(
    files: File[],
    source: UploadSource = 'default',
  ) {
    const images = files.filter((file) => file.type.startsWith('image/'))
    if (images.length === 0) return
    await uploadImages(images, source)
  }

  function handlePaste(event: ClipboardEvent<HTMLDivElement>) {
    const files = Array.from(event.clipboardData?.files || [])
    if (files.length === 0) return
    event.preventDefault()
    void uploadFiles(files)
  }

  function handleDragEnter(event: DragEvent<HTMLDivElement>) {
    event.preventDefault()
    event.stopPropagation()
    dragCounterRef.current += 1
    if (event.dataTransfer?.types?.includes('Files')) {
      setIsDragging(true)
    }
  }

  function handleDragOver(event: DragEvent<HTMLDivElement>) {
    event.preventDefault()
    event.stopPropagation()
    if (event.dataTransfer) {
      event.dataTransfer.dropEffect = 'copy'
    }
  }

  function handleDragLeave(event: DragEvent<HTMLDivElement>) {
    event.preventDefault()
    event.stopPropagation()
    dragCounterRef.current -= 1
    if (dragCounterRef.current <= 0) {
      dragCounterRef.current = 0
      setIsDragging(false)
    }
  }

  function handleDrop(event: DragEvent<HTMLDivElement>) {
    event.preventDefault()
    event.stopPropagation()
    dragCounterRef.current = 0
    setIsDragging(false)
    const files = Array.from(event.dataTransfer?.files || [])
    if (files.length > 0) {
      void uploadFiles(files, 'drag')
    }
  }

  function activateGlobalPasteTarget() {
    const index = globalPasteTargets.findIndex((item) => item.id === targetIdRef.current)
    if (index < 0) return
    const [target] = globalPasteTargets.splice(index, 1)
    globalPasteTargets.push(target)
  }

  useEffect(() => {
    if (!captureGlobalPaste) return
    const targetId = nextTargetId++
    targetIdRef.current = targetId
    const unregister = registerGlobalPasteTarget({
      id: targetId,
      uploadImages: (files) => void uploadImages(files),
    })
    return unregister
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [captureGlobalPaste])

  function handleWrapperFocus(event: FocusEvent<HTMLDivElement>) {
    if (captureGlobalPaste) activateGlobalPasteTarget()
  }

  function handleWrapperClick(event: MouseEvent<HTMLDivElement>) {
    if (captureGlobalPaste) activateGlobalPasteTarget()
  }

  const customRequest: UploadProps['customRequest'] = async (options) => {
    try {
      const uploaded = await uploadFile(options.file as File, scene, scope)
      // 多文件选择会并发执行 customRequest，必须以 ref 中的最新列表累加，避免后完成的上传覆盖前面的图片。
      const next = [...valueRef.current, uploaded].slice(0, maxCount)
      valueRef.current = next
      onChange?.(next)
      options.onSuccess?.(uploaded)
    } catch (error) {
      message.error(error instanceof Error ? error.message : '上传失败')
      options.onError?.(error instanceof Error ? error : new Error('上传失败'))
    }
  }

  return (
    <div
      className={`image-upload-droppable ${isDragging ? 'is-dragging' : ''}`}
      onPaste={handlePaste}
      onDropCapture={handleDrop}
      onDragEnterCapture={handleDragEnter}
      onDragOverCapture={handleDragOver}
      onDragLeaveCapture={handleDragLeave}
      onFocusCapture={handleWrapperFocus}
      onClickCapture={handleWrapperClick}
    >
      {isDragging && (
        <div className="image-upload-drag-overlay">
          <CloudUploadOutlined className="image-upload-drag-icon" />
          <span className="image-upload-drag-text">松开鼠标即可上传图片</span>
          <span className="image-upload-drag-subtext">支持单张或批量拖入多张图片</span>
        </div>
      )}
      <Upload
        accept="image/jpeg,image/png,image/webp"
        multiple
        listType="picture-card"
        fileList={fileList}
        maxCount={maxCount}
        customRequest={customRequest}
        onRemove={(file) => {
          const next = valueRef.current.filter(
            (item) => (item.objectKey || item.url) !== file.uid,
          )
          valueRef.current = next
          onChange?.(next)
          return true
        }}
        showUploadList={{ showPreviewIcon: false }}
      >
        {value.length >= maxCount ? null : (
          <button className="image-upload-trigger" type="button">
            <PlusOutlined />
            <span>上传</span>
          </button>
        )}
      </Upload>
      {showPasteHint ? (
        <Typography.Text type="secondary" className="image-upload-hint">
          点击选择图片上传；截图后可直接按 Ctrl+V / ⌘V 粘贴，或拖拽图片到此处
        </Typography.Text>
      ) : null}
    </div>
  )
}

function resolveUploadErrorMessage(error: unknown, source: UploadSource) {
  const errorMessage = error instanceof Error ? error.message : '上传失败'
  if (source === 'drag' && /网络连接错误|Network Error/i.test(errorMessage)) {
    return '拖拽图片读取失败，请复制图片后粘贴，或保存到本地后点击上传'
  }
  return errorMessage
}