import React, { memo, useCallback, useMemo, useState, useEffect } from 'react'
import { Block, Text, Img, Input, VideoBox } from '@/@share/components'
import { imgPicker } from '@/@share/apis/imgPicker'
import Svg, { Defs, Pattern, Rect, Circle } from 'react-native-svg'
import { ScrollView } from 'react-native-gesture-handler'
import { useAnimatedStyle } from 'react-native-reanimated'
import { FontAwesome, Fontisto, Ionicons } from '@expo/vector-icons'
import { screenHeight, screenWidth } from '@/utils'
import { useRouter } from 'expo-router'
import { useRecommendedTemplates, RecommendedTemplate } from '@/hooks/data/use-recommended-templates'
import { useCategories } from '@/hooks/data/use-categories'
import { useTemplates } from '@/hooks/data/use-templates'
import { ActivityIndicator } from 'react-native'
import { ApiError } from '@/lib/types'
import { useSafeAreaInsets } from 'react-native-safe-area-context'

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

/** =========================
 * 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 }}
      />

      <Block className="absolute inset-0">
        <Svg width="100%" height="100%" viewBox="0 0 400 800" preserveAspectRatio="none">
          <Defs>
            <Pattern id="dots" x="0" y="0" width="15" height="15" patternUnits="userSpaceOnUse">
              <Circle cx="2" cy="2" r="2" fill="#ffff00" opacity="0.05" />
            </Pattern>
          </Defs>
          <Rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
        </Svg>
      </Block>

      <Block className="absolute right-[-10px] top-[96px] z-0">
        <Text className="font-700 text-[120px] italic leading-[120px] tracking-tighter text-white/10">CREATE</Text>
      </Block>
    </Block>
  )
})

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-[-12deg] flex-row items-center gap-[8px] border-[1px] border-white/20 bg-black px-[12px] py-[4px]">
        <Block className="h-[8px] w-[8px] bg-[#FFE500]" />
        <Text className="font-700 skew-x-[12deg] text-[12px] tracking-wider text-white">创造终端</Text>
      </Block>

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

      <Block className="h-[32px] w-[32px] items-center justify-center" onClick={onSearch}>
        <Ionicons name="search" size={20} color="white" />
      </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-[0px] top-[0px] z-10 border-b-[2px] border-r-[2px] border-black bg-[#FFE500] px-[8px] py-[2px]">
          <Text className="text-[10px] font-[900] italic text-black">我</Text>
        </Block>
      ) : (
        <Block className="absolute right-[0px] top-[0px] z-10 border-b-[2px] border-l-[2px] border-white bg-black px-[8px] py-[2px]">
          <Text className="text-[10px] font-[900] italic text-white">朋友</Text>
        </Block>
      )}

      <Block className="h-full w-full items-center justify-center bg-[#F3F4F6]">
        {img ? (
          <Img src={img} className="h-full w-full" contentFit="cover" />
        ) : (
          <Block className="items-center">
            {isMe ? (
              <Block className="mb-[4px] h-[40px] w-[40px] items-center justify-center rounded-[20px] border-[2px] border-black bg-white">
                <Text className="font-700 text-[16px] text-black">+</Text>
              </Block>
            ) : (
              <Block className="mb-[4px] h-[40px] w-[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] italic 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 variant="me" img={meImg} onPick={onPickMe} />
      <UploadCard variant="friend" img={friendImg} 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-[-6deg]">
      <Block className="mb-[4px] flex-row items-center px-[4px]">
        <Block className="border-[1px] border-white/20 bg-black px-[8px] py-[2px]">
          <Text className="text-[12px] font-[900] italic text-[#FFE500]">提示词</Text>
        </Block>
      </Block>

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

type Template = {
  id: string
  name: string
  image: string
  type: 'video'
  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 border-[2px] ${isSelected ? 'border-accent' : 'border-black'}`}
      style={{
        transform: [{ skewX: '-6deg' }],
        height: itemWidth,
        width: itemWidth,
        borderWidth: 2,
        borderColor: isSelected ? '#FFE500' : '#000000',
      }}
      onClick={onSelect}
    >
      <Img src={item.image} className="h-full w-full" contentFit="cover" />

      {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 px-[4px] py-[4px]">
        <Text className={`text-[8px] font-[700] italic ${isSelected ? 'text-accent' : 'text-white'}`}>{item.name}</Text>
      </Block>

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

type CategoryChipProps = {
  name: string
  isSelected: boolean
  onSelect: () => void
}
const CategoryChip = memo<CategoryChipProps>(function CategoryChip({ name, isSelected, onSelect }) {
  return (
    <Block
      className={`skew-x-[-6deg] border-[2px] px-[12px] py-[4px] ${isSelected ? 'border-accent bg-accent' : 'border-black bg-white'}`}
      onClick={onSelect}
    >
      <Text className={`text-[10px] font-[900] italic ${isSelected ? 'text-black' : 'text-black/60'}`}>{name}</Text>
    </Block>
  )
})

type CategoryFilterProps = {
  categories: Array<{ id: string; name: string }>
  selectedId: string
  onSelect: (id: string) => void
}
const CategoryFilter = memo<CategoryFilterProps>(function CategoryFilter({ categories, selectedId, onSelect }) {
  return (
    <Block className="mt-[16px]">
      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
        <CategoryChip name="全部" isSelected={selectedId === ''} onSelect={() => onSelect('')} />
        {categories.map((cat) => (
          <CategoryChip key={cat.id} name={cat.name} isSelected={selectedId === cat.id} onSelect={() => onSelect(cat.id)} />
        ))}
      </ScrollView>
    </Block>
  )
})

type TemplateSectionProps = {
  templates: Template[]
  selectedTemplateId: string
  onSelectTemplate: (t: Template) => void
  onRandom: () => void
  loading?: boolean
  error?: ApiError | null
  onRetry?: () => void
}
const TemplateSection = memo<TemplateSectionProps>(function TemplateSection({ templates, selectedTemplateId, onSelectTemplate, onRandom, loading, error, onRetry }) {
  const style = useAnimatedStyle(() => ({
    transform: [{ skewX: '-6deg' }],
    backgroundColor: '#FFE500',
  }))

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

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

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

      {loading ? (
        <Block className="mt-[32px] items-center justify-center py-[40px]">
          <ActivityIndicator size="large" color="#FFE500" />
        </Block>
      ) : error ? (
        <Block className="mt-[32px] items-center justify-center py-[40px]">
          <Text className="mb-[8px] text-[14px] text-white/60">加载失败</Text>
          {onRetry && (
            <Block className="skew-x-[-6deg] border-[2px] border-white bg-white px-[16px] py-[6px]" onClick={onRetry}>
              <Text className="text-[12px] font-[900] italic text-black">重试</Text>
            </Block>
          )}
        </Block>
      ) : templates.length === 0 ? (
        <Block className="mt-[32px] items-center justify-center py-[40px]">
          <Text className="text-[14px] text-white/60">暂无模板</Text>
        </Block>
      ) : (
        <Block className="mt-[16px] flex-row flex-wrap gap-[12px]">
          {templates.map((item) => {
            const isSelected = selectedTemplateId === item.id
            return <TemplateItem key={item.id} item={item} itemWidth={itemWidth} isSelected={isSelected} onSelect={() => onSelectTemplate(item)} />
          })}
        </Block>
      )}
    </Block>
  )
})

type GenerateSectionProps = { onGenerate: () => void }
const GenerateSection = memo<GenerateSectionProps>(function GenerateSection({ onGenerate }) {
  const insets = useSafeAreaInsets()
  return (
    <Block className="absolute bottom-[96px] left-[16px] right-[16px] z-40" style={{ paddingBottom: insets.bottom }}>
      <Block style={{ transform: [{ skewX: '-6deg' }] }}>
        <Block
          onClick={onGenerate}
          className={`relative flex-row items-center justify-between border-[3px] border-black bg-[#FFE500] py-[8px]`}
          style={{ paddingHorizontal: 24 }}
        >
          {/* 左侧文字 */}
          <Block className="z-10 flex-col">
            <Text className={`text-[24px] italic 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-[2px] border-black bg-black px-[12px] py-[4px]">
            <Ionicons name="flash" size={14} color="#FFE500" />
            <Text className="text-[14px] font-black italic text-[#FFE500]">3 Goo</Text>
          </Block>
        </Block>
      </Block>
    </Block>
  )
})

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

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

  const [prompt, setPrompt] = useState(`${env} update`)
  const [selectedTemplateId, setSelectedTemplateId] = useState('')
  const [selectedCategoryId, setSelectedCategoryId] = useState('')
  const [meImg, setMeImg] = useState('')
  const [friendImg, setFriendImg] = useState('')
  const [bgVideo] = useState(() => BACKGROUND_VIDEOS[Math.floor(Math.random() * BACKGROUND_VIDEOS.length)])

  const recommendedTemplates = useRecommendedTemplates()
  const categories = useCategories()
  const templates = useTemplates()

  useEffect(() => {
    recommendedTemplates.execute({ isActive: true })
    categories.load({ isActive: true })
  }, [])

  useEffect(() => {
    const params = selectedCategoryId ? { categoryId: selectedCategoryId, isActive: true } : { isActive: true }
    templates.execute(params)
  }, [selectedCategoryId])

  const displayTemplates = useMemo(() => {
    const recommended = recommendedTemplates.data?.templates || []
    const regular = templates.data?.templates || []

    const all = selectedCategoryId
      ? regular
      : [...recommended.map((r: RecommendedTemplate) => r.template).filter(Boolean), ...regular]

    return all.map((t: any): Template => ({
      id: t.id,
      name: t.title,
      image: t.coverImageUrl,
      type: 'video' as const,
      data: t,
    }))
  }, [recommendedTemplates.data, templates.data, selectedCategoryId])

  const categoryList = useMemo(() => {
    return (categories.data?.categories || []).map((c) => ({
      id: c.id,
      name: c.name,
    }))
  }, [categories.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 [uri] = (await imgPicker({ maxImages: 1, resultType: 'uri' })) as string[]
    if (!uri) return
    if (target === 'me') setMeImg(uri)
    else setFriendImg(uri)
  }, [])

  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 handleSelectCategory = useCallback((id: string) => {
    setSelectedCategoryId(id)
    setSelectedTemplateId('')
  }, [])

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

  const isLoading = templates.loading || recommendedTemplates.loading
  const hasError = templates.error || recommendedTemplates.error

  const handleRetry = useCallback(() => {
    if (selectedCategoryId) {
      templates.refetch({ categoryId: selectedCategoryId, isActive: true })
    } else {
      recommendedTemplates.refetch({ isActive: true })
      templates.refetch({ isActive: true })
    }
  }, [selectedCategoryId, templates, recommendedTemplates])

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

      <ScrollView contentContainerStyle={{ overflow: 'visible' }}>
        <Block className="px-[12px]">
          <Header onSearch={handleSearch} />

          <Block className="px-16px relative z-10 flex-1">
            <UploadSection meImg={meImg} friendImg={friendImg} onPickMe={onPickMe} onPickFriend={onPickFriend} />
            <PromptSection prompt={prompt} onChangePrompt={setPrompt} />
            {categoryList.length > 0 && (
              <CategoryFilter categories={categoryList} selectedId={selectedCategoryId} onSelect={handleSelectCategory} />
            )}
            <TemplateSection
              templates={displayTemplates}
              selectedTemplateId={selectedTemplateId}
              onSelectTemplate={handleSelectTemplate}
              onRandom={handleRandom}
              loading={isLoading}
              error={hasError}
              onRetry={handleRetry}
            />
          </Block>
        </Block>

        <Block className="h-[200px] w-full"></Block>
      </ScrollView>

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