import { FontAwesome, Fontisto, Ionicons } from '@expo/vector-icons'
import { FlashList } from '@shopify/flash-list'
import { useRouter } from 'expo-router'
import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'
import { ActivityIndicator, Platform, RefreshControl } from 'react-native'
import { useAnimatedStyle } from 'react-native-reanimated'
import { useSafeAreaInsets } from 'react-native-safe-area-context'

import { imgPicker } from '@/@share/apis/imgPicker'
import { Block, Img, Input, Text } from '@/@share/components'
import BannerSection from '@/components/BannerSection'
import { useFileUpload } from '@/hooks/actions'
import { useTemplates } from '@/hooks/data/use-templates'
import { screenHeight, screenWidth } from '@/utils'

const CATEGORY_ID = process.env.EXPO_PUBLIC_GENERATE_GROUP_ID

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

export default function Generate() {
  const router = useRouter()
  const env = process.env.EXPO_PUBLIC_ENV

  const [prompt, setPrompt] = useState(`${env} update`)
  const [selectedTemplateId, setSelectedTemplateId] = useState('')
  const [meImg, setMeImg] = useState('')
  const [friendImg, setFriendImg] = useState('')

  const templates = useTemplates()

  const { uploadFile, loading: uploadLoading } = useFileUpload()

  useEffect(() => {
    templates.execute({ categoryId: CATEGORY_ID, page: 1, limit: 12, sortBy: 'createdAt', sortOrder: 'desc' })
  }, [])

  const displayTemplates = useMemo(() => {
    const regular = templates.data?.templates || []
    const all = regular
    return all.map(
      (t: any): Template => ({
        id: t.id,
        name: t.title,
        image: t.coverImageUrl,
        type: 'video' as const,
        price: t.price,
        data: t,
      }),
    )
  }, [templates.data])

  const selectedTemplate = useMemo(() => {
    return displayTemplates.find((t) => t.id === selectedTemplateId)
  }, [displayTemplates, selectedTemplateId])

  useEffect(() => {
    if (displayTemplates.length > 0 && !selectedTemplateId) {
      setSelectedTemplateId(displayTemplates[0].id)
    }
  }, [displayTemplates, selectedTemplateId])

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

  const handleGenerate = useCallback(() => {
    if (!selectedTemplate) return
    setTimeout(() => {}, 2000)
  }, [selectedTemplate])

  const pickImage = useCallback(async (target: 'me' | 'friend') => {
    const assetList = (await imgPicker({ maxImages: 1, resultType: 'asset' })) as string[]

    const result = assetList[0] as any
    if (!result) return

    const uri = result?.uri
    if (target === 'me') setMeImg(uri)
    else setFriendImg(uri)

    const file = {
      name: result.fileName || `image_${Date.now()}.jpg`,
      type: result.mimeType || 'image/jpeg',
      uri: Platform.OS === 'android' ? result.uri : result.uri.replace('file://', ''),
    }
    const formData = new FormData()
    formData.append('file', file as any)

    const { url, error } = await uploadFile(file as any)
    // console.log('pickImage---------url:', url, 'error:', error)

    if (error || !url) {
      return
    }
    if (target === 'me') setMeImg(url)
    else setFriendImg(url)
  }, [])

  const handleRandom = useCallback(() => {
    if (displayTemplates.length === 0) return
    const random = displayTemplates[Math.floor(Math.random() * displayTemplates.length)]
    setSelectedTemplateId(random.id)
  }, [displayTemplates])

  const handleSelectTemplate = useCallback((t: Template) => {
    setSelectedTemplateId(t.id)
  }, [])

  const onPickMe = useCallback(() => pickImage('me'), [pickImage])
  const onPickFriend = useCallback(() => pickImage('friend'), [pickImage])

  const isLoading = templates.loading
  const isLoadingMore = templates.loadingMore
  const hasError = templates.error

  const handleRetry = useCallback(() => {
    templates.refetch({ categoryId: CATEGORY_ID, page: 1, limit: 20, sortBy: 'createdAt', sortOrder: 'desc' })
  }, [templates])

  const [refreshing, setRefreshing] = useState(false)
  const onRefresh = useCallback(async () => {
    setRefreshing(true)
    try {
      await templates.refetch({ categoryId: CATEGORY_ID, page: 1, limit: 20, sortBy: 'createdAt', sortOrder: 'desc' })
    } finally {
      setRefreshing(false)
    }
  }, [templates])

  const onLoadMore = useCallback(() => {
    templates.loadMore({ categoryId: CATEGORY_ID, limit: 20, sortBy: 'createdAt', sortOrder: 'desc' })
  }, [templates])

  const itemWidth = useMemo(() => {
    return Math.floor((screenWidth - 24 - 12 * 2) / 3)
  }, [])

  const renderItem = useCallback(
    ({ item }: { item: Template }) => {
      const isSelected = selectedTemplateId === item.id
      return (
        <TemplateItem
          isSelected={isSelected}
          item={item}
          itemWidth={itemWidth}
          onSelect={() => handleSelectTemplate(item)}
        />
      )
    },
    [selectedTemplateId, itemWidth, handleSelectTemplate],
  )

  const ListHeader = useMemo(
    () => (
      <Block className="">
        <Header onSearch={handleSearch} />
        <Block className="px-12px relative z-10 flex-1">
          <UploadSection friendImg={friendImg} meImg={meImg} onPickFriend={onPickFriend} onPickMe={onPickMe} />
          <PromptSection prompt={prompt} onChangePrompt={setPrompt} />
          <TemplateSectionHeader onRandom={handleRandom} />
        </Block>
      </Block>
    ),
    [handleSearch, friendImg, meImg, onPickFriend, onPickMe, prompt, handleRandom],
  )

  const ListFooter = useMemo(() => {
    if (isLoadingMore) {
      return (
        <Block className="items-center justify-center py-[20px]">
          <ActivityIndicator color="#FFE500" size="small" />
        </Block>
      )
    }
    return <Block className="h-[200px] w-full" />
  }, [isLoadingMore])

  const ListEmpty = useMemo(() => {
    if (hasError) {
      return (
        <Block className="items-center justify-center py-[40px]">
          <Text className="mb-[8px] text-[14px] text-white/60">加载失败</Text>
          <Block className="-skew-x-6 border-2 border-white bg-white px-[16px] py-[6px]" onClick={handleRetry}>
            <Text className="text-[12px] font-[900] text-black">重试</Text>
          </Block>
        </Block>
      )
    }
    return (
      <Block className="items-center justify-center py-[40px]">
        <Text className="text-[14px] text-white/60">暂无模板</Text>
      </Block>
    )
  }, [isLoading, hasError, handleRetry])

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

      <FlashList
        contentContainerStyle={{ paddingHorizontal: 12 }}
        data={displayTemplates}
        drawDistance={screenHeight}
        // @ts-ignore
        estimatedItemSize={itemWidth}
        extraData={selectedTemplateId}
        keyExtractor={(item) => item.id}
        ListEmptyComponent={ListEmpty}
        ListFooterComponent={ListFooter}
        ListHeaderComponent={ListHeader}
        numColumns={3}
        renderItem={renderItem}
        showsVerticalScrollIndicator={false}
        refreshControl={
          <RefreshControl colors={['#FFE500']} refreshing={refreshing} tintColor="#fff" onRefresh={onRefresh} />
        }
        onEndReached={onLoadMore}
        onEndReachedThreshold={0.3}
      />

      <GenerateSection selectedTemplate={selectedTemplate} onGenerate={handleGenerate} />
    </Block>
  )
}

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

