import { useState, useEffect } from 'react'
import { View, Text, StyleSheet, ScrollView, Dimensions, Pressable, TextInput, StatusBar as RNStatusBar, ActivityIndicator, Alert } from 'react-native'
import { StatusBar } from 'expo-status-bar'
import { SafeAreaView } from 'react-native-safe-area-context'
import { Image } from 'expo-image'
import { useRouter, useLocalSearchParams } from 'expo-router'
import { LinearGradient } from 'expo-linear-gradient'

import { LeftArrowIcon, UploadIcon, PointsIcon, WhitePointsIcon } from '@/components/icon'
import UploadReferenceImageDrawer from '@/components/UploadReferenceImageDrawer'
import { useTemplateActions } from '@/hooks/actions/use-template-actions'
import { useFileUpload } from '@/hooks/actions/use-file-upload'
import { useAigcTask } from '@/hooks/actions/use-aigc-task'
import { useUserBalance } from '@/hooks/core/use-user-balance'
import { useAuth } from '@/hooks/core/use-auth'

const { width: screenWidth, height: screenHeight } = Dimensions.get('window')

interface TemplateData {
  id: number | string
  videoUrl: any
  thumbnailUrl: any
  title: string
  duration: string
  creditsCost?: number
}

const CREDITS_COST = 10

