<template>
  <div
    class="flex items-center gap-3 p-3 cursor-pointer transition-colors hover:bg-[var(--wa-bg-light)]"
    :class="{ 'bg-[var(--wa-bg-light)]': active }"
    @click="$emit('click')"
  >
    <UAvatar
      :alt="chat.name"
      size="md"
      :src="chat.profilePicture"
    />

    <div class="flex-1 min-w-0">
      <div class="flex items-center justify-between">
        <p class="font-medium text-[var(--wa-text)] truncate">{{ chat.name }}</p>
        <span class="text-xs text-[var(--wa-text-muted)]">{{ formatTime(chat.lastMessageAt) }}</span>
      </div>
      <div class="flex items-center justify-between">
        <p class="text-sm text-[var(--wa-text-muted)] truncate">{{ chat.lastMessage }}</p>
        <span
          v-if="chat.unreadCount > 0"
          class="bg-[var(--wa-green-light)] text-white text-xs rounded-full px-2 py-0.5"
        >
          {{ chat.unreadCount }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Chat {
  id: string
  name: string
  jid: string
  profilePicture?: string
  lastMessage: string
  lastMessageAt: Date
  unreadCount: number
}

interface Props {
  chat: Chat
  active?: boolean
}

defineProps<Props>()
defineEmits<{
  click: []
}>()

const formatTime = (date: Date) => {
  const d = new Date(date)
  const now = new Date()
  const diff = now.getTime() - d.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days === 0) {
    return d.toLocaleTimeString('es-AR', { hour: '2-digit', minute: '2-digit' })
  } else if (days === 1) {
    return 'Ayer'
  } else if (days < 7) {
    return d.toLocaleDateString('es-AR', { weekday: 'short' })
  } else {
    return d.toLocaleDateString('es-AR', { day: '2-digit', month: '2-digit' })
  }
}
</script>
