import { ThemedText } from '@/components/ThemedText';
import { useI18n } from '@/hooks/useI18n';
import { useNotifications } from '@/hooks/useNotifications';
import {
  getMedicationReminderEnabled,
  getMoodReminderEnabled,
  getNotificationEnabled,
  getNutritionReminderEnabled,
  setMedicationReminderEnabled,
  setMoodReminderEnabled,
  setNotificationEnabled,
  setNutritionReminderEnabled
} from '@/utils/userPreferences';
import { Ionicons } from '@expo/vector-icons';
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
import { LinearGradient } from 'expo-linear-gradient';
import { router, useFocusEffect } from 'expo-router';
import React, { useCallback, useState } from 'react';
import { Alert, Linking, ScrollView, StatusBar, StyleSheet, Switch, Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export default function NotificationSettingsScreen() {
  const insets = useSafeAreaInsets();
  const { t } = useI18n();
  const { requestPermission, sendNotification } = useNotifications();
  const isLgAvailable = isLiquidGlassAvailable();

  // 通知设置状态
  const [notificationEnabled, setNotificationEnabledState] = useState(false);
  const [medicationReminderEnabled, setMedicationReminderEnabledState] = useState(false);
  const [nutritionReminderEnabled, setNutritionReminderEnabledState] = useState(false);
  const [moodReminderEnabled, setMoodReminderEnabledState] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  // 加载通知设置
  const loadNotificationSettings = useCallback(async () => {
    try {
      const [notification, medicationReminder, nutritionReminder, moodReminder] = await Promise.all([
        getNotificationEnabled(),
        getMedicationReminderEnabled(),
        getNutritionReminderEnabled(),
        getMoodReminderEnabled(),
      ]);
      setNotificationEnabledState(notification);
      setMedicationReminderEnabledState(medicationReminder);
      setNutritionReminderEnabledState(nutritionReminder);
      setMoodReminderEnabledState(moodReminder);
    } catch (error) {
      console.error('Failed to load notification settings:', error);
    } finally {
      setIsLoading(false);
    }
  }, []);

  // 页面聚焦时加载设置
  useFocusEffect(
    useCallback(() => {
      loadNotificationSettings();
    }, [loadNotificationSettings])
  );

  // 处理总通知开关变化
  const handleNotificationToggle = async (value: boolean) => {
    if (value) {
      try {
        // 先检查系统权限
        const status = await requestPermission();
        if (status === 'granted') {
          // 系统权限获取成功，保存用户偏好设置
          await setNotificationEnabled(true);
          setNotificationEnabledState(true);

          // 发送测试通知
          await sendNotification({
            title: t('notificationSettings.alerts.notificationsEnabled.title'),
            body: t('notificationSettings.alerts.notificationsEnabled.body'),
            sound: true,
            priority: 'normal',
          });
        } else {
          // 系统权限被拒绝，不更新用户偏好设置
          Alert.alert(
            t('notificationSettings.alerts.permissionDenied.title'),
            t('notificationSettings.alerts.permissionDenied.message'),
            [
              { text: t('notificationSettings.alerts.permissionDenied.cancel'), style: 'cancel' },
              { text: t('notificationSettings.alerts.permissionDenied.goToSettings'), onPress: () => Linking.openSettings() }
            ]
          );
        }
      } catch (error) {
        console.error('Failed to enable push notifications:', error);
        Alert.alert(t('notificationSettings.alerts.error.title'), t('notificationSettings.alerts.error.message'));
      }
    } else {
      try {
        // 关闭推送，保存用户偏好设置
        await setNotificationEnabled(false);
        setNotificationEnabledState(false);
        // 关闭总开关时，也关闭所有提醒
        await setMedicationReminderEnabled(false);
        setMedicationReminderEnabledState(false);
        await setNutritionReminderEnabled(false);
        setNutritionReminderEnabledState(false);
        await setMoodReminderEnabled(false);
        setMoodReminderEnabledState(false);
      } catch (error) {
        console.error('Failed to disable push notifications:', error);
        Alert.alert(t('notificationSettings.alerts.error.title'), t('notificationSettings.alerts.error.saveFailed'));
      }
    }
  };

  // 处理药品通知提醒开关变化
  const handleMedicationReminderToggle = async (value: boolean) => {
    try {
      await setMedicationReminderEnabled(value);
      setMedicationReminderEnabledState(value);
      
      if (value) {
        // 发送测试通知
        await sendNotification({
          title: t('notificationSettings.alerts.medicationReminderEnabled.title'),
          body: t('notificationSettings.alerts.medicationReminderEnabled.body'),
          sound: true,
          priority: 'high',
        });
      }
    } catch (error) {
      console.error('Failed to set medication reminder:', error);
      Alert.alert(t('notificationSettings.alerts.error.title'), t('notificationSettings.alerts.error.medicationReminderFailed'));
    }
  };

  // 处理营养通知提醒开关变化
  const handleNutritionReminderToggle = async (value: boolean) => {
    try {
      await setNutritionReminderEnabled(value);
      setNutritionReminderEnabledState(value);
      
      if (value) {
        // 发送测试通知
        await sendNotification({
          title: t('notificationSettings.alerts.nutritionReminderEnabled.title'),
          body: t('notificationSettings.alerts.nutritionReminderEnabled.body'),
          sound: true,
          priority: 'high',
        });
      }
    } catch (error) {
      console.error('Failed to set nutrition reminder:', error);
      Alert.alert(t('notificationSettings.alerts.error.title'), t('notificationSettings.alerts.error.nutritionReminderFailed'));
    }
  };

  // 处理心情通知提醒开关变化
  const handleMoodReminderToggle = async (value: boolean) => {
    try {
      await setMoodReminderEnabled(value);
      setMoodReminderEnabledState(value);
      
      if (value) {
        // 发送测试通知
        await sendNotification({
          title: t('notificationSettings.alerts.moodReminderEnabled.title'),
          body: t('notificationSettings.alerts.moodReminderEnabled.body'),
          sound: true,
          priority: 'high',
        });
      }
    } catch (error) {
      console.error('Failed to set mood reminder:', error);
      Alert.alert(t('notificationSettings.alerts.error.title'), t('notificationSettings.alerts.error.moodReminderFailed'));
    }
  };

  // 返回按钮
  const BackButton = () => (
    <TouchableOpacity
      onPress={() => router.back()}
      style={styles.backButton}
      activeOpacity={0.7}
    >
      {isLgAvailable ? (
        <GlassView
          style={styles.glassButton}
          glassEffectStyle="clear"
          tintColor="rgba(255, 255, 255, 0.3)"
          isInteractive={true}
        >
          <Ionicons name="chevron-back" size={24} color="#333" />
        </GlassView>
      ) : (
        <View style={[styles.glassButton, styles.fallbackButton]}>
          <Ionicons name="chevron-back" size={24} color="#333" />
        </View>
      )}
    </TouchableOpacity>
  );

  // 开关项组件
  const SwitchItem = ({ 
    title, 
    description, 
    value, 
    onValueChange, 
    disabled = false 
  }: {
    title: string;
    description: string;
    value: boolean;
    onValueChange: (value: boolean) => void;
    disabled?: boolean;
  }) => (
    <View style={styles.switchItem}>
      <View style={styles.switchItemLeft}>
        <Text style={styles.switchItemTitle}>{title}</Text>
        <Text style={styles.switchItemDescription}>{description}</Text>
      </View>
      <Switch
        value={value}
        onValueChange={onValueChange}
        disabled={disabled}
        trackColor={{ false: '#E5E5E5', true: '#9370DB' }}
        thumbColor="#FFFFFF"
        style={styles.switch}
      />
    </View>
  );

  if (isLoading) {
    return (
      <View style={styles.container}>
        <StatusBar barStyle="dark-content" backgroundColor="transparent" translucent />
        <LinearGradient
          colors={['#f5e5fbff', '#e5fcfeff', '#eefdffff', '#e6f6fcff']}
          style={styles.gradientBackground}
          start={{ x: 0, y: 0 }}
          end={{ x: 0, y: 1 }}
        />
        <View style={styles.loadingContainer}>
          <Text style={styles.loadingText}>{t('notificationSettings.loading')}</Text>
        </View>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor="transparent" translucent />
      
      {/* 背景渐变 */}
      <LinearGradient
        colors={['#f5e5fbff', '#e5fcfeff', '#eefdffff', '#e6f6fcff']}
        style={styles.gradientBackground}
        start={{ x: 0, y: 0 }}
        end={{ x: 0, y: 1 }}
      />

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

      <ScrollView
        style={styles.scrollView}
        contentContainerStyle={{
          paddingTop: insets.top + 20,
          paddingBottom: insets.bottom + 20,
          paddingHorizontal: 16,
        }}
        showsVerticalScrollIndicator={false}
      >
        {/* 头部 */}
        <View style={styles.header}>
          <BackButton />
          <ThemedText style={styles.title}>{t('notificationSettings.title')}</ThemedText>
        </View>

        {/* 通知设置部分 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>{t('notificationSettings.sections.notifications')}</Text>
          <View style={styles.card}>
            <SwitchItem
              title={t('notificationSettings.items.pushNotifications.title')}
              description={t('notificationSettings.items.pushNotifications.description')}
              value={notificationEnabled}
              onValueChange={handleNotificationToggle}
            />
          </View>
        </View>

        {/* 药品提醒部分 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>{t('notificationSettings.sections.medicationReminder')}</Text>
          <View style={styles.card}>
            <SwitchItem
              title={t('notificationSettings.items.medicationReminder.title')}
              description={t('notificationSettings.items.medicationReminder.description')}
              value={medicationReminderEnabled}
              onValueChange={handleMedicationReminderToggle}
              disabled={!notificationEnabled}
            />
          </View>
        </View>

        {/* 营养提醒部分 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>{t('notificationSettings.sections.nutritionReminder')}</Text>
          <View style={styles.card}>
            <SwitchItem
              title={t('notificationSettings.items.nutritionReminder.title')}
              description={t('notificationSettings.items.nutritionReminder.description')}
              value={nutritionReminderEnabled}
              onValueChange={handleNutritionReminderToggle}
              disabled={!notificationEnabled}
            />
          </View>
        </View>

        {/* 心情提醒部分 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>{t('notificationSettings.sections.moodReminder')}</Text>
          <View style={styles.card}>
            <SwitchItem
              title={t('notificationSettings.items.moodReminder.title')}
              description={t('notificationSettings.items.moodReminder.description')}
              value={moodReminderEnabled}
              onValueChange={handleMoodReminderToggle}
              disabled={!notificationEnabled}
            />
          </View>
        </View>

        {/* 说明部分 */}
        <View style={styles.section}>
          <Text style={styles.sectionTitle}>{t('notificationSettings.sections.description')}</Text>
          <View style={styles.card}>
            <Text style={styles.description}>
              {t('notificationSettings.description.text')}
            </Text>
          </View>
        </View>
      </ScrollView>
    </View>
  );
}

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,
  },
  scrollView: {
    flex: 1,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingText: {
    fontSize: 16,
    color: '#666',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 24,
  },
  backButton: {
    marginRight: 16,
  },
  glassButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  fallbackButton: {
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.3)',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#2C3E50',
  },
  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#2C3E50',
    marginBottom: 12,
    paddingHorizontal: 4,
  },
  card: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 2,
    overflow: 'hidden',
  },
  switchItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 16,
    paddingHorizontal: 16,
  },
  switchItemLeft: {
    flex: 1,
    marginRight: 16,
  },
  switchItemTitle: {
    fontSize: 16,
    fontWeight: '500',
    color: '#2C3E50',
    marginBottom: 4,
  },
  switchItemDescription: {
    fontSize: 14,
    color: '#6C757D',
    lineHeight: 20,
  },
  switch: {
    transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }],
  },
  description: {
    fontSize: 14,
    color: '#6C757D',
    lineHeight: 22,
    paddingVertical: 16,
    paddingHorizontal: 16,
  },
});