import { Ionicons } from '@expo/vector-icons'
import { Block, ConfirmModal, Text, Toast, VideoBox } from '@share/components'
import Img from '@share/components/Img'
import { FlashList } from '@shopify/flash-list'
import { LinearGradient } from 'expo-linear-gradient'
import { router } from 'expo-router'
import React, { memo, useEffect, useMemo, useRef, useState } from 'react'
import { ActivityIndicator, RefreshControl, TextInput } from 'react-native'

import BannerSection from '@/components/BannerSection'
import { useTemplateActions } from '@/hooks/actions/use-template-actions'
import { useAuth } from '@/hooks/core/use-auth'
import { useUserBalance } from '@/hooks/core/use-user-balance'
import { useTemplates } from '@/hooks/data'
import { useFavoriteTemplates } from '@/hooks/data/use-favorite-templates'
import { screenWidth } from '@/utils'
import { cn } from '@/utils/cn'

const CATEGORY_ID = process.env.EXPO_PUBLIC_INDEX_GROUP_ID
const ITEM_WIDTH = Math.floor((screenWidth - 24 - 12 * 2) / 3)
const PAGE_SIZE = 21

type MediaItem = {
  id: string
  type: 'image' | 'video'
  url: string
  poster?: string
  likeCount: number
  price: number
}
type ActiveTab = 'gen' | '' | 'new' | 'like'

/** =========================
 * Entry page
 * ========================= */

