/** Notification list row with type icon + unread state. */
import React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {COLORS} from '../theme/colors';
import {RADIUS, SPACING} from '../theme/spacing';
import type {NotificationType} from '../types/models';
import {timeAgo} from '../utils/formatters';

const ICONS: Record<NotificationType, {icon: string; color: string}> = {
  new_follower: {icon: 'person-add', color: COLORS.purple},
  new_message: {icon: 'chatbubble', color: COLORS.violet},
  room_invite: {icon: 'mic', color: COLORS.magenta},
  gift_received: {icon: 'gift', color: COLORS.pink},
  event_reminder: {icon: 'calendar', color: COLORS.gold},
  account_verification: {icon: 'shield-checkmark', color: COLORS.success},
  wallet_transaction: {icon: 'wallet', color: COLORS.gold},
  moderation_notice: {icon: 'warning', color: COLORS.danger},
  system_announcement: {icon: 'megaphone', color: COLORS.secondaryText},
};

interface Props {
  title: string;
  body: string;
  type: NotificationType | string;
  isRead: boolean;
  createdAt: string;
  onPress: () => void;
}

export function NotificationRow({title, body, type, isRead, createdAt, onPress}: Props): React.JSX.Element {
  const meta = ICONS[type as NotificationType] ?? ICONS.system_announcement;
  return (
    <TouchableOpacity style={[styles.row, !isRead && styles.unread]} onPress={onPress} activeOpacity={0.75}>
      <View style={[styles.iconWrap, {backgroundColor: `${meta.color}22`}]}>
        <Icon name={meta.icon} size={18} color={meta.color} />
      </View>
      <View style={{flex: 1}}>
        <Text style={[styles.title, !isRead && styles.titleUnread]} numberOfLines={1}>
          {title}
        </Text>
        <Text style={styles.body} numberOfLines={2}>
          {body}
        </Text>
      </View>
      <Text style={styles.time}>{timeAgo(createdAt)}</Text>
      {!isRead ? <View style={styles.dot} /> : null}
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: SPACING.m,
    backgroundColor: COLORS.cardBg,
    borderRadius: RADIUS.m,
    padding: SPACING.l,
    marginBottom: SPACING.s,
  },
  unread: {backgroundColor: 'rgba(139,69,255,0.14)', borderWidth: 1, borderColor: 'rgba(139,69,255,0.35)'},
  iconWrap: {width: 40, height: 40, borderRadius: 12, alignItems: 'center', justifyContent: 'center'},
  title: {color: COLORS.secondaryText, fontWeight: '700', fontSize: 13},
  titleUnread: {color: COLORS.white},
  body: {color: COLORS.secondaryText, fontSize: 12, marginTop: 2},
  time: {color: COLORS.secondaryText, fontSize: 10},
  dot: {width: 8, height: 8, borderRadius: 4, backgroundColor: COLORS.magenta},
});