import React from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { useTheme } from '@theme';
import { getStyles } from './notificationItem.styles';
import { NotificationItem as NotificationItemType } from '@interfaces';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

dayjs.extend(relativeTime);

interface NotificationItemProps {
  item: NotificationItemType;
  onPress?: (item: NotificationItemType) => void;
}

export const NotificationItem: React.FC<NotificationItemProps> = ({ item, onPress }) => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  const isUnread = String(item.isread) === '0';
  const cleanImageUrl = item.profile_image ? item.profile_image.replace(/"/g, '').trim() : '';

  return (
    <TouchableOpacity
      style={[styles.card, isUnread && styles.unreadCard]}
      activeOpacity={0.7}
      onPress={() => onPress && onPress(item)}
    >
      <View style={styles.iconWrapper}>
        {cleanImageUrl ? (
          <Image
            source={{ uri: cleanImageUrl }}
            style={styles.profileImage}
            resizeMode="cover"
          />
        ) : (
          <Icon name="person-circle-outline" size={38} color={colors.icon ?? '#888'} />
        )}
      </View>

      <View style={styles.contentContainer}>
        <View style={styles.titleRow}>
          <Text style={styles.title} numberOfLines={1}>
            {item.from_fullname || 'Notification'}
          </Text>
          <Text style={styles.time}>{dayjs(item.full_date || item.date).fromNow()}</Text>
          {isUnread && <View style={styles.unreadDot} />}
        </View>
        <Text style={styles.description} numberOfLines={2}>
          {item.description}
        </Text>
      </View>
    </TouchableOpacity>
  );
};