digital-pilates/components/medication/MedicationCard.tsx

import { ThemedText } from '@/components/ThemedText';
import { Ionicons } from '@expo/vector-icons';
import dayjs, { Dayjs } from 'dayjs';
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
import { Image } from 'expo-image';
import React from 'react';
import { StyleSheet, TouchableOpacity, View } from 'react-native';

export type MedicationStatus = 'upcoming' | 'taken' | 'missed';

export type Medication = {
  id: string;
  name: string;
  dosage: string;
  scheduledTime: string;
  frequency: string;
  status: MedicationStatus;
  image: any;
};

export type MedicationCardProps = {
  medication: Medication;
  colors: (typeof import('@/constants/Colors').Colors)[keyof typeof import('@/constants/Colors').Colors];
  selectedDate: Dayjs;
};

export function MedicationCard({ medication, colors, selectedDate }: MedicationCardProps) {
  const scheduledDate = dayjs(`${selectedDate.format('YYYY-MM-DD')} ${medication.scheduledTime}`);
  const timeDiffMinutes = scheduledDate.diff(dayjs(), 'minute');

  const renderStatusBadge = () => {
    if (medication.status === 'missed') {
      return (
        <View style={[styles.statusChip, styles.statusChipMissed]}>
          <ThemedText style={styles.statusChipText}>已错过</ThemedText>
        </View>
      );
    }

    if (medication.status === 'upcoming') {
      if (timeDiffMinutes <= 0) {
        return (
          <View style={[styles.statusChip, styles.statusChipUpcoming]}>
            <Ionicons name="time-outline" size={14} color="#fff" />
            <ThemedText style={styles.statusChipText}>到服药时间</ThemedText>
          </View>
        );
      }

      const hours = Math.floor(timeDiffMinutes / 60);
      const minutes = timeDiffMinutes % 60;
      const formatted =
        hours > 0 ? `${hours}小时${minutes > 0 ? `${minutes}分钟` : ''}` : `${minutes}分钟`;

      return (
        <View style={[styles.statusChip, styles.statusChipUpcoming]}>
          <Ionicons name="time-outline" size={14} color="#fff" />
          <ThemedText style={styles.statusChipText}>剩余 {formatted}</ThemedText>
        </View>
      );
    }

    return null;
  };

  const renderAction = () => {
    if (medication.status === 'taken') {
      return (
        <View style={[styles.actionButton, styles.actionButtonTaken]}>
          <Ionicons name="checkmark-circle" size={18} color="#fff" />
          <ThemedText style={styles.actionButtonText}>已服用</ThemedText>
        </View>
      );
    }

    if (medication.status === 'missed') {
      return (
        <TouchableOpacity
          activeOpacity={1}
          disabled={true}
          onPress={() => {
            // 已错过的药物不能服用
            console.log('已错过的药物不能服用');
          }}
        >
          {isLiquidGlassAvailable() ? (
            <GlassView
              style={[styles.actionButton, styles.actionButtonMissed]}
              glassEffectStyle="clear"
              tintColor="rgba(156, 163, 175, 0.3)"
              isInteractive={false}
            >
              <ThemedText style={styles.actionButtonTextMissed}>已错过</ThemedText>
            </GlassView>
          ) : (
            <View style={[styles.actionButton, styles.actionButtonMissed, styles.fallbackActionButtonMissed]}>
              <ThemedText style={styles.actionButtonTextMissed}>已错过</ThemedText>
            </View>
          )}
        </TouchableOpacity>
      );
    }

    return (
      <TouchableOpacity
        activeOpacity={0.7}
        onPress={() => {
          // TODO: 实现服药功能
          console.log('服药功能待实现');
        }}
      >
        {isLiquidGlassAvailable() ? (
          <GlassView
            style={[styles.actionButton, styles.actionButtonUpcoming]}
            glassEffectStyle="clear"
            tintColor="rgba(19, 99, 255, 0.3)"
            isInteractive={true}
          >
            <ThemedText style={styles.actionButtonText}>立即服用</ThemedText>
          </GlassView>
        ) : (
          <View style={[styles.actionButton, styles.actionButtonUpcoming, styles.fallbackActionButton]}>
            <ThemedText style={styles.actionButtonText}>立即服用</ThemedText>
          </View>
        )}
      </TouchableOpacity>
    );
  };

  const statusChip = renderStatusBadge();

  return (
    <View style={[styles.card, { shadowColor: colors.text }]}>
      <View style={[styles.cardSurface, { backgroundColor: colors.surface }]}>
        {statusChip ? <View style={styles.statusChipWrapper}>{statusChip}</View> : null}
        <View style={styles.cardBody}>
          <View style={styles.cardContent}>
            <View style={styles.thumbnailWrapper}>
              <View style={styles.thumbnailSurface}>
                <Image source={medication.image} style={styles.thumbnailImage} />
              </View>
            </View>
            <View style={styles.infoSection}>
              <ThemedText style={[styles.cardTitle, { color: colors.text }]}>
                {medication.name}
              </ThemedText>
              <ThemedText style={[styles.cardDosage, { color: colors.textSecondary }]}>
                {medication.dosage}
              </ThemedText>
              <View style={styles.scheduleRow}>
                <Ionicons
                  name="time-outline"
                  size={14}
                  color={colors.textSecondary}
                  style={styles.scheduleIcon}
                />
                <ThemedText style={[styles.cardSchedule, { color: colors.textSecondary }]}>
                  {medication.scheduledTime} | {medication.frequency}
                </ThemedText>
              </View>
              <View style={styles.actionContainer}>{renderAction()}</View>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    borderRadius: 26,
    shadowOpacity: 0.08,
    shadowOffset: { width: 0, height: 12 },
    shadowRadius: 24,
    elevation: 2,
    position: 'relative',
  },
  cardSurface: {
    borderRadius: 26,
    overflow: 'hidden',
  },
  cardBody: {
    paddingHorizontal: 20,
    paddingBottom: 20,
    paddingTop: 28,
  },
  cardContent: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 20,
  },
  thumbnailWrapper: {
    width: 126,
    height: 110,
  },
  thumbnailSurface: {
    flex: 1,
    borderRadius: 22,
    backgroundColor: '#F1F4FF',
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  thumbnailImage: {
    width: '80%',
    height: '80%',
    resizeMode: 'contain',
  },
  infoSection: {
    flex: 1,
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: '700',
  },
  cardDosage: {
    fontSize: 12,
    marginTop: 4,
  },
  scheduleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
  },
  cardSchedule: {
    fontSize: 12,
  },
  scheduleIcon: {
    marginTop: -1,
  },
  actionContainer: {
    marginTop: 8,
  },
  actionButton: {
    alignSelf: 'stretch',
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    justifyContent: 'center',
    height: 38,
    borderRadius: 24,
    overflow: 'hidden',
  },
  actionButtonUpcoming: {
    backgroundColor: '#1363FF',
  },
  actionButtonTaken: {
    backgroundColor: '#1FBF4B',
  },
  actionButtonMissed: {
    backgroundColor: '#9CA3AF',
  },
  fallbackActionButton: {
    borderWidth: 1,
    borderColor: 'rgba(19, 99, 255, 0.3)',
    backgroundColor: 'rgba(19, 99, 255, 0.9)',
  },
  fallbackActionButtonMissed: {
    borderWidth: 1,
    borderColor: 'rgba(156, 163, 175, 0.3)',
    backgroundColor: 'rgba(156, 163, 175, 0.9)',
  },
  actionButtonText: {
    fontSize: 14,
    fontWeight: '700',
    color: '#fff',
  },
  actionButtonTextMissed: {
    fontSize: 14,
    fontWeight: '700',
    color: '#fff',
  },
  statusChipWrapper: {
    position: 'absolute',
    top: 0,
    right: 0,
  },
  statusChip: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    paddingHorizontal: 10,
    height: 28,
    borderBottomLeftRadius: 20,
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0,
    backgroundColor: '#1363FF',
  },
  statusChipUpcoming: {
    backgroundColor: '#1363FF',
  },
  statusChipMissed: {
    backgroundColor: '#FF3B30',
  },
  statusChipText: {
    fontSize: 10,
    fontWeight: '600',
    color: '#fff',
  },
});