<template>
  <div class="h-full w-full p-8">
    <div class="text-center">
      <h1 class="text-2xl font-bold mb-4">Chat Module</h1>
      <p class="text-muted-foreground mb-4">Status: {{ debugInfo.status }}</p>
      
      <div v-if="!debugInfo.isAuthenticated" class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded mb-4">
        <p><strong>Authentication Required:</strong> Please log in to use chat</p>
      </div>
      
      <div v-else-if="!debugInfo.hasNostrKeys" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
        <p><strong>Nostr Keys Missing:</strong> Your account needs Nostr keys configured</p>
        <p class="text-sm mt-2">Key status: {{ debugInfo.keyStatus.message }}</p>
      </div>
      
      <div v-else-if="!debugInfo.isConnected" class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4">
        <p><strong>Connecting to Nostr relays...</strong></p>
      </div>
      
      <div v-else class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
        <p><strong>Ready!</strong> Chat should work now</p>
        <ChatComponent />
      </div>
      
      <details class="mt-8 text-left">
        <summary class="cursor-pointer font-semibold">Debug Info</summary>
        <pre class="mt-4 p-4 bg-gray-100 rounded text-xs overflow-auto">{{ JSON.stringify(debugInfo, null, 2) }}</pre>
      </details>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import ChatComponent from '../components/ChatComponent.vue'
import { nostrChat } from '@/composables/useNostrChat'
import { useAuth } from '@/composables/useAuth'

const auth = useAuth()

const debugInfo = computed(() => {
  const keyStatus = nostrChat.getNostrKeyStatus()
  
  return {
    status: nostrChat.isConnected.value ? 'Connected' : 'Disconnected',
    isAuthenticated: auth.isAuthenticated.value,
    hasNostrKeys: nostrChat.hasNostrKeys.value,
    isConnected: nostrChat.isConnected.value,
    keyStatus,
    peerCount: nostrChat.peers.value.length,
    totalUnread: nostrChat.totalUnreadCount.value,
    currentUser: nostrChat.currentUser.value?.pubkey ? {
      pubkey: nostrChat.currentUser.value.pubkey.slice(0, 16) + '...'
    } : null
  }
})
</script>