import { Colors, palette } from '@/constants/Colors';
import { MedicalRecordItem } from '@/services/healthProfile';
import { Ionicons } from '@expo/vector-icons';
import dayjs from 'dayjs';
import { Image } from 'expo-image';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

interface MedicalRecordCardProps {
  item: MedicalRecordItem;
  onPress: (item: MedicalRecordItem) => void;
  onDelete: (item: MedicalRecordItem) => void;
}

export const MedicalRecordCard: React.FC<MedicalRecordCardProps> = ({ item, onPress, onDelete }) => {
  const firstAttachment = item.images && item.images.length > 0 ? item.images[0] : null;
  const isPdf = firstAttachment?.toLowerCase().endsWith('.pdf');

  return (
    <TouchableOpacity 
      style={styles.container} 
      onPress={() => onPress(item)}
      activeOpacity={0.8}
    >
      <View style={styles.thumbnailContainer}>
        {firstAttachment ? (
          isPdf ? (
            <View style={styles.pdfThumbnail}>
              <Ionicons name="document-text" size={32} color="#EF4444" />
              <Text style={styles.pdfText}>PDF</Text>
            </View>
          ) : (
            <Image
              source={{ uri: firstAttachment }}
              style={styles.thumbnail}
              contentFit="cover"
              transition={200}
            />
          )
        ) : (
          <View style={styles.placeholderThumbnail}>
            <Ionicons name="document-text-outline" size={32} color={palette.gray[300]} />
          </View>
        )}
        
        {item.images && item.images.length > 1 && (
          <View style={styles.badge}>
            <Text style={styles.badgeText}>+{item.images.length - 1}</Text>
          </View>
        )}
      </View>
      
      <View style={styles.content}>
        <Text style={styles.title} numberOfLines={1}>{item.title}</Text>
        <Text style={styles.date}>{dayjs(item.date).format('YYYY-MM-DD')}</Text>
      </View>

      <TouchableOpacity 
        style={styles.deleteButton} 
        onPress={() => onDelete(item)}
        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
      >
        <Ionicons name="trash-outline" size={16} color={palette.gray[400]} />
      </TouchableOpacity>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FFFFFF',
    borderRadius: 16,
    marginBottom: 12,
    shadowColor: palette.gray[200],
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 8,
    elevation: 2,
    overflow: 'hidden',
    flexDirection: 'row',
    height: 100,
  },
  thumbnailContainer: {
    width: 100,
    height: '100%',
    backgroundColor: palette.gray[50],
    position: 'relative',
  },
  thumbnail: {
    width: '100%',
    height: '100%',
  },
  pdfThumbnail: {
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F3F4F6',
  },
  pdfText: {
    fontSize: 10,
    marginTop: 4,
    color: '#EF4444',
    fontWeight: '600',
  },
  placeholderThumbnail: {
    width: '100%',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: palette.gray[50],
  },
  badge: {
    position: 'absolute',
    right: 8,
    bottom: 8,
    backgroundColor: 'rgba(0,0,0,0.6)',
    borderRadius: 10,
    paddingHorizontal: 6,
    paddingVertical: 2,
  },
  badgeText: {
    color: '#FFFFFF',
    fontSize: 10,
    fontWeight: '600',
  },
  content: {
    flex: 1,
    padding: 12,
    justifyContent: 'center',
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
    color: palette.gray[800],
    marginBottom: 4,
    fontFamily: 'AliBold',
  },
  date: {
    fontSize: 12,
    color: palette.purple[600],
    fontWeight: '500',
    fontFamily: 'AliRegular',
  },
  deleteButton: {
    position: 'absolute',
    top: 8,
    right: 8,
    padding: 4,
  },
});