import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { useWaterDataByDate } from '@/hooks/useWaterData';
import { getQuickWaterAmount } from '@/utils/userPreferences';
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 { router, useLocalSearchParams } from 'expo-router';
import React, { useEffect, useState } from 'react';
import {
  Alert,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';
import { Swipeable } from 'react-native-gesture-handler';

import { HeaderBar } from '@/components/ui/HeaderBar';
import { useI18n } from '@/hooks/useI18n';
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
import dayjs from 'dayjs';

interface WaterDetailProps {
  selectedDate?: string;
}

const WaterDetail: React.FC<WaterDetailProps> = () => {
  const { t } = useI18n();
  const safeAreaTop = useSafeAreaTop()

  const { selectedDate } = useLocalSearchParams<{ selectedDate?: string }>();
  const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
  const colorTokens = Colors[theme];

  const [dailyGoal, setDailyGoal] = useState<string>('2000');
  const [quickAddAmount, setQuickAddAmount] = useState<string>('250');

  // 使用新的 hook 来处理指定日期的饮水数据
  const { waterRecords, dailyWaterGoal, updateWaterGoal, removeWaterRecord } = useWaterDataByDate(selectedDate);

  // 处理设置按钮点击 - 跳转到设置页面
  const handleSettingsPress = () => {
    router.push('/water/settings');
  };

  // 删除饮水记录
  const handleDeleteRecord = async (recordId: string) => {
    await removeWaterRecord(recordId);
  };

  // 加载用户偏好设置和当前饮水目标
  useEffect(() => {
    const loadUserPreferences = async () => {
      try {
        const amount = await getQuickWaterAmount();
        setQuickAddAmount(amount.toString());

        // 设置当前的饮水目标
        if (dailyWaterGoal) {
          setDailyGoal(dailyWaterGoal.toString());
        }
      } catch (error) {
        console.error(t('waterDetail.loadingUserPreferences'), error);
      }
    };

    loadUserPreferences();
  }, [dailyWaterGoal]);

  const totalAmount = waterRecords?.reduce((sum, record) => sum + record.amount, 0) || 0;
  const currentGoal = dailyWaterGoal || 2000;
  const progress = Math.min(100, (totalAmount / currentGoal) * 100);

  // 新增：饮水记录卡片组件
  const WaterRecordCard = ({ record, onDelete }: { record: any; onDelete: () => void }) => {
    const swipeableRef = React.useRef<Swipeable>(null);

    // 处理删除操作
    const handleDelete = () => {
      Alert.alert(
        t('waterDetail.deleteConfirm.title'),
        t('waterDetail.deleteConfirm.message'),
        [
          {
            text: t('waterDetail.deleteConfirm.cancel'),
            style: 'cancel',
          },
          {
            text: t('waterDetail.deleteConfirm.confirm'),
            style: 'destructive',
            onPress: () => {
              onDelete();
              swipeableRef.current?.close();
            },
          },
        ]
      );
    };

    // 渲染右侧删除按钮
    const renderRightActions = () => {
      return (
        <TouchableOpacity
          style={styles.deleteSwipeButton}
          onPress={handleDelete}
          activeOpacity={0.8}
        >
          <Ionicons name="trash" size={20} color="#FFFFFF" />
        </TouchableOpacity>
      );
    };

    return (
      <View style={styles.recordCardContainer}>
        <Swipeable
          ref={swipeableRef}
          renderRightActions={renderRightActions}
          rightThreshold={40}
          overshootRight={false}
        >
          <View style={styles.recordCard}>
            <View style={styles.recordMainContent}>
              <View style={styles.recordIconContainer}>
                <Image
                  source={require('@/assets/images/icons/IconGlass.png')}
                  style={styles.recordIcon}
                />
              </View>
              <View style={styles.recordInfo}>
                <Text style={styles.recordLabel}>{t('waterDetail.water')}</Text>
                <View style={styles.recordTimeContainer}>
                  <Ionicons name="time-outline" size={14} color="#6f7ba7" />
                  <Text style={styles.recordTimeText}>
                    {dayjs(record.recordedAt || record.createdAt).format('HH:mm')}
                  </Text>
                </View>
              </View>
              <View style={styles.recordAmountContainer}>
                <Text style={styles.recordAmount}>{record.amount}ml</Text>
              </View>
            </View>
            {record.note && (
              <Text style={styles.recordNote}>{record.note}</Text>
            )}
          </View>
        </Swipeable>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      {/* 背景 */}
      <LinearGradient
        colors={['#f3f4fb', '#f3f4fb']} 
        style={StyleSheet.absoluteFillObject}
      />
      {/* 顶部装饰性渐变 - 模仿挑战页面的柔和背景感 */}
       <LinearGradient
        colors={['rgba(229, 252, 254, 0.8)', 'rgba(243, 244, 251, 0)']}
        style={styles.topGradient}
        start={{ x: 0.5, y: 0 }}
        end={{ x: 0.5, y: 1 }}
      />

      <HeaderBar
        title={t('waterDetail.title')}
        onBack={() => router.back()}
        right={
          isLiquidGlassAvailable() ? (
            <TouchableOpacity
              onPress={handleSettingsPress}
              activeOpacity={0.7}
              style={styles.settingsButtonWrapper}
            >
              <GlassView
                style={styles.settingsButtonGlass}
                glassEffectStyle="regular"
                tintColor="rgba(255, 255, 255, 0.4)"
                isInteractive={true}
              >
                <Ionicons name="settings-outline" size={22} color="#1c1f3a" />
              </GlassView>
            </TouchableOpacity>
          ) : (
            <TouchableOpacity
              style={styles.settingsButtonFallback}
              onPress={handleSettingsPress}
              activeOpacity={0.7}
            >
              <Ionicons name="settings-outline" size={22} color="#1c1f3a" />
            </TouchableOpacity>
          )
        }
      />

      <KeyboardAvoidingView
        style={styles.keyboardAvoidingView}
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      >
        <ScrollView
          style={styles.scrollView}
          contentContainerStyle={[styles.scrollContent, {
            paddingTop: safeAreaTop
          }]}
          showsVerticalScrollIndicator={false}
        >
          <View style={styles.headerBlock}>
            <Text style={styles.pageTitle}>
              {selectedDate ? dayjs(selectedDate).format('MM月DD日') : t('waterDetail.today')}
            </Text>
            <Text style={styles.pageSubtitle}>{t('waterDetail.waterRecord')}</Text>
          </View>

          {/* 进度卡片 */}
          <View style={styles.progressCard}>
             <View style={styles.progressInfo}>
                <View>
                   <Text style={styles.progressLabel}>{t('waterDetail.total')}</Text>
                   <Text style={styles.progressValue}>{totalAmount}<Text style={styles.progressUnit}>ml</Text></Text>
                </View>
                <View style={{ alignItems: 'flex-end' }}>
                   <Text style={styles.progressLabel}>{t('waterDetail.goal')}</Text>
                   <Text style={styles.progressGoalValue}>{currentGoal}<Text style={styles.progressUnit}>ml</Text></Text>
                </View>
             </View>
             <View style={styles.progressBarBg}>
                <LinearGradient
                  colors={['#4F5BD5', '#6B6CFF']}
                  start={{ x: 0, y: 0 }}
                  end={{ x: 1, y: 0 }}
                  style={[styles.progressBarFill, { width: `${progress}%` }]}
                />
             </View>
          </View>

          {/* 记录列表 */}
          <View style={styles.section}>
            {waterRecords && waterRecords.length > 0 ? (
              <View style={styles.recordsList}>
                {waterRecords.map((record) => (
                  <WaterRecordCard
                    key={record.id}
                    record={record}
                    onDelete={() => handleDeleteRecord(record.id)}
                  />
                ))}
              </View>
            ) : (
              <View style={styles.noRecordsContainer}>
                <Image 
                  source={require('@/assets/images/icons/IconGlass.png')} 
                  style={{ width: 60, height: 60, opacity: 0.5, marginBottom: 16 }} 
                />
                <Text style={styles.noRecordsText}>{t('waterDetail.noRecords')}</Text>
                <Text style={styles.noRecordsSubText}>{t('waterDetail.noRecordsSubtitle')}</Text>
              </View>
            )}
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f3f4fb',
  },
  topGradient: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    height: 300,
  },
  keyboardAvoidingView: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    paddingBottom: 40,
  },
  headerBlock: {
    paddingHorizontal: 24,
    marginTop: 10,
    marginBottom: 24,
  },
  pageTitle: {
    fontSize: 28,
    fontWeight: '800',
    color: '#1c1f3a',
    fontFamily: 'AliBold',
    marginBottom: 4,
  },
  pageSubtitle: {
    fontSize: 16,
    color: '#6f7ba7',
    fontFamily: 'AliRegular',
  },
  
  // 进度卡片
  progressCard: {
    marginHorizontal: 24,
    marginBottom: 32,
    padding: 24,
    borderRadius: 28,
    backgroundColor: '#ffffff',
    shadowColor: 'rgba(30, 41, 59, 0.1)',
    shadowOffset: { width: 0, height: 10 },
    shadowOpacity: 0.18,
    shadowRadius: 20,
    elevation: 8,
  },
  progressInfo: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
    marginBottom: 16,
  },
  progressLabel: {
    fontSize: 14,
    color: '#6f7ba7',
    marginBottom: 6,
    fontFamily: 'AliRegular',
  },
  progressValue: {
    fontSize: 32,
    fontWeight: '800',
    color: '#4F5BD5',
    fontFamily: 'AliBold',
    lineHeight: 32,
  },
  progressGoalValue: {
    fontSize: 24,
    fontWeight: '700',
    color: '#1c1f3a',
    fontFamily: 'AliBold',
    lineHeight: 32,
  },
  progressUnit: {
    fontSize: 16,
    fontWeight: '600',
    color: '#6f7ba7',
    marginLeft: 2,
    fontFamily: 'AliRegular',
  },
  progressBarBg: {
    height: 12,
    backgroundColor: '#F0F2F5',
    borderRadius: 6,
    overflow: 'hidden',
  },
  progressBarFill: {
    height: '100%',
    borderRadius: 6,
  },

  section: {
    paddingHorizontal: 24,
  },
  
  // 记录列表样式
  recordsList: {
    gap: 16,
  },
  recordCardContainer: {
    shadowColor: 'rgba(30, 41, 59, 0.08)',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.12,
    shadowRadius: 12,
    elevation: 4,
    marginBottom: 2, 
  },
  recordCard: {
    borderRadius: 24,
    padding: 18,
    backgroundColor: '#ffffff',
  },
  recordMainContent: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  recordIconContainer: {
    width: 48,
    height: 48,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#f5f6ff',
  },
  recordIcon: {
    width: 24,
    height: 24,
  },
  recordInfo: {
    flex: 1,
    marginLeft: 16,
  },
  recordLabel: {
    fontSize: 16,
    fontWeight: '700',
    color: '#1c1f3a',
    marginBottom: 4,
    fontFamily: 'AliBold',
  },
  recordTimeContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  recordTimeText: {
    fontSize: 13,
    color: '#6f7ba7',
    fontFamily: 'AliRegular',
  },
  recordAmountContainer: {
    alignItems: 'flex-end',
  },
  recordAmount: {
    fontSize: 18,
    fontWeight: '700',
    color: '#4F5BD5',
    fontFamily: 'AliBold',
  },
  recordNote: {
    marginTop: 14,
    padding: 12,
    backgroundColor: '#F8F9FC',
    borderRadius: 12,
    fontSize: 13,
    lineHeight: 18,
    color: '#5f6a97',
    fontFamily: 'AliRegular',
  },
  deleteSwipeButton: {
    backgroundColor: '#FF6B6B',
    justifyContent: 'center',
    alignItems: 'center',
    width: 70,
    height: '100%',
    borderRadius: 24,
    marginLeft: 12,
  },
  
  noRecordsContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 60,
    backgroundColor: '#ffffff',
    borderRadius: 28,
    shadowColor: 'rgba(30, 41, 59, 0.06)',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 12,
  },
  noRecordsText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#1c1f3a',
    marginBottom: 8,
    fontFamily: 'AliBold',
  },
  noRecordsSubText: {
    fontSize: 14,
    color: '#9ba3c7',
    fontFamily: 'AliRegular',
  },

  // Settings Button
  settingsButtonWrapper: {
    width: 40,
    height: 40,
    borderRadius: 20,
    overflow: 'hidden',
  },
  settingsButtonGlass: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
  },
  settingsButtonFallback: {
    width: 40,
    height: 40,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 20,
    backgroundColor: '#ffffff',
    borderWidth: 1,
    borderColor: 'rgba(0,0,0,0.05)',
  },
});

export default WaterDetail;