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


interface SleepCardProps {
  selectedDate?: Date;
  style?: object;
}

const SleepCard: React.FC<SleepCardProps> = ({
  selectedDate,
  style,
}) => {
  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>
  );

  return (
    <TouchableOpacity onPress={() => router.push(`/sleep-detail?date=${dayjs(selectedDate).format('YYYY-MM-DD')}`)} activeOpacity={0.7}>
      {CardContent}
    </TouchableOpacity>
  );
};

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;