import { BasalMetabolismCard } from '@/components/BasalMetabolismCard';
import { DateSelector } from '@/components/DateSelector';
import { FitnessRingsCard } from '@/components/FitnessRingsCard';
import { MoodCard } from '@/components/MoodCard';
import { NutritionRadarCard } from '@/components/NutritionRadarCard';
import HeartRateCard from '@/components/statistic/HeartRateCard';
import OxygenSaturationCard from '@/components/statistic/OxygenSaturationCard';
import StepsCard from '@/components/StepsCard';
import { StressMeter } from '@/components/StressMeter';
import WaterIntakeCard from '@/components/WaterIntakeCard';
import { WeightHistoryCard } from '@/components/weight/WeightHistoryCard';
import { Colors } from '@/constants/Colors';
import { getTabBarBottomPadding } from '@/constants/TabBar';
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
import { useAuthGuard } from '@/hooks/useAuthGuard';
import { useBackgroundTasks } from '@/hooks/useBackgroundTasks';
import { notificationService } from '@/services/notifications';
import { selectHealthDataByDate, setHealthData } from '@/store/healthSlice';
import { fetchDailyMoodCheckins, selectLatestMoodRecordByDate } from '@/store/moodSlice';
import { fetchDailyNutritionData, selectNutritionSummaryByDate } from '@/store/nutritionSlice';
import { fetchTodayWaterStats, selectTodayStats } from '@/store/waterSlice';
import { getMonthDaysZh, getTodayIndexInMonth } from '@/utils/date';
import { ensureHealthPermissions, fetchHealthDataForDate, fetchRecentHRV } from '@/utils/health';
import { getTestHealthData } from '@/utils/mockHealthData';
import { WaterNotificationHelpers } from '@/utils/notificationHelpers';
import { calculateNutritionGoals } from '@/utils/nutrition';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
import { useFocusEffect } from '@react-navigation/native';
import dayjs from 'dayjs';
import { LinearGradient } from 'expo-linear-gradient';
import { debounce } from 'lodash';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import {
  AppState,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

// 浮动动画组件
const FloatingCard = ({ children, delay = 0, style }: {
  children: React.ReactNode;
  delay?: number;
  style?: any;
}) => {


  return (
    <View
      style={[
        style,
        {
          marginBottom: 8,
        },
      ]}
    >
      {children}
    </View>
  );
};

export default function ExploreScreen() {
  const stepGoal = useAppSelector((s) => s.user.profile?.dailyStepsGoal) ?? 2000;
  const userProfile = useAppSelector((s) => s.user.profile);

  // 开发调试：设置为true来使用mock数据
  const useMockData = __DEV__; // 改为true来启用mock数据调试

  const { pushIfAuthedElseLogin, isLoggedIn } = useAuthGuard();

  // 使用 dayjs：当月日期与默认选中"今天"
  const [selectedIndex, setSelectedIndex] = useState(getTodayIndexInMonth());
  const tabBarHeight = useBottomTabBarHeight();
  const insets = useSafeAreaInsets();
  const bottomPadding = useMemo(() => {
    return getTabBarBottomPadding(tabBarHeight) + (insets?.bottom ?? 0);
  }, [tabBarHeight, insets?.bottom]);

  // 获取当前选中日期 - 使用 useMemo 缓存避免重复计算
  const currentSelectedDate = useMemo(() => {
    const days = getMonthDaysZh();
    return days[selectedIndex]?.date?.toDate() ?? new Date();
  }, [selectedIndex]);

  const currentSelectedDateString = useMemo(() => {
    return dayjs(currentSelectedDate).format('YYYY-MM-DD');
  }, [currentSelectedDate]);

  // 从 Redux 获取指定日期的健康数据
  const healthData = useAppSelector(selectHealthDataByDate(currentSelectedDateString));

  // 获取今日喝水统计数据
  const todayWaterStats = useAppSelector(selectTodayStats);

  // 解构健康数据（支持mock数据）
  const mockData = useMockData ? getTestHealthData('mock') : null;
  const stepCount: number | null = useMockData ? (mockData?.steps ?? null) : (healthData?.steps ?? null);
  const hourlySteps = useMockData ? (mockData?.hourlySteps ?? []) : (healthData?.hourlySteps ?? []);
  const activeCalories = useMockData ? (mockData?.activeEnergyBurned ?? null) : (healthData?.activeEnergyBurned ?? null);
  const basalMetabolism: number | null = useMockData ? (mockData?.basalEnergyBurned ?? null) : (healthData?.basalEnergyBurned ?? null);
  const sleepDuration = useMockData ? (mockData?.sleepDuration ?? null) : (healthData?.sleepDuration ?? null);
  const hrvValue = useMockData ? (mockData?.hrv ?? 0) : (healthData?.hrv ?? 0);
  const oxygenSaturation = useMockData ? (mockData?.oxygenSaturation ?? null) : (healthData?.oxygenSaturation ?? null);
  const heartRate = useMockData ? (mockData?.heartRate ?? null) : (healthData?.heartRate ?? null);
  const fitnessRingsData = useMockData ? {
    activeCalories: mockData?.activeCalories ?? 0,
    activeCaloriesGoal: mockData?.activeCaloriesGoal ?? 350,
    exerciseMinutes: mockData?.exerciseMinutes ?? 0,
    exerciseMinutesGoal: mockData?.exerciseMinutesGoal ?? 30,
    standHours: mockData?.standHours ?? 0,
    standHoursGoal: mockData?.standHoursGoal ?? 12,
  } : (healthData ? {
    activeCalories: healthData.activeEnergyBurned,
    activeCaloriesGoal: healthData.activeCaloriesGoal,
    exerciseMinutes: healthData.exerciseMinutes,
    exerciseMinutesGoal: healthData.exerciseMinutesGoal,
    standHours: healthData.standHours,
    standHoursGoal: healthData.standHoursGoal,
  } : {
    activeCalories: 0,
    activeCaloriesGoal: 350,
    exerciseMinutes: 0,
    exerciseMinutesGoal: 30,
    standHours: 0,
    standHoursGoal: 12,
  });

  // HRV更新时间
  const [hrvUpdateTime, setHrvUpdateTime] = useState<Date>(new Date());

  // 用于触发动画重置的 token（当日期或数据变化时更新）
  const [animToken, setAnimToken] = useState(0);

  // 从 Redux 获取营养数据
  const nutritionSummary = useAppSelector(selectNutritionSummaryByDate(currentSelectedDateString));

  // 计算用户的营养目标
  const nutritionGoals = useMemo(() => {
    return calculateNutritionGoals({
      weight: userProfile.weight,
      height: userProfile.height,
      birthDate: userProfile?.birthDate ? new Date(userProfile?.birthDate) : undefined,
      gender: userProfile?.gender || undefined,
    });
  }, [userProfile]);

  const { registerTask } = useBackgroundTasks();
  // 心情相关状态
  const dispatch = useAppDispatch();
  const [isMoodLoading, setIsMoodLoading] = useState(false);

  // 记录最近一次请求的"日期键"，避免旧请求覆盖新结果
  const latestRequestKeyRef = useRef<string | null>(null);

  // 请求状态管理，防止重复请求
  const loadingRef = useRef({
    health: false,
    nutrition: false,
    mood: false
  });

  // 数据缓存时间戳，避免短时间内重复拉取
  const dataTimestampRef = useRef<{ [key: string]: number }>({});

  const getDateKey = (d: Date) => `${dayjs(d).year()}-${dayjs(d).month() + 1}-${dayjs(d).date()}`;

  // 检查数据是否需要刷新（2分钟内不重复拉取，对营养数据更严格）
  const shouldRefreshData = (dateKey: string, dataType: string) => {
    const cacheKey = `${dateKey}-${dataType}`;
    const lastUpdate = dataTimestampRef.current[cacheKey];
    const now = Date.now();

    // 营养数据使用更短的缓存时间，其他数据使用5分钟
    const cacheTime = dataType === 'nutrition' ? 2 * 60 * 1000 : 5 * 60 * 1000;

    return !lastUpdate || (now - lastUpdate) > cacheTime;
  };

  // 更新数据时间戳
  const updateDataTimestamp = (dateKey: string, dataType: string) => {
    const cacheKey = `${dateKey}-${dataType}`;
    dataTimestampRef.current[cacheKey] = Date.now();
  };


  // 从 Redux 获取当前日期的心情记录
  const currentMoodCheckin = useAppSelector(selectLatestMoodRecordByDate(
    currentSelectedDateString
  ));

  // 加载心情数据
  const loadMoodData = async (targetDate?: Date, forceRefresh = false) => {
    if (!isLoggedIn) return;

    // 确定要查询的日期
    let derivedDate: Date;
    if (targetDate) {
      derivedDate = targetDate;
    } else {
      derivedDate = currentSelectedDate;
    }

    const requestKey = getDateKey(derivedDate);

    // 检查是否正在加载或不需要刷新
    if (loadingRef.current.mood) {
      console.log('心情数据正在加载中，跳过重复请求');
      return;
    }

    if (!forceRefresh && !shouldRefreshData(requestKey, 'mood')) {
      console.log('心情数据缓存未过期，跳过请求');
      return;
    }

    try {
      loadingRef.current.mood = true;
      setIsMoodLoading(true);

      const dateString = dayjs(derivedDate).format('YYYY-MM-DD');
      await dispatch(fetchDailyMoodCheckins(dateString));

      // 更新缓存时间戳
      updateDataTimestamp(requestKey, 'mood');

    } catch (error) {
      console.error('加载心情数据失败:', error);
    } finally {
      loadingRef.current.mood = false;
      setIsMoodLoading(false);
    }
  };



  const loadHealthData = async (targetDate?: Date, forceRefresh = false) => {
    // 确定要查询的日期
    let derivedDate: Date;
    if (targetDate) {
      derivedDate = targetDate;
    } else {
      derivedDate = currentSelectedDate;
    }

    const requestKey = getDateKey(derivedDate);

    // 检查是否正在加载或不需要刷新
    if (loadingRef.current.health) {
      console.log('健康数据正在加载中，跳过重复请求');
      return;
    }

    if (!forceRefresh && !shouldRefreshData(requestKey, 'health')) {
      console.log('健康数据缓存未过期，跳过请求');
      return;
    }

    try {
      loadingRef.current.health = true;
      console.log('=== 开始HealthKit初始化流程 ===');

      const ok = await ensureHealthPermissions();
      if (!ok) {
        const errorMsg = '无法获取健康权限，请确保在真实iOS设备上运行并授权应用访问健康数据';
        console.warn(errorMsg);
        return;
      }

      latestRequestKeyRef.current = requestKey;

      console.log('权限获取成功，开始获取健康数据...', derivedDate);
      const data = await fetchHealthDataForDate(derivedDate);

      console.log('设置UI状态:', data);
      // 仅当该请求仍是最新时，才应用结果
      if (latestRequestKeyRef.current === requestKey) {
        const dateString = dayjs(derivedDate).format('YYYY-MM-DD');

        // 使用 Redux 存储健康数据
        dispatch(setHealthData({
          date: dateString,
          data: data
        }));

        // 更新HRV数据时间
        setHrvUpdateTime(new Date());
        setAnimToken((t) => t + 1);

        // 更新缓存时间戳
        updateDataTimestamp(requestKey, 'health');
      } else {
        console.log('忽略过期健康数据请求结果，key=', requestKey, '最新key=', latestRequestKeyRef.current);
      }
      console.log('=== HealthKit数据获取完成 ===');

    } catch (error) {
      console.error('HealthKit流程出现异常:', error);
    } finally {
      loadingRef.current.health = false;
    }
  };

  // 加载营养数据
  const loadNutritionData = async (targetDate?: Date, forceRefresh = false) => {
    if (!isLoggedIn) return;

    // 确定要查询的日期
    let derivedDate: Date;
    if (targetDate) {
      derivedDate = targetDate;
    } else {
      derivedDate = currentSelectedDate;
    }

    const requestKey = getDateKey(derivedDate);

    // 检查是否正在加载或不需要刷新
    if (loadingRef.current.nutrition) {
      console.log('营养数据正在加载中，跳过重复请求');
      return;
    }

    if (!forceRefresh && !shouldRefreshData(requestKey, 'nutrition')) {
      console.log('营养数据缓存未过期，跳过请求');
      return;
    }

    try {
      loadingRef.current.nutrition = true;
      console.log('加载营养数据...', derivedDate);
      await dispatch(fetchDailyNutritionData(derivedDate));
      console.log('营养数据加载完成');

      // 更新缓存时间戳
      updateDataTimestamp(requestKey, 'nutrition');

    } catch (error) {
      console.error('营养数据加载失败:', error);
    } finally {
      loadingRef.current.nutrition = false;
    }
  };

  // 实际执行数据加载的方法
  const executeLoadAllData = React.useCallback((targetDate?: Date, forceRefresh = false) => {
    const dateToUse = targetDate || currentSelectedDate;
    if (dateToUse) {
      console.log('执行数据加载，日期:', dateToUse, '强制刷新:', forceRefresh);
      loadHealthData(dateToUse, forceRefresh);
      if (isLoggedIn) {
        loadNutritionData(dateToUse, forceRefresh);
        loadMoodData(dateToUse, forceRefresh);
        // 加载喝水数据（只加载今日数据用于后台检查）
        const isToday = dayjs(dateToUse).isSame(dayjs(), 'day');
        if (isToday) {
          dispatch(fetchTodayWaterStats());
        }
      }
    }
  }, [isLoggedIn, dispatch]);

  // 使用 lodash debounce 防抖的加载所有数据方法
  const debouncedLoadAllData = React.useMemo(
    () => debounce(executeLoadAllData, 300), // 300ms 防抖延迟
    [executeLoadAllData]
  );

  // 对外暴露的 loadAllData 方法
  const loadAllData = React.useCallback((targetDate?: Date, forceRefresh = false) => {
    if (forceRefresh) {
      // 如果是强制刷新，立即执行，不使用防抖
      executeLoadAllData(targetDate, forceRefresh);
    } else {
      // 普通调用使用防抖
      debouncedLoadAllData(targetDate, forceRefresh);
    }
  }, [executeLoadAllData, debouncedLoadAllData]);

  // 页面聚焦时的数据加载逻辑
  useFocusEffect(
    React.useCallback(() => {
      // 页面聚焦时加载数据，使用缓存机制避免频繁请求
      console.log('页面聚焦，检查是否需要刷新数据...');
      loadAllData(currentSelectedDate);
    }, [loadAllData, currentSelectedDate])
  );

  // AppState 监听：应用从后台返回前台时的处理
  useEffect(() => {
    let appStateChangeTimeout: number;

    const handleAppStateChange = (nextAppState: string) => {
      if (nextAppState === 'active') {
        // 延迟执行，避免与 useFocusEffect 重复触发
        appStateChangeTimeout = setTimeout(() => {
          console.log('应用从后台返回前台，强制刷新统计数据...');
          // 从后台返回时强制刷新数据
          loadAllData(currentSelectedDate, true);
        }, 500);
      }
    };

    const subscription = AppState.addEventListener('change', handleAppStateChange);

    return () => {
      subscription?.remove();
      if (appStateChangeTimeout) {
        clearTimeout(appStateChangeTimeout);
      }
    };
  }, [loadAllData, currentSelectedDate]);

  useEffect(() => {
    // 注册后台任务 - 只处理健康数据和压力检查
    registerTask({
      id: 'health-data-task',
      name: 'health-data-task',
      handler: async () => {
        try {
          console.log('后台任务：更新健康数据和检查压力水平...');
          // 后台任务只更新健康数据，强制刷新以获取最新数据
          await loadHealthData(undefined, true);

          // 执行压力检查
          await checkStressLevelAndNotify();

          // 执行喝水目标检查
          await checkWaterGoalAndNotify();
        } catch (error) {
          console.error('健康数据任务执行失败:', error);
        }
      },
    });
  }, []);

  // 检查压力水平并发送通知
  const checkStressLevelAndNotify = React.useCallback(async () => {
    try {
      console.log('开始检查压力水平...');

      // 确保有健康权限
      const hasPermission = await ensureHealthPermissions();
      if (!hasPermission) {
        console.log('没有健康权限，跳过压力检查');
        return;
      }

      // 获取最近2小时内的实时HRV数据
      const recentHRV = await fetchRecentHRV(2);
      console.log('获取到的最近2小时HRV值:', recentHRV);

      if (recentHRV === null || recentHRV === undefined) {
        console.log('没有最近的HRV数据，跳过压力检查');
        return;
      }

      // 判断压力水平（HRV值低于60表示压力过大）
      if (recentHRV < 60) {
        console.log(`检测到压力过大，HRV值: ${recentHRV}，准备发送鼓励通知`);

        // 检查是否在过去2小时内已经发送过压力提醒，避免重复打扰
        const lastNotificationKey = '@last_stress_notification';
        const lastNotificationTime = await AsyncStorage.getItem(lastNotificationKey);
        const now = new Date().getTime();
        const twoHoursAgo = now - (2 * 60 * 60 * 1000); // 2小时前

        if (lastNotificationTime && parseInt(lastNotificationTime) > twoHoursAgo) {
          console.log('2小时内已发送过压力提醒，跳过本次通知');
          return;
        }

        // 随机选择一条鼓励性消息
        const encouragingMessages = [
          '放松一下吧 🌸\n检测到您的压力指数较高，不妨暂停一下，做几个深呼吸，或者来一段轻松的普拉提练习。您的健康最重要！',
          '该休息一下了 🧘‍♀️\n您的身体在提醒您需要放松。试试冥想、散步或听听舒缓的音乐，让心情平静下来。',
          '压力山大？我们来帮您 💆‍♀️\n高压力对健康不利，建议您做一些放松运动，比如瑜伽或普拉提，释放身心压力。',
          '关爱自己，从现在开始 💝\n检测到您可能承受较大压力，记得给自己一些时间，做喜欢的事情，保持身心健康。',
          '深呼吸，一切都会好的 🌈\n压力只是暂时的，试试腹式呼吸或简单的伸展运动，让身体和心灵都得到放松。'
        ];

        const randomMessage = encouragingMessages[Math.floor(Math.random() * encouragingMessages.length)];
        const [title, body] = randomMessage.split('\n');

        // 发送鼓励性推送通知
        await notificationService.sendImmediateNotification({
          title: title,
          body: body,
          data: {
            type: 'stress_alert',
            hrvValue: recentHRV,
            timestamp: new Date().toISOString(),
            url: '/mood/calendar' // 点击通知跳转到心情页面
          },
          sound: true,
          priority: 'high'
        });

        // 记录通知发送时间
        await AsyncStorage.setItem(lastNotificationKey, now.toString());

        console.log('压力提醒通知已发送');
      } else {
        console.log(`压力水平正常，HRV值: ${recentHRV}`);
      }
    } catch (error) {
      console.error('检查压力水平失败:', error);
    }
  }, []);

  // 检查喝水目标并发送通知
  const checkWaterGoalAndNotify = React.useCallback(async () => {
    try {
      console.log('开始检查喝水目标完成情况...');

      // 获取最新的喝水统计数据
      if (!todayWaterStats || !todayWaterStats.dailyGoal || todayWaterStats.dailyGoal <= 0) {
        console.log('没有设置喝水目标或目标无效，跳过喝水检查');
        return;
      }

      // 获取用户名
      const userName = userProfile?.name || '朋友';
      const currentHour = new Date().getHours();

      // 构造今日统计数据
      const waterStatsForCheck = {
        totalAmount: todayWaterStats.totalAmount || 0,
        dailyGoal: todayWaterStats.dailyGoal,
        completionRate: todayWaterStats.completionRate || 0
      };

      // 调用喝水通知检查函数
      const notificationSent = await WaterNotificationHelpers.checkWaterGoalAndNotify(
        userName,
        waterStatsForCheck,
        currentHour
      );

      if (notificationSent) {
        console.log('喝水提醒通知已发送');
      } else {
        console.log('无需发送喝水提醒通知');
      }

    } catch (error) {
      console.error('检查喝水目标失败:', error);
    }
  }, [todayWaterStats, userProfile]);

  // 日期点击时，加载对应日期数据
  const onSelectDate = React.useCallback((index: number, date: Date) => {
    setSelectedIndex(index);
    console.log('日期切换，加载数据...', date);
    // 日期切换时不强制刷新，依赖缓存机制减少不必要的请求
    // loadAllData 内部已经实现了防抖，无需额外防抖处理
    loadAllData(date, false);
  }, [loadAllData]);


  return (
    <View style={styles.container}>
      {/* 背景渐变 */}
      <LinearGradient
        colors={['#F0F9FF', '#E0F2FE']}
        style={styles.gradientBackground}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
      />

      {/* 装饰性圆圈 */}
      <View style={styles.decorativeCircle1} />
      <View style={styles.decorativeCircle2} />

      <SafeAreaView style={styles.safeArea}>
        <ScrollView
          style={styles.scrollView}
          contentContainerStyle={{ paddingBottom: bottomPadding }}
          showsVerticalScrollIndicator={false}
        >
          <WeightHistoryCard />

          {/* 日期选择器 */}
          <DateSelector
            selectedIndex={selectedIndex}
            onDateSelect={onSelectDate}
            showMonthTitle={true}
            disableFutureDates={true}
          />

          {/* 营养摄入雷达图卡片 */}
          <NutritionRadarCard
            nutritionSummary={nutritionSummary}
            nutritionGoals={nutritionGoals}
            burnedCalories={(basalMetabolism || 0) + (activeCalories || 0)}
            basalMetabolism={basalMetabolism || 0}
            activeCalories={activeCalories || 0}
            resetToken={animToken}
            onMealPress={(mealType: 'breakfast' | 'lunch' | 'dinner' | 'snack') => {
              console.log('选择餐次:', mealType);
              // 这里可以导航到营养记录页面
              pushIfAuthedElseLogin('/nutrition/records');
            }}
          />

          {/* 真正瀑布流布局 */}
          <View style={styles.masonryContainer}>
            {/* 左列 */}
            <View style={styles.masonryColumn}>
              {/* 心情卡片 */}
              <FloatingCard style={styles.masonryCard} delay={1500}>
                <MoodCard
                  moodCheckin={currentMoodCheckin}
                  onPress={() => pushIfAuthedElseLogin('/mood/calendar')}
                  isLoading={isMoodLoading}
                />
              </FloatingCard>

              <FloatingCard style={styles.masonryCard}>
                <StepsCard
                  stepCount={stepCount}
                  stepGoal={stepGoal}
                  hourlySteps={hourlySteps}
                  style={styles.stepsCardOverride}
                  onPress={() => pushIfAuthedElseLogin('/steps/detail')}
                />
              </FloatingCard>

              {/* 饮水记录卡片 */}
              <FloatingCard style={styles.masonryCard} delay={500}>
                <WaterIntakeCard
                  selectedDate={currentSelectedDateString}
                  style={styles.waterCardOverride}
                />
              </FloatingCard>

              <FloatingCard style={styles.masonryCard} delay={0}>
                <StressMeter
                  value={hrvValue}
                  updateTime={hrvUpdateTime}
                  hrvValue={hrvValue}
                />
              </FloatingCard>

              {/* 心率卡片 */}
              <FloatingCard style={styles.masonryCard} delay={2000}>
                <HeartRateCard
                  resetToken={animToken}
                  style={styles.basalMetabolismCardOverride}
                  heartRate={heartRate}
                />
              </FloatingCard>
            </View>

            {/* 右列 */}
            <View style={styles.masonryColumn}>
              <FloatingCard style={styles.masonryCard} delay={250}>
                <FitnessRingsCard
                  activeCalories={fitnessRingsData.activeCalories}
                  activeCaloriesGoal={fitnessRingsData.activeCaloriesGoal}
                  exerciseMinutes={fitnessRingsData.exerciseMinutes}
                  exerciseMinutesGoal={fitnessRingsData.exerciseMinutesGoal}
                  standHours={fitnessRingsData.standHours}
                  standHoursGoal={fitnessRingsData.standHoursGoal}
                  resetToken={animToken}
                />
              </FloatingCard>

              <FloatingCard style={styles.masonryCard}>
                <View style={styles.cardHeaderRow}>
                  <Text style={styles.cardTitle}>睡眠</Text>
                </View>
                {sleepDuration != null ? (
                  <Text style={styles.sleepValue}>
                    {Math.floor(sleepDuration / 60)}小时{Math.floor(sleepDuration % 60)}分钟
                  </Text>
                ) : (
                  <Text style={styles.sleepValue}>——</Text>
                )}
              </FloatingCard>

              {/* 基础代谢卡片 */}
              <FloatingCard style={styles.masonryCard} delay={1250}>
                <BasalMetabolismCard
                  value={basalMetabolism}
                  resetToken={animToken}
                  style={styles.basalMetabolismCardOverride}
                />
              </FloatingCard>

              {/* 血氧饱和度卡片 */}
              <FloatingCard style={styles.masonryCard} delay={1750}>
                <OxygenSaturationCard
                  resetToken={animToken}
                  style={styles.basalMetabolismCardOverride}
                  oxygenSaturation={oxygenSaturation}
                />
              </FloatingCard>


            </View>
          </View>
        </ScrollView>
      </SafeAreaView>
    </View>
  );
}

const primary = Colors.light.primary;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  gradientBackground: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  decorativeCircle1: {
    position: 'absolute',
    top: 40,
    right: 20,
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#0EA5E9',
    opacity: 0.1,
  },
  decorativeCircle2: {
    position: 'absolute',
    bottom: -15,
    left: -15,
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#0EA5E9',
    opacity: 0.05,
  },
  safeArea: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
    paddingHorizontal: 20,
  },


  sectionTitle: {
    fontSize: 24,
    fontWeight: '800',
    color: '#192126',
    marginTop: 24,
    marginBottom: 14,
  },
  metricsRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 16,
  },
  card: {
    backgroundColor: '#0F1418',
    borderRadius: 22,
    padding: 18,
    marginBottom: 16,
  },
  metricsLeft: {
    flex: 1,
    backgroundColor: '#EEE9FF',
    borderRadius: 22,
    padding: 18,
    marginRight: 12,
  },
  metricsRight: {
    width: 160,
    gap: 12,
  },
  metricsRightCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: 22,
    padding: 16,
  },
  caloriesValue: {
    color: '#192126',
    fontSize: 18,
    lineHeight: 18,
    fontWeight: '600',
    textAlignVertical: 'bottom'
  },
  caloriesUnit: {
    color: '#515558ff',
    fontSize: 12,
    marginLeft: 4,
    lineHeight: 18,
  },
  trainingContent: {
    marginTop: 8,
    width: 120,
    height: 120,
    borderRadius: 60,
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center',
  },
  trainingRingTrack: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    borderRadius: 60,
    borderWidth: 12,
    borderColor: '#E2D9FD',
  },
  trainingRingProgress: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    borderRadius: 60,
    borderWidth: 12,
    borderColor: 'transparent',
    borderTopColor: '#8B74F3',
    borderRightColor: '#8B74F3',
    transform: [{ rotateZ: '45deg' }],
  },
  trainingPercent: {
    fontSize: 18,
    fontWeight: '800',
    color: '#8B74F3',
  },
  cyclingHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  cyclingIconBadge: {
    width: 30,
    height: 30,
    borderRadius: 6,
    backgroundColor: primary,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 8,
  },
  cyclingTitle: {
    color: '#FFFFFF',
    fontSize: 20,
    fontWeight: '800',
  },
  mapArea: {
    backgroundColor: 'rgba(255,255,255,0.08)',
    borderRadius: 14,
    height: 180,
    padding: 8,
    flexDirection: 'row',
    flexWrap: 'wrap',
    overflow: 'hidden',
  },
  mapTile: {
    width: '25%',
    height: '25%',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.12)',
  },
  routeLine: {
    position: 'absolute',
    height: 6,
    backgroundColor: primary,
    borderRadius: 3,
  },
  cardHeaderRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  iconSquare: {
    width: 24,
    height: 24,
    borderRadius: 8,
    backgroundColor: '#FFFFFF',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 10,
  },
  cardTitle: {
    fontSize: 14,
    color: '#192126',
  },
  heartCard: {
    backgroundColor: '#FFE5E5',
  },
  waveContainer: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    height: 70,
    gap: 6,
    marginBottom: 8,
  },
  waveBar: {
    width: 6,
    borderRadius: 3,
    backgroundColor: '#E54D4D',
  },
  heartValue: {
    alignSelf: 'flex-end',
    color: '#5B5B5B',
    fontWeight: '600',
  },
  stepsValue: {
    fontSize: 14,
    color: '#7A6A42',
    fontWeight: '700',
    marginBottom: 8,
  },
  errorContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#FFE5E5',
    borderRadius: 12,
    padding: 12,
    marginBottom: 16,
  },
  errorText: {
    fontSize: 14,
    color: '#E54D4D',
    fontWeight: '600',
    marginLeft: 8,
    flex: 1,
  },
  retryButton: {
    padding: 4,
    marginLeft: 8,
  },
  viewMoreContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 16,
  },
  viewMoreText: {
    fontSize: 14,
    color: '#192126',
  },
  viewMoreIcon: {
    fontSize: 16,
    color: '#192126',
    marginLeft: 4,
  },
  stressCardRow: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    marginBottom: 16,
  },
  healthCardsRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 16,
  },
  masonryContainer: {
    marginBottom: 16,
    flexDirection: 'row',
    gap: 12,
    marginTop: 16,
  },
  masonryColumn: {
    flex: 1,
  },
  masonryCard: {
    width: '100%',
    backgroundColor: '#FFFFFF',
    borderRadius: 16,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.12,
    shadowRadius: 12,
    elevation: 6,
    minHeight: 100,
    justifyContent: 'center',
  },
  basalMetabolismCardOverride: {
    margin: -16, // 抵消 masonryCard 的 padding
    borderRadius: 16,
  },
  stepsCardOverride: {
    margin: -16, // 抵消 masonryCard 的 padding
    borderRadius: 16,
    height: '100%', // 填充整个masonryCard
  },
  waterCardOverride: {
    margin: -16, // 抵消 masonryCard 的 padding
    borderRadius: 16,
    height: '100%', // 填充整个masonryCard
  },
  compactStepsCard: {
    minHeight: 100,
  },
  stepsContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 8,
  },
  sleepValue: {
    fontSize: 16,
    color: '#1E40AF',
    fontWeight: '700',
    marginTop: 8,
  },
  weightCard: {
    backgroundColor: '#F0F9FF',
  },
  weightValue: {
    fontSize: 22,
    color: '#0369A1',
    fontWeight: '800',
    marginTop: 8,
  },
  addWeightButton: {
    position: 'absolute',
    right: 0,
    top: 0,
    padding: 4,
  },

});