<template>
  <div class="relative">
    <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>
          <div class="flex items-center gap-1">
            <span class="text-xs text-[var(--wa-text-muted)]">{{ formatTime(chat.lastMessageAt) }}</span>
            <!-- Debug button -->
            <button
              @click.stop="showDebug = !showDebug"
              class="text-xs text-[var(--wa-text-muted)] hover:text-[var(--wa-blue)] opacity-50 hover:opacity-100"
              title="Debug info"
            >
              <UIcon name="i-lucide-bug" class="w-3 h-3" />
            </button>
          </div>
        </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>

    <!-- Debug panel -->
    <div
      v-if="showDebug"
      class="mx-2 mb-2 p-2 rounded bg-gray-900 border border-gray-700 text-xs font-mono overflow-x-auto"
    >
      <div class="flex items-center justify-between mb-1">
        <span class="text-gray-400">Chat:</span>
        <button
          @click.stop="copyToClipboard(JSON.stringify(chat, null, 2))"
          class="px-2 py-1 rounded bg-gray-700 hover:bg-gray-600 text-gray-300"
          title="Copiar al portapapeles"
        >
          <UIcon name="i-lucide-copy" class="w-3 h-3" />
        </button>
      </div>
      <pre class="text-green-400 whitespace-pre-wrap">{{ JSON.stringify(chat, null, 2) }}</pre>
    </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 showDebug = ref(false)

const copyToClipboard = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text)
  } catch (err) {
    console.error('Failed to copy:', err)
  }
}

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>
