import { Ionicons } from '@expo/vector-icons';
import * as Haptics from 'expo-haptics';
import { LinearGradient } from 'expo-linear-gradient';
import { useRouter } from 'expo-router';
import React, { useEffect, useMemo, useState } from 'react';
import { Alert, FlatList, Modal, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import Animated, { FadeInUp } from 'react-native-reanimated';

import { useGlobalDialog } from '@/components/ui/DialogProvider';
import { HeaderBar } from '@/components/ui/HeaderBar';
import { palette } from '@/constants/Colors';
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
import type { WorkoutExercise } from '@/services/workoutsApi';
import {
  clearWorkoutError,
  completeWorkoutExercise,
  createWorkoutSession,
  deleteWorkoutSession,
  loadWorkoutSessions,
  skipWorkoutExercise,
  startWorkoutExercise,
  startWorkoutSession
} from '@/store/workoutSlice';
import dayjs from 'dayjs';

// ==================== 工具函数 ====================

// 计算两个时间之间的耗时（秒）
const calculateDuration = (startTime: string, endTime: string): number => {
  const start = dayjs(startTime);
  const end = dayjs(endTime);
  return Math.floor((end.valueOf() - start.valueOf()) / 1000);
};

// 格式化耗时显示（分钟:秒）
const formatDuration = (seconds: number): string => {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  return `${minutes}分${remainingSeconds.toString().padStart(2, '0')}秒`;
};

// 获取动作的耗时信息
const getExerciseDuration = (exercise: WorkoutExercise): { duration: number; formatted: string } | null => {
  if (exercise.status === 'completed' && exercise.startedAt && exercise.completedAt) {
    const duration = calculateDuration(exercise.startedAt, exercise.completedAt);
    return {
      duration,
      formatted: formatDuration(duration)
    };
  }
  return null;
};

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({ color }: { color: string }) {
  return (
    <View style={StyleSheet.absoluteFillObject}>
      <LinearGradient
        colors={['#F9FBF2', '#FFFFFF', '#F5F9F0']}
        style={StyleSheet.absoluteFillObject}
      />
      <View style={[styles.backgroundOrb, { backgroundColor: `${color}15` }]} />
      <View style={[styles.backgroundOrb2, { backgroundColor: `${color}10` }]} />
    </View>
  );
}

export default function TodayWorkoutScreen() {
  const router = useRouter();
  const dispatch = useAppDispatch();
  const { currentSession, exercises, sessions, sessionsPagination, loading, exerciseLoading, error } = useAppSelector((s) => s.workout);
  const { showConfirm, showActionSheet } = useGlobalDialog();

  const [refreshing, setRefreshing] = useState(false);
  const [loadingMore, setLoadingMore] = useState(false);

  // 本地状态
  const [completionModal, setCompletionModal] = useState<{
    visible: boolean;
    exercise: WorkoutExercise | null;
    sets: number;
    reps: number;
  }>({
    visible: false,
    exercise: null,
    sets: 0,
    reps: 0,
  });



  const goalConfig = currentSession?.trainingPlan
    ? (GOAL_TEXT[currentSession.trainingPlan.goal] || { title: '今日训练', color: palette.primary, description: '开始你的训练之旅' })
    : { title: '今日训练', color: palette.primary, description: '开始你的训练之旅' };

  // 加载训练会话列表
  useEffect(() => {
    dispatch(loadWorkoutSessions({ page: 1, limit: 10 }));
  }, [dispatch]);

  // 刷新数据
  const handleRefresh = async () => {
    setRefreshing(true);
    try {
      await dispatch(loadWorkoutSessions({ page: 1, limit: 10 })).unwrap();
    } catch (error) {
      console.error('刷新失败:', error);
    } finally {
      setRefreshing(false);
    }
  };

  // 加载更多数据
  const handleLoadMore = async () => {
    if (loadingMore || loading || !sessionsPagination) return;

    const currentPage = sessionsPagination.page;
    const totalPages = sessionsPagination.totalPages;

    if (currentPage >= totalPages) return; // 已经是最后一页

    setLoadingMore(true);
    try {
      await dispatch(loadWorkoutSessions({
        page: currentPage + 1,
        limit: 10,
        append: true // 追加数据而不是替换
      })).unwrap();
    } catch (error) {
      console.error('加载更多失败:', error);
    } finally {
      setLoadingMore(false);
    }
  };

  // 错误处理
  useEffect(() => {
    if (error) {
      Alert.alert('错误', error, [
        { text: '确定', onPress: () => dispatch(clearWorkoutError()) }
      ]);
    }
  }, [error, dispatch]);

  // 训练状态统计
  const workoutStats = useMemo(() => {
    const exerciseItems = exercises.filter(ex => ex.itemType === 'exercise');
    return {
      total: exerciseItems.length,
      completed: exerciseItems.filter(ex => ex.status === 'completed').length,
      inProgress: exerciseItems.filter(ex => ex.status === 'in_progress').length,
      pending: exerciseItems.filter(ex => ex.status === 'pending').length,
      skipped: exerciseItems.filter(ex => ex.status === 'skipped').length,
    };
  }, [exercises]);

  const completionPercentage = workoutStats.total > 0
    ? Math.round((workoutStats.completed / workoutStats.total) * 100)
    : 0;

  // 开始训练会话
  const handleStartWorkout = () => {
    if (!currentSession) return;

    showConfirm(
      {
        title: '开始训练',
        message: '准备好开始今日的训练了吗？',
        icon: 'fitness-outline',
      },
      () => {
        dispatch(startWorkoutSession({ sessionId: currentSession.id }));
        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
      }
    );
  };

  // 开始动作
  const handleStartExercise = (exercise: WorkoutExercise) => {
    if (!currentSession || exercise.status !== 'pending') return;

    dispatch(startWorkoutExercise({
      sessionId: currentSession.id,
      exerciseId: exercise.id
    }));
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
  };

  // 显示完成动作模态框
  const handleShowCompleteModal = (exercise: WorkoutExercise) => {
    setCompletionModal({
      visible: true,
      exercise,
      sets: exercise.completedSets || exercise.plannedSets || 0,
      reps: exercise.completedReps || exercise.plannedReps || 0,
    });
  };

  // 完成动作
  const handleCompleteExercise = () => {
    const { exercise, sets, reps } = completionModal;
    if (!currentSession || !exercise) return;

    dispatch(completeWorkoutExercise({
      sessionId: currentSession.id,
      exerciseId: exercise.id,
      dto: {
        completedSets: sets,
        completedReps: reps,
      }
    }));

    setCompletionModal({ visible: false, exercise: null, sets: 0, reps: 0 });
    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
  };

  // 跳过动作
  const handleSkipExercise = (exercise: WorkoutExercise) => {
    if (!currentSession) return;

    showConfirm(
      {
        title: '跳过动作',
        message: `确定要跳过"${exercise.name}"吗？`,
        icon: 'play-skip-forward-outline',
        destructive: true,
      },
      () => {
        dispatch(skipWorkoutExercise({
          sessionId: currentSession.id,
          exerciseId: exercise.id
        }));
        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
      }
    );
  };

  // 创建新的训练会话
  const handleCreateSession = () => {
    showActionSheet(
      {
        title: '新建训练',
        subtitle: '选择创建方式开始你的训练',
      },
      [
        {
          id: 'custom',
          title: '自定义训练',
          subtitle: '创建一个空的训练，可以自由添加动作',
          icon: 'create-outline',
          iconColor: '#3B82F6',
          onPress: () => {
            // 创建空的自定义会话
            const sessionName = `训练 ${dayjs().format('YYYY年MM月DD日')}`;
            dispatch(createWorkoutSession({
              name: sessionName,
              scheduledDate: dayjs().format('YYYY-MM-DD')
            }));
          }
        },
        {
          id: 'from-plan',
          title: '从训练计划导入',
          subtitle: '基于现有训练计划创建训练',
          icon: 'library-outline',
          iconColor: '#10B981',
          onPress: () => {
            // 跳转到创建页面选择训练计划
            router.push('/workout/create-session');
          }
        }
      ]
    );
  };

  // 删除训练会话
  const handleDeleteSession = () => {
    if (!currentSession) return;

    showConfirm(
      {
        title: '删除训练会话',
        message: '确定要删除这个训练会话吗？删除后无法恢复。',
        icon: 'trash-outline',
        destructive: true,
      },
      () => {
        dispatch(deleteWorkoutSession(currentSession.id));
        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
        // 删除成功后清空当前会话
        // 不需要返回上一页，因为现在显示的是会话列表
      }
    );
  };

  // 获取动作状态文本和颜色
  const getExerciseStatusConfig = (exercise: WorkoutExercise) => {
    switch (exercise.status) {
      case 'completed':
        return { text: '已完成', color: '#22C55E', backgroundColor: '#22C55E15' };
      case 'in_progress':
        return { text: '进行中', color: '#F59E0B', backgroundColor: '#F59E0B15' };
      case 'skipped':
        return { text: '已跳过', color: '#6B7280', backgroundColor: '#6B728015' };
      default:
        return { text: '待开始', color: '#6B7280', backgroundColor: '#6B728015' };
    }
  };

  // 渲染动作卡片
  const renderExerciseItem = ({ item, index }: { item: WorkoutExercise; index: number }) => {
    const statusConfig = getExerciseStatusConfig(item);
    const isLoading = exerciseLoading === item.id;

    if (item.itemType === 'rest') {
      return (
        <Animated.View
          entering={FadeInUp.delay(index * 50)}
          style={[styles.restCard, { borderLeftColor: goalConfig.color }]}
        >
          <View style={styles.restIconContainer}>
            <Ionicons name="time-outline" size={24} color={goalConfig.color} />
          </View>
          <View style={styles.restContent}>
            <Text style={styles.restTitle}>{item.name}</Text>
            <Text style={styles.restDuration}>{item.restSec}秒</Text>
          </View>
        </Animated.View>
      );
    }

    if (item.itemType === 'note') {
      return (
        <Animated.View
          entering={FadeInUp.delay(index * 50)}
          style={[styles.noteCard, { borderLeftColor: goalConfig.color }]}
        >
          <View style={styles.noteIconContainer}>
            <Ionicons name="document-text-outline" size={24} color={goalConfig.color} />
          </View>
          <View style={styles.noteContent}>
            <Text style={styles.noteTitle}>{item.name}</Text>
            {item.note && <Text style={styles.noteText}>{item.note}</Text>}
          </View>
        </Animated.View>
      );
    }

    return (
      <Animated.View
        entering={FadeInUp.delay(index * 50)}
        style={[
          styles.exerciseCard,
          item.status === 'completed' && { backgroundColor: '#F0FDF4' },
          item.status === 'in_progress' && { backgroundColor: '#FFFBEB' },
        ]}
      >
        <View style={styles.exerciseHeader}>
          <View style={styles.exerciseInfo}>
            <Text style={styles.exerciseName}>{item.name}</Text>
            {item.exercise && (
              <Text style={styles.exerciseCategory}>{item.exercise.categoryName}</Text>
            )}
          </View>
          <View style={[styles.statusBadge, { backgroundColor: statusConfig.backgroundColor }]}>
            <Text style={[styles.statusText, { color: statusConfig.color }]}>
              {statusConfig.text}
            </Text>
          </View>
        </View>

        <View style={styles.exerciseDetails}>
          {item.plannedSets && (
            <Text style={styles.exerciseParams}>
              {item.plannedSets} 组 × {item.plannedReps || '-'} 次
            </Text>
          )}
          {item.plannedDurationSec && (
            <Text style={styles.exerciseParams}>
              持续 {item.plannedDurationSec} 秒
            </Text>
          )}
        </View>

        {item.status === 'completed' && (
          <View style={styles.completedInfo}>
            <View style={styles.completedRow}>
              <Text style={styles.completedText}>
                实际完成: {item.completedSets || '-'} 组 × {item.completedReps || '-'} 次
              </Text>
              {(() => {
                const durationInfo = getExerciseDuration(item);
                return durationInfo ? (
                  <View style={[styles.durationBadge, { backgroundColor: `${goalConfig.color}15` }]}>
                    <Ionicons name="time-outline" size={12} color={goalConfig.color} />
                    <Text style={[styles.durationText, { color: goalConfig.color }]}>
                      {durationInfo.formatted}
                    </Text>
                  </View>
                ) : null;
              })()}
            </View>
          </View>
        )}

        <View style={styles.exerciseActions}>
          {item.status === 'pending' && currentSession?.status === 'in_progress' && (
            <TouchableOpacity
              style={[styles.actionBtn, styles.startBtn, { backgroundColor: goalConfig.color }]}
              onPress={() => handleStartExercise(item)}
              disabled={isLoading}
            >
              <Text style={styles.startBtnText}>
                {isLoading ? '开始中...' : '开始'}
              </Text>
            </TouchableOpacity>
          )}

          {item.status === 'in_progress' && (
            <>
              <TouchableOpacity
                style={[styles.actionBtn, styles.completeBtn, { backgroundColor: goalConfig.color }]}
                onPress={() => handleShowCompleteModal(item)}
                disabled={isLoading}
              >
                <Text style={styles.completeBtnText}>
                  {isLoading ? '完成中...' : '完成'}
                </Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.actionBtn, styles.skipBtn]}
                onPress={() => handleSkipExercise(item)}
                disabled={isLoading}
              >
                <Text style={styles.skipBtnText}>跳过</Text>
              </TouchableOpacity>
            </>
          )}

          {item.status === 'pending' && (
            <TouchableOpacity
              style={[styles.actionBtn, styles.skipBtn]}
              onPress={() => handleSkipExercise(item)}
              disabled={isLoading}
            >
              <Text style={styles.skipBtnText}>跳过</Text>
            </TouchableOpacity>
          )}
        </View>
      </Animated.View>
    );
  };

  // 渲染训练会话卡片
  const renderSessionItem = ({ item, index }: { item: any; index: number }) => {
    const goalConfig = item.trainingPlan?.goal
      ? (GOAL_TEXT[item.trainingPlan.goal] || { title: '训练会话', color: palette.primary, description: '开始你的训练之旅' })
      : { title: '训练会话', color: palette.primary, description: '开始你的训练之旅' };

    const exerciseCount = item.exercises?.length || 0;
    const completedCount = item.exercises?.filter((ex: any) => ex.status === 'completed').length || 0;

    return (
      <Animated.View
        entering={FadeInUp.delay(index * 100)}
        style={[styles.sessionCard, { borderLeftColor: goalConfig.color }]}
      >
        <TouchableOpacity
          style={styles.sessionCardContent}
          onPress={() => {
            router.push(`/workout/session/${item.id}`);
          }}
          activeOpacity={0.9}
        >
          <View style={styles.sessionHeader}>
            <View style={styles.sessionInfo}>
              <Text style={styles.sessionName}>{item.name}</Text>
              {item.trainingPlan && (
                <Text style={styles.sessionPlan}>{item.trainingPlan.name}</Text>
              )}
              <Text style={styles.sessionDate}>
                创建时间 {dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}
              </Text>
              <Text style={styles.sessionDate}>
                计划时间 {dayjs(item.scheduledDate ).format('YYYY-MM-DD HH:mm:ss')}
              </Text>
            </View>

            <View style={styles.sessionStats}>
              {item.status === 'completed' ? (
                <View style={[styles.statusBadge, { backgroundColor: '#22C55E15' }]}>
                  <Text style={[styles.statusText, { color: '#22C55E' }]}>已完成</Text>
                </View>
              ) : item.status === 'in_progress' ? (
                <View style={[styles.statusBadge, { backgroundColor: '#F59E0B15' }]}>
                  <Text style={[styles.statusText, { color: '#F59E0B' }]}>进行中</Text>
                </View>
              ) : (
                <View style={[styles.statusBadge, { backgroundColor: '#6B728015' }]}>
                  <Text style={[styles.statusText, { color: '#6B7280' }]}>待开始</Text>
                </View>
              )}
            </View>
          </View>

          {exerciseCount > 0 && (
            <View style={styles.sessionProgress}>
              <Text style={styles.progressText}>
                {completedCount}/{exerciseCount} 个动作已完成
              </Text>
              <View style={styles.progressBar}>
                <View
                  style={[
                    styles.progressFill,
                    {
                      width: `${exerciseCount > 0 ? (completedCount / exerciseCount) * 100 : 0}%`,
                      backgroundColor: goalConfig.color
                    }
                  ]}
                />
              </View>
            </View>
          )}
        </TouchableOpacity>
      </Animated.View>
    );
  };

  if (loading && sessions.length === 0) {
    return (
      <SafeAreaView style={styles.safeArea}>
        <HeaderBar title="训练记录" onBack={() => router.back()} />
        <View style={styles.loadingContainer}>
          <Text style={styles.loadingText}>加载中...</Text>
        </View>
      </SafeAreaView>
    );
  }

  if (sessions.length === 0 && !loading) {
    return (
      <View style={styles.safeArea}>
        <HeaderBar title="训练记录" onBack={() => router.back()} />
        <View style={styles.emptyContainer}>
          <Ionicons name="fitness-outline" size={64} color="#9CA3AF" />
          <Text style={styles.emptyTitle}>暂无训练记录</Text>
          <Text style={styles.emptyText}>开始你的第一次训练吧</Text>
          <TouchableOpacity
            style={styles.createSessionBtn}
            onPress={handleCreateSession}
          >
            <Text style={styles.createSessionBtnText}>新建训练会话</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

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

      <SafeAreaView style={styles.contentWrapper}>
        <HeaderBar
          title="训练记录"
          onBack={() => router.back()}
          withSafeTop={false}
          transparent={true}
          tone="light"
          right={
            <TouchableOpacity
              style={[styles.addSessionBtn, { backgroundColor: palette.primary }]}
              onPress={handleCreateSession}
              disabled={loading}
            >
              <Ionicons name="add" size={20} color={palette.ink} />
            </TouchableOpacity>
          }
        />

        <View style={styles.content}>
          {/* 会话列表 */}
          <FlatList
            data={sessions}
            keyExtractor={(item) => item.id}
            renderItem={renderSessionItem}
            contentContainerStyle={styles.listContent}
            showsVerticalScrollIndicator={false}
            refreshing={refreshing}
            onRefresh={handleRefresh}
            onEndReached={handleLoadMore}
            onEndReachedThreshold={0.1}
            ListFooterComponent={
              loadingMore ? (
                <View style={styles.loadMoreContainer}>
                  <Text style={styles.loadMoreText}>加载更多...</Text>
                </View>
              ) : sessionsPagination && sessionsPagination.page >= sessionsPagination.totalPages ? (
                <View style={styles.loadMoreContainer}>
                  <Text style={styles.loadMoreText}>已加载全部数据</Text>
                </View>
              ) : null
            }
          />
        </View>
      </SafeAreaView>

      {/* 完成动作模态框 */}
      <Modal
        visible={completionModal.visible}
        transparent
        animationType="fade"
        onRequestClose={() => setCompletionModal({ visible: false, exercise: null, sets: 0, reps: 0 })}
      >
        <TouchableOpacity
          activeOpacity={1}
          style={styles.modalOverlay}
          onPress={() => setCompletionModal({ visible: false, exercise: null, sets: 0, reps: 0 })}
        >
          <TouchableOpacity
            activeOpacity={1}
            style={styles.modalSheet}
            onPress={(e) => e.stopPropagation()}
          >
            <Text style={styles.modalTitle}>完成动作</Text>
            <Text style={styles.modalSubtitle}>{completionModal.exercise?.name}</Text>

            <View style={styles.inputRow}>
              <View style={styles.inputBox}>
                <Text style={styles.inputLabel}>完成组数</Text>
                <View style={styles.counterRow}>
                  <TouchableOpacity
                    style={styles.counterBtn}
                    onPress={() => setCompletionModal(prev => ({
                      ...prev,
                      sets: Math.max(0, prev.sets - 1)
                    }))}
                  >
                    <Text style={styles.counterBtnText}>-</Text>
                  </TouchableOpacity>
                  <Text style={styles.counterValue}>{completionModal.sets}</Text>
                  <TouchableOpacity
                    style={styles.counterBtn}
                    onPress={() => setCompletionModal(prev => ({
                      ...prev,
                      sets: Math.min(20, prev.sets + 1)
                    }))}
                  >
                    <Text style={styles.counterBtnText}>+</Text>
                  </TouchableOpacity>
                </View>
              </View>

              <View style={styles.inputBox}>
                <Text style={styles.inputLabel}>每组次数</Text>
                <View style={styles.counterRow}>
                  <TouchableOpacity
                    style={styles.counterBtn}
                    onPress={() => setCompletionModal(prev => ({
                      ...prev,
                      reps: Math.max(0, prev.reps - 1)
                    }))}
                  >
                    <Text style={styles.counterBtnText}>-</Text>
                  </TouchableOpacity>
                  <Text style={styles.counterValue}>{completionModal.reps}</Text>
                  <TouchableOpacity
                    style={styles.counterBtn}
                    onPress={() => setCompletionModal(prev => ({
                      ...prev,
                      reps: Math.min(50, prev.reps + 1)
                    }))}
                  >
                    <Text style={styles.counterBtnText}>+</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>

            <TouchableOpacity
              style={[styles.confirmBtn, { backgroundColor: goalConfig.color }]}
              onPress={handleCompleteExercise}
            >
              <Text style={styles.confirmBtnText}>确认完成</Text>
            </TouchableOpacity>
          </TouchableOpacity>
        </TouchableOpacity>
      </Modal>

    </View>
  );
}

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

  // 动态背景
  backgroundOrb: {
    position: 'absolute',
    width: 300,
    height: 300,
    borderRadius: 150,
    top: -150,
    right: -100,
  },
  backgroundOrb2: {
    position: 'absolute',
    width: 400,
    height: 400,
    borderRadius: 200,
    bottom: -200,
    left: -150,
  },

  // 计划信息头部
  planHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderRadius: 16,
    marginBottom: 16,
  },
  planColorIndicator: {
    width: 4,
    height: 40,
    borderRadius: 2,
    marginRight: 12,
  },
  planInfo: {
    flex: 1,
  },
  planTitle: {
    fontSize: 18,
    fontWeight: '800',
    color: '#192126',
    marginBottom: 4,
  },
  planDescription: {
    fontSize: 13,
    color: '#5E6468',
    opacity: 0.8,
    marginBottom: 4,
  },
  planProgressStats: {
    fontSize: 12,
    color: '#6B7280',
    marginTop: 4,
  },

  // 圆环进度容器
  circularProgressContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 32,
    position: 'relative',
  },
  circularProgressText: {
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center',
    width: 60,
    height: 60,
  },
  circularProgressPercentage: {
    fontSize: 14,
    fontWeight: '800',
    textAlign: 'center',
  },

  // 删除按钮
  deleteBtn: {
    position: 'absolute',
    top: 8,
    right: 8,
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    zIndex: 10,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 4,
    shadowOffset: { width: 0, height: 2 },
    elevation: 2,
  },

  // 开始训练按钮
  planStartBtn: {
    width: 44,
    height: 44,
    borderRadius: 22,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 32,
  },

  // 完成提示
  completedBanner: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F0FDF4',
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 12,
    marginBottom: 16,
    gap: 8,
  },
  completedBannerText: {
    color: '#22C55E',
    fontSize: 16,
    fontWeight: '700',
  },

  // 列表
  listContent: {
    paddingBottom: 40,
  },

  // 动作卡片
  exerciseCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: 16,
    padding: 16,
    marginBottom: 12,
    shadowColor: '#000',
    shadowOpacity: 0.06,
    shadowRadius: 12,
    shadowOffset: { width: 0, height: 6 },
    elevation: 3,
  },
  exerciseHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 8,
  },
  exerciseInfo: {
    flex: 1,
  },
  exerciseName: {
    fontSize: 16,
    fontWeight: '800',
    color: '#192126',
    marginBottom: 4,
  },
  exerciseCategory: {
    fontSize: 12,
    color: '#888F92',
  },
  statusBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 8,
  },
  statusText: {
    fontSize: 12,
    fontWeight: '600',
  },
  exerciseDetails: {
    marginBottom: 12,
  },
  exerciseParams: {
    fontSize: 14,
    color: '#5E6468',
    marginBottom: 2,
  },
  completedInfo: {
    backgroundColor: '#F0FDF4',
    borderRadius: 8,
  },
  completedRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  completedText: {
    fontSize: 12,
    color: '#22C55E',
    fontWeight: '600',
    flex: 1,
  },
  durationBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 6,
    paddingVertical: 3,
    borderRadius: 6,
    gap: 3,
  },
  durationText: {
    fontSize: 11,
    fontWeight: '600',
  },
  exerciseActions: {
    flexDirection: 'row',
    gap: 8,
  },
  actionBtn: {
    flex: 1,
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: 8,
    alignItems: 'center',
  },
  startBtn: {
    backgroundColor: '#22C55E',
  },
  startBtnText: {
    color: '#FFFFFF',
    fontSize: 14,
    fontWeight: '700',
  },
  completeBtn: {
    backgroundColor: '#22C55E',
  },
  completeBtnText: {
    color: '#FFFFFF',
    fontSize: 14,
    fontWeight: '700',
  },
  skipBtn: {
    backgroundColor: '#F3F4F6',
    borderWidth: 1,
    borderColor: '#E5E7EB',
  },
  skipBtnText: {
    color: '#6B7280',
    fontSize: 14,
    fontWeight: '600',
  },

  // 休息卡片
  restCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: 16,
    padding: 16,
    marginBottom: 12,
    borderLeftWidth: 4,
    flexDirection: 'row',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOpacity: 0.06,
    shadowRadius: 8,
    shadowOffset: { width: 0, height: 4 },
    elevation: 2,
  },
  restIconContainer: {
    marginRight: 12,
  },
  restContent: {
    flex: 1,
  },
  restTitle: {
    fontSize: 16,
    fontWeight: '700',
    color: '#192126',
    marginBottom: 4,
  },
  restDuration: {
    fontSize: 14,
    color: '#5E6468',
  },

  // 备注卡片
  noteCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: 16,
    padding: 16,
    marginBottom: 12,
    borderLeftWidth: 4,
    flexDirection: 'row',
    alignItems: 'flex-start',
    shadowColor: '#000',
    shadowOpacity: 0.06,
    shadowRadius: 8,
    shadowOffset: { width: 0, height: 4 },
    elevation: 2,
  },
  noteIconContainer: {
    marginRight: 12,
    marginTop: 2,
  },
  noteContent: {
    flex: 1,
  },
  noteTitle: {
    fontSize: 16,
    fontWeight: '700',
    color: '#192126',
    marginBottom: 4,
  },
  noteText: {
    fontSize: 14,
    color: '#5E6468',
    lineHeight: 20,
  },

  // 空状态
  emptyContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-start',
    paddingTop: 40,
    padding: 20,
  },
  emptyTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: '#192126',
    marginTop: 16,
    marginBottom: 8,
  },
  emptyText: {
    fontSize: 14,
    color: '#6B7280',
    textAlign: 'center',
    marginBottom: 24,
  },
  createSessionBtn: {
    backgroundColor: '#22C55E',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
  },
  createSessionBtnText: {
    color: '#FFFFFF',
    fontSize: 14,
    fontWeight: '700',
  },

  // 加载状态
  loadingContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  loadingText: {
    fontSize: 16,
    color: '#6B7280',
  },

  // 模态框
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.35)',
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  modalSheet: {
    width: '100%',
    backgroundColor: '#FFFFFF',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    paddingHorizontal: 16,
    paddingTop: 14,
    paddingBottom: 24,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: '800',
    marginBottom: 8,
    color: '#192126',
    textAlign: 'center',
  },
  modalSubtitle: {
    fontSize: 14,
    color: '#6B7280',
    textAlign: 'center',
    marginBottom: 24,
  },
  inputRow: {
    flexDirection: 'row',
    gap: 16,
    marginBottom: 24,
  },
  inputBox: {
    flex: 1,
  },
  inputLabel: {
    fontSize: 14,
    fontWeight: '600',
    color: '#192126',
    marginBottom: 12,
  },
  counterRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#F3F4F6',
    borderRadius: 8,
    padding: 4,
  },
  counterBtn: {
    backgroundColor: '#FFFFFF',
    width: 32,
    height: 32,
    borderRadius: 6,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOpacity: 0.05,
    shadowRadius: 2,
    shadowOffset: { width: 0, height: 1 },
    elevation: 1,
  },
  counterBtnText: {
    fontWeight: '800',
    color: '#192126',
    fontSize: 16,
  },
  counterValue: {
    fontWeight: '700',
    color: '#192126',
    fontSize: 16,
    minWidth: 40,
    textAlign: 'center',
  },
  confirmBtn: {
    paddingVertical: 16,
    borderRadius: 12,
    alignItems: 'center',
  },
  confirmBtnText: {
    color: '#FFFFFF',
    fontWeight: '800',
    fontSize: 16,
  },

  // 添加会话按钮
  addSessionBtn: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 4,
    shadowOffset: { width: 0, height: 2 },
    elevation: 2,
  },

  // 会话卡片
  sessionCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: 16,
    marginBottom: 12,
    borderLeftWidth: 4,
    shadowColor: '#000',
    shadowOpacity: 0.06,
    shadowRadius: 12,
    shadowOffset: { width: 0, height: 6 },
    elevation: 3,
  },
  sessionCardContent: {
    padding: 16,
  },
  sessionHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    marginBottom: 12,
  },
  sessionInfo: {
    flex: 1,
  },
  sessionName: {
    fontSize: 16,
    fontWeight: '800',
    color: '#192126',
    marginBottom: 4,
  },
  sessionPlan: {
    fontSize: 12,
    color: '#888F92',
    marginBottom: 2,
  },
  sessionDate: {
    fontSize: 11,
    color: '#6B7280',
  },
  sessionStats: {
    alignItems: 'flex-end',
  },
  sessionProgress: {
    marginTop: 8,
  },
  progressText: {
    fontSize: 12,
    color: '#6B7280',
    marginTop: 6
  },
  progressBar: {
    height: 4,
    backgroundColor: '#F3F4F6',
    borderRadius: 2,
    overflow: 'hidden',
  },
  progressFill: {
    height: '100%',
    borderRadius: 2,
  },

  // 加载更多
  loadMoreContainer: {
    paddingVertical: 16,
    alignItems: 'center',
  },
  loadMoreText: {
    fontSize: 12,
    color: '#6B7280',
  },
});