<script setup lang="ts">
import { useNostrStore } from '@/stores/nostr'
import { useRouter, useRoute } from 'vue-router'
import { computed } from 'vue'

const nostrStore = useNostrStore()
const router = useRouter()
const route = useRoute()

const status = computed(() => nostrStore.connectionStatus)
const hasUnread = computed(() => nostrStore.hasUnreadMessages)
const isOnSupportChat = computed(() => route.path === '/support')

// Compute theme-specific classes
const indicatorClasses = computed(() => ({
  'bg-primary/20 dark:bg-primary/30': true,
  'shadow-[0_0_8px_rgba(var(--primary),0.3)] dark:shadow-[0_0_12px_rgba(var(--primary),0.4)]': true
}))

const breatheClasses = computed(() => ({
  'bg-primary/10 dark:bg-primary/20': true,
  'shadow-[0_0_12px_rgba(var(--primary),0.2)] dark:shadow-[0_0_16px_rgba(var(--primary),0.3)]': true
}))

async function handleIndicatorClick() {
  if (isOnSupportChat.value) {
    return // Do nothing if already on support chat
  }

  if (status.value === 'connected') {
    // Navigate to support chat if connected
    router.push('/support')
  } else {
    // Attempt to reconnect if not connected
    try {
      await nostrStore.init() // Use init instead of reconnectToRelays
    } catch (err) {
      console.error('Failed to reconnect:', err)
    }
  }
}
</script>

<template>
  <div class="flex items-center gap-2">
    <div class="relative">
      <div 
        class="relative h-4 w-4 flex items-center justify-center cursor-pointer hover:scale-110 transition-transform duration-200"
        @click="handleIndicatorClick"
        :title="isOnSupportChat 
          ? status 
          : status === 'connected' 
            ? 'Click to open support chat' 
            : 'Click to reconnect'"
      >
        <!-- Base connection dot -->
        <div 
          class="h-2 w-2 rounded-full z-20 relative transition-colors duration-300"
          :class="{
            'bg-green-500 shadow-green-500/30': status === 'connected',
            'bg-yellow-500 shadow-yellow-500/30': status === 'connecting',
            'bg-red-500 shadow-red-500/30': status === 'disconnected'
          }"
        />
        <!-- Message indicator -->
        <div 
          v-if="hasUnread"
          class="absolute inset-0 message-indicator"
        >
          <div 
            class="absolute inset-0 rounded-full transition-colors duration-300"
            :class="indicatorClasses"
          ></div>
          <div 
            class="absolute inset-0 rounded-full transition-colors duration-300 animate-breathe"
            :class="breatheClasses"
          ></div>
        </div>
      </div>
    </div>
    <span class="text-sm text-muted-foreground hidden md:inline">
      {{ status }}
      <span v-if="hasUnread" class="text-primary font-medium ml-1">
        (1)
      </span>
    </span>
  </div>
</template>

<style scoped>
.message-indicator {
  transform-origin: center;
  animation: gentle-pulse 2s ease-in-out infinite;
}

@keyframes gentle-pulse {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.1); }
  100% { transform: scale(0.95); }
}

.animate-breathe {
  animation: breathe 2s ease-in-out infinite;
}

@keyframes breathe {
  0% { 
    transform: scale(1); 
    opacity: 0.3; 
  }
  50% { 
    transform: scale(1.5); 
    opacity: 0.6; 
  }
  100% { 
    transform: scale(1); 
    opacity: 0.3; 
  }
}
</style> 