import React, { memo, useMemo, useState, useEffect, useCallback, useRef } from 'react'
import { Block, ConfirmModal, Text, Toast, VideoBox } from '@share/components'
import Img from '@share/components/Img'
import { Ionicons } from '@expo/vector-icons'
import { Dimensions, FlatList, TextInput, RefreshControl, ActivityIndicator } from 'react-native'
import { LinearGradient } from 'expo-linear-gradient'
import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated'

import { router, useRouter } from 'expo-router'
import { IOS_UNIVERSAL_LINK } from '@/app.constants'
import { FlashList } from '@shopify/flash-list'
import { screenHeight, screenWidth } from '@/utils'
import { cn } from '@/utils/cn'
import { useAuth } from '@/hooks/core/use-auth'
import { useUserBalance } from '@/hooks/core/use-user-balance'
import { useTemplates } from '@/hooks/data/use-templates'
import { usePublicTemplates } from '@/hooks/data/use-public-templates'
import { useFavoriteTemplates } from '@/hooks/data/use-favorite-templates'
import type { GetUserFavoritesResponse } from '@repo/sdk'
import { useAigcTask } from '@/hooks/actions/use-aigc-task'
import { useTemplateInteraction } from '@/hooks/actions/use-template-interaction'

const BACKGROUND_VIDEOS = [
  'https://cdn.roasmax.cn/material/b46f380532e14cf58dd350dbacc7c34a.mp4',
  'https://cdn.roasmax.cn/material/992e6c5d940c42feb71c27e556b754c0.mp4',
  'https://cdn.roasmax.cn/material/e4947477843f4067be7c37569a33d17b.mp4',
]

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

/** =========================
 * Small memo components
 * ========================= */

