import { AntDesign, EvilIcons, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons'
import { useIsFocused } from '@react-navigation/native'
import {
  Block,
  ConfirmModal,
  Img,
  Input,
  ListEmpty,
  SpinningLoader,
  SyncProgressToast,
  Text,
  Toast,
  VideoBox,
} from '@share/components'
import { FlashList } from '@shopify/flash-list'
import * as ImagePicker from 'expo-image-picker'
import { router } from 'expo-router'
import { observer } from 'mobx-react-lite'
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { ActivityIndicator, RefreshControl, ScrollView } from 'react-native'
import { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated'
import { useSafeAreaInsets } from 'react-native-safe-area-context'

import { imgPicker } from '@/@share/apis'
import { bleManager } from '@/ble/managers/bleManager'
import BannerSection from '@/components/BannerSection'
import { useTemplateActions } from '@/hooks/actions/use-template-actions'
import { useTemplateGenerations } from '@/hooks/data/use-template-generations'
import { bleStore, userStore } from '@/stores'
import { screenWidth, uploadFile } from '@/utils'
import { cn } from '@/utils/cn'
import { extractCdnKey } from '@/utils/getCDNKey'

const ITEM_GAP = 6
// FlashList 会将可用宽度(screenWidth - padding*2)平均分配给每列
// 所以每个item容器的宽度是 (screenWidth - 24) / 3
// item实际显示宽度需要减去间距
const ITEM_CONTAINER_WIDTH = Math.floor((screenWidth - 12 * 2) / 3)
const ITEM_WIDTH = ITEM_CONTAINER_WIDTH - ITEM_GAP

// ============ 主组件 ============
const Sync = observer(() => {
  // 从MobX Store获取用户信息
  const { user, isLogin } = userStore
  const insets = useSafeAreaInsets()
  const {
    data: generationsData,
    loading: generationsLoading,
    loadingMore,
    load: loadGenerations,
    loadMore,
    refetch,
  } = useTemplateGenerations()
  const { reRunTemplate, batchDeleteGenerations, loading: actionLoading } = useTemplateActions()

  const [viewState, setViewState] = useState<'home' | 'manager' | 'scanner'>('home')
  const [selectedItem, setSelectedItem] = useState({
    id: '',
    imageUrl: '',
    // url 是网络地址，本地预览使用 imageUrl
    webpPreviewUrl: '',
    webpHighPreviewUrl: '',

    url: '',
    originalUrl: '',
    templateId: '',
    asset: {},
    price: 0,
  })
  const [isSelectionMode, setIsSelectionMode] = useState(false)
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())

  // 直接使用 useIsFocused hook，页面失焦时不渲染列表项以减少内存占用
  const isFocused = useIsFocused()

  const { connectedDevice, isScanning, transferProgress } = bleStore.state

  // 加载生成记录
  useEffect(() => {
    if (isFocused) {
      // loadGenerations()
    }
  }, [isFocused])

  // 将生成记录转换为 posts 格式
  const posts = useMemo(() => {
    const generations = generationsData || []
    return generations?.map((gen: any) => {
      const imageUrl = Array.isArray(gen?.resultUrl) ? gen?.resultUrl[0] : gen?.resultUrl
      const coverUrl = gen?.template?.coverImageUrl
      return {
        id: gen?.id,
        itemType: 'post' as const,

        // 模板静态图片
        coverUrl: coverUrl,

        imageUrl: imageUrl,
        url: imageUrl,

        webpPreviewUrl: gen.webpPreviewUrl,
        webpHighPreviewUrl: gen.webpHighPreviewUrl,

        originalUrl: gen?.originalUrl,
        templateId: gen?.templateId,
        type: gen?.type,
        status: gen?.status,
        createdAt: gen?.createdAt,
        price: gen?.template?.price || -1,
        title: `生成-${gen?.id.slice(0, 6)}`,
        rank: 'S',
        author: user?.name || 'User',
        avatarUrl:
          user?.image ||
          'https://image.pollinations.ai/prompt/cool%20anime%20boy%20avatar%20hoodie?seed=123&nologo=true',
      }
    })
  }, [generationsData])

  useEffect(() => {
    if (!selectedItem?.id && posts.length > 0) {
      const firstItem = posts.filter((p: any) => p.status === 'completed' || p.status === 'success')[0]

      if (firstItem?.id) {
        const newItem = {
          id: firstItem.id,
          imageUrl: firstItem.imageUrl,
          url: firstItem.url,

          webpPreviewUrl: firstItem.webpPreviewUrl,
          webpHighPreviewUrl: firstItem.webpHighPreviewUrl,

          originalUrl: firstItem.originalUrl,
          templateId: firstItem.templateId,
          asset: firstItem?.asset || {},
          price: firstItem?.price || -1,
        }
        setSelectedItem(newItem)
      }
    }
  }, [posts])

  // console.log('selectedItem-----------', selectedItem)

  const canSync = useMemo(() => {
    return !!connectedDevice?.id
  }, [connectedDevice, selectedItem])

  const handleSync = async () => {
    if (!canSync) {
      Toast.show({ title: '请先连接设备' })
      return
    }
    if (!selectedItem?.imageUrl) {
      Toast.show({ title: '请等待模板生成完成再同步' })
      return
    }

    const transferring = bleStore.state.loading.transferring || bleStore.state.loading.converting

    if (transferring) {
      Toast.show({ title: '已有文件同步中，请稍后' })
      return
    }

    // 先预览直接转 ani 同步

    let fileUrl = selectedItem?.url

    // 是本地文件则先上传
    if (!selectedItem?.url && selectedItem?.asset?.uri) {
      Toast.showLoading({ title: '上传中...', duration: 30e3 })

      const result = selectedItem?.asset
      const url = await uploadFile({
        uri: result.uri,
        mimeType: result.mimeType,
        fileName: result.fileName,
      })
      fileUrl = url
      setSelectedItem((prev) => ({ ...prev, url: fileUrl }))
      Toast.hideLoading()
    }

    console.log('handlePick------------', fileUrl)

    bleStore.setState((prestate) => {
      return { ...prestate, transferProgress: 0 }
    })

    Toast.showLoading({
      renderContent: () => <SyncProgressToast />,
      duration: 0,
      // 同步时禁用返回按钮
      onBackButtonPress: () => {},
    })

    bleManager
      .transferMediaSingle(fileUrl)
      .then(() => {
        const key = extractCdnKey(fileUrl)
        bleStore.addGalleryItem(key!)
        Toast.show({ title: '同步成功' })
      })
      .catch((e) => {
        console.log('transferMediaSingle e--------', e)

        Toast.show({ title: e || '同步失败' })
      })
      .finally(() => {
        Toast.hideLoading()
      })
  }

  const handlePick = useCallback(async () => {
    const assetList = await imgPicker({ maxImages: 1, type: ImagePicker.MediaTypeOptions.All, resultType: 'asset' })

    if (!assetList?.length) return

    const result = assetList[0] as any
    console.log('result----------', result)

    const newItem = {
      id: `local-${Date.now()}`,
      // type: isVideo ? 'video' : 'image',
      imageUrl: result?.uri,
      url: '',

      webpPreviewUrl: '',
      webpHighPreviewUrl: '',

      coverUrl: '',

      originalUrl: result?.uri,
      templateId: '',
      asset: result,
      price: -1,
    }

    setSelectedItem(newItem)
  }, [connectedDevice, handleSync])

  const startConnect = useCallback(() => {
    setViewState('manager')
    bleManager.startScan()
  }, [])

  // 当离开设备管理页面时停止扫描
  useEffect(() => {
    if (viewState !== 'manager' && isScanning) {
      bleManager.stopScan()
    }
  }, [viewState, isScanning])

  const handleGenAgain = useCallback(() => {
    console.log('selectedItem==========', selectedItem)

    if (!selectedItem?.templateId) {
      Toast.show({ title: '请先选择一个生成记录' })
      return
    }

    const price = selectedItem?.price

    if (price <= 0) {
      Toast.show({ title: '请先上传' })
      return
    }

    Toast.showModal(
      <ConfirmModal
        title="确认生成同款风格吗？"
        content={
          <Text className="font-[bol]d text-[14px] leading-relaxed text-gray-800">
            生成同款风格将消耗 <Text className="font-[bla]ck mx-[4px] text-[20px] text-[#e61e25]">{price} </Text> 算力。
          </Text>
        }
        onCancel={() => Toast.hideModal()}
        onConfirm={handleGenAgainConfirm}
      />,
    )
  }, [selectedItem])

  const handleGenAgainConfirm = async () => {
    console.log('handleGenAgainConfirm selectedItem-----------', selectedItem)

    if (!selectedItem?.templateId) {
      Toast.show({ title: '请先选择一个生成记录' })
      return
    }

    Toast.hideModal()

    const { generationId, error } = await reRunTemplate({
      generationId: selectedItem?.id,
    })

    Toast.hideLoading()

    if (error || !generationId) {
      Toast.show({ title: error?.message || '生成失败' })
      return
    }

    Toast.show({
      renderContent: () => (
        <Block
          className="flex w-full flex-row items-center justify-center border-[3px] border-white bg-black"
          style={{ paddingVertical: 14, transform: [{ skewX: '-6deg' }] }}
        >
          <AntDesign color="white" name="check-circle" size={20} />
          <Block style={{ marginLeft: 8 }}>
            <Text className="font-[bla]ck text-[14px] text-white">生成中...</Text>
          </Block>
        </Block>
      ),
    })

    // 刷新列表
    if (user?.id) {
      loadGenerations()
    }
  }

  const toggleSelectionMode = useCallback(() => {
    setIsSelectionMode((v) => !v)
    setSelectedIds(new Set())
  }, [])

  const handleItemSelect = (post: any) => {
    if (!post?.id) return // 防止访问 undefined 的 id

    if (isSelectionMode) {
      const next = new Set(selectedIds)
      if (next.has(post.id)) next.delete(post.id)
      else next.add(post.id)
      setSelectedIds(next)
    } else {
      setSelectedItem(post)
    }
  }

  const handleDelete = useCallback(async () => {
    if (selectedIds.size === 0) return

    const { success, error } = await batchDeleteGenerations(Array.from(selectedIds))

    if (error || !success) {
      Toast.show({ title: error?.message || '删除失败' })
      return
    }

    Toast.show({ title: `成功删除 ${selectedIds.size} 个生成记录` })

    // 刷新列表
    if (user?.id) {
      await loadGenerations()
    }

    setSelectedIds(new Set())
    setIsSelectionMode(false)
  }, [selectedIds, batchDeleteGenerations, user?.id, loadGenerations])

  const selectAll = useCallback(() => {
    const validPosts = posts.filter((p: any) => p?.id) // 过滤掉没有 id 的 posts
    if (selectedIds.size === validPosts.length) {
      setSelectedIds(new Set())
    } else {
      setSelectedIds(new Set(validPosts.map((p: any) => p.id)))
    }
  }, [posts, selectedIds.size])

  // 下拉刷新
  const [refreshing, setRefreshing] = useState(false)
  const onRefresh = useCallback(async () => {
    setRefreshing(true)
    try {
      await refetch()
    } finally {
      setRefreshing(false)
    }
  }, [refetch])

  // 加载更多
  const onLoadMore = () => {
    // console.log('loadMore----------------')
    loadMore()
  }

  // 列表底部组件
  const ListFooter = useMemo(() => {
    if (loadingMore) {
      return (
        <Block className="items-center justify-center py-[20px]">
          <ActivityIndicator color="#FFE500" size="small" />
        </Block>
      )
    }
    return null
  }, [loadingMore])

  // Header 组件
  const renderHeader = useMemo(
    () => (
      <Block className="z-10">
        <HeaderBanner connectedDevice={connectedDevice} onPick={handlePick} />
        <TopCircleSection selectedItem={selectedItem} onStartConnect={startConnect} />
        <FilterButtons isSelectionMode={isSelectionMode} onToggleSelectionMode={toggleSelectionMode} />
      </Block>
    ),
    [connectedDevice, handlePick, selectedItem, startConnect, isSelectionMode, toggleSelectionMode],
  )

  const renderItem = useCallback(
    ({ item }: { item: any }) => {
      const isSelected = isSelectionMode ? selectedIds.has(item?.id) : selectedItem?.id === item?.id

      return (
        <GridItem
          isSelected={isSelected}
          isSelectionMode={isSelectionMode}
          itemWidth={ITEM_WIDTH}
          post={item}
          onSelect={handleItemSelect}
        />
      )
    },
    [isSelectionMode, selectedIds, selectedItem?.id, handleItemSelect],
  )

  if (!isFocused) {
    return null
  }

  // 计算底部内边距：FAB按钮高度(56) + 按钮底部距离(96) + 安全区域 + 额外间距
  const listPaddingBottom = 56 + 96 + insets.bottom + 20

  return (
    <Block className="relative flex-1 bg-black">
      <BannerSection />

      <Block className="z-10 flex-1">
        <FlashList
          contentContainerStyle={{ paddingHorizontal: 12, paddingBottom: listPaddingBottom }}
          data={posts}
          keyExtractor={(item: any) => item?.id}
          ListHeaderComponent={renderHeader}
          ListFooterComponent={ListFooter}
          ListEmptyComponent={<ListEmpty />}
          numColumns={3}
          drawDistance={300}
          maxItemsInRecyclePool={0}
          // 自动移除不可见的原生视图，停止渲染和解码
          removeClippedSubviews={true}
          renderItem={renderItem}
          refreshControl={
            <RefreshControl colors={['#FFE500']} refreshing={refreshing} tintColor="#FFE500" onRefresh={onRefresh} />
          }
          onEndReached={onLoadMore}
          onEndReachedThreshold={0.3}
        />
      </Block>

      <FABButtons onGenAgain={handleGenAgain} handleSync={handleSync} />

      <SelectionBar
        isSelectionMode={isSelectionMode}
        selectedCount={selectedIds.size}
        onDelete={handleDelete}
        onSelectAll={selectAll}
      />

      <ManagerView
        viewState={viewState}
        onBack={() => {
          setViewState('home')
          bleManager.stopScan()
        }}
      />
    </Block>
  )
})

export default Sync

// ============ 小组件 ============
const UpdateNameModal = ({ initialName, onNameChange, onConfirm, onCancel }: any) => {
  const [name, setName] = useState(initialName)

  useEffect(() => {
    setName(initialName)
  }, [initialName])

  const handleChange = (text: string) => {
    setName(text)
    onNameChange && onNameChange(text)
  }

  return (
    <ConfirmModal
      title="修改设备名称"
      content={
        <Block className="w-full gap-[12px] border">
          <Input className="w-full" placeholder="请输入设备名称" value={name} onChangeText={handleChange} />
        </Block>
      }
      onConfirm={onConfirm}
      onCancel={onCancel}
    />
  )
}

const DeviceItem = observer(({ device }: { device: any }) => {
  const { name = 'Unknown Device', id, connected: isConnected } = device

  const bindDevice = bleStore.bindDeviceList?.find((d) => d?.id === id)
  const [nameShow, setNameShow] = useState(bindDevice ? `${bindDevice?.name}` : name)
  const tempName = useRef(nameShow)

  const canEdit = !!bindDevice && isConnected

  // 绑定过的设备
  const hasBind = !!bleStore.bindDeviceList?.find((d) => d?.id === id)

  const { id: userId } = userStore.user || {}
  const onConnectToggle = async (device: any) => {
    if (device.connected) {
      bleManager.disconnectDevice()
    } else {
      await bleManager.disconnectDevice()
      Toast.showLoading({
        title: '连接中...',
        duration: 30e3,
      })
      bleManager
        .connectToDevice(device)
        .then(() => {
          console.log('设备连接成功')
          if (userId) {
            bleManager.bindDevice(userId).then((res) => {
              // console.log('Bind device response------------:', res)
              if (res.success !== 1) {
                Toast.show({ title: '设备已经被其他用户绑定过了' })
                bleManager.disconnectDevice()
              }
            })
          }
        })
        .catch(() => {
          Toast.show({
            title: '设备连接失败',
          })
        })
        .finally(() => {
          Toast.hideLoading()
        })
    }
  }

  const handleUnbindDevice = async (device: any) => {
    if (!userId) {
      Toast.show({ title: '用户未登录' })
      return
    }

    Toast.showModal(
      <ConfirmModal
        title="解绑设备"
        content={`是否解绑设备？`}
        onCancel={() => Toast.hideModal()}
        onConfirm={() => {
          Toast.hideModal()
          unbindDevice(device)
        }}
      />,
    )
  }

  const unbindDevice = async (device: any) => {
    Toast.showLoading({ title: '解绑中...', duration: 30e3 })
    try {
      await bleManager.unBindDevice(userId!)
      bleManager.disconnectDevice()
      bleStore.removeBindDeviceItem(device.id)
      setNameShow(device.name || 'Unknown Device')
      Toast.show({ title: '解绑成功' })
    } catch (error: any) {
      Toast.show({ title: `解绑失败: ${error?.message || error}` })
    } finally {
      Toast.hideLoading()
    }
  }

  const handleUpdateName = () => {
    if (!canEdit) return
    Toast.showModal(
      <UpdateNameModal
        initialName={tempName.current}
        onNameChange={(text: string) => {
          if (text.length > 12) {
            Toast.show({ title: '设备名称不能超过12个字符' })
            return
          }
          tempName.current = text
        }}
        onConfirm={() => {
          console.log('onconfirm-----------', tempName)

          if (bindDevice) {
            bleStore.updateBindDeviceItem({ ...bindDevice, name: tempName.current })
            setNameShow(tempName.current)
          }
          Toast.hideModal()
        }}
        onCancel={() => {
          Toast.hideModal()
          tempName.current = nameShow
        }}
      />,
    )
  }

  return (
    <Block className="relative mb-[16px] flex-row items-center overflow-hidden border-[3px] border-black bg-white p-[16px] shadow-large-black">
      {isConnected && <Block className="absolute inset-y-0 left-0 w-[16px] border-r-[3px] border-black bg-accent" />}

      <Block className="size-[48px] items-center justify-center border-[3px] border-black bg-gray-100 shadow-soft-black-10">
        <Ionicons color="black" name="phone-portrait-outline" size={24} />
      </Block>

      <Block className="relative z-10 ml-[16px] flex-1 flex-row items-center justify-between gap-[16px]">
        <Block className="flex-1">
          <Block className="flex-1 flex-row items-center gap-[8px]" onClick={handleUpdateName}>
            <Block className="flex-row flex-wrap items-center">
              <Text className="break-words text-[18px] font-[900]">{nameShow}</Text>
              {canEdit && <EvilIcons name="pencil" size={24} color="black" />}
            </Block>
          </Block>

          <Block className="relative z-10 mt-[4px] flex-row items-center">
            <Block className="flex-row">
              <Block className="">
                <Text
                  className={`border-2 border-black px-[6px] text-[10px] font-[900] ${isConnected ? 'bg-black text-accent' : 'bg-gray-200 text-gray-500'}`}
                >
                  {isConnected ? '已连接' : '未连接'}
                </Text>
              </Block>

              {hasBind && (
                <Block className="ml-[8px]">
                  <Text
                    className={`border-2 border-black px-[6px] text-[10px] font-[900] ${isConnected ? 'bg-black text-accent' : 'bg-gray-200 text-gray-500'}`}
                  >
                    已绑定
                  </Text>
                </Block>
              )}
            </Block>
          </Block>
        </Block>

        <Block className="relative z-10 flex-col items-end space-x-[8px]">
          <Block
            className={`h-[40px] items-center justify-center border-[3px] border-black px-[16px] text-[12px] font-[900] ${isConnected ? 'bg-accent text-black shadow-medium-black' : 'bg-white text-black shadow-medium-gray'}`}
            onClick={() => onConnectToggle(device)}
          >
            <Text className="text-[12px] font-[900]">{isConnected ? '已连接' : '连接'}</Text>
          </Block>
          {canEdit && (
            <Block
              className={`mt-[4px] h-[40px] items-center justify-center border-[3px] border-black bg-white px-[16px] text-[12px] font-[900] text-black shadow-medium-gray`}
              onClick={() => handleUnbindDevice(device)}
            >
              <Text className={`text-[12px] font-[900]`}>解绑</Text>
            </Block>
          )}
        </Block>
      </Block>
    </Block>
  )
})

const GridItem = memo(
  ({
    post,
    isSelected,
    isSelectionMode,
    itemWidth,
    onSelect,
  }: {
    post: any
    isSelected: boolean
    isSelectionMode: boolean
    itemWidth: number
    onSelect: (post: any) => void
  }) => {
    // 渲染状态标记
    const renderStatusBadge = () => {
      const status = post.status

      // 成功状态不显示标记
      if (status === 'completed' || status === 'success') {
        return null
      }

      // 失败状态
      if (status === 'failed') {
        return (
          <Block
            className="absolute left-[8px] top-[8px] z-20 flex-row items-center gap-[4px] border-2 border-black bg-[#e61e25] px-[8px] py-[4px] shadow-hard-black"
            style={{ transform: [{ skewX: '6deg' }] }}
          >
            <Ionicons color="white" name="close-circle" size={14} />
            <Text className="text-[10px] font-[900] text-white">失败</Text>
          </Block>
        )
      }

      // 其他状态显示加载中
      return (
        <Block
          className="absolute left-[8px] top-[8px] z-20 flex-row items-center gap-[4px] border-2 border-black bg-white px-[8px] py-[4px] shadow-hard-black"
          style={{ transform: [{ skewX: '6deg' }] }}
        >
          <SpinningLoader />
          <Text className="text-[10px] font-[900] text-black">生成中</Text>
        </Block>
      )
    }

    // const imgShow = post.webpPreviewUrl || post.coverUrl

    const imgShow = post.coverUrl

    // console.log('imgShow----------', imgShow)
    const placeholderSrc = null
    // 新数据使用webp 旧数据使用mp4

    const canShow = post.status === 'completed' || post.status === 'success'
    // 容器高度 = item高度 + 底部间距
    const containerHeight = itemWidth + 6
    return (
      <Block
        key={post?.id}
        style={{ width: ITEM_CONTAINER_WIDTH, height: containerHeight }}
        onClick={() => onSelect(post)}
      >
        <Block
          className={`relative overflow-hidden border-2 ${isSelected ? 'shadow-[0px_0px_0px_4px_#FFE500]' : 'shadow-hard-black'} ${isSelected ? 'border-accent' : 'border-black'}`}
          style={{
            height: itemWidth,
            width: itemWidth,
          }}
        >
          <Block style={{ height: itemWidth, width: itemWidth }}>
            {canShow && <Img className="size-full" src={imgShow} isCompression />}
          </Block>
          {isSelected && <Block className="absolute inset-0 border-[3px] border-accent" />}

          {/* 状态标记 */}
          {renderStatusBadge()}

          {isSelectionMode && (
            <Block
              className="absolute inset-0 z-30 items-center justify-center"
              // style={{ transform: [{ skewX: '6deg' }] }}
            >
              <Block className={`size-[32px] items-center justify-center rounded-full`}>
                <Ionicons color="black" name="checkmark" size={20} />
              </Block>
            </Block>
          )}
        </Block>
      </Block>
    )
  },
)

const FilterButtons = observer(
  ({ isSelectionMode, onToggleSelectionMode }: { isSelectionMode: boolean; onToggleSelectionMode: () => void }) => {
    const { isConnected } = bleStore.state
    return (
      <Block className="flex flex-row items-center justify-between" style={{ marginVertical: 16 }}>
        <Block className="flex-row">
          {['我的生成'].map((label) => {
            return (
              <Block
                key={label}
                className={`-skew-x-3 border-2 border-black bg-black px-[16px] py-[4px] shadow-small-accent`}
              >
                <Text className={`text-[10px] font-[900] text-accent`}>{label}</Text>
              </Block>
            )
          })}
        </Block>

        <Block className="flex-row items-center gap-[12px]">
          {isConnected && (
            <Block
              className={`border-2 border-black bg-accent px-[16px] py-[6px] text-white shadow-medium-black`}
              onClick={() => {
                router.push('/device')
              }}
            >
              <Text className="text-[12px] font-[900]">{'吧唧管理'}</Text>
            </Block>
          )}

          <Block
            className={`border-2 border-black px-[16px] py-[6px] shadow-medium-black ${isSelectionMode ? 'bg-[#e61e25] text-white' : 'bg-accent text-black'}`}
            onClick={onToggleSelectionMode}
          >
            <Text className="text-[12px] font-[900]">{isSelectionMode ? '取消' : '管理'}</Text>
          </Block>
        </Block>
      </Block>
    )
  },
)

const SelectionBar = memo(
  ({
    isSelectionMode,
    selectedCount,
    onSelectAll,
    onDelete,
  }: {
    isSelectionMode: boolean
    selectedCount: number
    onSelectAll: () => void
    onDelete: () => void
  }) => {
    const insets = useSafeAreaInsets()
    if (!isSelectionMode) return null

    return (
      <Block className="absolute inset-x-[16px] z-50" style={{ bottom: 96 + insets.bottom }}>
        <Block className="-skew-x-3 flex-row items-center justify-between border-[3px] border-black bg-white p-[12px] shadow-large-black">
          <Block className="skew-x-3 flex-row items-center gap-[12px] pl-[8px]">
            <Text className="text-[14px] font-[900]">已选: {selectedCount}</Text>
            <Block className="text-[12px] underline" onClick={onSelectAll}>
              <Text className="text-[12px] font-[700]">全选</Text>
            </Block>
          </Block>
          <Block
            className={`skew-x-3 flex-row items-center space-x-[8px] border-2 border-black px-[16px] py-[8px] font-[[90]0] text-[14px] shadow-medium-black${selectedCount > 0 ? 'bg-[#e61e25] text-white' : 'bg-gray-200 text-gray-400'}`}
            onClick={onDelete}
          >
            <Ionicons color="black" name="trash-outline" size={16} />
            <Text className="text-[14px] font-[900]">{selectedCount > 0 ? '删除' : '删除'}</Text>
          </Block>
        </Block>
      </Block>
    )
  },
)

const FABButtons = memo(({ onGenAgain, handleSync }: { onGenAgain: () => void; handleSync: () => void }) => {
  const insets = useSafeAreaInsets()
  return (
    <Block className="absolute inset-x-[16px] z-40" style={{ bottom: 96 + insets.bottom }}>
      <Block className="w-full flex-row gap-[12px]">
        <Block className="flex-1 -skew-x-6 shadow-large-black">
          <Block
            className={cn`relative h-[56px] items-center justify-center overflow-hidden border-[2px] border-black bg-[#e61e25] shadow-large-accent`}
            onClick={onGenAgain}
          >
            <Block className="z-10 skew-x-6 flex-row items-center gap-[8px]">
              <MaterialCommunityIcons color="white" name="star-four-points" size={20} />
              <Text className="font-[bol]d text-[16px] text-white">再次生成</Text>
            </Block>
          </Block>
        </Block>

        <Block className="flex-1 -skew-x-6 shadow-large-accent">
          <Block
            className={cn`relative h-[56px] items-center justify-center overflow-hidden border-[2px] border-black bg-black`}
            onClick={handleSync}
          >
            <Block className="z-10 flex-row items-center gap-[8px]">
              <Ionicons color={'white'} name="refresh" size={20} />
              <Text className={cn`font-[bol]d bg-black text-[16px] text-white`}>同步</Text>
            </Block>
          </Block>
        </Block>
      </Block>
    </Block>
  )
})

// ============ 主要组件部分 ============
const HeaderBanner = observer(({ connectedDevice, onPick }: { connectedDevice: any; onPick: () => void }) => {
  const { user, isLogin, signOut } = userStore

  // console.log('user-----------', user)
  // console.log('session--------', session)

  const handleLogout = () => {
    if (isLogin) {
      router.push('/settings')
    }
  }
  const loginText = isLogin ? '设置' : '登录'

  return (
    <Block className="relative z-40 flex-row items-center justify-between py-[12px]">
      <Block className="flex-row items-center gap-[8px] border-2 border-white bg-black py-[4px] shadow-hard-accent">
        <Block className={`size-[8px] ${connectedDevice ? 'bg-accent' : 'bg-red-500'}`} />
        <Text className="text-[12px] font-[900] tracking-[1px] text-white">
          {connectedDevice ? '设备已连接' : '设备离线'}
        </Text>
      </Block>
      <Block className="flex-row">
        <Block
          className="!mr-[12px] h-[40px] flex-row items-center justify-center gap-[8px] border-[3px] border-black bg-white px-[12px] shadow-hard-black"
          onClick={handleLogout}
        >
          <Text className="text-[12px] font-[900] text-black">{loginText}</Text>
        </Block>
        <Block
          className="h-[40px] flex-row items-center justify-center gap-[8px] border-[3px] border-black bg-white px-[12px] shadow-hard-black"
          onClick={onPick}
        >
          <Ionicons color="black" name="cloud-upload-outline" size={18} />
          <Text className="text-[12px] font-[900] text-black">上传本地</Text>
        </Block>
      </Block>
    </Block>
  )
})

const TopCircleSection = observer(
  ({ onStartConnect, selectedItem }: { onStartConnect: () => void; selectedItem: any }) => {
    const { connectedDevice } = bleStore.state

    const outerRotate = useSharedValue(0)
    useEffect(() => {
      outerRotate.value = withRepeat(withTiming(360, { duration: 12000, easing: Easing.linear }), -1, false)
    }, [])
    const outerRingStyle = useAnimatedStyle(() => ({
      transform: [{ rotate: `${outerRotate.value}deg` }],
    }))

    return (
      <Block className="relative z-10 items-center">
        <Block className="relative my-[24px] flex w-full flex-row items-center justify-between">
          <Block
            className={`w-[48px] items-center justify-center gap-[4px] border-[3px] border-black py-[12px] shadow-hard-black-50 ${connectedDevice ? 'bg-accent' : 'bg-white'}`}
            onClick={onStartConnect}
          >
            <Ionicons
              color={connectedDevice ? 'black' : '#6B7280'}
              name={connectedDevice ? 'wifi' : 'wifi-outline'}
              size={20}
            />
            <Text className="text-[10px] font-[900]">{connectedDevice ? '已连接' : '选择设备'}</Text>
          </Block>
          <Block className="relative size-[256px] items-center justify-center">
            <Block
              animated
              className="absolute inset-[-12px] rounded-full border-[3px] border-dashed border-black opacity-30"
              style={outerRingStyle}
            />
            <Block>
              <GalleryRenderer selectedItem={selectedItem} />
              {/* {!connectedDevice?.id && (
                <Block className="absolute inset-0 z-50 items-center justify-center">
                  <Text className="border border-white bg-black px-[12px] py-[2px] text-[12px] font-[900] text-white">
                    离线模式
                  </Text>
                </Block>
              )} */}
            </Block>
          </Block>
          <Block className="h-[10px] w-[48px]" />
        </Block>
      </Block>
    )
  },
)

const GalleryRenderer = memo(({ selectedItem }: { selectedItem: any }) => {
  // 本地和线上都优先使用imageUrl， 本地上传一开始没有 url
  const url = selectedItem?.webpHighPreviewUrl || selectedItem?.imageUrl || selectedItem?.url
  const placeholderUrl = selectedItem?.webpPreviewUrl
  // console.log('GalleryRenderer--------------', selectedItem)

  if (!url) return null

  const Width = 256
  return (
    <Block className="rounded-full border-4 border-black">
      <Block className="relative z-10" style={{ width: Width, height: Width, borderRadius: Width, overflow: 'hidden' }}>
        <VideoBox style={{ width: Width, height: Width }} width={256} url={url} />
      </Block>
    </Block>
  )
})

const ManagerView = observer(({ viewState, onBack }: { viewState: string; onBack: () => void }) => {
  const { isScanning, discoveredDevices } = bleStore.state
  // console.log('isScanning------------', isScanning)
  // console.log('discoveredDevices------------', discoveredDevices)

  if (viewState !== 'manager') return null

  const deviceList = discoveredDevices.filter((i) => i.name)

  return (
    <Block className="absolute inset-0" style={{ zIndex: 100 }}>
      <Block className="relative flex-1 bg-paper">
        <Block className="flex-row items-center justify-between px-[16px] py-[12px]">
          <Block
            className="size-[40px] items-center justify-center border-[3px] border-black bg-white shadow-medium-black"
            onClick={onBack}
          >
            <Ionicons color="black" name="chevron-back" size={24} />
          </Block>
          <Text className="text-[20px] font-[900] tracking-[-0.5px]">设备管理</Text>
          <Block className="size-[40px] items-center justify-center bg-black/0">{/* 空占位符 */}</Block>
        </Block>

        <ScrollView className="relative flex-1 bg-paper">
          <Block className="p-[16px]">
            <Block className="mb-[16px] flex-row items-center gap-[12px] border-[3px] border-black bg-white p-[16px] shadow-medium-black">
              <SpinningLoader />
              <Text className="text-[14px] font-[900] text-black">正在扫描设备...</Text>
            </Block>
            {deviceList.map((device) => (
              <DeviceItem key={device.id} device={device} />
            ))}
          </Block>
          <Block className="h-[200px] w-full" />
        </ScrollView>
      </Block>
    </Block>
  )
})