export default function GenerateVideoScreen() {
  const router = useRouter()
  const params = useLocalSearchParams()
  const { user } = useAuth()
  const { balance, load: loadBalance } = useUserBalance()

  const [description, setDescription] = useState('')
  const [uploadedImage, setUploadedImage] = useState<any>(null)
  const [uploadedImageUrl, setUploadedImageUrl] = useState<string | null>(null)
  const [templateData, setTemplateData] = useState<TemplateData | null>(null)
  const [drawerVisible, setDrawerVisible] = useState(false)
  const [isGenerating, setIsGenerating] = useState(false)
  const [generationProgress, setGenerationProgress] = useState('')

  const { uploadFile, loading: uploadLoading } = useFileUpload()
  const { submitTask, startPolling, stopPolling, isPolling } = useAigcTask()
  const { runTemplate, createGeneration, loading: actionLoading } = useTemplateActions()

  useEffect(() => {
    if (params.template && typeof params.template === 'string') {
      try {
        const parsed = JSON.parse(params.template) as TemplateData
        setTemplateData(parsed)
        if (parsed.thumbnailUrl) {
          setUploadedImage(parsed.thumbnailUrl)
        }
      } catch (error) {
        console.error('Failed to parse template data:', error)
      }
    }
  }, [params.template])

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

  useEffect(() => {
    return () => {
      stopPolling()
    }
  }, [])

  const handleImageSelect = async (imageUri: any) => {
    setUploadedImage(imageUri)

    if (typeof imageUri === 'string' && (imageUri.startsWith('http://') || imageUri.startsWith('https://'))) {
      setUploadedImageUrl(imageUri)
      return
    }

    setGenerationProgress('上传图片中...')
    const { url, error } = await uploadFile(imageUri, 'templates')

    if (error) {
      Alert.alert('上传失败', error.message || '图片上传失败，请重试')
      setGenerationProgress('')
      return
    }

    if (url) {
      setUploadedImageUrl(url)
      setGenerationProgress('')
    }
  }

  const handleGenerateVideo = async () => {
    if (!templateData?.id) {
      Alert.alert('提示', '模板信息不完整')
      return
    }

    if (!uploadedImageUrl) {
      Alert.alert('提示', '请先上传参考图')
      return
    }

    if (balance < CREDITS_COST) {
      Alert.alert('积分不足', `生成视频需要 ${CREDITS_COST} 积分，当前积分：${balance}`)
      return
    }

    setIsGenerating(true)
    setGenerationProgress('提交生成任务...')

    const { taskId, error: submitError } = await submitTask({
      model_name: 'video_generation',
      prompt: description || '生成视频',
      img_url: uploadedImageUrl,
      duration: templateData.duration || '3',
      resolution: '720p',
      watermark: false,
      webhook_flag: false,
    })

    if (submitError) {
      Alert.alert('生成失败', submitError.message || '提交任务失败')
      setIsGenerating(false)
      setGenerationProgress('')
      return
    }

    if (!taskId) {
      Alert.alert('生成失败', '任务ID获取失败')
      setIsGenerating(false)
      setGenerationProgress('')
      return
    }

    setGenerationProgress('生成中...')

    startPolling(
      taskId,
      async (result) => {
        const videoUrls = result.data || []
        const videoUrl = videoUrls[0] || null

        const { generation, error: createError } = await createGeneration({
          templateId: String(templateData.id),
          type: 'VIDEO',
          resultUrl: videoUrls,
          originalUrl: uploadedImageUrl,
          status: 'completed',
          creditsCost: CREDITS_COST,
        })

        if (createError) {
          Alert.alert('保存失败', createError.message || '生成记录保存失败')
        } else {
          Alert.alert('生成成功', '视频已生成完成', [
            {
              text: '查看',
              onPress: () => {
                if (generation?.id) {
                  router.push({
                    pathname: '/generationRecord' as any,
                    params: { id: generation.id },
                  })
                }
              },
            },
            { text: '继续生成' },
          ])

          if (user?.id) {
            loadBalance(user.id)
          }
        }

        setIsGenerating(false)
        setGenerationProgress('')
      },
      (error) => {
        Alert.alert('生成失败', error.message || '视频生成失败')
        setIsGenerating(false)
        setGenerationProgress('')
      }
    )
  }

  const isLoading = uploadLoading || actionLoading || isGenerating

  return (
    <SafeAreaView style={styles.container} edges={['top']}>
      <StatusBar style="light" />
      <RNStatusBar barStyle="light-content" />
      <ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
        {/* 顶部导航栏 */}
        <View style={styles.header}>
          <Pressable style={styles.backButton} onPress={() => router.back()}>
            <LeftArrowIcon />
          </Pressable>
        </View>
        <View style={styles.content}>
          {/* 标题区域 */}
          <View style={styles.titleSection}>
            <Text style={styles.title}> {templateData?.title}</Text>
            <Text style={styles.subtitle}>{templateData?.title}</Text>
          </View>

          <View style={styles.uploadContainer}>
            {uploadedImage ? (
              <Image source={uploadedImage} style={styles.uploadedImage} contentFit="cover" />
            ) : (
              <View style={styles.avatarPlaceholder}>
                <View style={styles.avatarCircle} />
              </View>
            )}
            <View style={styles.thumbnailContainer}>
              <Image source={templateData?.thumbnailUrl} style={styles.thumbnail} contentFit="cover" />
            </View>
          </View>
          {/* 上传区域 */}
          <Pressable
            style={styles.uploadReferenceButton}
            onPress={() => {
              setDrawerVisible(true)
            }}
          >
            <UploadIcon />
            <Text style={styles.uploadReferenceText}>上传参考图</Text>
          </Pressable>
          {/* 描述输入区域 */}
          <TextInput
            style={styles.descriptionInput}
            value={description}
            onChangeText={setDescription}
            placeholder="描述你想要的视频效果"
            placeholderTextColor="#8A8A8A"
            multiline
            numberOfLines={4}
            textAlignVertical="top"
          />
          {/* 进度提示 */}
          {generationProgress ? (
            <View style={styles.progressContainer}>
              <ActivityIndicator size="small" color="#9966FF" />
              <Text style={styles.progressText}>{generationProgress}</Text>
            </View>
          ) : null}

          {/* 底部生成按钮 */}
          <View style={styles.generateButtonContainer}>
            <Pressable onPress={handleGenerateVideo} disabled={isLoading}>
              <LinearGradient
                colors={isLoading ? ['#666666', '#666666', '#666666'] : ['#9966FF', '#FF6699', '#FF9966']}
                locations={[0.0015, 0.4985, 0.9956]}
                start={{ x: 1, y: 0 }}
                end={{ x: 0, y: 0 }}
                style={styles.generateButton}
              >
                {isLoading ? (
                  <ActivityIndicator size="small" color="#F5F5F5" />
                ) : (
                  <>
                    <Text style={styles.generateButtonText}>生成视频</Text>
                    <View style={styles.pointsBadge}>
                      <WhitePointsIcon />
                      <Text style={styles.pointsText}>{CREDITS_COST}</Text>
                    </View>
                  </>
                )}
              </LinearGradient>
            </Pressable>
          </View>
        </View>
      </ScrollView>
      <UploadReferenceImageDrawer
        visible={drawerVisible}
        onClose={() => setDrawerVisible(false)}
        onSelectImage={handleImageSelect}
      />
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#090A0B',
  },
  scrollView: {
    flex: 1,
    backgroundColor: '#090A0B',
  },
  scrollContent: {
    flexGrow: 1,
    backgroundColor: '#090A0B',
  },
  generateButtonContainer: {
    marginTop: 'auto',
    paddingTop: 12,
  },
  content: {
    paddingHorizontal: 12,
    paddingTop: 16,
    paddingBottom: 16,
    backgroundColor: '#1C1E20',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    gap: 8,
    minHeight: screenHeight - 59,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingTop: 17,
    paddingHorizontal: 12,
    paddingBottom: 20,
  },
  backButton: {
    width: 22,
    height: 22,
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleSection: {
    paddingHorizontal: 4,
    marginBottom: 11,
  },
  title: {
    color: '#F5F5F5',
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 5,
    marginLeft: -4,
  },
  subtitle: {
    color: '#CCCCCC',
    fontSize: 12,
  },

  uploadContainer: {
    height: 140,
    borderRadius: 12,
    backgroundColor: '#262A31',
    overflow: 'hidden',
    position: 'relative',
    alignItems: 'center',
    justifyContent: 'center',
  },
  thumbnailContainer: {
    position: 'absolute',
    left: 8,
    bottom: 5,
    width: 56,
    height: 56,
    borderRadius: 8,
    overflow: 'hidden',
    borderWidth: 2,
    borderColor: '#FFFFFF',
    backgroundColor: '#090A0B',
  },
  thumbnail: {
    width: '100%',
    height: '100%',
  },
  avatarPlaceholder: {
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: '#2F3134',
    alignItems: 'center',
    justifyContent: 'center',
  },
  avatarCircle: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#4A4C4F',
  },
  uploadedImage: {
    width: '100%',
    height: '100%',
  },
  uploadReferenceButton: {
    height: 110,
    backgroundColor: '#262A31',
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 6,
  },
  uploadReferenceText: {
    color: '#F5F5F5',
    fontSize: 12,
    fontWeight: '500',
  },
  descriptionInput: {
    minHeight: 150,
    backgroundColor: '#262A31',
    borderRadius: 12,
    padding: 12,
    color: '#F5F5F5',
    fontSize: 14,
    lineHeight: 20,
  },
  progressContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    paddingVertical: 8,
  },
  progressText: {
    color: '#9966FF',
    fontSize: 14,
    fontWeight: '500',
  },
  generateButton: {
    width: '100%',
    height: 48,
    backgroundColor: 'red',
    borderRadius: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
  },
  generateButtonText: {
    color: '#F5F5F5',
    fontSize: 16,
    fontWeight: '500',
  },
  pointsBadge: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  pointsText: {
    color: '#f5f5f5',
    fontSize: 14,
    fontWeight: '500',
  },
})