import { Ionicons } from '@expo/vector-icons';
import React, { useState } from 'react';
import {
  Animated,
  Modal,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';

import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

// Sleep Stages Info Modal 组件
export const SleepStagesInfoModal = ({
  visible,
  onClose
}: {
  visible: boolean;
  onClose: () => void;
}) => {
  const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
  const colorTokens = Colors[theme];
  const slideAnim = useState(new Animated.Value(0))[0];

  React.useEffect(() => {
    if (visible) {
      slideAnim.setValue(0);
      Animated.spring(slideAnim, {
        toValue: 1,
        useNativeDriver: true,
        tension: 100,
        friction: 8,
      }).start();
    } else {
      Animated.spring(slideAnim, {
        toValue: 0,
        useNativeDriver: true,
        tension: 100,
        friction: 8,
      }).start();
    }
  }, [visible]);

  const translateY = slideAnim.interpolate({
    inputRange: [0, 1],
    outputRange: [300, 0],
  });

  const opacity = slideAnim.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1],
  });

  return (
    <Modal
      transparent
      visible={visible}
      animationType="none"
      onRequestClose={onClose}
    >
      <View style={styles.modalOverlay}>
        <Pressable
          style={StyleSheet.absoluteFillObject}
          onPress={onClose}
        />
        <Animated.View
          style={[
            styles.sleepStagesModalContent,
            {
              backgroundColor: colorTokens.background,
              transform: [{ translateY }],
              opacity,
            }
          ]}
        >
          <View style={styles.sleepStagesModalInner}>
            <View style={styles.modalHandle} />

            <View style={styles.sleepStagesModalHeader}>
              <Text style={[styles.sleepStagesModalTitle, { color: colorTokens.text }]}>
                了解你的睡眠阶段
              </Text>
              <TouchableOpacity onPress={onClose} style={styles.infoModalCloseButton}>
                <Ionicons name="close" size={24} color={colorTokens.textSecondary} />
              </TouchableOpacity>
            </View>

            <ScrollView
              style={styles.sleepStagesScrollView}
              contentContainerStyle={styles.sleepStagesScrollContent}
              showsVerticalScrollIndicator={false}
              bounces={true}
              scrollEnabled={true}
            >
              <Text style={[styles.sleepStagesDescription, { color: colorTokens.textSecondary }]}>
                人们对睡眠阶段和睡眠质量有许多误解。有些人可能需要更多深度睡眠，其他人则不然。科学家和医生仍在探索不同睡眠阶段的作用及其对身体的影响。通过跟踪睡眠阶段并留意每天清晨的感受，你或许能深入了解自己的睡眠。
              </Text>

              {/* 清醒时间 */}
              <View style={styles.sleepStageInfoCard}>
                <View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
                  <View style={styles.sleepStageInfoTitleContainer}>
                    <View style={[styles.sleepStageDot, { backgroundColor: '#F59E0B' }]} />
                    <Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>清醒时间</Text>
                  </View>
                </View>
                <Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
                  一次睡眠期间，你可能会醒来几次。偶尔醒来很正常。可能你会立刻再次入睡，并不记得曾在夜间醒来。
                </Text>
              </View>

              {/* 快速动眼睡眠 */}
              <View style={styles.sleepStageInfoCard}>
                <View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
                  <View style={styles.sleepStageInfoTitleContainer}>
                    <View style={[styles.sleepStageDot, { backgroundColor: '#EC4899' }]} />
                    <Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>快速动眼睡眠</Text>
                  </View>
                </View>
                <Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
                  这一睡眠阶段可能对学习和记忆产生一定影响。在此阶段，你的肌肉最为放松，眼球也会快速左右移动。这也是你大多数梦境出现的阶段。
                </Text>
              </View>

              {/* 核心睡眠 */}
              <View style={styles.sleepStageInfoCard}>
                <View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
                  <View style={styles.sleepStageInfoTitleContainer}>
                    <View style={[styles.sleepStageDot, { backgroundColor: '#8B5CF6' }]} />
                    <Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>核心睡眠</Text>
                  </View>
                </View>
                <Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
                  这一阶段有时也称为浅睡期，与其他阶段一样重要。此阶段通常占据你每晚大部分的睡眠时间。对于认知至关重要的脑电波会在这一阶段产生。
                </Text>
              </View>

              {/* 深度睡眠 */}
              <View style={styles.sleepStageInfoCard}>
                <View style={[styles.sleepStageInfoHeader, { borderBottomColor: colorTokens.border }]}>
                  <View style={styles.sleepStageInfoTitleContainer}>
                    <View style={[styles.sleepStageDot, { backgroundColor: '#3B82F6' }]} />
                    <Text style={[styles.sleepStageInfoTitle, { color: colorTokens.text }]}>深度睡眠</Text>
                  </View>
                </View>
                <Text style={[styles.sleepStageInfoContent, { color: colorTokens.textSecondary }]}>
                  因为脑电波的特征，这一阶段也称为慢波睡眠。在此阶段，身体组织得到修复，并释放重要荷尔蒙。它通常出现在睡眠的前半段，且持续时间较长。深度睡眠期间，身体非常放松，因此相较于其他阶段，你可能更难在此阶段醒来。
                </Text>
              </View>
            </ScrollView>
          </View>
        </Animated.View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  modalHandle: {
    width: 36,
    height: 4,
    backgroundColor: '#D1D5DB',
    borderRadius: 2,
    alignSelf: 'center',
    marginBottom: 20,
  },
  infoModalCloseButton: {
    padding: 4,
  },
  // Sleep Stages Modal 样式
  sleepStagesModalContent: {
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    height: '80%',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -4 },
    shadowOpacity: 0.1,
    shadowRadius: 16,
    elevation: 8,
  },
  sleepStagesModalInner: {
    flex: 1,
    paddingTop: 12,
    paddingHorizontal: 20,
    paddingBottom: 34,
  },
  sleepStagesModalHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
  },
  sleepStagesModalTitle: {
    fontSize: 20,
    fontWeight: '700',
    letterSpacing: -0.4,
  },
  sleepStagesScrollView: {
    flex: 1,
  },
  sleepStagesScrollContent: {
    paddingBottom: 40,
  },
  sleepStagesDescription: {
    fontSize: 15,
    lineHeight: 22,
    letterSpacing: -0.1,
    marginBottom: 24,
  },
  sleepStageInfoCard: {
    marginBottom: 20,
  },
  sleepStageInfoHeader: {
    paddingBottom: 12,
    marginBottom: 12,
  },
  sleepStageInfoTitleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  sleepStageDot: {
    width: 12,
    height: 12,
    borderRadius: 6,
  },
  sleepStageInfoTitle: {
    fontSize: 18,
    fontWeight: '600',
    letterSpacing: -0.2,
  },
  sleepStageInfoContent: {
    fontSize: 15,
    lineHeight: 22,
    letterSpacing: -0.1,
  },
});