import React, { useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Alert,
  ScrollView,
} from 'react-native';
import { useNotifications } from '../hooks/useNotifications';
import { ThemedText } from './ThemedText';
import { ThemedView } from './ThemedView';

export const NotificationTest: React.FC = () => {
  const {
    isInitialized,
    permissionStatus,
    requestPermission,
    sendNotification,
    scheduleNotification,
    scheduleRepeatingNotification,
    cancelAllNotifications,
    getAllScheduledNotifications,
    sendWorkoutReminder,
    sendGoalAchievement,
    sendMoodCheckinReminder,
    debugNotificationStatus,
  } = useNotifications();

  const [scheduledNotifications, setScheduledNotifications] = useState<any[]>([]);

  const handleRequestPermission = async () => {
    try {
      const status = await requestPermission();
      Alert.alert('权限状态', `通知权限: ${status}`);
    } catch (error) {
      Alert.alert('错误', '请求权限失败');
    }
  };

  const handleSendImmediateNotification = async () => {
    try {
      await sendNotification({
        title: '测试通知',
        body: '这是一个立即发送的测试通知',
        sound: true,
        priority: 'high',
      });
      Alert.alert('成功', '通知已发送');
    } catch (error) {
      Alert.alert('错误', '发送通知失败');
    }
  };

  const handleScheduleNotification = async () => {
    try {
      const futureDate = new Date(Date.now() + 5000); // 5秒后
      await scheduleNotification(
        {
          title: '定时通知',
          body: '这是一个5秒后发送的定时通知',
          sound: true,
          priority: 'normal',
        },
        futureDate
      );
      Alert.alert('成功', '定时通知已安排');
    } catch (error) {
      Alert.alert('错误', '安排定时通知失败');
    }
  };

  const handleScheduleRepeatingNotification = async () => {
    try {
      await scheduleRepeatingNotification(
        {
          title: '重复通知',
          body: '这是一个每分钟重复的通知',
          sound: true,
          priority: 'normal',
        },
        { minutes: 1 }
      );
      Alert.alert('成功', '重复通知已安排');
    } catch (error) {
      Alert.alert('错误', '安排重复通知失败');
    }
  };

  const handleSendWorkoutReminder = async () => {
    try {
      await sendWorkoutReminder('运动提醒', '该开始今天的普拉提训练了！');
      Alert.alert('成功', '运动提醒已发送');
    } catch (error) {
      Alert.alert('错误', '发送运动提醒失败');
    }
  };

  const handleSendGoalAchievement = async () => {
    try {
      await sendGoalAchievement('目标达成', '恭喜您完成了本周的运动目标！');
      Alert.alert('成功', '目标达成通知已发送');
    } catch (error) {
      Alert.alert('错误', '发送目标达成通知失败');
    }
  };

  const handleSendMoodCheckinReminder = async () => {
    try {
      await sendMoodCheckinReminder('心情打卡', '记得记录今天的心情状态哦');
      Alert.alert('成功', '心情打卡提醒已发送');
    } catch (error) {
      Alert.alert('错误', '发送心情打卡提醒失败');
    }
  };

  const handleCancelAllNotifications = async () => {
    try {
      await cancelAllNotifications();
      Alert.alert('成功', '所有通知已取消');
    } catch (error) {
      Alert.alert('错误', '取消通知失败');
    }
  };

  const handleGetScheduledNotifications = async () => {
    try {
      const notifications = await getAllScheduledNotifications();
      setScheduledNotifications(notifications);
      Alert.alert('成功', `找到 ${notifications.length} 个已安排的通知`);
    } catch (error) {
      Alert.alert('错误', '获取已安排通知失败');
    }
  };

  const handleDebugNotificationStatus = async () => {
    try {
      await debugNotificationStatus();
      Alert.alert('调试完成', '请查看控制台输出');
    } catch (error) {
      Alert.alert('错误', '调试失败');
    }
  };

  return (
    <ThemedView style={styles.container}>
      <ScrollView showsVerticalScrollIndicator={false}>
        <ThemedText style={styles.title}>推送通知测试</ThemedText>
        
        <View style={styles.statusContainer}>
          <ThemedText style={styles.statusText}>
            初始化状态: {isInitialized ? '已初始化' : '未初始化'}
          </ThemedText>
          <ThemedText style={styles.statusText}>
            权限状态: {permissionStatus || '未知'}
          </ThemedText>
        </View>

        <View style={styles.buttonContainer}>
          <TouchableOpacity
            style={styles.button}
            onPress={handleRequestPermission}
          >
            <ThemedText style={styles.buttonText}>请求通知权限</ThemedText>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.button}
            onPress={handleSendImmediateNotification}
          >
            <ThemedText style={styles.buttonText}>发送立即通知</ThemedText>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.button}
            onPress={handleScheduleNotification}
          >
            <ThemedText style={styles.buttonText}>安排定时通知(5秒后)</ThemedText>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.button}
            onPress={handleScheduleRepeatingNotification}
          >
            <ThemedText style={styles.buttonText}>安排重复通知(每分钟)</ThemedText>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.button}
            onPress={handleSendWorkoutReminder}
          >
            <ThemedText style={styles.buttonText}>发送运动提醒</ThemedText>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.button}
            onPress={handleSendGoalAchievement}
          >
            <ThemedText style={styles.buttonText}>发送目标达成通知</ThemedText>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.button}
            onPress={handleSendMoodCheckinReminder}
          >
            <ThemedText style={styles.buttonText}>发送心情打卡提醒</ThemedText>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.button}
            onPress={handleGetScheduledNotifications}
          >
            <ThemedText style={styles.buttonText}>获取已安排通知</ThemedText>
          </TouchableOpacity>

          <TouchableOpacity
            style={[styles.button, styles.debugButton]}
            onPress={handleDebugNotificationStatus}
          >
            <ThemedText style={styles.buttonText}>调试通知状态</ThemedText>
          </TouchableOpacity>

          <TouchableOpacity
            style={[styles.button, styles.dangerButton]}
            onPress={handleCancelAllNotifications}
          >
            <ThemedText style={styles.buttonText}>取消所有通知</ThemedText>
          </TouchableOpacity>
        </View>

        {scheduledNotifications.length > 0 && (
          <View style={styles.notificationsContainer}>
            <ThemedText style={styles.sectionTitle}>已安排的通知:</ThemedText>
            {scheduledNotifications.map((notification, index) => (
              <View key={index} style={styles.notificationItem}>
                <ThemedText style={styles.notificationTitle}>
                  {notification.content.title}
                </ThemedText>
                <ThemedText style={styles.notificationBody}>
                  {notification.content.body}
                </ThemedText>
                <ThemedText style={styles.notificationId}>
                  ID: {notification.identifier}
                </ThemedText>
              </View>
            ))}
          </View>
        )}
      </ScrollView>
    </ThemedView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  statusContainer: {
    backgroundColor: 'rgba(0, 0, 0, 0.05)',
    padding: 15,
    borderRadius: 10,
    marginBottom: 20,
  },
  statusText: {
    fontSize: 14,
    marginBottom: 5,
  },
  buttonContainer: {
    gap: 10,
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
  },
  dangerButton: {
    backgroundColor: '#FF3B30',
  },
  debugButton: {
    backgroundColor: '#FF9500',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '600',
  },
  notificationsContainer: {
    marginTop: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  notificationItem: {
    backgroundColor: 'rgba(0, 0, 0, 0.05)',
    padding: 15,
    borderRadius: 10,
    marginBottom: 10,
  },
  notificationTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 5,
  },
  notificationBody: {
    fontSize: 14,
    marginBottom: 5,
  },
  notificationId: {
    fontSize: 12,
    opacity: 0.7,
  },
});