type HeaderProps = { onSearch: () => void }
const Header = memo<HeaderProps>(function Header({ onSearch }) {
  return (
    <Block className="z-20 flex-row items-center justify-between py-[12px]">
      <Block className="-skew-x-12 flex-row items-center gap-[8px] border border-white/20 bg-black px-[12px] py-[4px]">
        <Block className="size-[8px] bg-accent" />
        <Text className="font-700 skew-x-12 text-[12px] tracking-wider text-white">创造终端</Text>
      </Block>

      <Block className="items-center">
        <Text className="font-700 text-[24px] tracking-tighter text-white">GEN_STUDIO</Text>
      </Block>

      <Block className="-skew-x-12 flex-row items-center gap-[8px] border border-white/20 bg-black px-[12px] py-[4px] opacity-0">
        <Block className="size-[8px] bg-accent" />
        <Text className="font-700 skew-x-12 text-[12px] tracking-wider text-white">创造终端</Text>
      </Block>
    </Block>
  )
})

type UploadCardProps = {
  variant: 'me' | 'friend'
  img: string
  onPick: () => void
}
const UploadCard = memo<UploadCardProps>(function UploadCard({ variant, img, onPick }) {
  const isMe = variant === 'me'

  return (
    <Block className="flex-1 overflow-hidden border-[3px] border-black bg-white" onClick={onPick}>
      {isMe ? (
        <Block className="absolute left-0 top-0 z-10 border-b-2 border-r-2 border-black bg-accent px-[8px] py-[2px]">
          <Text className="text-[10px] font-[900] text-black">我</Text>
        </Block>
      ) : (
        <Block className="absolute right-0 top-0 z-10 border-b-2 border-l-2 border-white bg-black px-[8px] py-[2px]">
          <Text className="text-[10px] font-[900] text-white">朋友</Text>
        </Block>
      )}

      <Block className="size-full items-center justify-center bg-[#F3F4F6]">
        {img ? (
          <Img className="size-full" contentFit="cover" src={img} />
        ) : (
          <Block className="items-center">
            {isMe ? (
              <Block className="mb-[4px] size-[40px] items-center justify-center rounded-[20px] border-2 border-black bg-white">
                <Text className="font-700 text-[16px] text-black">+</Text>
              </Block>
            ) : (
              <Block className="mb-[4px] size-[40px] items-center justify-center rounded-[20px] bg-black">
                <Text className="font-700 text-[16px] text-white">+</Text>
              </Block>
            )}

            <Text className="font-700 text-[9px] text-black/50">点击上传</Text>
          </Block>
        )}
      </Block>
    </Block>
  )
})

