import { ROUTES } from '@/constants/Routes';
import { useAppSelector } from '@/hooks/redux';
import { selectUserAge, selectUserProfile } from '@/store/userSlice';
import { fetchBasalEnergyBurned } from '@/utils/health';
import dayjs from 'dayjs';
import { Image } from 'expo-image';
import { router } from 'expo-router';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

interface BasalMetabolismCardProps {
  selectedDate?: Date;
  style?: any;
}

export function BasalMetabolismCard({ selectedDate, style }: BasalMetabolismCardProps) {
  const [basalMetabolism, setBasalMetabolism] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);

  // 获取用户基本信息
  const userProfile = useAppSelector(selectUserProfile);
  const userAge = useAppSelector(selectUserAge);

  // 缓存和防抖相关
  const cacheRef = useRef<Map<string, { data: number | null; timestamp: number }>>(new Map());
  const loadingRef = useRef<Map<string, Promise<number | null>>>(new Map());
  const CACHE_DURATION = 5 * 60 * 1000; // 5分钟缓存

  // 使用 useMemo 缓存 BMR 计算，避免每次渲染重复计算
  const bmrRange = useMemo(() => {
    const { gender, weight, height } = userProfile;

    // 检查是否有足够的信息来计算BMR
    if (!gender || !weight || !height || !userAge) {
      return null;
    }

    // 将体重和身高转换为数字
    const weightNum = parseFloat(weight);
    const heightNum = parseFloat(height);

    if (isNaN(weightNum) || isNaN(heightNum) || weightNum <= 0 || heightNum <= 0 || userAge <= 0) {
      return null;
    }

    // 使用Mifflin-St Jeor公式计算BMR
    let bmr: number;
    if (gender === 'male') {
      bmr = 10 * weightNum + 6.25 * heightNum - 5 * userAge + 5;
    } else {
      bmr = 10 * weightNum + 6.25 * heightNum - 5 * userAge - 161;
    }

    // 计算正常范围（±15%）
    const minBMR = Math.round(bmr * 0.85);
    const maxBMR = Math.round(bmr * 1.15);

    return { min: minBMR, max: maxBMR, base: Math.round(bmr) };
  }, [userProfile.gender, userProfile.weight, userProfile.height, userAge]);

  // 优化的数据获取函数，包含缓存和去重复请求
  const fetchBasalMetabolismData = useCallback(async (date: Date): Promise<number | null> => {
    const dateKey = dayjs(date).format('YYYY-MM-DD');
    const now = Date.now();

    // 检查缓存
    const cached = cacheRef.current.get(dateKey);
    if (cached && (now - cached.timestamp) < CACHE_DURATION) {
      return cached.data;
    }

    // 检查是否已经在请求中（防止重复请求）
    const existingRequest = loadingRef.current.get(dateKey);
    if (existingRequest) {
      return existingRequest;
    }

    // 创建新的请求
    const request = (async () => {
      try {
        const options = {
          startDate: dayjs(date).startOf('day').toDate().toISOString(),
          endDate: dayjs(date).endOf('day').toDate().toISOString()
        };
        const basalEnergy = await fetchBasalEnergyBurned(options);
        const result = basalEnergy || null;

        // 更新缓存
        cacheRef.current.set(dateKey, { data: result, timestamp: now });

        return result;
      } catch (error) {
        console.error('BasalMetabolismCard: 获取基础代谢数据失败:', error);
        return null;
      } finally {
        // 清理请求记录
        loadingRef.current.delete(dateKey);
      }
    })();

    // 记录请求
    loadingRef.current.set(dateKey, request);

    return request;
  }, []);

  // 获取基础代谢数据
  useEffect(() => {
    if (!selectedDate) return;

    let isCancelled = false;

    const loadData = async () => {
      setLoading(true);
      try {
        const result = await fetchBasalMetabolismData(selectedDate);
        if (!isCancelled) {
          setBasalMetabolism(result);
        }
      } finally {
        if (!isCancelled) {
          setLoading(false);
        }
      }
    };

    loadData();

    // 清理函数，防止组件卸载后的状态更新
    return () => {
      isCancelled = true;
    };
  }, [selectedDate, fetchBasalMetabolismData]);
  // 使用 useMemo 优化状态描述计算
  const status = useMemo(() => {
    if (basalMetabolism === null || basalMetabolism === 0) {
      return { text: '未知', color: '#9AA3AE' };
    }

    // 基于常见的基础代谢范围来判断状态
    if (basalMetabolism >= 1800) {
      return { text: '高代谢', color: '#10B981' };
    } else if (basalMetabolism >= 1400) {
      return { text: '正常', color: '#3B82F6' };
    } else if (basalMetabolism >= 1000) {
      return { text: '偏低', color: '#F59E0B' };
    } else {
      return { text: '较低', color: '#EF4444' };
    }
  }, [basalMetabolism]);

  return (
    <>
      <TouchableOpacity
        style={[styles.container, style]}
        onPress={() => setModalVisible(true)}
        activeOpacity={0.8}
      >
        {/* 头部区域 */}
        <View style={styles.header}>
          <View style={styles.leftSection}>
            <Image
              source={require('@/assets/images/icons/icon-fire.png')}
              style={styles.titleIcon}
            />
            <Text style={styles.title}>基础代谢</Text>
          </View>
          <View style={[styles.statusBadge, { backgroundColor: status.color + '20' }]}>
            <Text style={[styles.statusText, { color: status.color }]}>{status.text}</Text>
          </View>
        </View>

        {/* 数值显示区域 */}
        <View style={styles.valueSection}>
          <Text style={styles.value}>
            {loading ? '加载中...' : (basalMetabolism != null && basalMetabolism > 0 ? Math.round(basalMetabolism).toString() : '--')}
          </Text>
          <Text style={styles.unit}>千卡/日</Text>
        </View>
      </TouchableOpacity>

      {/* 基础代谢详情弹窗 */}
      <Modal
        animationType="fade"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            {/* 关闭按钮 */}
            <TouchableOpacity
              style={styles.closeButton}
              onPress={() => setModalVisible(false)}
            >
              <Text style={styles.closeButtonText}>×</Text>
            </TouchableOpacity>

            {/* 标题 */}
            <Text style={styles.modalTitle}>基础代谢</Text>

            {/* 基础代谢定义 */}
            <Text style={styles.modalDescription}>
              基础代谢，也称基础代谢率（BMR），是指人体在完全静息状态下维持基本生命功能（心跳、呼吸、体温调节等）所需的最低能量消耗，通常以卡路里为单位。
            </Text>

            {/* 为什么重要 */}
            <Text style={styles.sectionTitle}>为什么重要？</Text>
            <Text style={styles.sectionContent}>
              基础代谢占总能量消耗的60-75%，是能量平衡的基础。了解您的基础代谢有助于制定科学的营养计划、优化体重管理策略，以及评估代谢健康状态。
            </Text>

            {/* 正常范围 */}
            <Text style={styles.sectionTitle}>正常范围</Text>
            <Text style={styles.formulaText}>
              - 男性：BMR = 10 × 体重(kg) + 6.25 × 身高(cm) - 5 × 年龄 + 5
            </Text>
            <Text style={styles.formulaText}>
              - 女性：BMR = 10 × 体重(kg) + 6.25 × 身高(cm) - 5 × 年龄 - 161
            </Text>

            {bmrRange ? (
              <>
                <Text style={styles.rangeText}>您的正常区间：{bmrRange.min}-{bmrRange.max}千卡/天</Text>
                <Text style={styles.rangeNote}>
                  (在公式基础计算值上下浮动15%都属于正常范围)
                </Text>
                <Text style={styles.userInfoText}>
                  基于您的信息：{userProfile.gender === 'male' ? '男性' : '女性'}，{userAge}岁，{userProfile.height}cm，{userProfile.weight}kg
                </Text>
              </>
            ) : (
              <>
                <Text style={styles.rangeText}>请完善基本信息以计算您的代谢率</Text>
                <TouchableOpacity
                  style={styles.completeInfoButton}
                  onPress={() => {
                    setModalVisible(false);
                    router.push(ROUTES.PROFILE_EDIT);
                  }}
                >
                  <Text style={styles.completeInfoButtonText}>前往完善资料</Text>
                </TouchableOpacity>
              </>
            )}

            {/* 提高代谢率的策略 */}
            <Text style={styles.sectionTitle}>提高代谢率的策略</Text>
            <Text style={styles.strategyText}>科学研究支持以下方法：</Text>

            <View style={styles.strategyList}>
              <Text style={styles.strategyItem}>1.增加肌肉量 (每周2-3次力量训练)</Text>
              <Text style={styles.strategyItem}>2.高强度间歇训练 (HIIT)</Text>
              <Text style={styles.strategyItem}>3.充分蛋白质摄入 (体重每公斤1.6-2.2g)</Text>
              <Text style={styles.strategyItem}>4.保证充足睡眠 (7-9小时/晚)</Text>
              <Text style={styles.strategyItem}>5.避免过度热量限制 (不低于BMR的80%)</Text>
            </View>
          </View>
        </View>
      </Modal>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FFFFFF',
    borderRadius: 20,
    padding: 16,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.08,
    shadowRadius: 12,
    elevation: 4,
    position: 'relative',
    overflow: 'hidden',
  },

  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginBottom: 16,
    zIndex: 1,
  },
  leftSection: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  iconContainer: {
    width: 32,
    height: 32,
    borderRadius: 10,
    backgroundColor: '#FFFFFF',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 8,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
  },
  fireIcon: {
    width: 14,
    height: 18,
    backgroundColor: '#EF4444',
    borderTopLeftRadius: 7,
    borderTopRightRadius: 7,
    borderBottomLeftRadius: 2,
    borderBottomRightRadius: 2,
  },
  title: {
    fontSize: 14,
    color: '#0F172A',
    fontWeight: '600',
  },
  titleIcon: {
    width: 16,
    height: 16,
    marginRight: 4,
  },
  statusBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
  },
  statusText: {
    fontSize: 11,
    fontWeight: '600',
  },
  valueSection: {
    flexDirection: 'row',
    alignItems: 'center',
    zIndex: 1,
  },
  value: {
    fontSize: 16,
    fontWeight: '600',
    color: '#0F172A',
    lineHeight: 28,
  },
  unit: {
    fontSize: 12,
    color: '#64748B',
    marginLeft: 6,
  },

  // Modal styles
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: '#FFFFFF',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 24,
    maxHeight: '90%',
    width: '100%',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: -5,
    },
    shadowOpacity: 0.25,
    shadowRadius: 20,
    elevation: 10,
  },
  closeButton: {
    position: 'absolute',
    top: 16,
    right: 16,
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: '#F1F5F9',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 1,
  },
  closeButtonText: {
    fontSize: 20,
    color: '#64748B',
    fontWeight: '600',
  },
  modalTitle: {
    fontSize: 24,
    fontWeight: '700',
    color: '#0F172A',
    marginBottom: 16,
    textAlign: 'center',
  },
  modalDescription: {
    fontSize: 15,
    color: '#475569',
    lineHeight: 22,
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: '#0F172A',
    marginBottom: 12,
    marginTop: 8,
  },
  sectionContent: {
    fontSize: 15,
    color: '#475569',
    lineHeight: 22,
    marginBottom: 20,
  },
  formulaText: {
    fontSize: 14,
    color: '#64748B',
    fontFamily: 'monospace',
    marginBottom: 4,
    paddingLeft: 8,
  },
  rangeText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#059669',
    marginTop: 12,
    marginBottom: 4,
    textAlign: 'center',
  },
  rangeNote: {
    fontSize: 12,
    color: '#9CA3AF',
    textAlign: 'center',
    marginBottom: 20,
  },
  userInfoText: {
    fontSize: 13,
    color: '#6B7280',
    textAlign: 'center',
    marginTop: 8,
    marginBottom: 16,
    fontStyle: 'italic',
  },
  strategyText: {
    fontSize: 15,
    color: '#475569',
    marginBottom: 12,
  },
  strategyList: {
    marginBottom: 20,
  },
  strategyItem: {
    fontSize: 14,
    color: '#64748B',
    lineHeight: 20,
    marginBottom: 8,
    paddingLeft: 8,
  },
  completeInfoButton: {
    backgroundColor: '#7a5af8',
    borderRadius: 12,
    paddingVertical: 12,
    paddingHorizontal: 24,
    marginTop: 16,
    alignItems: 'center',
    alignSelf: 'center',
  },
  completeInfoButtonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
  },
});