import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { colors } from '../../theme/colors';
import { typography } from '../../theme/typography';
import { spacing } from '../../theme/spacing';
import type { Notification } from '../../types/notification';
import { NOTIFICATION_TYPE_ICONS, getNotificationTypeColor } from '../../types/notification';

interface NotificationCardProps {
  notification: Notification;
  onPress: (notification: Notification) => void;
}

function formatRelativeTime(dateStr: string): string {
  const now = Date.now();
  const date = new Date(dateStr).getTime();
  const diff = now - date;
  const minutes = Math.floor(diff / 60000);
  if (minutes < 1) return 'только что';
  if (minutes < 60) return `${minutes} мин назад`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours} ч назад`;
  const days = Math.floor(hours / 24);
  if (days < 7) return `${days} дн назад`;
  return new Date(dateStr).toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' });
}

export function NotificationCard({
  notification,
  onPress,
}: NotificationCardProps): React.JSX.Element {
  const styles = createStyles();
  const iconName = NOTIFICATION_TYPE_ICONS[notification.type] ?? 'notifications';
  const iconColor = getNotificationTypeColor(notification.type) ?? colors.primary;

  return (
    <TouchableOpacity
      style={[styles.container, !notification.isRead && styles.unread]}
      activeOpacity={0.7}
      onPress={() => onPress(notification)}
    >
      <View style={[styles.iconContainer, { backgroundColor: `${iconColor}15` }]}>
        <Ionicons
          name={iconName as React.ComponentProps<typeof Ionicons>['name']}
          size={22}
          color={iconColor}
        />
      </View>
      <View style={styles.content}>
        <Text style={styles.title} numberOfLines={1}>
          {notification.title}
        </Text>
        <Text style={styles.body} numberOfLines={2}>
          {notification.body}
        </Text>
        <Text style={styles.time}>{formatRelativeTime(notification.sentAt)}</Text>
      </View>
      {!notification.isRead && <View style={styles.dot} />}
    </TouchableOpacity>
  );
}

const createStyles = () =>
  StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: colors.card,
      borderRadius: 12,
      padding: spacing.lg,
      marginBottom: spacing.sm,
      shadowColor: colors.black,
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.05,
      shadowRadius: 4,
      elevation: 2,
    },
    unread: {
      backgroundColor: '#FFF8F0',
    },
    iconContainer: {
      width: 44,
      height: 44,
      borderRadius: 22,
      alignItems: 'center',
      justifyContent: 'center',
      marginRight: spacing.md,
    },
    content: {
      flex: 1,
    },
    title: {
      ...typography.bodySmall,
      fontWeight: '600',
      color: colors.text,
    },
    body: {
      ...typography.caption,
      color: colors.textSecondary,
      marginTop: 2,
    },
    time: {
      ...typography.caption,
      color: colors.textMuted,
      marginTop: spacing.xs,
    },
    dot: {
      width: 8,
      height: 8,
      borderRadius: 4,
      backgroundColor: colors.primary,
      marginLeft: spacing.sm,
    },
  });