type UploadSectionProps = {
  meImg: string
  friendImg: string
  onPickMe: () => void
  onPickFriend: () => void
}
const UploadSection = memo<UploadSectionProps>(function UploadSection({ meImg, friendImg, onPickMe, onPickFriend }) {
  return (
    <Block className="z-10 flex h-[160px] w-full flex-row gap-x-[12px]">
      <UploadCard img={meImg} variant="me" onPick={onPickMe} />
      <UploadCard img={friendImg} variant="friend" onPick={onPickFriend} />
    </Block>
  )
})

type PromptSectionProps = {
  prompt: string
  onChangePrompt: (v: string) => void
}
const PromptSection = memo<PromptSectionProps>(function PromptSection({ prompt, onChangePrompt }) {
  return (
    <Block className="mt-[24px] -skew-x-6">
      <Block className="mb-[4px] flex-row items-center px-[4px]">
        <Block className="border border-white/20 bg-black px-[8px] py-[2px]">
          <Text className="text-[12px] font-[900] text-accent">提示词</Text>
        </Block>
      </Block>

      <Block className="border-[3px] border-black bg-white p-[4px]">
        <Input
          multiline
          className="font-700 min-h-[50px] w-full bg-transparent p-[8px] text-[14px] leading-[18px] text-black"
          numberOfLines={2}
          placeholder="描述画面细节..."
          value={prompt}
          onChangeText={onChangePrompt}
        />
      </Block>
    </Block>
  )
})

