import { Colors } from '@/constants/Colors';
import { ROUTES } from '@/constants/Routes';
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
import { useAuthGuard } from '@/hooks/useAuthGuard';
import { useColorScheme } from '@/hooks/useColorScheme';
import { fetchWeightHistory } from '@/store/userSlice';
import { BMI_CATEGORIES } from '@/utils/bmi';
import { Ionicons } from '@expo/vector-icons';
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { useRouter } from 'expo-router';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
  Dimensions,
  Modal,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';
import Svg, { Circle, Defs, Path, Stop, LinearGradient as SvgLinearGradient } from 'react-native-svg';
import { WeightProgressBar } from './WeightProgressBar';

const { width: screenWidth } = Dimensions.get('window');
const CARD_WIDTH = screenWidth - 40;
const CHART_WIDTH = CARD_WIDTH - 36;
const CHART_HEIGHT = 70;
const PADDING = 10;

// 主题色
const THEME_PRIMARY = '#4F5BD5';
const THEME_SECONDARY = '#6B6CFF';
const THEME_SUCCESS = '#22C55E';
const THEME_TEXT_PRIMARY = '#1c1f3a';
const THEME_TEXT_SECONDARY = '#6f7ba7';

export function WeightHistoryCard() {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const router = useRouter();
  const userProfile = useAppSelector((s) => s.user.profile);
  const weightHistory = useAppSelector((s) => s.user.weightHistory);

  const [showBMIModal, setShowBMIModal] = useState(false);
  const isLgAvaliable = isLiquidGlassAvailable();

  const { pushIfAuthedElseLogin, isLoggedIn } = useAuthGuard();
  const colorScheme = useColorScheme();
  const themeColors = Colors[colorScheme ?? 'light'];

  const hasWeight = userProfile?.weight && parseFloat(userProfile.weight) > 0;

  useEffect(() => {
    if (isLoggedIn) {
      loadWeightHistory();
    }
  }, [userProfile?.weight, isLoggedIn]);

  const loadWeightHistory = async () => {
    try {
      await dispatch(fetchWeightHistory() as any).unwrap();
    } catch (error) {
      console.error('Failed to load weight history:', error);
    }
  };

  // 点击添加按钮 - 需要登录
  const handleAddWeight = () => {
    pushIfAuthedElseLogin(ROUTES.WEIGHT_RECORDS);
  };

  const handleHideBMIModal = () => {
    setShowBMIModal(false);
  };

  // 点击卡片 - 直接跳转，不需要登录
  const navigateToWeightRecords = () => {
    router.push(ROUTES.WEIGHT_RECORDS);
  };

  // Process weight history data
  const sortedHistory = [...weightHistory]
    .sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
    .slice(-7);

  // 是否有数据
  const hasData = sortedHistory.length > 0;

  // 计算减重进度
  const currentWeight = userProfile?.weight ? parseFloat(userProfile.weight) : 0;
  const initialWeight = userProfile?.initialWeight
    ? parseFloat(userProfile.initialWeight)
    : (sortedHistory.length > 0 ? parseFloat(sortedHistory[0].weight) : 0);
  const targetWeight = userProfile?.targetWeight ? parseFloat(userProfile.targetWeight) : 0;

  // 计算进度百分比
  const hasTargetWeight = targetWeight > 0 && initialWeight > targetWeight;
  const totalToLose = initialWeight - targetWeight;
  const actualLost = initialWeight - currentWeight;
  const weightProgress = hasTargetWeight && totalToLose > 0 ? actualLost / totalToLose : 0;

  // Generate chart data
  const weights = hasData ? sortedHistory.map(item => parseFloat(item.weight)) : [];
  const minWeight = hasData ? Math.min(...weights) : 0;
  const maxWeight = hasData ? Math.max(...weights) : 0;
  const weightRange = maxWeight - minWeight || 1;

  const points = hasData ? sortedHistory.map((item, index) => {
    const x = PADDING + (index / Math.max(sortedHistory.length - 1, 1)) * (CHART_WIDTH - 2 * PADDING);
    const normalizedWeight = (parseFloat(item.weight) - minWeight) / weightRange;
    const y = PADDING + 10 + (1 - normalizedWeight) * (CHART_HEIGHT - 2 * PADDING - 20);
    return { x, y, weight: item.weight, date: item.createdAt };
  }) : [];

  // 生成平滑曲线路径（使用贝塞尔曲线）
  const generateSmoothPath = (pts: typeof points) => {
    if (pts.length === 0) return '';
    if (pts.length === 1) return `M ${pts[0].x} ${pts[0].y}`;

    let path = `M ${pts[0].x} ${pts[0].y}`;

    for (let i = 0; i < pts.length - 1; i++) {
      const p0 = pts[Math.max(0, i - 1)];
      const p1 = pts[i];
      const p2 = pts[i + 1];
      const p3 = pts[Math.min(pts.length - 1, i + 2)];

      const cp1x = p1.x + (p2.x - p0.x) / 6;
      const cp1y = p1.y + (p2.y - p0.y) / 6;
      const cp2x = p2.x - (p3.x - p1.x) / 6;
      const cp2y = p2.y - (p3.y - p1.y) / 6;

      path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
    }

    return path;
  };

  const smoothPath = generateSmoothPath(points);
  const singlePointPath = points.length === 1
    ? `M ${PADDING} ${points[0].y} L ${CHART_WIDTH - PADDING} ${points[0].y}`
    : smoothPath;

  // 空状态下的占位曲线路径（水平虚线效果）
  const emptyLinePath = `M ${PADDING} ${CHART_HEIGHT / 2} L ${CHART_WIDTH - PADDING} ${CHART_HEIGHT / 2}`;

  return (
    <TouchableOpacity style={styles.card} onPress={navigateToWeightRecords} activeOpacity={0.8}>
      <View style={styles.cardHeader}>
        <View style={styles.iconContainer}>
          <Image
            source={require('@/assets/images/icons/icon-weight.png')}
            style={styles.iconSquare}
          />
        </View>
        <Text style={styles.cardTitle}>{t('statistics.components.weight.title')}</Text>
        {isLgAvaliable ? (
          <TouchableOpacity
            onPress={(e) => {
              e.stopPropagation();
              handleAddWeight();
            }}
            activeOpacity={0.8}
          >
            <GlassView style={styles.addButtonGlass}>
              <Ionicons name="add" size={18} color={THEME_PRIMARY} />
            </GlassView>
          </TouchableOpacity>
        ) : (
          <TouchableOpacity
            style={styles.addButton}
            onPress={(e) => {
              e.stopPropagation();
              handleAddWeight();
            }}
            activeOpacity={0.8}
          >
            <Ionicons name="add" size={18} color={THEME_PRIMARY} />
          </TouchableOpacity>
        )}
      </View>

      {/* 当前体重显示 */}
      <View style={styles.currentWeightSection}>
        <View style={styles.weightValueContainer}>
          <Text style={styles.weightValue}>{hasWeight ? currentWeight.toFixed(1) : '--'}</Text>
          <Text style={styles.weightUnit}>kg</Text>
        </View>
        {sortedHistory.length > 1 && (
          <View style={[
            styles.changeTag,
            { backgroundColor: actualLost >= 0 ? 'rgba(34, 197, 94, 0.1)' : 'rgba(255, 107, 107, 0.1)' }
          ]}>
            <Ionicons
              name={actualLost >= 0 ? 'trending-down' : 'trending-up'}
              size={12}
              color={actualLost >= 0 ? THEME_SUCCESS : '#FF6B6B'}
            />
            <Text style={[
              styles.changeText,
              { color: actualLost >= 0 ? THEME_SUCCESS : '#FF6B6B' }
            ]}>
              {actualLost >= 0 ? '-' : '+'}{Math.abs(actualLost).toFixed(1)}kg
            </Text>
          </View>
        )}
      </View>

      {/* 图表显示 */}
      <View style={styles.chartContainer}>
        <Svg width={CHART_WIDTH} height={CHART_HEIGHT + 15}>
          <Defs>
            <SvgLinearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
              <Stop offset="0%" stopColor={THEME_PRIMARY} stopOpacity="1" />
              <Stop offset="100%" stopColor={THEME_SECONDARY} stopOpacity="1" />
            </SvgLinearGradient>
          </Defs>

          {hasData ? (
            <>
              {/* 平滑曲线 */}
              <Path
                d={singlePointPath}
                stroke="url(#lineGradient)"
                strokeWidth={2.5}
                fill="none"
                strokeLinecap="round"
                strokeLinejoin="round"
              />

              {/* 数据点 */}
              {points.map((point, index) => {
                const isLastPoint = index === points.length - 1;

                return (
                  <React.Fragment key={index}>
                    {/* 外圈光晕 */}
                    {isLastPoint && (
                      <Circle
                        cx={point.x}
                        cy={point.y}
                        r={8}
                        fill={THEME_PRIMARY}
                        opacity={0.15}
                      />
                    )}
                    {/* 数据点 */}
                    <Circle
                      cx={point.x}
                      cy={point.y}
                      r={isLastPoint ? 4 : 2.5}
                      fill={isLastPoint ? THEME_PRIMARY : THEME_SECONDARY}
                      stroke={isLastPoint ? '#ffffff' : 'none'}
                      strokeWidth={isLastPoint ? 2 : 0}
                    />
                  </React.Fragment>
                );
              })}
            </>
          ) : (
            /* 空状态 - 虚线占位 */
            <Path
              d={emptyLinePath}
              stroke="#E8EAF0"
              strokeWidth={2}
              fill="none"
              strokeLinecap="round"
              strokeDasharray="8,6"
            />
          )}
        </Svg>

        {/* 图表信息 */}
        <View style={styles.chartInfo}>
          <View style={styles.infoItem}>
            <Text style={styles.infoLabel}>{hasData ? sortedHistory.length : '--'}{t('statistics.components.weight.days')}</Text>
          </View>
          <View style={styles.infoItem}>
            <Text style={styles.infoLabel}>
              {hasData ? `${minWeight.toFixed(1)}-${maxWeight.toFixed(1)}kg` : '--'}
            </Text>
          </View>
        </View>
      </View>

      {/* 减重进度条 - 始终显示 */}
      <WeightProgressBar
        progress={weightProgress}
        currentWeight={currentWeight}
        targetWeight={targetWeight}
        initialWeight={initialWeight}
      />

      {/* BMI information modal */}
      <Modal
        visible={showBMIModal}
        animationType="slide"
        presentationStyle="pageSheet"
        onRequestClose={handleHideBMIModal}
      >
        <LinearGradient
          colors={[themeColors.backgroundGradientStart, themeColors.backgroundGradientEnd]}
          style={styles.bmiModalContainer}
          start={{ x: 0, y: 0 }}
          end={{ x: 0, y: 1 }}
        >
          <ScrollView style={styles.bmiModalContent} showsVerticalScrollIndicator={false}>
            {/* Title */}
            <Text style={styles.bmiModalTitle}>{t('statistics.components.weight.bmiModal.title')}</Text>

            {/* Introduction section */}
            <View style={styles.bmiModalIntroSection}>
              <Text style={styles.bmiModalDescription}>
                {t('statistics.components.weight.bmiModal.description')}
              </Text>
              <View style={styles.bmiModalFormulaContainer}>
                <Text style={styles.bmiModalFormulaText}>
                  {t('statistics.components.weight.bmiModal.formula')}
                </Text>
              </View>
            </View>

            {/* BMI classification standards */}
            <Text style={styles.bmiModalSectionTitle}>{t('statistics.components.weight.bmiModal.classificationTitle')}</Text>

            <View style={styles.bmiModalStatsCard}>
              {BMI_CATEGORIES.map((category, index) => {
                const colors = [
                  { bg: '#FEF3C7', text: '#B45309', border: '#F59E0B' }, // Underweight
                  { bg: '#E8F5E8', text: Colors.light.accentGreen, border: Colors.light.accentGreen }, // Normal
                  { bg: '#FEF3C7', text: '#B45309', border: '#F59E0B' }, // Overweight
                  { bg: '#FEE2E2', text: '#B91C1C', border: '#EF4444' }  // Obese
                ][index];

                return (
                  <View key={index} style={[styles.bmiModalStatItem, { backgroundColor: colors.bg, borderColor: colors.border }]}>
                    <View style={styles.bmiModalStatHeader}>
                      <Text style={[styles.bmiModalStatTitle, { color: colors.text }]}>
                        {category.name}
                      </Text>
                      <Text style={[styles.bmiModalStatRange, { color: colors.text }]}>
                        {category.range}
                      </Text>
                    </View>
                    <Text style={[styles.bmiModalStatAdvice, { color: colors.text }]}>
                      {category.advice}
                    </Text>
                  </View>
                );
              })}
            </View>

            {/* Health tips */}
            <Text style={styles.bmiModalSectionTitle}>{t('statistics.components.weight.bmiModal.healthTipsTitle')}</Text>
            <View style={styles.bmiModalHealthTips}>
              <View style={styles.bmiModalTipsItem}>
                <Ionicons name="nutrition-outline" size={20} color="#3B82F6" />
                <Text style={styles.bmiModalTipsText}>{t('statistics.components.weight.bmiModal.tips.nutrition')}</Text>
              </View>
              <View style={styles.bmiModalTipsItem}>
                <Ionicons name="walk-outline" size={20} color="#3B82F6" />
                <Text style={styles.bmiModalTipsText}>{t('statistics.components.weight.bmiModal.tips.exercise')}</Text>
              </View>
              <View style={styles.bmiModalTipsItem}>
                <Ionicons name="moon-outline" size={20} color="#3B82F6" />
                <Text style={styles.bmiModalTipsText}>{t('statistics.components.weight.bmiModal.tips.sleep')}</Text>
              </View>
              <View style={styles.bmiModalTipsItem}>
                <Ionicons name="calendar-outline" size={20} color="#3B82F6" />
                <Text style={styles.bmiModalTipsText}>{t('statistics.components.weight.bmiModal.tips.monitoring')}</Text>
              </View>
            </View>

            {/* Disclaimer */}
            <View style={styles.bmiModalDisclaimer}>
              <Ionicons name="information-circle-outline" size={16} color="#6B7280" />
              <Text style={styles.bmiModalDisclaimerText}>
                {t('statistics.components.weight.bmiModal.disclaimer')}
              </Text>
            </View>
          </ScrollView>

          {/* Bottom continue button */}
          <View style={styles.bmiModalBottomContainer}>
            <TouchableOpacity style={styles.bmiModalContinueButton} onPress={handleHideBMIModal}>
              <View style={styles.bmiModalButtonBackground}>
                <Text style={styles.bmiModalButtonText}>{t('statistics.components.weight.bmiModal.continueButton')}</Text>
              </View>
            </TouchableOpacity>
            <View style={styles.bmiModalHomeIndicator} />
          </View>
        </LinearGradient>
      </Modal>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: '#FFFFFF',
    borderRadius: 24,
    padding: 18,
    shadowColor: 'rgba(30, 41, 59, 0.08)',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.12,
    shadowRadius: 12,
    elevation: 4,
    marginTop: 16,
  },
  cardHeader: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  iconContainer: {
    width: 28,
    height: 28,
    borderRadius: 8,
    backgroundColor: 'rgba(79, 91, 213, 0.1)',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 10,
  },
  iconSquare: {
    width: 16,
    height: 16,
    tintColor: THEME_PRIMARY,
  },
  cardTitle: {
    fontSize: 15,
    color: THEME_TEXT_PRIMARY,
    flex: 1,
    fontWeight: '700',
    fontFamily: 'AliBold',
  },
  headerButtons: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  chartToggleButton: {
    width: 28,
    height: 28,
    borderRadius: 14,
    alignItems: 'center',
    justifyContent: 'center',
  },
  addButton: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(79, 91, 213, 0.1)',
  },
  addButtonGlass: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(79, 91, 213, 0.15)',
  },
  currentWeightSection: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 12,
    gap: 12,
  },
  weightValueContainer: {
    flexDirection: 'row',
    alignItems: 'baseline',
  },
  weightValue: {
    fontSize: 32,
    fontWeight: '800',
    color: THEME_TEXT_PRIMARY,
    fontFamily: 'AliBold',
  },
  weightUnit: {
    fontSize: 14,
    fontWeight: '600',
    color: THEME_TEXT_SECONDARY,
    fontFamily: 'AliRegular',
    marginLeft: 4,
  },
  changeTag: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
    gap: 4,
  },
  changeText: {
    fontSize: 12,
    fontWeight: '700',
    fontFamily: 'AliBold',
  },
  emptyContent: {
    alignItems: 'center',
  },
  emptyTitle: {
    fontSize: 16,
    fontWeight: '700',
    color: THEME_TEXT_PRIMARY,
    marginBottom: 6,
  },
  emptyDescription: {
    fontSize: 14,
    color: THEME_TEXT_SECONDARY,
    textAlign: 'center',
    marginBottom: 16,
    lineHeight: 20,
  },
  recordButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: THEME_PRIMARY,
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 20,
    gap: 6,
  },
  recordButtonText: {
    color: '#FFFFFF',
    fontSize: 14,
    fontWeight: '700',
    fontFamily: 'AliBold',
  },
  chartContainer: {
    width: '100%',
    alignItems: 'center',
    marginTop: 12,
  },
  chartInfo: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    width: '100%',
    marginTop: -14,
  },
  infoItem: {
    alignItems: 'center',
    backgroundColor: 'rgba(79, 91, 213, 0.06)',
    paddingHorizontal: 12,
    paddingVertical: 4,
    borderRadius: 10,
  },
  infoLabel: {
    fontSize: 11,
    color: THEME_TEXT_SECONDARY,
    fontWeight: '500',
    fontFamily: 'AliRegular',
  },
  infoValue: {
    fontSize: 14,
    fontWeight: '700',
    color: THEME_TEXT_PRIMARY,
  },

  // BMI modal styles
  bmiModalContainer: {
    flex: 1,
  },
  bmiModalContent: {
    flex: 1,
    padding: 20,
  },
  bmiModalTitle: {
    fontSize: 28,
    fontWeight: '800',
    color: '#111827',
    textAlign: 'center',
    marginBottom: 24,
    letterSpacing: -0.5,
    fontFamily: 'AliBold',
  },
  bmiModalIntroSection: {
    marginBottom: 32,
  },
  bmiModalDescription: {
    fontSize: 16,
    color: '#374151',
    lineHeight: 24,
    textAlign: 'center',
    marginBottom: 16,
    fontFamily: 'AliRegular',
  },
  bmiModalFormulaContainer: {
    backgroundColor: '#F3F4F6',
    borderRadius: 12,
    padding: 16,
    alignItems: 'center',
  },
  bmiModalFormulaText: {
    fontSize: 14,
    fontWeight: '600',
    color: '#374151',
    fontFamily: 'AliBold',
  },
  bmiModalSectionTitle: {
    fontSize: 20,
    fontWeight: '700',
    color: '#111827',
    marginBottom: 16,
    letterSpacing: -0.5,
    fontFamily: 'AliBold',
  },
  bmiModalStatsCard: {
    marginBottom: 32,
  },
  bmiModalStatItem: {
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    borderWidth: 1,
  },
  bmiModalStatHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  bmiModalStatTitle: {
    fontSize: 16,
    fontWeight: '700',
    fontFamily: 'AliBold',
  },
  bmiModalStatRange: {
    fontSize: 14,
    fontWeight: '600',
    fontFamily: 'AliBold',
  },
  bmiModalStatAdvice: {
    fontSize: 14,
    lineHeight: 20,
    fontFamily: 'AliRegular',
  },
  bmiModalHealthTips: {
    marginBottom: 32,
  },
  bmiModalTipsItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16,
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: '#F8FAFC',
    borderRadius: 12,
  },
  bmiModalTipsText: {
    fontSize: 14,
    color: '#374151',
    marginLeft: 12,
    flex: 1,
    lineHeight: 20,
    fontFamily: 'AliRegular',
  },
  bmiModalDisclaimer: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    backgroundColor: '#FEF3C7',
    borderRadius: 12,
    padding: 16,
    marginBottom: 20,
  },
  bmiModalDisclaimerText: {
    fontSize: 13,
    color: '#B45309',
    marginLeft: 8,
    flex: 1,
    lineHeight: 18,
    fontFamily: 'AliRegular',
  },
  bmiModalBottomContainer: {
    padding: 20,
    paddingBottom: 34,
  },
  bmiModalContinueButton: {
    marginBottom: 8,
  },
  bmiModalButtonBackground: {
    backgroundColor: THEME_TEXT_PRIMARY,
    borderRadius: 16,
    paddingVertical: 16,
    alignItems: 'center',
  },
  bmiModalButtonText: {
    fontSize: 16,
    fontWeight: '700',
    color: '#FFFFFF',
    fontFamily: 'AliBold',
  },
  bmiModalHomeIndicator: {
    height: 5,
    backgroundColor: '#D1D5DB',
    borderRadius: 3,
    alignSelf: 'center',
    width: 36,
  },
});