<template>
  <!-- Loading State -->
  <div v-if="isLoading" class="flex flex-col items-center justify-center min-h-screen">
    <div class="flex flex-col items-center space-y-4">
      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
      <div class="text-center space-y-2">
        <h2 class="text-xl font-semibold">Loading Chat...</h2>
        <p class="text-sm text-muted-foreground">Setting up encrypted messaging and connecting to Nostr relays...</p>
      </div>
    </div>
  </div>

  <!-- Error State -->
  <div v-else-if="error" class="flex flex-col items-center justify-center min-h-screen">
    <div class="text-center space-y-4">
      <h2 class="text-xl font-semibold text-red-600">Failed to load chat</h2>
      <p class="text-muted-foreground">{{ error }}</p>
      <button @click="handleRetry" class="px-4 py-2 bg-primary text-primary-foreground rounded">
        Retry
      </button>
    </div>
  </div>

  <!-- Chat Content - Only render when module is ready -->
  <div v-else class="h-[calc(100vh-3.5rem)] lg:h-[calc(100vh-4rem)] xl:h-[calc(100vh-5rem)] w-full">
    <ChatComponent />
  </div>
</template>

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

// Simple reactive module loading - no complex logic needed
const { isLoading, error } = useModuleReady('chat')

function handleRetry() {
  window.location.reload()
}
</script>