import type { ConversationSummary } from '@chat-app/shared/chat';
import { Pressable, StyleSheet, Text, View } from 'react-native';

import { formatRelativeTime } from '../lib/timeFormat';
import { colors } from '../theme/colors';
import { Avatar } from './Avatar';

interface Props {
  conversation: ConversationSummary;
  lastMessagePreview: string;
  onPress: () => void;
}

export function ConversationRow({ conversation, lastMessagePreview, onPress }: Props) {
  const title =
    conversation.type === 'group'
      ? (conversation.name ?? 'Gruppe')
      : (conversation.peer?.displayName ?? '—');
  const subtitle =
    conversation.type === 'group'
      ? conversation.members.length + ' Mitglieder'
      : '@' + (conversation.peer?.username ?? '');

  return (
    <Pressable
      style={({ pressed }) => [styles.row, pressed && { backgroundColor: colors.surface }]}
      onPress={onPress}
    >
      <Avatar name={title} />
      <View style={styles.center}>
        <View style={styles.titleLine}>
          <Text style={styles.title} numberOfLines={1}>
            {title}
          </Text>
          <Text style={styles.time}>{formatRelativeTime(conversation.lastMessageAt)}</Text>
        </View>
        <Text style={styles.preview} numberOfLines={1}>
          {lastMessagePreview || subtitle}
        </Text>
      </View>
    </Pressable>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
    gap: 12,
  },
  center: { flex: 1, minWidth: 0 },
  titleLine: { flexDirection: 'row', alignItems: 'baseline', gap: 8 },
  title: { color: colors.text, fontSize: 15, fontWeight: '600', flex: 1 },
  time: { color: colors.textDim, fontSize: 11 },
  preview: { color: colors.textMuted, fontSize: 13, marginTop: 2 },
});