type BannerProps = { bgVideo: string }
const Banner = memo<BannerProps>(function Banner({ bgVideo }) {
  return (
    <Block className="absolute inset-0 bottom-0 left-0 right-0 top-0 z-[0] overflow-hidden">
      {/* <VideoBox url={bgVideo} style={{ width: screenWidth, height: screenHeight }} /> */}
      <Img src={bgVideo} style={{ width: screenWidth, height: screenHeight }} />
    </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)
      }
    }
  }, [])

  if (!isOpen) return null
  return (
    <Block className="absolute left-0 right-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 name="search" size={20} color="black" style={{ marginRight: 8 }} />
        <TextInput
          autoFocus
          value={searchText}
          onChangeText={handleTextChange}
          placeholder="搜索作品 / 用户..."
          placeholderTextColor="#9CA3AF"
          style={{
            flex: 1,
            fontSize: 14,
            fontWeight: 'bold',
            color: 'black',
          }}
        />
      </Block>
      <Block
        onClick={onClose}
        className="items-center justify-center border-[3px] border-black bg-[#FFE500] shadow-[4px_4px_0px_#000]"
        style={{ width: 48, height: 48, transform: [{ skewX: '-6deg' }] }}
      >
        <Ionicons name="close" size={24} color="black" style={{ transform: [{ skewX: '6deg' }] }} />
      </Block>

      <Block
        className="items-center justify-center border-[3px] border-black bg-[#FFE500] shadow-[4px_4px_0px_#000]"
        style={{ width: 48, height: 48, transform: [{ skewX: '-6deg' }] }}
      >
        <Text>登出</Text>
      </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
          onClick={onAddGoo}
          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)]"
        >
          <Text className="text-[12px] font-black italic text-[#FFE500]">{gooPoints} Goo</Text>
          <Ionicons name="add" size={12} color="#FFE500" style={{ fontWeight: 'bold' }} />
        </Block>

        <Block
          onClick={onOpenSearch}
          className="h-[48px] w-[48px] items-center justify-center rounded-full border-[3px] border-black bg-white shadow-[4px_4px_0px_#000]"
        >
          <Ionicons name="search" size={22} color="black" />
        </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">
        <Block className="relative flex-row justify-between">
          <Block className="relative z-[10] mt-[20px] h-[224px] w-[224px] items-center justify-center rounded-full border-[4px] 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] mt-[12px] items-center justify-between">
      <Block className="relative flex-row justify-between">
        <Block className="relative z-[10] mt-[20px] h-[224px] w-[224px] rounded-full border-[4px] border-black bg-white shadow-deep-black">
          <Block className="relative h-full w-full overflow-hidden rounded-full bg-black">
            {selectedItem.type === 'video' ? (
              <VideoBox url={selectedItem.url} style={{ height: 216, width: 216, borderRadius: 108 }} />
            ) : (
              <Img src={selectedItem.url} className="h-full w-full" />
            )}

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

          <Block className="pointer-events-none absolute inset-[0px] rounded-full border-[2px] 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-[-12deg] text-[10px] italic text-white" numberOfLines={1} ellipsizeMode="tail">
              {selectedItem?.id}
            </Text>
          </Block>

          <Block
            onClick={onQuickGen}
            className="absolute bottom-[16px] right-[0px] z-[30] skew-x-[-6deg] flex-row items-center gap-[4px] border-[3px] border-black bg-accent px-[16px] py-[6px] shadow-medium-black"
          >
            <Ionicons name="flash" size={14} color="black" />
            <Text className="font-900 text-[12px] italic 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
              key={state}
              onClick={() => onChange(state)}
              className={`border-[2px] border-black px-[16px] py-[4px] ${isActive ? 'bg-accent' : 'bg-white'}`}
              style={{
                transform: [{ skewX: '-6deg' }],
              }}
            >
              <Text className={`text-[10px] font-[900] italic ${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 onClick={onSelect} className="relative mb-[12px]">
      <Block
        className={`relative overflow-hidden border-[2px] ${isSelected ? 'border-accent' : 'border-black'}`}
        style={{
          transform: [{ skewX: '-6deg' }],
          height: itemWidth,
          width: itemWidth,
        }}
      >
        {/* {item.type === 'video' ? (
          <VideoBox url={item.url} style={{ height: itemWidth, width: itemWidth }} />
        ) : (
          <Img src={item.poster} className="h-full w-full" />
        )} */}
        {/* <Img src={item.poster} className="h-full w-full" /> */}

        <VideoBox url={item.url} style={{ height: itemWidth, width: itemWidth }} />

        {isSelected && <Block className="absolute inset-[0px] 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 bottom-[0px] left-[0px] right-[0px] z-[20] items-end justify-between p-[4px] pt-[16px]"
          style={{ transform: [{ skewX: '6deg' }] }}
        >
          <LinearGradient
            colors={['rgba(0,0,0,0.8)', 'transparent']}
            start={{ x: 0, y: 1 }}
            end={{ x: 0, y: 0 }}
            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-[-6deg] text-[7px] italic text-white" numberOfLines={1}>
                {item.id}
              </Text>
            </Block>
            <Block className="skew-x-[-6deg] flex-row items-center gap-[2px]">
              <Ionicons name="heart" size={10} color="#FF0000" />
              <Text className="font-900 text-[8px] italic text-white">{item.likeCount}</Text>
            </Block>
          </Block>
        </Block>
      </Block>
    </Block>
  )
})

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

export default function Sync() {
  const { user, isAuthenticated } = useAuth()
  const { balance, loading: balanceLoading, load: loadBalance } = useUserBalance()
  const { data: templatesData, loading: templatesLoading, execute: loadTemplates } = useTemplates()
  const { data: publicTemplatesData, loading: publicTemplatesLoading, execute: loadPublicTemplates } = usePublicTemplates()
  const { data: favoritesData, loading: favoritesLoading, execute: loadFavorites } = useFavoriteTemplates()
  const { submitTask, startPolling } = useAigcTask()

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

  const [page, setPage] = useState(1)
  const [hasMore, setHasMore] = useState(true)
  const [refreshing, setRefreshing] = useState(false)
  const [loadingMore, setLoadingMore] = useState(false)
  const [allItems, setAllItems] = useState<MediaItem[]>([])
  const isLoadingRef = useRef(false)

  const onAddGoo = useCallback(() => {
    router.push('/pointList')
  }, [])

  const transformTemplateToMediaItem = useCallback((template: any): MediaItem => {
    const isVideo = template.previewUrl?.includes('.mp4')
    return {
      id: template.id,
      type: (isVideo ? 'video' : 'image') as 'video' | 'image',
      url: isVideo ? template.previewUrl : template.coverImageUrl || template.previewUrl,
      poster: isVideo ? template.coverImageUrl : undefined,
      likeCount: template.likeCount || 0,
    }
  }, [])

  const galleryItems = useMemo<MediaItem[]>(() => allItems, [allItems])

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

  useEffect(() => {
    if (galleryItems.length > 0 && !selectedItem) {
      setSelectedItem(galleryItems[0])
    }
  }, [galleryItems, selectedItem])

  const [bgVideo] = useState(() => BACKGROUND_VIDEOS[Math.floor(Math.random() * BACKGROUND_VIDEOS.length)])

  const outerRotate = useSharedValue(0)

  useEffect(() => {
    if (isAuthenticated && user?.id) {
      loadBalance(user.id)
    }
  }, [isAuthenticated, user?.id])

  // Tab 切换时重置并加载数据
  useEffect(() => {
    setPage(1)
    setHasMore(true)
    setAllItems([])

    const initialLoad = async () => {
      if (isLoadingRef.current) return
      isLoadingRef.current = true
      setRefreshing(true)
      try {
        let newItems: MediaItem[] = []
        const limit = 20

        if (activeTab === 'like') {
          if (!isAuthenticated) {
            setHasMore(false)
            return
          }
          const { data, error } = await loadFavorites({ limit, page: 1 })
          if (error || !data?.favorites) {
            setHasMore(false)
            return
          }
          newItems = data.favorites.filter((fav: GetUserFavoritesResponse['favorites'][number]) => fav.template && !fav.template.isDeleted).map((fav: GetUserFavoritesResponse['favorites'][number]) => transformTemplateToMediaItem(fav.template!))
        } else if (activeTab === 'new') {
          if (isAuthenticated) {
            const { data, error } = await loadTemplates({ limit, page: 1, sortBy: 'createdAt', sortOrder: 'desc' })
            if (error || !data?.templates) {
              setHasMore(false)
              return
            }
            newItems = data.templates.map(transformTemplateToMediaItem)
          } else {
            const { data, error } = await loadPublicTemplates({ limit, sortBy: 'createdAt', sortOrder: 'desc' })
            if (error || !data?.templates) {
              setHasMore(false)
              return
            }
            newItems = data.templates.map(transformTemplateToMediaItem)
            setHasMore(false)
          }
        } else {
          if (isAuthenticated) {
            const { data, error } = await loadTemplates({ limit, page: 1, sortBy: 'likeCount', sortOrder: 'desc' })
            if (error || !data?.templates) {
              setHasMore(false)
              return
            }
            newItems = data.templates.map(transformTemplateToMediaItem)
          } else {
            const { data, error } = await loadPublicTemplates({ limit, sortBy: 'likeCount', sortOrder: 'desc' })
            if (error || !data?.templates) {
              setHasMore(false)
              return
            }
            newItems = data.templates.map(transformTemplateToMediaItem)
            setHasMore(false)
          }
        }

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

        setAllItems(newItems)
      } catch (error) {
        console.error('Failed to load data:', error)
        setHasMore(false)
      } finally {
        isLoadingRef.current = false
        setRefreshing(false)
      }
    }

    initialLoad()
  }, [activeTab, isAuthenticated])

  const loadData = useCallback(
    async (pageNum: number, isRefresh: boolean = false) => {
      if (!isRefresh && !hasMore) return
      if (loadingMore || refreshing || isLoadingRef.current) return

      isLoadingRef.current = true

      if (isRefresh) {
        setRefreshing(true)
      } else {
        setLoadingMore(true)
      }

      try {
        let newItems: MediaItem[] = []
        const limit = 20

        if (activeTab === 'like') {
          if (!isAuthenticated) {
            setHasMore(false)
            return
          }
          const { data, error } = await loadFavorites({ limit, page: pageNum })
          if (error || !data?.favorites) {
            setHasMore(false)
            return
          }
          newItems = data.favorites.filter((fav: GetUserFavoritesResponse['favorites'][number]) => fav.template && !fav.template.isDeleted).map((fav: GetUserFavoritesResponse['favorites'][number]) => transformTemplateToMediaItem(fav.template!))
        } else if (activeTab === 'new') {
          if (!isAuthenticated) {
            setHasMore(false)
            return
          }
          const { data, error } = await loadTemplates({ limit, page: pageNum, sortBy: 'createdAt', sortOrder: 'desc' })
          if (error || !data?.templates) {
            setHasMore(false)
            return
          }
          newItems = data.templates.map(transformTemplateToMediaItem)
        } else {
          if (!isAuthenticated) {
            setHasMore(false)
            return
          }
          const { data, error } = await loadTemplates({ limit, page: pageNum, sortBy: 'likeCount', sortOrder: 'desc' })
          if (error || !data?.templates) {
            setHasMore(false)
            return
          }
          newItems = data.templates.map(transformTemplateToMediaItem)
        }

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

        if (isRefresh) {
          setAllItems(newItems)
        } else {
          setAllItems((prev) => [...prev, ...newItems])
        }
      } catch (error) {
        console.error('Failed to load data:', error)
        setHasMore(false)
      } finally {
        isLoadingRef.current = false
        setRefreshing(false)
        setLoadingMore(false)
      }
    },
    [activeTab, isAuthenticated, hasMore, loadingMore, refreshing, loadTemplates, loadPublicTemplates, loadFavorites, transformTemplateToMediaItem],
  )

  const handleRefresh = useCallback(() => {
    setPage(1)
    setHasMore(true)
    loadData(1, true)
  }, [loadData])

  const handleLoadMore = useCallback(() => {
    if (!hasMore || loadingMore || refreshing || isLoadingRef.current) return
    const nextPage = page + 1
    setPage(nextPage)
    loadData(nextPage, false)
  }, [page, hasMore, loadingMore, refreshing, loadData])

  useEffect(() => {
    outerRotate.value = withRepeat(withTiming(360, { duration: 12000, easing: Easing.linear }), -1, false)
  }, [])

  const handleQuickGen = useCallback(async () => {
    if (!isAuthenticated) {
      Toast.show({ title: '请先登录' })
      return
    }

    if (!selectedItem) {
      Toast.show({ title: '请先选择一个模板' })
      return
    }

    const cost = 2

    if (balance < cost) {
      Toast.show({ title: '余额不足，请充值' })
      return
    }

    Toast.showModal(
      <ConfirmModal
        content={
          <Text className="text-[14px] font-bold leading-relaxed text-gray-800">
            生成同款风格将消耗 <Text className="mx-[4px] text-[20px] font-black italic text-[#e61e25]">{cost} Goo</Text> 算力。
          </Text>
        }
        onConfirm={async () => {
          Toast.hideModal()

          const { taskId, error } = await submitTask({
            model_name: 'default',
            prompt: `生成与 ${selectedItem.id} 相似的内容`,
            img_url: selectedItem.url,
          })

          if (error) {
            Toast.show({ title: `提交失败: ${error.message}` })
            return
          }

          if (taskId) {
            Toast.show({ title: '任务提交成功，正在生成中...' })
            startPolling(
              taskId,
              (result) => {
                Toast.show({ title: '生成成功！' })
                if (user?.id) loadBalance(user.id)
              },
              (error) => {
                Toast.show({ title: `生成失败: ${error.message}` })
              },
            )
          }
        }}
        onCancel={() => Toast.hideModal()}
      />,
      {},
    )
  }, [isAuthenticated, balance, selectedItem, submitTask, startPolling, user?.id, loadBalance])

  const openSearch = useCallback(() => setIsSearchOpen(true), [])
  const closeSearch = useCallback(() => {
    setIsSearchOpen(false)
    setSearchText('')
  }, [])

  // keep for parity with your original file (even if not actively used yet)
  const outerAnimatedStyle = useAnimatedStyle(() => ({
    transform: [{ rotate: `${outerRotate.value}deg` }],
  }))

  const { width: winW } = Dimensions.get('window')
  const itemWidth = useMemo(() => Math.floor((winW - 24 - 12 * 2) / 3), [winW])

  const renderGridItem = useCallback(
    ({ item }: { item: MediaItem }) => (
      <GridItem item={item} isSelected={selectedItem?.id === item.id} itemWidth={itemWidth} onSelect={() => setSelectedItem(item)} />
    ),
    [selectedItem, itemWidth],
  )

  const renderListFooter = useCallback(() => {
    if (!loadingMore) return null
    return (
      <Block className="items-center py-[20px]">
        <ActivityIndicator size="small" color="#FFE500" />
      </Block>
    )
  }, [loadingMore])

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

  const handleSearch = useCallback((text: string) => {
    console.log('Search for:', text)
    // Implement your search logic here
  }, [])

  return (
    <Block className="relative flex-1 flex-col overflow-visible bg-black px-[12px]">
      <Banner bgVideo={bgVideo} />

      <HeroCircle
        selectedItem={selectedItem}
        onQuickGen={handleQuickGen}
        rightSlot={<GooActions gooPoints={balance} onAddGoo={onAddGoo} onOpenSearch={openSearch} />}
      />

      <FilterSection activeTab={activeTab} onChange={setActiveTab} />

      <FlashList
        data={galleryItems}
        renderItem={renderGridItem}
        keyExtractor={(item) => item.id}
        numColumns={3}
        contentContainerStyle={{ marginTop: 12, paddingBottom: 200 }}
        showsVerticalScrollIndicator={false}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} tintColor="#FFE500" colors={['#FFE500']} />}
        onEndReached={handleLoadMore}
        onEndReachedThreshold={0.5}
        ListFooterComponent={renderListFooter}
        ListEmptyComponent={renderListEmpty}
      />

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