type Template = {
  id: string
  name: string
  image: string
  type: 'video'
  price?: number
  data?: any
}

type TemplateItemProps = {
  item: Template
  itemWidth: number
  isSelected: boolean
  onSelect: () => void
}
const TemplateItem = memo<TemplateItemProps>(function TemplateItem({ item, itemWidth, isSelected, onSelect }) {
  return (
    <Block
      className={`relative overflow-hidden border-2 ${isSelected ? 'border-accent' : 'border-black'}`}
      style={{
        transform: [{ skewX: '-6deg' }],
        height: itemWidth,
        width: itemWidth,
        borderWidth: 2,
        marginBottom: 12,
        borderColor: isSelected ? '#FFE500' : '#000000',
      }}
      onClick={onSelect}
    >
      <Img className="size-full" contentFit="cover" src={item.image} />

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

      <Block className="absolute inset-x-0 bottom-0 items-center bg-black/90 p-[4px]">
        <Text className={`text-[8px] font-[700] ${isSelected ? 'text-accent' : 'text-white'}`}>{item.name}</Text>
      </Block>

      {item.type === 'video' && (
        <Block className="rounded-4px absolute right-[4px] top-[4px] rounded-[4px] border border-white/50 bg-black p-[4px]">
          <Fontisto color="white" name="youtube-play" size={8} />
        </Block>
      )}
    </Block>
  )
})

type TemplateSectionHeaderProps = {
  onRandom: () => void
}
const TemplateSectionHeader = memo<TemplateSectionHeaderProps>(function TemplateSectionHeader({ onRandom }) {
  const style = useAnimatedStyle(() => ({
    transform: [{ skewX: '-6deg' }],
    backgroundColor: '#FFE500',
  }))

  return (
    <Block className="my-[16px]">
      <Block className="flex-row items-center justify-between">
        <Block
          animated
          className="flex-row items-center gap-[8px] border-2 border-black bg-accent px-[12px] py-[4px]"
          style={style}
        >
          <FontAwesome color="black" name="film" size={16} />
          <Text className="text-[10px] font-[900] text-black">视频模版</Text>
        </Block>

        <Block
          className="-skew-x-6 items-center justify-center border-2 border-black bg-white px-[8px] py-[4px]"
          onClick={onRandom}
        >
          <Text className="text-[10px] font-[900] text-black">换一波</Text>
        </Block>
      </Block>
    </Block>
  )
})

type GenerateSectionProps = {
  selectedTemplate: Template | undefined
  onGenerate: () => void
}
const GenerateSection = memo<GenerateSectionProps>(function GenerateSection({ selectedTemplate, onGenerate }) {
  const insets = useSafeAreaInsets()

  if (!selectedTemplate) return null

  const price = selectedTemplate.price || selectedTemplate.data?.price || 0

  return (
    <Block className="absolute inset-x-[16px] bottom-[96px] z-40" style={{ paddingBottom: insets.bottom }}>
      <Block style={{ transform: [{ skewX: '-6deg' }] }}>
        <Block
          className={`relative flex-row items-center justify-between border-[3px] border-black bg-accent py-[8px]`}
          style={{ paddingHorizontal: 24 }}
          onClick={onGenerate}
        >
          {/* 左侧文字 */}
          <Block className="z-10 flex-col">
            <Text className={`text-[24px] text-black`}>立即生成</Text>
            <Text className={`text-[10px] font-bold text-black`}>开始创作</Text>
          </Block>

          {/* 右侧 Goo 标签 */}
          <Block className="z-10 flex-row items-center gap-[8px] border-2 border-black bg-black px-[12px] py-[4px]">
            <Ionicons color="#FFE500" name="flash" size={14} />
            <Text className="text-[14px] font-black text-accent">{price} Goo</Text>
          </Block>
        </Block>
      </Block>
    </Block>
  )
})