import { TemplateList } from '@/components/templates/template-list';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { useAuth } from '@/hooks/use-auth';
import { getTemplates } from '@/lib/api/templates';
import { Template } from '@/lib/types/template';
import { LinearGradient } from 'expo-linear-gradient';
import { Ionicons } from '@expo/vector-icons';
import { useCallback, useEffect, useRef, useState } from 'react';
import { Alert, Animated, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { LoginModal } from '@/components/auth/login-modal';

export default function HomeScreen() {
  const { isAuthenticated } = useAuth();
  const [templates, setTemplates] = useState<Template[]>([]);
  const [loading, setLoading] = useState(false);
  const [refreshing, setRefreshing] = useState(false);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [showLoginModal, setShowLoginModal] = useState(false);
  const pulseAnim = useRef(new Animated.Value(0)).current;
  const bounceAnim = useRef(new Animated.Value(0)).current;

  const fetchTemplates = useCallback(async (page: number = 1, isRefreshing = false, isLoadMore = false) => {
    if (!isAuthenticated) return;

    try {
      if (isRefreshing) {
        setRefreshing(true);
      } else if (isLoadMore) {
        setIsLoadingMore(true);
      } else {
        setLoading(true);
      }
      setError(null);

      const response = await getTemplates({
        page,
        size: 10,
        status: 'RELEASE'
      });

      if (isRefreshing || page === 1) {
        setTemplates(response.data);
        setCurrentPage(1);
      } else {
        setTemplates(prev => [...prev, ...response.data]);
        setCurrentPage(page);
      }

      setHasMore(response.pagination.page < response.pagination.totalPages);
    } catch (err: any) {
      console.error('获取模板列表失败:', err);
      setError(err.message || '获取模板列表失败');
    } finally {
      setLoading(false);
      setRefreshing(false);
      setIsLoadingMore(false);
    }
  }, [isAuthenticated]);

  const loadMore = useCallback(() => {
    if (!isLoadingMore && hasMore && !refreshing) {
      fetchTemplates(currentPage + 1, false, true);
    }
  }, [currentPage, hasMore, isLoadingMore, refreshing, fetchTemplates]);

  useEffect(() => {
    if (isAuthenticated) {
      fetchTemplates();
      setShowLoginModal(false);
    }

    Animated.loop(
      Animated.sequence([
        Animated.timing(pulseAnim, {
          toValue: 1,
          duration: 2000,
          useNativeDriver: false,
        }),
        Animated.timing(pulseAnim, {
          toValue: 0,
          duration: 2000,
          useNativeDriver: false,
        }),
      ])
    ).start();

    Animated.loop(
      Animated.sequence([
        Animated.timing(bounceAnim, {
          toValue: -10,
          duration: 600,
          useNativeDriver: true,
        }),
        Animated.timing(bounceAnim, {
          toValue: -5,
          duration: 200,
          useNativeDriver: true,
        }),
        Animated.timing(bounceAnim, {
          toValue: 0,
          duration: 600,
          useNativeDriver: true,
        }),
        Animated.timing(bounceAnim, {
          toValue: 0,
          duration: 200,
          useNativeDriver: true,
        }),
      ])
    ).start();
  }, [isAuthenticated, fetchTemplates, pulseAnim, bounceAnim]);

  const handleRefresh = useCallback(() => {
    fetchTemplates(1, true, false);
  }, [fetchTemplates]);

  const handleTemplatePress = (template: Template) => {
    Alert.alert('模板详情', `您选择了: ${template.title}`);
  };

  const handleVideoChange = (template: Template, index: number) => {
    console.log('视频切换到:', template.title, '索引:', index);
  };

  if (!isAuthenticated) {
    const scaleAnim = pulseAnim.interpolate({
      inputRange: [0, 1],
      outputRange: [0.95, 1.05],
    });

    return (
      <ThemedView style={styles.container}>
        <View style={styles.welcomeContainer}>
          <Animated.View
            style={[
              styles.iconContainer,
              { transform: [{ scale: scaleAnim }] },
            ]}
          >
            <Ionicons name="albums-outline" size={80} color="#007AFF" />
          </Animated.View>

          <ThemedText type="title" style={styles.welcomeTitle}>
            欢迎使用模板中心
          </ThemedText>
          <ThemedText style={styles.welcomeSubtitle}>
            登录后即可浏览和使用海量精美模板
          </ThemedText>

          <TouchableOpacity
            style={styles.loginButton}
            onPress={() => setShowLoginModal(true)}
            activeOpacity={0.8}
          >
            <LinearGradient
              colors={['#007AFF', '#0056D2']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}
              style={styles.loginButtonGradient}
            >
              <Ionicons name="log-in-outline" size={20} color="#fff" style={styles.loginButtonIcon} />
              <Text style={styles.loginButtonText}>立即登录</Text>
            </LinearGradient>
          </TouchableOpacity>

          <TouchableOpacity style={styles.guestButton} activeOpacity={0.6}>
            <Text style={styles.guestButtonText}>游客浏览</Text>
          </TouchableOpacity>
        </View>

        <LoginModal
          visible={showLoginModal}
          onClose={() => setShowLoginModal(false)}
        />
      </ThemedView>
    );
  }

  const shadowOpacity = pulseAnim.interpolate({
    inputRange: [0, 1],
    outputRange: [0.3, 0.4],
  });

  return (
    <ThemedView style={styles.container}>
      <Animated.View style={[styles.headerBanner, { shadowOpacity }]}>
        <LinearGradient
          colors={['#ff6b6b', '#ff8e53', '#ff6b35']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={styles.gradientBanner}
        >
          <Text style={styles.bannerText}>
            New User 50% Off Coupon : <Text style={styles.couponText}>NEWUSER</Text>
          </Text>
          <Animated.Text
            style={[
              styles.giftIcon,
              { transform: [{ translateY: bounceAnim }] },
            ]}
          >
            🎁
          </Animated.Text>
        </LinearGradient>
      </Animated.View>

      <TemplateList
        templates={templates}
        loading={loading}
        refreshing={refreshing}
        isLoadingMore={isLoadingMore}
        hasMore={hasMore}
        onRefresh={handleRefresh}
        onLoadMore={loadMore}
        onTemplatePress={handleTemplatePress}
        onVideoChange={handleVideoChange}
        error={error}
      />

      <LoginModal
        visible={showLoginModal}
        onClose={() => setShowLoginModal(false)}
      />
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  welcomeContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 40,
  },
  iconContainer: {
    width: 120,
    height: 120,
    borderRadius: 60,
    backgroundColor: 'rgba(0, 122, 255, 0.1)',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 24,
  },
  welcomeTitle: {
    fontSize: 28,
    fontWeight: '700',
    marginBottom: 12,
    textAlign: 'center',
  },
  welcomeSubtitle: {
    fontSize: 16,
    textAlign: 'center',
    opacity: 0.7,
    marginBottom: 48,
    lineHeight: 24,
  },
  loginButton: {
    width: '100%',
    height: 56,
    borderRadius: 16,
    overflow: 'hidden',
    elevation: 8,
    shadowColor: '#007AFF',
    shadowOffset: { width: 0, height: 4 },
    shadowRadius: 12,
    shadowOpacity: 0.3,
  },
  loginButtonGradient: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  loginButtonIcon: {
    marginRight: 8,
  },
  loginButtonText: {
    color: '#fff',
    fontSize: 17,
    fontWeight: '700',
  },
  guestButton: {
    width: '100%',
    height: 56,
    borderRadius: 16,
    borderWidth: 1.5,
    borderColor: 'rgba(0, 122, 255, 0.3)',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 12,
  },
  guestButtonText: {
    color: '#007AFF',
    fontSize: 16,
    fontWeight: '600',
  },
  headerBanner: {
    position: 'absolute',
    top: 16,
    left: '10%',
    right: '10%',
    zIndex: 1000,
    borderRadius: 20,
    shadowColor: '#ff6b6b',
    shadowOffset: { width: 0, height: 4 },
    shadowRadius: 12,
    elevation: 8,
    overflow: 'hidden',
  },
  gradientBanner: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 4,
    paddingHorizontal: 16,
    position: 'relative',
  },
  bannerText: {
    fontSize: 14,
    fontWeight: '600',
    color: '#fff',
    textAlign: 'center',
  },
  couponText: {
    fontWeight: '800',
    fontSize: 14,
    color: '#fff',
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 6,
    marginLeft: 6,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.6)',
    borderStyle: 'dashed',
  },
  giftIcon: {
    position: 'absolute',
    right: 8,
    fontSize: 16,
  },
});