import { LinearGradient } from 'expo-linear-gradient';
import { useRouter } from 'expo-router';
import React, { useEffect } from 'react';
import { Pressable, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
import Animated, {
  FadeInUp,
  FadeOut,
  interpolate,
  Layout,
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withSpring,
  withTiming
} from 'react-native-reanimated';

import { ThemedText } from '@/components/ThemedText';
import { HeaderBar } from '@/components/ui/HeaderBar';
import { palette } from '@/constants/Colors';
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
import { clearError, deletePlan, loadPlans, setCurrentPlan, type TrainingPlan } from '@/store/trainingPlanSlice';


const GOAL_TEXT: Record<string, { title: string; color: string; description: string }> = {
  postpartum_recovery: { title: '产后恢复', color: '#9BE370', description: '温和激活，核心重建' },
  fat_loss: { title: '减脂塑形', color: '#FFB86B', description: '全身燃脂，线条雕刻' },
  posture_correction: { title: '体态矫正', color: '#95CCE3', description: '打开胸肩，改善圆肩驼背' },
  core_strength: { title: '核心力量', color: '#A48AED', description: '核心稳定，提升运动表现' },
  flexibility: { title: '柔韧灵活', color: '#B0F2A7', description: '拉伸延展，释放紧张' },
  rehab: { title: '康复保健', color: '#FF8E9E', description: '循序渐进，科学修复' },
  stress_relief: { title: '释压放松', color: '#9BD1FF', description: '舒缓身心，改善睡眠' },
};

// 动态背景组件
function DynamicBackground() {
  const rotate = useSharedValue(0);
  const scale = useSharedValue(1);

  React.useEffect(() => {
    rotate.value = withRepeat(withTiming(360, { duration: 20000 }), -1);
    scale.value = withRepeat(withTiming(1.2, { duration: 8000 }), -1, true);
  }, []);

  const backgroundStyle = useAnimatedStyle(() => ({
    transform: [
      { rotate: `${rotate.value}deg` },
      { scale: scale.value }
    ],
  }));

  return (
    <View style={StyleSheet.absoluteFillObject}>
      <LinearGradient
        colors={['#F9FBF2', '#FFFFFF', '#F5F9F0']}
        style={StyleSheet.absoluteFillObject}
      />
      <Animated.View style={[styles.backgroundOrb, backgroundStyle]} />
      <Animated.View style={[styles.backgroundOrb2, backgroundStyle]} />
    </View>
  );
}


// 简洁的训练计划卡片
function PlanCard({ plan, onPress, onDelete, isActive, index }: { plan: TrainingPlan; onPress: () => void; onDelete: () => void; isActive?: boolean; index: number }) {
  const scale = useSharedValue(1);
  const glow = useSharedValue(0);

  React.useEffect(() => {
    glow.value = withRepeat(withTiming(1, { duration: 2000 + index * 100 }), -1, true);
  }, [index]);

  const goalConfig = GOAL_TEXT[plan.goal] || { title: '训练计划', color: palette.primary, description: '开始你的训练之旅' };

  const cardStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  const glowStyle = useAnimatedStyle(() => {
    const opacity = isActive ? interpolate(glow.value, [0, 1], [0.3, 0.7]) : interpolate(glow.value, [0, 1], [0.15, 0.4]);
    return {
      shadowOpacity: opacity,
      shadowColor: goalConfig.color,
      shadowRadius: isActive ? 24 : 16,
      elevation: isActive ? 16 : 12,
      borderColor: `${goalConfig.color}${isActive ? '50' : '30'}`,
    };
  });

  const formatDate = (dateStr: string) => {
    const date = new Date(dateStr);
    return `${date.getMonth() + 1}月${date.getDate()}日`;
  };

  const getFrequencyText = () => {
    if (plan.mode === 'daysOfWeek') {
      return `每周${plan.daysOfWeek.length}天`;
    }
    return `每周${plan.sessionsPerWeek}次`;
  };

  return (
    <Animated.View
      entering={FadeInUp.delay(index * 100).duration(400)}
      exiting={FadeOut}
      layout={Layout.springify()}
      style={[styles.planCard, cardStyle, glowStyle]}
    >
      <Pressable
        onPress={onPress}
        onLongPress={onDelete}
        onPressIn={() => { scale.value = withSpring(0.98); }}
        onPressOut={() => { scale.value = withSpring(1); }}
        style={styles.cardContent}
      >
        <LinearGradient
          colors={isActive ?
            [`${goalConfig.color}50`, `${goalConfig.color}20`] :
            ['rgba(255,255,255,0.95)', 'rgba(255,255,255,0.85)']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={styles.cardGradient}
        />

        {/* 左侧色彩指示器 */}
        <View style={[styles.colorIndicator, { backgroundColor: goalConfig.color }]} />

        {/* 主要内容 */}
        <View style={styles.cardMain}>
          <View style={styles.cardHeader}>
            <View style={styles.titleSection}>
              <ThemedText style={styles.planTitle}>{goalConfig.title}</ThemedText>
              <ThemedText style={styles.planDescription}>{goalConfig.description}</ThemedText>
            </View>
            {isActive && (
              <View style={[styles.activeBadge, { backgroundColor: goalConfig.color }]}>
                <ThemedText style={styles.activeText}>当前</ThemedText>
              </View>
            )}
          </View>

          <View style={styles.cardInfo}>
            <View style={styles.infoItem}>
              <ThemedText style={styles.infoLabel}>开始时间</ThemedText>
              <ThemedText style={styles.infoValue}>{formatDate(plan.startDate)}</ThemedText>
            </View>
            <View style={styles.infoItem}>
              <ThemedText style={styles.infoLabel}>训练频率</ThemedText>
              <ThemedText style={styles.infoValue}>{getFrequencyText()}</ThemedText>
            </View>
            {plan.preferredTimeOfDay && (
              <View style={styles.infoItem}>
                <ThemedText style={styles.infoLabel}>时间偏好</ThemedText>
                <ThemedText style={styles.infoValue}>
                  {plan.preferredTimeOfDay === 'morning' ? '晨练' :
                    plan.preferredTimeOfDay === 'noon' ? '午间' : '晚间'}
                </ThemedText>
              </View>
            )}
          </View>
        </View>
      </Pressable>
    </Animated.View>
  );
}

export default function TrainingPlanListScreen() {
  const router = useRouter();
  const dispatch = useAppDispatch();
  const { plans, currentId, loading, error } = useAppSelector((s) => s.trainingPlan);

  useEffect(() => {
    dispatch(loadPlans());
  }, [dispatch]);

  useEffect(() => {
    if (error) {
      // 可以在这里显示错误提示，比如使用 Alert 或 Toast
      console.error('训练计划错误:', error);
      // 3秒后自动清除错误
      const timer = setTimeout(() => {
        dispatch(clearError());
      }, 3000);
      return () => clearTimeout(timer);
    }
  }, [error, dispatch]);

  return (
    <View style={styles.safeArea}>
      {/* 动态背景 */}
      <DynamicBackground />

      <SafeAreaView style={styles.contentWrapper}>
        <HeaderBar
          title="训练计划"
          onBack={() => router.back()}
          withSafeTop={false}
          tone='light'
          transparent={true}
          right={(
            <Pressable onPress={() => router.push('/training-plan/create' as any)} style={styles.createBtn}>
              <ThemedText style={styles.createBtnText}>+ 新建</ThemedText>
            </Pressable>
          )}
        />

        <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
          <Animated.View entering={FadeInUp.duration(600)} style={styles.headerSection}>
            <ThemedText style={styles.title}>我的训练计划</ThemedText>
            <ThemedText style={styles.subtitle}>点击激活计划，长按删除</ThemedText>
          </Animated.View>

          {error && (
            <Animated.View entering={FadeInUp.duration(400)} style={styles.errorContainer}>
              <ThemedText style={styles.errorText}>⚠️ {error}</ThemedText>
            </Animated.View>
          )}

          {loading && plans.length === 0 ? (
            <Animated.View entering={FadeInUp.delay(200).duration(600)} style={styles.loadingWrap}>
              <View style={styles.loadingIcon}>
                <ThemedText style={styles.loadingIconText}>⏳</ThemedText>
              </View>
              <ThemedText style={styles.loadingText}>加载中...</ThemedText>
            </Animated.View>
          ) : plans.length === 0 ? (
            <Animated.View entering={FadeInUp.delay(200).duration(600)} style={styles.emptyWrap}>
              <View style={styles.emptyIcon}>
                <ThemedText style={styles.emptyIconText}>📋</ThemedText>
              </View>
              <ThemedText style={styles.emptyText}>还没有训练计划</ThemedText>
              <ThemedText style={styles.emptySubtext}>创建你的第一个计划开始训练吧</ThemedText>
              <Pressable onPress={() => router.push('/training-plan/create' as any)} style={styles.primaryBtn}>
                <ThemedText style={styles.primaryBtnText}>创建计划</ThemedText>
              </Pressable>
            </Animated.View>
          ) : (
            <View style={styles.plansList}>
              {plans.map((p, index) => (
                <PlanCard
                  key={p.id}
                  plan={p}
                  index={index}
                  isActive={p.id === currentId}
                  onPress={() => {
                    dispatch(setCurrentPlan(p.id));
                  }}
                  onDelete={() => dispatch(deletePlan(p.id))}
                />
              ))}
              {loading && (
                <Animated.View entering={FadeInUp.duration(400)} style={styles.loadingIndicator}>
                  <ThemedText style={styles.loadingIndicatorText}>处理中...</ThemedText>
                </Animated.View>
              )}
            </View>
          )}

          <View style={{ height: 40 }} />
        </ScrollView>
      </SafeAreaView>
    </View>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  contentWrapper: {
    flex: 1,
  },
  content: {
    paddingHorizontal: 20,
    paddingTop: 8,
  },

  // 动态背景
  backgroundOrb: {
    position: 'absolute',
    width: 300,
    height: 300,
    borderRadius: 150,
    backgroundColor: 'rgba(187,242,70,0.15)',
    top: -150,
    right: -100,
  },
  backgroundOrb2: {
    position: 'absolute',
    width: 400,
    height: 400,
    borderRadius: 200,
    backgroundColor: 'rgba(164,138,237,0.12)',
    bottom: -200,
    left: -150,
  },

  // 页面标题区域
  headerSection: {
    marginBottom: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: '800',
    color: '#192126',
    marginBottom: 4,
  },
  subtitle: {
    fontSize: 14,
    color: '#5E6468',
    opacity: 0.8,
  },

  // 训练计划列表
  plansList: {
    gap: 12,
  },

  // 训练计划卡片
  planCard: {
    borderRadius: 16,
    overflow: 'hidden',
    shadowOffset: { width: 0, height: 6 },
    shadowRadius: 16,
    elevation: 12,
    borderWidth: 1.5,
    borderColor: 'rgba(187,242,70,0.3)',
    backgroundColor: '#FFFFFF',
    shadowColor: '#BBF246',
  },
  cardContent: {
    position: 'relative',
  },
  cardGradient: {
    ...StyleSheet.absoluteFillObject,
    borderRadius: 16,
  },
  cardGlow: {
    position: 'absolute',
    top: -2,
    left: -2,
    right: -2,
    bottom: -2,
    borderRadius: 18,
    backgroundColor: 'transparent',
  },
  colorIndicator: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    width: 4,
    borderTopLeftRadius: 16,
    borderBottomLeftRadius: 16,
  },
  cardMain: {
    padding: 20,
    paddingLeft: 24,
  },
  cardHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 16,
  },
  titleSection: {
    flex: 1,
  },
  planTitle: {
    fontSize: 18,
    fontWeight: '800',
    color: '#192126',
    marginBottom: 4,
  },
  planDescription: {
    fontSize: 13,
    color: '#5E6468',
    opacity: 0.8,
  },
  activeBadge: {
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 12,
    marginLeft: 12,
  },
  activeText: {
    fontSize: 11,
    fontWeight: '800',
    color: palette.ink,
  },
  cardInfo: {
    flexDirection: 'row',
    gap: 20,
  },
  infoItem: {
    flex: 1,
  },
  infoLabel: {
    fontSize: 11,
    color: '#888F92',
    marginBottom: 2,
    fontWeight: '600',
  },
  infoValue: {
    fontSize: 14,
    color: '#384046',
    fontWeight: '600',
  },

  // 按钮样式
  primaryBtn: {
    marginTop: 20,
    backgroundColor: palette.primary,
    paddingVertical: 14,
    paddingHorizontal: 28,
    borderRadius: 24,
    alignItems: 'center',
    shadowColor: palette.primary,
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 6,
  },
  primaryBtnText: {
    color: palette.ink,
    fontSize: 15,
    fontWeight: '800',
  },
  createBtn: {
    backgroundColor: palette.primary,
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 22,
    shadowColor: palette.primary,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
    elevation: 4,
    minWidth: 44,
    minHeight: 44,
    alignItems: 'center',
    justifyContent: 'center',
  },
  createBtnText: {
    color: palette.ink,
    fontWeight: '800',
    fontSize: 14,
  },

  // 空状态
  emptyWrap: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 60,
  },
  emptyIcon: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: 'rgba(187,242,70,0.1)',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 16,
  },
  emptyIconText: {
    fontSize: 32,
  },
  emptyText: {
    fontSize: 18,
    color: '#192126',
    fontWeight: '600',
    marginBottom: 4,
  },
  emptySubtext: {
    fontSize: 14,
    color: '#5E6468',
    textAlign: 'center',
    marginBottom: 20,
  },

  // 加载状态
  loadingWrap: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 60,
  },
  loadingIcon: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: 'rgba(187,242,70,0.1)',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 16,
  },
  loadingIconText: {
    fontSize: 32,
  },
  loadingText: {
    fontSize: 18,
    color: '#192126',
    fontWeight: '600',
    marginBottom: 4,
  },
  loadingIndicator: {
    alignItems: 'center',
    paddingVertical: 20,
  },
  loadingIndicatorText: {
    fontSize: 14,
    color: '#5E6468',
    fontWeight: '600',
  },

  // 错误状态
  errorContainer: {
    backgroundColor: 'rgba(237,71,71,0.1)',
    borderRadius: 12,
    padding: 16,
    marginBottom: 16,
    borderWidth: 1,
    borderColor: 'rgba(237,71,71,0.2)',
  },
  errorText: {
    fontSize: 14,
    color: '#ED4747',
    fontWeight: '600',
    textAlign: 'center',
  },
});