export default function Sync() {
  const { user, isAuthenticated, signOut } = useAuth()
  const { balance, load: loadBalance } = useUserBalance()
  const { execute: loadTemplates } = useTemplates()
  const { execute: loadFavorites } = useFavoriteTemplates()
  const { runTemplate } = useTemplateActions()

  /** ================= 状态 ================= */

  const [activeTab, setActiveTab] = useState<ActiveTab>('')
  const [isSearchOpen, setIsSearchOpen] = useState(false)

  const [allItems, setAllItems] = useState<MediaItem[]>([])
  const [selectedItem, setSelectedItem] = useState<MediaItem | null>(null)

  const [refreshing, setRefreshing] = useState(false)
  const [loadingMore, setLoadingMore] = useState(false)
  const [hasMore, setHasMore] = useState(true)

  /** ================= refs（核心） ================= */

  const queryRef = useRef({
    page: 1,
    pageSize: PAGE_SIZE,
    search: '',
    tab: '' as ActiveTab,
  })

  const loadingRef = useRef(false)
  const firstLoadDoneRef = useRef(false)

  /** ================= 工具函数 ================= */

  type TemplateData = {
    id: string
    previewUrl?: string
    coverImageUrl?: string
    likeCount?: number
    price?: number
    isDeleted?: boolean
  }

  const transformTemplateToMediaItem = (template: TemplateData): MediaItem => {
    const isVideo = template.previewUrl?.includes('.mp4')
    return {
      id: template.id,
      type: isVideo ? 'video' : 'image',
      url: isVideo ? (template.previewUrl ?? '') : template.coverImageUrl || template.previewUrl || '',
      poster: isVideo ? template.coverImageUrl : undefined,
      likeCount: template.likeCount || 0,
      price: template.price || 2,
    }
  }

  /** ================= 统一请求函数 ================= */

  const fetchList = async (mode: 'init' | 'refresh' | 'loadMore') => {
    if (loadingRef.current) return
    if (mode === 'loadMore' && !hasMore) return

    loadingRef.current = true
    if (mode === 'loadMore') {
      setLoadingMore(true)
    } else {
      setRefreshing(true)
    }

    try {
      const { page, pageSize, search, tab } = queryRef.current
      let newItems: MediaItem[] = []

      if (tab === 'like') {
        if (!isAuthenticated) {
          setHasMore(false)
          newItems = []
        } else {
          const { data } = await loadFavorites({ page, limit: pageSize })
          newItems =
            data?.favorites
              ?.filter((f) => f.template && !(f.template as TemplateData).isDeleted)
              .map((f) => transformTemplateToMediaItem(f.template as TemplateData)) || []
        }
      } else {
        const sortBy = tab === 'new' ? 'createdAt' : 'likeCount'
        const { data } = await loadTemplates({
          page,
          limit: pageSize,
          sortBy,
          sortOrder: 'desc',
          search,
          categoryId: CATEGORY_ID,
        })
        newItems = data?.templates?.map(transformTemplateToMediaItem) || []
      }

      if (newItems.length < pageSize) {
        setHasMore(false)
      }

      setAllItems((prev) => (mode === 'loadMore' ? [...prev, ...newItems] : newItems))
    } catch (e) {
      console.error('fetchList error:', e)
      setHasMore(false)
    } finally {
      loadingRef.current = false
      // 标记首次（或第一页）加载已完成，避免 FlashList 首次渲染触发 onEndReached
      const currentPage = queryRef.current.page
      if (currentPage === 1) {
        firstLoadDoneRef.current = true
      }
      setRefreshing(false)
      setLoadingMore(false)
    }
  }

  /** ================= tab 切换（抽象后的重点） ================= */

  const changeTab = (tab: ActiveTab) => {
    queryRef.current = {
      ...queryRef.current,
      tab,
      page: 1,
    }
    setHasMore(true)
    firstLoadDoneRef.current = false
    fetchList('init')
  }

  /** ================= 搜索 ================= */

  const handleSearch = (text: string) => {
    queryRef.current = {
      ...queryRef.current,
      search: text,
      page: 1,
    }
    setHasMore(true)
    firstLoadDoneRef.current = false
    fetchList('refresh')
  }

  /** ================= 刷新 / 加载更多 ================= */

  const handleRefresh = () => {
    queryRef.current.page = 1
    setHasMore(true)
    firstLoadDoneRef.current = false
    fetchList('refresh')
  }

  const handleLoadMore = () => {
    // 防止重复请求或首次渲染时误触发
    if (loadingRef.current || !hasMore || refreshing || loadingMore) return
    if (!firstLoadDoneRef.current) return
    // if (allItems.length === 0) return // 首次加载未完成时不触发加载更多

    queryRef.current.page += 1
    fetchList('loadMore')
    console.log('handleLoadMore-------------')
  }

  /** ================= selectedItem 修正 ================= */

  useEffect(() => {
    if (!allItems.length) {
      setSelectedItem(null)
      return
    }
    if (!allItems.find((i) => i.id === selectedItem?.id)) {
      setSelectedItem(allItems[0])
    }
  }, [allItems, selectedItem?.id])

  /** ================= balance ================= */

  useEffect(() => {
    loadBalance()
    fetchList('init')
  }, [])

  /** ================= 快速生成 ================= */

  const handleQuickGen = async () => {
    if (!isAuthenticated) {
      Toast.show({ title: '请先登录' })
      return
    }
    if (!selectedItem) {
      Toast.show({ title: '请先选择一个模板' })
      return
    }
    if (balance < selectedItem.price) {
      Toast.show({ title: '余额不足，请充值' })
      return
    }

    Toast.showModal(
      <ConfirmModal
        content={
          <Text className="text-[14px] font-bold">
            生成将消耗
            <Text className="mx-[4px] text-[20px] text-[#e61e25]">{selectedItem.price} Goo</Text>
          </Text>
        }
        onCancel={Toast.hideModal}
        onConfirm={async () => {
          Toast.hideModal()
          const { generationId, error } = await runTemplate({
            templateId: selectedItem.id,
            data: {},
            originalUrl: selectedItem.url,
          })
          if (generationId && user?.id) loadBalance()
          else Toast.show({ title: error?.message || '生成失败' })
        }}
      />,
    )
  }

  const renderListEmpty = () => {
    if (activeTab === 'like' && !isAuthenticated) {
      return (
        <Block className="mt-[40px] items-center justify-center gap-[16px] py-[60px]">
          <Block className="size-[80px] items-center justify-center rounded-full border-4 border-white/20 bg-white/10">
            <Ionicons color="rgba(255,255,255,0.6)" name="heart-outline" size={40} />
          </Block>
          <Text className="text-[16px] font-bold text-white/80">查看您收藏的模板</Text>
          <Text className="text-[12px] text-white/50">登录后即可查看和管理收藏</Text>
          <Block
            className="mt-[12px] flex-row items-center gap-[8px] border-[3px] border-white bg-accent px-[32px] py-[12px] shadow-[4px_4px_0px_rgba(255,255,255,0.2)]"
            style={{ transform: [{ skewX: '-6deg' }] }}
            onClick={() => router.push('/auth')}
          >
            <Ionicons color="black" name="flash" size={16} style={{ transform: [{ skewX: '6deg' }] }} />
            <Text className="font-900 text-[14px] text-black" style={{ transform: [{ skewX: '6deg' }] }}>
              立即登录
            </Text>
          </Block>
        </Block>
      )
    }
  }

  /** ================= UI ================= */
  return (
    <Block className="flex-1 bg-black px-[12px]">
      <BannerSection />

      <HeroCircle
        onQuickGen={handleQuickGen}
        rightSlot={
          <GooActions
            gooPoints={balance}
            onAddGoo={() => router.push('/pointList')}
            onOpenSearch={() => setIsSearchOpen(true)}
          />
        }
        selectedItem={selectedItem}
      />

      <FilterSection
        activeTab={activeTab}
        onChange={(tab) => {
          setActiveTab(tab)
          changeTab(tab)
        }}
      />

      <FlashList
        contentContainerStyle={{ paddingBottom: 200, marginTop: 12 }}
        ListFooterComponent={
          loadingMore ? (
            <Block className="items-center py-[20px]">
              <ActivityIndicator color="#FFE500" />
            </Block>
          ) : null
        }
        numColumns={3}
        onEndReached={handleLoadMore}
        drawDistance={1200}
        onEndReachedThreshold={0.3}
        refreshControl={<RefreshControl colors={['#FFE500']} refreshing={refreshing} onRefresh={handleRefresh} />}
        renderItem={({ item }) => (
          <GridItem
            isSelected={selectedItem?.id === item.id}
            item={item}
            itemWidth={ITEM_WIDTH}
            onSelect={() => setSelectedItem(item)}
          />
        )}
        ListEmptyComponent={renderListEmpty}
        showsVerticalScrollIndicator={false}
        data={allItems}
        // @ts-ignore
        estimatedItemSize={ITEM_WIDTH}
      />

      <SearchOverlay isOpen={isSearchOpen} onClose={() => setIsSearchOpen(false)} onSearch={handleSearch} />
    </Block>
  )
}

