import { Ionicons } from '@expo/vector-icons'
import { Block, ConfirmModal, ListEmpty, Text, Toast, VideoBox } from '@share/components'
import { FlashList } from '@shopify/flash-list'
import { router, Stack, useFocusEffect } from 'expo-router'
import { observer } from 'mobx-react-lite'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { ActivityIndicator } from 'react-native'

import { bleManager } from '@/ble/managers/bleManager'
import BannerSection from '@/components/BannerSection'
import { bleStore, userStore } from '@/stores'
import { screenWidth } from '@/utils'
import { buildCdnUrl } from '@/utils/getCDNKey'

// ============ 主组件 ============
const Device = observer(() => {
  const { user } = userStore
  const { isConnected } = bleStore.state
  const { galleryList } = bleStore
  const itemWidth = Math.floor((screenWidth - 12 * 2 - 12 * 2) / 3)

  // ✅ 本地状态：直接从 Promise 获取数据
  const [deviceInfo, setDeviceInfo] = useState<any>(null)
  const [version, setVersion] = useState<string>('')
  const [memoryStats, setMemoryStats] = useState({
    total: 0n,
    used: 0n,
    available: 0n,
  })
  const [loading, setLoading] = useState(false)

  // ✅ 页面聚焦时自动获取设备信息和版本号
  useFocusEffect(
    useCallback(() => {
      if (isConnected) {
        queryDeviceData()
      }
    }, [isConnected]),
  )

  useEffect(() => {
    if (!isConnected) {
      Toast.show({ title: '设备已断开连接' })
      router.back()
    }
  }, [isConnected])

  // ✅ 直接从 Promise 获取数据
  const queryDeviceData = useCallback(async () => {
    try {
      setLoading(true)

      // 并行获取设备版本号和设备信息
      const [versionInfo, deviceInfoData] = await Promise.all([
        bleManager.getDeviceVersion().catch((err) => {
          console.warn('[Device] Failed to get version:', err)
          return null
        }),
        bleManager.getDeviceInfo().catch((err) => {
          console.warn('[Device] Failed to get device info:', err)
          return null
        }),
      ])
      console.log('queryDeviceData------------', deviceInfoData)

      // ✅ 直接使用返回的数据更新本地状态
      if (versionInfo) {
        setVersion(versionInfo.version || '')
      }

      if (deviceInfoData) {
        setDeviceInfo(deviceInfoData)

        // 计算内存信息
        const totalMemory = deviceInfoData.allspace || 0n
        const availableMemory = deviceInfoData.freespace || 0n
        const usedMemory = totalMemory - availableMemory

        setMemoryStats({
          total: totalMemory,
          used: usedMemory,
          available: availableMemory,
        })
      }
    } catch (error) {
      console.error('[Device] Failed to query device data:', error)
      Toast.show({ title: '获取设备信息失败' })
    } finally {
      setLoading(false)
    }
  }, [])

  // ✅ 计算内存百分比和显示文本（处理 bigint）
  const memoryDisplay = useMemo(() => {
    if (memoryStats.total === 0n) return null

    const totalMB = Number(memoryStats.total) / 1024
    const usedMB = Number(memoryStats.used) / 1024
    const availableMB = Number(memoryStats.available) / 1024
    const usagePercent =
      memoryStats.total > 0n ? Math.round((Number(memoryStats.used) / Number(memoryStats.total)) * 100) : 0

    return {
      total: totalMB.toFixed(1),
      used: usedMB.toFixed(1),
      available: availableMB.toFixed(1),
      percent: usagePercent,
    }
  }, [memoryStats])

  const renderGridItem = useCallback(
    ({ item }: { item: any }) => {
      const handleDeleteConfirm = async () => {
        try {
          // ✅ 直接使用 Promise 返回值
          const result = await bleManager.deleteFile(item)
          console.log('result--------------', result)

          if (result.success === 0) {
            bleStore.removeGalleryItem(item)
            Toast.hideModal()
            Toast.show({ title: '删除成功' })
          } else {
            const errorMsg = result.success === 1 ? '删除失败' : result.success === 2 ? '文件不存在' : '未知错误'
            Toast.show({ title: errorMsg })
          }
        } catch (error: any) {
          console.error('Error deleting file:', error)
          Toast.show({ title: error.message || '删除失败' })
        }
      }

      const handleDelete = async () => {
        if (!isConnected) {
          Toast.show({ title: '请先连接设备' })
          return
        }
        if (galleryList.length <= 1) {
          Toast.show({ title: '至少保留一个文件' })
          return
        }
        Toast.showModal(
          <ConfirmModal
            title="删除文件"
            content={
              <Text className="text-[14px] font-bold leading-relaxed text-gray-800">确定要删除这个文件吗？</Text>
            }
            onCancel={() => Toast.hideModal()}
            onConfirm={handleDeleteConfirm}
          />,
        )
      }

      const url = buildCdnUrl(item)
      if (!url) return null

      return (
        <Block className="relative">
          <Block
            className={`relative overflow-hidden border-2 ${'shadow-hard-black'} ${'border-black'}`}
            style={{ transform: [{ skewX: '-6deg' }], height: itemWidth, width: itemWidth }}
          >
            <Block className="flex items-center justify-center" style={{ height: itemWidth, width: itemWidth }}>
              <VideoBox style={{ width: itemWidth, height: itemWidth }} url={url} />
            </Block>

            {/* 删除按钮 */}
            <Block
              className="absolute right-1 top-1 z-20 size-6 items-center justify-center rounded-full border-2 border-black bg-[#e61e25] shadow-hard-black"
              style={{ transform: [{ skewX: '6deg' }] }}
              onClick={() => {
                handleDelete()
              }}
            >
              <Ionicons color="white" name="trash-outline" size={12} />
            </Block>
          </Block>
        </Block>
      )
    },
    [itemWidth, isConnected, galleryList.length],
  )

  const renderHeader = () => (
    <Block className="flex-row items-center justify-between px-[16px]" style={{ paddingTop: 12, paddingBottom: 12 }}>
      <Block className="ml-[-8px] size-[40px] items-center justify-center" opacity={0.7} onClick={() => router.back()}>
        <Ionicons color="white" name="chevron-back" size={24} />
      </Block>
      <Text className="text-[16px] font-[700] text-white">吧唧管理</Text>
      <Block className="w-[32px]" />
    </Block>
  )

  // ✅ 显示设备信息（名称、品牌、分辨率、电池电量、内存等）
  const renderDeviceInfo = () => {
    return (
      <Block className="mx-[16px] mb-[12px] rounded-lg border-2 border-black bg-gray-900 p-[12px] shadow-hard-black">
        {/* 标题栏 */}
        <Block className="mb-[8px] flex-row items-center justify-between">
          <Text className="text-[14px] font-bold text-white">设备信息</Text>
          {loading && <ActivityIndicator color="#FFE500" size="small" />}
        </Block>

        {/* 设备基本信息 */}
        <Block className="mb-[8px] space-y-[8px] border-b border-gray-700 pb-[8px]">
          {/* 设备名称 */}
          {deviceInfo?.name && (
            <Block className="flex-row items-center justify-between">
              <Text className="text-[12px] text-gray-500">设备名称</Text>
              <Text className="text-[12px] text-white">{deviceInfo.name}</Text>
            </Block>
          )}

          {/* 品牌 */}
          {deviceInfo?.brand && (
            <Block className="flex-row items-center justify-between">
              <Text className="text-[12px] text-gray-500">品牌</Text>
              <Text className="text-[12px] font-bold text-white">{deviceInfo.brand}</Text>
            </Block>
          )}

          {/* 分辨率 */}
          {deviceInfo?.size && (
            <Block className="flex-row items-center justify-between">
              <Text className="text-[12px] text-gray-500">分辨率</Text>
              <Text className="text-[12px] font-bold text-white">{deviceInfo?.size}</Text>
            </Block>
          )}

          {/* 固件版本 */}
          {version && (
            <Block className="flex-row items-center justify-between">
              <Text className="text-[12px] text-gray-500">固件版本</Text>
              <Text className="text-[12px] font-bold text-white">{version}</Text>
            </Block>
          )}

          {/* 电池电量 */}
          {deviceInfo?.powerlevel !== undefined && (
            <Block className="flex-row items-center justify-between">
              <Text className="text-[12px] text-gray-500">电池电量</Text>
              <Block className="flex-row items-center gap-[4px]">
                <Block
                  className="h-[4px] w-[20px] rounded-sm bg-gray-600"
                  style={{
                    backgroundColor:
                      deviceInfo.powerlevel > 50 ? '#22c55e' : deviceInfo.powerlevel > 20 ? '#eab308' : '#ef4444',
                  }}
                />
                <Text className="text-[12px] font-bold text-white">{deviceInfo.powerlevel}%</Text>
              </Block>
            </Block>
          )}
        </Block>

        {/* 内存信息 */}
        {memoryDisplay && (
          <Block className="space-y-[8px]">
            {/* 内存标题 */}
            <Block className="mb-[8px] flex-row items-center justify-between">
              <Text className="text-[12px] font-bold text-white">存储空间</Text>
              <Text className="text-[11px] text-gray-400">{memoryDisplay.percent}% 已使用</Text>
            </Block>

            {/* 内存进度条 */}
            <Block className="h-[6px] overflow-hidden rounded-full bg-gray-700">
              <Block
                className="h-full bg-yellow-400 bg-gradient-to-r"
                style={{
                  height: 6,
                  width: `${memoryDisplay.percent}%`,
                }}
              />
            </Block>

            {/* 内存详细信息 */}
            <Block className="mt-[8px] flex-row justify-between gap-[8px]">
              <Block className="flex-1">
                <Text className="mb-[2px] text-[10px] text-gray-500">已使用</Text>
                <Text className="text-[12px] font-bold text-yellow-400">{memoryDisplay.used} MB</Text>
              </Block>
              <Block className="flex-1">
                <Text className="mb-[2px] text-[10px] text-gray-500">可用</Text>
                <Text className="text-[12px] font-bold text-green-400">{memoryDisplay.available} MB</Text>
              </Block>
              <Block className="flex-1">
                <Text className="mb-[2px] text-[10px] text-gray-500">总容量</Text>
                <Text className="text-[12px] font-bold text-white">{memoryDisplay.total} MB</Text>
              </Block>
            </Block>
          </Block>
        )}
      </Block>
    )
  }

  return (
    <Block className="relative flex-1 bg-black">
      <BannerSection />
      <Stack.Screen options={{ headerShown: false }} />
      {renderHeader()}

      <Block className="z-10 flex-1">
        {renderDeviceInfo()}
        <FlashList
          contentContainerStyle={{ paddingHorizontal: 12, paddingBottom: 200 }}
          data={galleryList}
          drawDistance={1200}
          // @ts-ignore
          estimatedItemSize={itemWidth}
          getItemType={() => 'row'}
          ItemSeparatorComponent={() => <Block style={{ height: 6 }} />}
          keyExtractor={(item) => item}
          ListEmptyComponent={<ListEmpty />}
          numColumns={3}
          renderItem={renderGridItem}
        />
      </Block>
    </Block>
  )
})

export default Device