import { fetchCompleteSleepData, formatSleepTime } from '@/utils/sleepHealthKit';
import { Image } from 'expo-image';
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

interface SleepCardProps {
  selectedDate?: Date;
  style?: object;
  onPress?: () => void;
}

const SleepCard: React.FC<SleepCardProps> = ({
  selectedDate,
  style,
  onPress
}) => {
  const [sleepDuration, setSleepDuration] = useState<number | null>(null);
  const [loading, setLoading] = useState(false);

  // 获取睡眠数据
  useEffect(() => {
    const loadSleepData = async () => {
      if (!selectedDate) return;

      try {
        setLoading(true);
        const data = await fetchCompleteSleepData(selectedDate);
        setSleepDuration(data?.totalSleepTime || null);
      } catch (error) {
        console.error('SleepCard: 获取睡眠数据失败:', error);
        setSleepDuration(null);
      } finally {
        setLoading(false);
      }
    };

    loadSleepData();
  }, [selectedDate]);

  const CardContent = (
    <View style={[styles.container, style]}>
      <View style={styles.cardHeaderRow}>
        <Image
          source={require('@/assets/images/icons/icon-sleep.png')}
          style={styles.titleIcon}
        />
        <Text style={styles.cardTitle}>睡眠</Text>
      </View>
      <Text style={styles.sleepValue}>
        {loading ? '加载中...' : (sleepDuration != null ? formatSleepTime(sleepDuration) : '--')}
      </Text>
    </View>
  );

  if (onPress) {
    return (
      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
        {CardContent}
      </TouchableOpacity>
    );
  }

  return CardContent;
};

const styles = StyleSheet.create({
  container: {
    // Container styles will be inherited from parent (FloatingCard)
  },
  cardHeaderRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
  titleIcon: {
    width: 16,
    height: 16,
    marginRight: 6,
    resizeMode: 'contain',
  },
  cardTitle: {
    fontSize: 14,
    color: '#192126',
    fontWeight: '600',
  },
  sleepValue: {
    fontSize: 16,
    color: '#1E40AF',
    fontWeight: '700',
    marginTop: 8,
  },
});

export default SleepCard;