type SearchOverlayProps = {
  isOpen: boolean
  searchText?: string
  onChange?: (v: string) => void
  onClose: () => void
  onSearch: (v: string) => void
}
const SearchOverlay = memo<SearchOverlayProps>(function SearchOverlay({ isOpen, onChange, onClose, onSearch }) {
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
  const [searchText, setSearchText] = useState('')
  const handleTextChange = (text: string) => {
    setSearchText(text)
    onChange && onChange(text)

    if (timerRef.current) {
      clearTimeout(timerRef.current)
    }

    timerRef.current = setTimeout(() => {
      onSearch(text)
    }, 2000)
  }

  useEffect(() => {
    // 删除定时器
    return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current)
      }
    }
  }, [])

  const handleClose = () => {
    setSearchText('')
    onSearch('')
    onClose && onClose()
  }

  if (!isOpen) return null
  return (
    <Block className="absolute inset-x-0 top-0 z-50 mt-[24px] flex-row items-center gap-[8px] px-[20px]">
      <Block
        className="flex-1 flex-row items-center border-[3px] border-black bg-white px-[12px] shadow-[4px_4px_0px_#000]"
        style={{ height: 48, transform: [{ skewX: '-6deg' }] }}
      >
        <Ionicons color="black" name="search" size={20} style={{ marginRight: 8 }} />
        <TextInput
          autoFocus
          onChangeText={handleTextChange}
          placeholder="搜索作品 / 用户..."
          placeholderTextColor="#9CA3AF"
          style={{
            flex: 1,
            fontSize: 14,
            fontWeight: 'bold',
            color: 'black',
          }}
          value={searchText}
        />
      </Block>
      <Block
        className="items-center justify-center border-[3px] border-black bg-accent shadow-[4px_4px_0px_#000]"
        onClick={handleClose}
        style={{ width: 48, height: 48, transform: [{ skewX: '-6deg' }] }}
      >
        <Ionicons color="black" name="close" size={24} style={{ transform: [{ skewX: '6deg' }] }} />
      </Block>
    </Block>
  )
})

