import { Image, Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useEffect, useState } from 'react'
import { getA5Files } from '@/lib/a5/api'
import type { A5File } from '@/lib/a5/data'
import { LOCAL_IMAGES } from '@/lib/assets'
import type { OrderLike } from '@/lib/order'

const PLATFORMS = [
  { scene: 'order_process_gd', name: '高德地图' },
  { scene: 'order_process_bd', name: '百度地图' },
  { scene: 'order_process_tx', name: '腾讯地图' },
]
export default function A5Detail ({ order, linkId, onCancel }: { order: OrderLike, linkId: string, onCancel: () => void }) {
  return (
    <View className='detail-mask' onClick={onCancel}>
      <View className='detail-drawer' onClick={(event) => event.stopPropagation()}>
        <View className='detail-dialog__head'>
          <Text className='detail-dialog__title'>详情</Text>
          <View className='detail-dialog__close' onClick={onCancel}><Image className='detail-dialog__close-img' src={LOCAL_IMAGES.close} /></View>
        </View>
        <View className='detail-dialog__body'>
          <Text className='detail-dialog__section-title'>完成截图</Text>
          {order.process_status === '2' ? PLATFORMS.map((platform) => (
            <PlatformFiles key={`${order.order_id}-${platform.scene}`} orderId={String(order.order_id)} linkId={linkId} {...platform} />
          )) : <Text className='detail-dialog__empty'>暂无完成截图</Text>}
        </View>
      </View>
    </View>
  )
}
function PlatformFiles ({ orderId, linkId, scene, name }: { orderId: string, linkId: string, scene: string, name: string }) {
  const [files, setFiles] = useState<A5File[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')
  const [attempt, setAttempt] = useState(0)
  useEffect(() => {
    let active = true
    setLoading(true)
    setError('')
    void getA5Files(linkId, orderId, scene).then((result) => {
      if (active) setFiles(result)
    }).catch((reason) => {
      if (active) setError(reason instanceof Error ? reason.message : '截图加载失败')
    }).finally(() => { if (active) setLoading(false) })
    return () => { active = false }
  }, [linkId, orderId, scene, attempt])
  const isDocument = (file: A5File) => file.fileType === 'document' || /\.pdf(?:\?|$)/i.test(file.url)
  const images = files.filter((file) => !isDocument(file))
  return (
    <View className='detail-dialog__section'>
      <Text className='detail-dialog__section-title'>{name}</Text>
      {loading ? <Text>截图加载中...</Text> : error ? (
        <View onClick={() => setAttempt((value) => value + 1)}><Text>{error}，点击重试</Text></View>
      ) : !files.length ? <Text className='detail-dialog__empty'>暂无完成截图</Text> : <>
        {images.map((file) => <Image key={file.id || file.url} className='detail-dialog__shot' src={file.url} mode='widthFix' onClick={() => Taro.previewImage({ current: file.url, urls: images.map((image) => image.url) })} />)}
        {files.filter(isDocument).map((file) => <View key={file.id || file.url} className='detail-dialog__pdf' onClick={() => void openDocument(file)}><Text>{file.name || '报告文件'}</Text></View>)}
      </>}
    </View>
  )
}
async function openDocument (file: A5File) {
  try {
    if (Taro.getEnv() !== Taro.ENV_TYPE.WEAPP) {
      await Taro.setClipboardData({ data: file.url })
      return
    }
    Taro.showLoading({ title: '打开中...' })
    const response = await Taro.downloadFile({ url: file.url })
    if (response.statusCode !== 200) throw new Error('下载失败')
    await Taro.openDocument({ filePath: response.tempFilePath, showMenu: true })
  } catch { Taro.showToast({ title: '报告打开失败', icon: 'none' }) } finally { Taro.hideLoading() }
}