import { HeaderBar } from '@/components/ui/HeaderBar';
import { palette } from '@/constants/Colors';
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
import { loadExerciseLibrary } from '@/store/exerciseLibrarySlice';
import { EXERCISE_LIBRARY, getCategories } from '@/utils/exerciseLibrary';
import { Ionicons } from '@expo/vector-icons';
import * as Haptics from 'expo-haptics';
import { LinearGradient } from 'expo-linear-gradient';
import { useLocalSearchParams, useRouter } from 'expo-router';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Alert, Animated, FlatList, LayoutAnimation, Modal, Platform, SafeAreaView, StyleSheet, Text, TextInput, TouchableOpacity, UIManager, View } from 'react-native';

import { ThemedText } from '@/components/ThemedText';
import { addExercise } from '@/store/scheduleExerciseSlice';
import { addWorkoutExercise } from '@/store/workoutSlice';

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 SelectExerciseForScheduleScreen() {
  const router = useRouter();
  const dispatch = useAppDispatch();
  const params = useLocalSearchParams<{ planId?: string; sessionId?: string }>();
  const { plans } = useAppSelector((s) => s.trainingPlan);
  const { currentSession } = useAppSelector((s) => s.workout);

  const planId = params.planId;
  const sessionId = params.sessionId;
  const plan = useMemo(() => plans.find(p => p.id === planId), [plans, planId]);
  const session = useMemo(() => sessionId ? currentSession : null, [sessionId, currentSession]);
  
  // 根据是否有sessionId来确定是训练计划模式还是训练会话模式
  const isSessionMode = !!sessionId;
  const targetGoal = plan?.goal || session?.trainingPlan?.goal;
  const goalConfig = targetGoal ? (GOAL_TEXT[targetGoal] || { title: isSessionMode ? '添加动作' : '训练计划', color: palette.primary, description: isSessionMode ? '选择要添加的动作' : '开始你的训练之旅' }) : null;

  const [keyword, setKeyword] = useState('');
  const [category, setCategory] = useState<string>('全部');
  const [selectedKey, setSelectedKey] = useState<string | null>(null);
  const [sets, setSets] = useState(3);
  const [reps, setReps] = useState<number | undefined>(undefined);
  const [showCustomReps, setShowCustomReps] = useState(false);
  const [customRepsInput, setCustomRepsInput] = useState('');
  const [showCategoryPicker, setShowCategoryPicker] = useState(false);
  const [showRestModal, setShowRestModal] = useState(false);
  const [showNoteModal, setShowNoteModal] = useState(false);
  const [restDuration, setRestDuration] = useState(30);
  const [noteContent, setNoteContent] = useState('');
  const { categories: serverCategoryDtos, exercises: serverExercises } = useAppSelector((s) => s.exerciseLibrary);
  const [adding, setAdding] = useState(false);

  const controlsOpacity = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
      UIManager.setLayoutAnimationEnabledExperimental(true);
    }
  }, []);

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

  const categories = useMemo(() => {
    const base = serverCategoryDtos && serverCategoryDtos.length
      ? serverCategoryDtos.map((c) => c.name)
      : getCategories();
    const unique = Array.from(new Set(base));
    return ['全部', ...unique];
  }, [serverCategoryDtos]);

  const mainCategories = useMemo(() => {
    const preferred = ['全部', '核心与腹部', '脊柱与后链', '侧链与髋', '平衡与支撑'];
    const exists = (name: string) => categories.includes(name);
    const picked = preferred.filter(exists);
    const rest = categories.filter((c) => !picked.includes(c));
    while (picked.length < 5 && rest.length) picked.push(rest.shift() as string);
    return picked;
  }, [categories]);

  const library = useMemo(() => (serverExercises && serverExercises.length ? serverExercises : EXERCISE_LIBRARY), [serverExercises]);

  const filtered = useMemo(() => {
    const kw = keyword.trim().toLowerCase();
    const base = kw
      ? library.filter((e) => e.name.toLowerCase().includes(kw) || (e.description || '').toLowerCase().includes(kw))
      : library;
    if (category === '全部') return base;
    return base.filter((e) => e.category === category);
  }, [keyword, category, library]);

  const selected = useMemo(() => library.find((e) => e.key === selectedKey) || null, [selectedKey, library]);

  useEffect(() => {
    Animated.timing(controlsOpacity, {
      toValue: selected ? 1 : 0,
      duration: selected ? 220 : 160,
      useNativeDriver: true,
    }).start();
  }, [selected, controlsOpacity]);

  const handleAdd = async () => {
    if (!selected || adding) return;

    console.log('选择动作:', selected);

    const newExerciseDto = {
      exerciseKey: selected.key,
      name: selected.name,
      plannedSets: sets,
      plannedReps: reps,
      itemType: 'exercise' as const,
      note: `${selected.category}训练`,
    };

    setAdding(true);
    try {
      if (isSessionMode && sessionId) {
        // 训练会话模式：添加到训练会话
        await dispatch(addWorkoutExercise({ sessionId, dto: newExerciseDto })).unwrap();
      } else if (plan) {
        // 训练计划模式：添加到训练计划
        const planExerciseDto = {
          exerciseKey: selected.key,
          name: selected.name,
          sets: sets,
          reps: reps,
          itemType: 'exercise' as const,
          note: `${selected.category}训练`,
        };
        await dispatch(addExercise({ planId: plan.id, dto: planExerciseDto })).unwrap();
      } else {
        throw new Error('缺少必要的参数');
      }
      
      // 返回到上一页
      router.back();
    } catch (error) {
      console.error('添加动作失败:', error);
      Alert.alert('添加失败', '添加动作时出现错误，请稍后重试');
    } finally {
      setAdding(false);
    }
  };

  // 添加休息项目
  const handleAddRest = () => {
    setShowRestModal(true);
    Haptics.selectionAsync();
  };

  // 添加备注项目
  const handleAddNote = () => {
    setShowNoteModal(true);
    Haptics.selectionAsync();
  };

  // 确认添加休息
  const confirmAddRest = async () => {
    if (adding) return;

    const restDto = {
      name: `间隔休息 ${restDuration}s`,
      restSec: restDuration,
      itemType: 'rest' as const,
    };

    setAdding(true);
    try {
      if (isSessionMode && sessionId) {
        // 训练会话模式
        await dispatch(addWorkoutExercise({ sessionId, dto: restDto })).unwrap();
      } else if (plan) {
        // 训练计划模式
        await dispatch(addExercise({ planId: plan.id, dto: restDto })).unwrap();
      } else {
        throw new Error('缺少必要的参数');
      }
      
      setShowRestModal(false);
      setRestDuration(30);
      router.back();
    } catch (error) {
      console.error('添加休息失败:', error);
      Alert.alert('添加失败', '添加休息时出现错误，请稍后重试');
    } finally {
      setAdding(false);
    }
  };

  // 确认添加备注
  const confirmAddNote = async () => {
    if (adding || !noteContent.trim()) return;

    const noteDto = {
      name: '训练提示',
      note: noteContent.trim(),
      itemType: 'note' as const,
    };

    setAdding(true);
    try {
      if (isSessionMode && sessionId) {
        // 训练会话模式
        await dispatch(addWorkoutExercise({ sessionId, dto: noteDto })).unwrap();
      } else if (plan) {
        // 训练计划模式
        await dispatch(addExercise({ planId: plan.id, dto: noteDto })).unwrap();
      } else {
        throw new Error('缺少必要的参数');
      }
      
      setShowNoteModal(false);
      setNoteContent('');
      router.back();
    } catch (error) {
      console.error('添加备注失败:', error);
      Alert.alert('添加失败', '添加备注时出现错误，请稍后重试');
    } finally {
      setAdding(false);
    }
  };

  const onSelectItem = (key: string) => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    if (selectedKey === key) {
      setSelectedKey(null);
      return;
    }
    const sel = library.find((e) => e.key === key) as any;
    setSets(sel?.beginnerSets ?? 3);
    setReps(sel?.beginnerReps);
    setShowCustomReps(false);
    setCustomRepsInput('');
    setSelectedKey(key);
  };

  if (!goalConfig || (!plan && !isSessionMode)) {
    return (
      <SafeAreaView style={styles.safeArea}>
        <HeaderBar title="选择动作" onBack={() => router.back()} />
        <View style={styles.errorContainer}>
          <ThemedText style={styles.errorText}>
            {isSessionMode ? '找不到指定的训练会话' : '找不到指定的训练计划'}
          </ThemedText>
        </View>
      </SafeAreaView>
    );
  }

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

      <SafeAreaView style={styles.contentWrapper}>
        <HeaderBar
          title={isSessionMode ? "添加动作" : "选择动作"}
          onBack={() => router.back()}
          withSafeTop={false}
          transparent={true}
          tone="light"
        />

        <View style={styles.content}>
          {/* 计划信息头部 */}
          <View style={[styles.planHeader, { backgroundColor: `${goalConfig.color}20` }]}>
            <View style={[styles.planColorIndicator, { backgroundColor: goalConfig.color }]} />
            <View style={styles.planInfo}>
              <ThemedText style={styles.planTitle}>{goalConfig.title}</ThemedText>
              <ThemedText style={styles.planDescription}>
                {isSessionMode ? '为当前训练会话添加动作' : '选择动作或添加休息、备注项目'}
              </ThemedText>
            </View>
          </View>

          {/* 快捷添加区域 */}
          <View style={styles.quickAddSection}>
            <TouchableOpacity
              style={[styles.quickAddBtn, { backgroundColor: `${goalConfig.color}15`, borderColor: goalConfig.color }]}
              onPress={handleAddRest}
            >
              <Ionicons name="time-outline" size={20} color={goalConfig.color} />
              <Text style={[styles.quickAddText, { color: goalConfig.color }]}>添加休息</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={[styles.quickAddBtn, { backgroundColor: `${goalConfig.color}15`, borderColor: goalConfig.color }]}
              onPress={handleAddNote}
            >
              <Ionicons name="document-text-outline" size={20} color={goalConfig.color} />
              <Text style={[styles.quickAddText, { color: goalConfig.color }]}>添加备注</Text>
            </TouchableOpacity>
          </View>

          {/* 大分类宫格 */}
          <View style={styles.catGrid}>
            {[...mainCategories, '更多'].map((item) => {
              const active = category === item;
              const meta: Record<string, { bg: string }> = {
                全部: { bg: `${goalConfig.color}22` },
                核心与腹部: { bg: `${goalConfig.color}18` },
                脊柱与后链: { bg: 'rgba(149,204,227,0.20)' },
                侧链与髋: { bg: 'rgba(164,138,237,0.20)' },
                平衡与支撑: { bg: 'rgba(252,196,111,0.22)' },
                进阶控制: { bg: 'rgba(237,71,71,0.18)' },
                柔韧与拉伸: { bg: 'rgba(149,204,227,0.18)' },
                更多: { bg: 'rgba(24,24,27,0.06)' },
              };
              const scale = new Animated.Value(1);
              const onPressIn = () => Animated.spring(scale, { toValue: 0.96, useNativeDriver: true, speed: 20, bounciness: 6 }).start();
              const onPressOut = () => Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 20, bounciness: 6 }).start();
              const handlePress = () => {
                onPressOut();
                if (item === '更多') {
                  setShowCategoryPicker(true);
                  Haptics.selectionAsync();
                } else {
                  setCategory(item);
                  Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
                }
              };
              return (
                <Animated.View key={item} style={[styles.catTileWrapper, { transform: [{ scale }] }]}>
                  <TouchableOpacity
                    activeOpacity={0.9}
                    onPressIn={onPressIn}
                    onPressOut={handlePress}
                    style={[
                      styles.catTile,
                      { backgroundColor: meta[item]?.bg ?? 'rgba(24,24,27,0.06)' },
                      active && { borderWidth: 2, borderColor: goalConfig.color }
                    ]}
                  >
                    <Text style={[
                      styles.catText,
                      { color: active ? goalConfig.color : '#384046' },
                      active && { fontWeight: '800' }
                    ]}>
                      {item}
                    </Text>
                  </TouchableOpacity>
                </Animated.View>
              );
            })}
          </View>

          {/* 分类选择弹层 */}
          <Modal
            visible={showCategoryPicker}
            animationType="fade"
            transparent
            onRequestClose={() => setShowCategoryPicker(false)}
          >
            <TouchableOpacity activeOpacity={1} style={styles.modalOverlay} onPress={() => setShowCategoryPicker(false)}>
              <TouchableOpacity activeOpacity={1} style={styles.modalSheet}
                onPress={(e) => e.stopPropagation() as any}
              >
                <Text style={styles.modalTitle}>选择分类</Text>
                <View style={styles.catGridModal}>
                  {categories.filter((c) => c !== '全部').map((c) => {
                    const scale = new Animated.Value(1);
                    const onPressIn = () => Animated.spring(scale, { toValue: 0.96, useNativeDriver: true, speed: 20, bounciness: 6 }).start();
                    const onPressOut = () => Animated.spring(scale, { toValue: 1, useNativeDriver: true, speed: 20, bounciness: 6 }).start();
                    return (
                      <Animated.View key={c} style={[styles.catTileWrapper, { transform: [{ scale }] }]}>
                        <TouchableOpacity
                          onPressIn={onPressIn}
                          onPressOut={() => {
                            onPressOut();
                            setCategory(c);
                            setShowCategoryPicker(false);
                            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
                          }}
                          activeOpacity={0.9}
                          style={[styles.catTile, { backgroundColor: 'rgba(24,24,27,0.06)' }]}
                        >
                          <Text style={styles.catText}>{c}</Text>
                        </TouchableOpacity>
                      </Animated.View>
                    );
                  })}
                </View>
              </TouchableOpacity>
            </TouchableOpacity>
          </Modal>

          {/* 搜索框 */}
          <View style={styles.searchRow}>
            <TextInput
              value={keyword}
              onChangeText={setKeyword}
              placeholder="搜索动作名称/要点"
              placeholderTextColor="#888F92"
              style={[styles.searchInput, { borderColor: `${goalConfig.color}30` }]}
            />
          </View>

          {/* 动作列表 */}
          <FlatList
            data={filtered}
            keyExtractor={(item) => item.key}
            contentContainerStyle={styles.listContent}
            showsVerticalScrollIndicator={false}
            renderItem={({ item }) => {
              const isSelected = item.key === selectedKey;
              return (
                <TouchableOpacity
                  style={[
                    styles.itemCard,
                    isSelected && { borderWidth: 2, borderColor: goalConfig.color },
                  ]}
                  onPress={() => onSelectItem(item.key)}
                  activeOpacity={0.9}
                >
                  <View style={{ flex: 1 }}>
                    <Text style={styles.itemTitle}>{item.name}</Text>
                    <Text style={styles.itemMeta}>{item.category}</Text>
                    {((item as any).targetMuscleGroups || (item as any).equipmentName) && (
                      <Text style={styles.itemMeta}>
                        {[(item as any).targetMuscleGroups, (item as any).equipmentName].filter(Boolean).join(' · ')}
                      </Text>
                    )}
                    {(((item as any).beginnerSets || (item as any).beginnerReps)) && (
                      <Text style={styles.itemMeta}>
                        建议 {(item as any).beginnerSets ?? '-'} 组 × {(item as any).beginnerReps ?? '-'} 次
                      </Text>
                    )}
                    <Text style={styles.itemDesc}>{item.description}</Text>
                  </View>
                  {isSelected && <Ionicons name="chevron-down" size={20} color={goalConfig.color} />}
                  {isSelected && (
                    <Animated.View style={[styles.expandedBox, { opacity: controlsOpacity }]}>
                      <View style={styles.controlsRow}>
                        <View style={styles.counterBox}>
                          <Text style={styles.counterLabel}>组数</Text>
                          <View style={styles.counterRow}>
                            <TouchableOpacity
                              style={styles.counterBtn}
                              onPress={() => setSets(Math.max(1, sets - 1))}
                            >
                              <Text style={styles.counterBtnText}>-</Text>
                            </TouchableOpacity>
                            <Text style={styles.counterValue}>{sets}</Text>
                            <TouchableOpacity
                              style={styles.counterBtn}
                              onPress={() => setSets(Math.min(20, sets + 1))}
                            >
                              <Text style={styles.counterBtnText}>+</Text>
                            </TouchableOpacity>
                          </View>
                        </View>

                        <View style={styles.counterBox}>
                          <Text style={styles.counterLabel}>每组次数</Text>
                          <View style={styles.repsChipsRow}>
                            {[6, 8, 10, 12, 15, 20, 25, 30].map((v) => {
                              const active = reps === v;
                              return (
                                <TouchableOpacity
                                  key={v}
                                  style={[
                                    styles.repChip,
                                    active && { backgroundColor: goalConfig.color, borderColor: goalConfig.color }
                                  ]}
                                  onPress={() => {
                                    setReps(v);
                                    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
                                  }}
                                >
                                  <Text style={[styles.repChipText, active && { color: '#FFFFFF' }]}>{v}</Text>
                                </TouchableOpacity>
                              );
                            })}
                            <TouchableOpacity
                              style={styles.repChipGhost}
                              onPress={() => {
                                setShowCustomReps((s) => !s);
                                Haptics.selectionAsync();
                              }}
                            >
                              <Text style={styles.repChipGhostText}>自定义</Text>
                            </TouchableOpacity>
                          </View>
                          {showCustomReps && (
                            <View style={styles.customRepsRow}>
                              <TextInput
                                keyboardType="number-pad"
                                value={customRepsInput}
                                onChangeText={setCustomRepsInput}
                                placeholder="输入次数 (1-100)"
                                placeholderTextColor="#888F92"
                                style={styles.customRepsInput}
                              />
                              <TouchableOpacity
                                style={[styles.customRepsBtn, { backgroundColor: goalConfig.color }]}
                                onPress={() => {
                                  const n = Math.max(1, Math.min(100, parseInt(customRepsInput || '0', 10)));
                                  if (!Number.isNaN(n)) {
                                    setReps(n);
                                    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
                                  }
                                }}
                              >
                                <Text style={styles.customRepsBtnText}>确定</Text>
                              </TouchableOpacity>
                            </View>
                          )}
                        </View>
                      </View>

                      <TouchableOpacity
                        style={[
                          styles.addBtn,
                          { backgroundColor: goalConfig.color },
                          ((!reps || reps <= 0) || adding) && { opacity: 0.5 }
                        ]}
                        disabled={!reps || reps <= 0 || adding}
                        onPress={handleAdd}
                      >
                        <Text style={styles.addBtnText}>
                          {adding ? '添加中...' : (isSessionMode ? '添加到训练会话' : '添加到训练计划')}
                        </Text>
                      </TouchableOpacity>
                    </Animated.View>
                  )}
                </TouchableOpacity>
              );
            }}
          />
        </View>
      </SafeAreaView>

      {/* 休息时间配置模态框 */}
      <Modal visible={showRestModal} transparent animationType="fade" onRequestClose={() => setShowRestModal(false)}>
        <TouchableOpacity activeOpacity={1} style={styles.modalOverlay} onPress={() => setShowRestModal(false)}>
          <TouchableOpacity activeOpacity={1} style={styles.modalSheet} onPress={(e) => e.stopPropagation() as any}>
            <Text style={styles.modalTitle}>设置休息时间</Text>

            <View style={styles.restTimeRow}>
              {[15, 30, 45, 60, 90, 120].map((v) => {
                const active = restDuration === v;
                return (
                  <TouchableOpacity
                    key={v}
                    style={[
                      styles.restChip,
                      active && { backgroundColor: goalConfig.color, borderColor: goalConfig.color }
                    ]}
                    onPress={() => {
                      setRestDuration(v);
                      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
                    }}
                  >
                    <Text style={[styles.restChipText, active && { color: '#FFFFFF' }]}>{v}s</Text>
                  </TouchableOpacity>
                );
              })}
            </View>

            <View style={styles.customRestSection}>
              <Text style={styles.sectionLabel}>自定义时间</Text>
              <View style={styles.customRestRow}>
                <TextInput
                  value={restDuration.toString()}
                  onChangeText={(text) => {
                    const num = parseInt(text) || 30;
                    setRestDuration(Math.max(10, Math.min(300, num)));
                  }}
                  keyboardType="number-pad"
                  style={styles.customRestInput}
                />
                <Text style={styles.customRestUnit}>秒</Text>
              </View>
            </View>

            <TouchableOpacity
              style={[styles.confirmBtn, { backgroundColor: goalConfig.color }]}
              onPress={confirmAddRest}
              disabled={adding}
            >
              <Text style={styles.confirmBtnText}>{adding ? '添加中...' : '确认添加'}</Text>
            </TouchableOpacity>
          </TouchableOpacity>
        </TouchableOpacity>
      </Modal>

      {/* 备注配置模态框 */}
      <Modal visible={showNoteModal} transparent animationType="fade" onRequestClose={() => setShowNoteModal(false)}>
        <TouchableOpacity activeOpacity={1} style={styles.modalOverlay} onPress={() => setShowNoteModal(false)}>
          <TouchableOpacity activeOpacity={1} style={styles.modalSheet} onPress={(e) => e.stopPropagation() as any}>
            <Text style={styles.modalTitle}>添加训练提示</Text>

            <TextInput
              value={noteContent}
              onChangeText={setNoteContent}
              placeholder="输入训练提醒或注意事项..."
              placeholderTextColor="#888F92"
              style={styles.noteModalInput}
              multiline
              maxLength={100}
              autoFocus
            />

            <View style={styles.noteModalInfo}>
              <Text style={styles.noteCounter}>{noteContent.length}/100</Text>
              {noteContent.length > 0 && (
                <TouchableOpacity
                  onPress={() => setNoteContent('')}
                  style={styles.noteClearBtn}
                >
                  <Ionicons name="close-circle" size={20} color="#888F92" />
                </TouchableOpacity>
              )}
            </View>

            <TouchableOpacity
              style={[
                styles.confirmBtn,
                { backgroundColor: goalConfig.color },
                (!noteContent.trim() || adding) && { opacity: 0.5 }
              ]}
              onPress={confirmAddNote}
              disabled={!noteContent.trim() || adding}
            >
              <Text style={styles.confirmBtnText}>{adding ? '添加中...' : '确认添加'}</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,
  },

  // 快捷添加区域
  quickAddSection: {
    flexDirection: 'row',
    gap: 12,
    marginBottom: 16,
  },
  quickAddBtn: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 12,
    borderWidth: 1,
    gap: 8,
  },
  quickAddText: {
    fontSize: 14,
    fontWeight: '700',
  },

  // 分类网格
  catGrid: {
    paddingTop: 10,
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginBottom: 16,
  },
  catTileWrapper: {
    width: '33.33%',
    padding: 6,
  },
  catTile: {
    borderRadius: 14,
    paddingVertical: 16,
    paddingHorizontal: 8,
    alignItems: 'center',
    justifyContent: 'center',
  },
  catText: {
    fontSize: 13,
    fontWeight: '700',
    color: '#384046',
  },

  // 搜索框
  searchRow: {
    marginBottom: 16,
  },
  searchInput: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    paddingHorizontal: 12,
    paddingVertical: 10,
    color: '#384046',
    borderWidth: 1,
    shadowColor: '#000',
    shadowOpacity: 0.06,
    shadowRadius: 8,
    shadowOffset: { width: 0, height: 2 },
    elevation: 2,
  },

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

  // 动作卡片
  itemCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: 16,
    padding: 16,
    marginBottom: 12,
    shadowColor: '#000',
    shadowOpacity: 0.06,
    shadowRadius: 12,
    shadowOffset: { width: 0, height: 6 },
    elevation: 3,
  },
  itemTitle: {
    fontSize: 16,
    fontWeight: '800',
    color: '#192126',
    marginBottom: 4,
  },
  itemMeta: {
    fontSize: 12,
    color: '#888F92',
    marginBottom: 4,
  },
  itemDesc: {
    fontSize: 12,
    color: '#5E6468',
    lineHeight: 16,
  },

  // 展开的控制区域
  expandedBox: {
    marginTop: 12,
  },
  controlsRow: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: 12,
    flexWrap: 'wrap',
    marginBottom: 16,
  },
  counterBox: {
    backgroundColor: '#F8F9FA',
    borderRadius: 8,
    padding: 12,
    minWidth: 120,
  },
  counterLabel: {
    fontSize: 10,
    color: '#888F92',
    marginBottom: 8,
    fontWeight: '600',
  },
  counterRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  counterBtn: {
    backgroundColor: '#E5E7EB',
    width: 28,
    height: 28,
    borderRadius: 6,
    alignItems: 'center',
    justifyContent: 'center',
  },
  counterBtnText: {
    fontWeight: '800',
    color: '#384046',
  },
  counterValue: {
    minWidth: 40,
    textAlign: 'center',
    fontWeight: '700',
    color: '#384046',
  },
  repsChipsRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
    marginTop: 6,
  },
  repChip: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 999,
    backgroundColor: '#F3F4F6',
    borderWidth: 1,
    borderColor: '#E5E7EB',
  },
  repChipText: {
    color: '#384046',
    fontWeight: '700',
    fontSize: 12,
  },
  repChipGhost: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 999,
    borderWidth: 1,
    backgroundColor: 'transparent',
    borderColor: '#E5E7EB',
  },
  repChipGhostText: {
    fontWeight: '700',
    color: '#384046',
    fontSize: 12,
  },
  customRepsRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    marginTop: 8,
  },
  customRepsInput: {
    flex: 1,
    height: 40,
    borderWidth: 1,
    borderColor: '#E5E7EB',
    borderRadius: 10,
    paddingHorizontal: 12,
    color: '#384046',
  },
  customRepsBtn: {
    paddingHorizontal: 12,
    paddingVertical: 10,
    borderRadius: 10,
  },
  customRepsBtnText: {
    fontWeight: '800',
    color: '#FFFFFF',
    fontSize: 12,
  },

  // 休息时间配置
  restTimeRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
    marginBottom: 16,
  },
  restChip: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: '#E5E7EB',
    backgroundColor: '#FFFFFF',
  },
  restChipText: {
    fontSize: 12,
    fontWeight: '700',
    color: '#384046',
  },

  // 模态框自定义休息时间
  customRestSection: {
    marginBottom: 20,
  },
  sectionLabel: {
    fontSize: 14,
    fontWeight: '700',
    color: '#384046',
    marginBottom: 10,
  },
  customRestRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
  },
  customRestInput: {
    flex: 1,
    height: 40,
    borderWidth: 1,
    borderColor: '#E5E7EB',
    borderRadius: 10,
    paddingHorizontal: 12,
    color: '#384046',
    fontSize: 16,
    textAlign: 'center',
  },
  customRestUnit: {
    fontSize: 14,
    color: '#384046',
    fontWeight: '600',
  },

  // 备注模态框
  noteModalInput: {
    minHeight: 100,
    maxHeight: 150,
    borderWidth: 1,
    borderColor: '#E5E7EB',
    borderRadius: 12,
    paddingHorizontal: 12,
    paddingVertical: 10,
    color: '#384046',
    fontSize: 14,
    textAlignVertical: 'top',
    backgroundColor: '#FFFFFF',
    marginBottom: 10,
  },
  noteModalInfo: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
  },
  noteCounter: {
    fontSize: 11,
    color: '#888F92',
  },
  noteClearBtn: {
    padding: 4,
  },

  // 确认按钮
  confirmBtn: {
    paddingVertical: 12,
    borderRadius: 12,
    alignItems: 'center',
    marginTop: 10,
  },
  confirmBtnText: {
    color: '#FFFFFF',
    fontWeight: '800',
    fontSize: 14,
  },

  addBtn: {
    marginTop: 20,
    paddingVertical: 12,
    borderRadius: 12,
    alignItems: 'center',
  },
  addBtnText: {
    color: '#FFFFFF',
    fontWeight: '800',
    fontSize: 14,
  },

  // 错误状态
  errorContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  errorText: {
    fontSize: 16,
    color: '#ED4747',
    fontWeight: '600',
  },

  // 弹窗样式
  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: 16,
    fontWeight: '800',
    marginBottom: 16,
    color: '#192126',
  },
  catGridModal: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
});