type GooActionsProps = {
  gooPoints: number
  onAddGoo: () => void
  onOpenSearch: () => void
}
const GooActions = memo<GooActionsProps>(function GooActions({ gooPoints, onAddGoo, onOpenSearch }) {
  return (
    <Block>
      <Block className="mt-[12px] flex-row items-center gap-[8px]">
        <Block
          className="flex-row items-center gap-[4px] rounded-full border-[3px] border-white bg-black px-[12px] py-[8px] shadow-[3px_3px_0px_rgba(0,0,0,0.5)]"
          onClick={onAddGoo}
        >
          <Text className="text-[12px] font-black text-accent">{gooPoints} Goo</Text>
          <Ionicons color="#FFE500" name="add" size={12} style={{ fontWeight: 'bold' }} />
        </Block>

        <Block
          className="size-[48px] items-center justify-center rounded-full border-[3px] border-black bg-white shadow-[4px_4px_0px_#000]"
          onClick={onOpenSearch}
        >
          <Ionicons color="black" name="search" size={22} />
        </Block>
      </Block>
    </Block>
  )
})

type HeroCircleProps = {
  selectedItem: MediaItem | null
  onQuickGen: () => void
  rightSlot: React.ReactNode
}
const HeroCircle = memo<HeroCircleProps>(function HeroCircle({ selectedItem, onQuickGen, rightSlot }) {
  if (!selectedItem) {
    return (
      <Block className="relative z-10 mt-[12px] items-center justify-between px-[12px]">
        <Block className="relative flex-row justify-between">
          <Block className="relative z-10 mt-[20px] size-[224px] items-center justify-center rounded-full border-4 border-black bg-white/20 shadow-deep-black">
            <Text className="text-[14px] font-bold text-white/60">加载中...</Text>
          </Block>
          {rightSlot}
        </Block>
      </Block>
    )
  }

  return (
    <Block className="relative z-10 items-center justify-between">
      <Block className="relative mx-[12px] flex-row justify-between">
        <Block className="relative z-10 mt-[20px] size-[224px] rounded-full border-4 border-black bg-white shadow-deep-black">
          <Block className="relative size-full overflow-hidden rounded-full bg-black">
            {selectedItem.type === 'video' ? (
              <VideoBox style={{ height: 216, width: 216, borderRadius: 108 }} url={selectedItem.url} />
            ) : (
              <Img className="size-full" src={selectedItem.url} />
            )}

            <Block className="absolute inset-0">
              <LinearGradient
                colors={['rgba(255,255,255,0.3)', 'transparent']}
                end={{ x: 1, y: 1 }}
                start={{ x: 0, y: 0 }}
                style={{
                  position: 'absolute',
                  left: 0,
                  right: 0,
                  top: 0,
                  bottom: 0,
                  borderRadius: 9999,
                }}
              />
            </Block>
          </Block>

          <Block className="pointer-events-none absolute inset-0 rounded-full border-2 border-black/10" />

          <Block className="absolute bottom-[24px] left-[8px] z-20 max-w-[100px] bg-black px-[12px] py-[4px] shadow-small-accent">
            <Text className="font-900 -skew-x-12 text-[10px] text-white" ellipsizeMode="tail" numberOfLines={1}>
              {selectedItem?.id}
            </Text>
          </Block>

          <Block
            className="absolute bottom-[16px] right-0 z-30 -skew-x-6 flex-row items-center gap-[4px] border-[3px] border-black bg-accent px-[16px] py-[6px] shadow-medium-black"
            onClick={onQuickGen}
          >
            <Ionicons color="black" name="flash" size={14} />
            <Text className="font-900 text-[12px] text-black">GET 同款</Text>
          </Block>
        </Block>

        {rightSlot}
      </Block>
    </Block>
  )
})

type FilterSectionProps = {
  activeTab: ActiveTab
  onChange: (t: ActiveTab) => void
}
const FilterSection = memo<FilterSectionProps>(function FilterSection({ activeTab, onChange }) {
  const tabs = useMemo(
    () => [
      { label: '最热', state: '' as const },
      { label: '最新', state: 'new' as const },
      { label: '喜欢', state: 'like' as const },
    ],
    [],
  )

  return (
    <Block className="mt-[12px] flex-row items-end justify-between">
      <Block className="flex-row gap-[8px]">
        {tabs.map(({ label, state }) => {
          const isActive = activeTab === state
          return (
            <Block
              className={`border-2 border-black px-[16px] py-[4px] ${isActive ? 'bg-accent' : 'bg-white'}`}
              key={state}
              onClick={() => onChange(state)}
              style={{
                transform: [{ skewX: '-6deg' }],
              }}
            >
              <Text className={`text-[10px] font-[900] ${isActive ? 'text-black' : 'text-gray-500'}`}>{label}</Text>
            </Block>
          )
        })}
      </Block>
    </Block>
  )
})

type GridItemProps = {
  item: MediaItem
  isSelected: boolean
  itemWidth: number
  onSelect: () => void
}
const GridItem = memo<GridItemProps>(function GridItem({ item, isSelected, itemWidth, onSelect }) {
  // console.log('item-------------', item);

  return (
    <Block className="relative mb-[12px]" onClick={onSelect}>
      <Block
        className={`relative overflow-hidden border-2 ${isSelected ? 'border-accent' : 'border-black'}`}
        style={{
          transform: [{ skewX: '-6deg' }],
          height: itemWidth,
          width: itemWidth,
        }}
      >
        <VideoBox style={{ height: itemWidth, width: itemWidth }} url={item.url} />

        {isSelected && <Block className="absolute inset-0 border-[3px] border-accent" />}

        <Block
          className={cn(
            'absolute left-[0px] top-[0px] z-[20] border-b-[2px] border-r-[2px] border-black bg-black px-[6px] py-[2px]',
            {
              'bg-accent': isSelected,
            },
          )}
        >
          <Text
            className={cn('font-900 text-[8px] text-white', {
              'text-black': isSelected,
            })}
          >
            {item.id}
          </Text>
        </Block>

        <Block
          className="absolute inset-x-0 bottom-0 z-20 items-end justify-between p-[4px] pt-[16px]"
          style={{ transform: [{ skewX: '6deg' }] }}
        >
          <LinearGradient
            colors={['rgba(0,0,0,0.8)', 'transparent']}
            end={{ x: 0, y: 0 }}
            start={{ x: 0, y: 1 }}
            style={{
              position: 'absolute',
              left: 0,
              right: 0,
              top: 0,
              bottom: 0,
            }}
          />

          <Block className="w-full flex-1 flex-row items-center justify-between px-[4px]">
            <Block className="">
              <Text className="font-900 max-w-[40px] -skew-x-6 text-[7px] text-white" numberOfLines={1}>
                {item.id}
              </Text>
            </Block>
            <Block className="-skew-x-6 flex-row items-center gap-[2px]">
              <Ionicons color="#FF0000" name="heart" size={10} />
              <Text className="font-900 text-[8px] text-white">{item.likeCount}</Text>
            </Block>
          </Block>
        </Block>
      </Block>
    </Block>
  )
})