<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import type { NostrNote } from '@/lib/nostr/client'
import { useNostr } from '@/composables/useNostr'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Badge } from '@/components/ui/badge'
import { formatDistanceToNow } from 'date-fns'
import { Megaphone } from 'lucide-vue-next'
import { config, configUtils } from '@/lib/config'
import { notificationManager } from '@/lib/notifications/manager'
import { useNostrStore } from '@/stores/nostr'

const props = defineProps<{
  relays?: string[]
  feedType?: 'all' | 'announcements' | 'events' | 'general'
}>()

const notes = ref<NostrNote[]>([])
const isLoading = ref(true)
const error = ref<Error | null>(null)

const { getClient } = useNostr(props.relays ? { relays: props.relays } : undefined)
const nostrStore = useNostrStore()

// Get admin/moderator pubkeys from centralized config
const adminPubkeys = config.nostr.adminPubkeys

// Track last seen note timestamp to avoid duplicate notifications
let lastSeenTimestamp = Math.floor(Date.now() / 1000)

async function loadNotes() {
  try {
    isLoading.value = true
    error.value = null
    
    const client = getClient()
    await client.connect()
    
    // Configure fetch options based on feed type
    const fetchOptions: Parameters<typeof client.fetchNotes>[0] = {
      limit: 50,
      includeReplies: false
    }
    
    // Filter by authors based on feed type
    if (props.feedType === 'announcements') {
      // Only show notes from admin/moderator pubkeys
      if (adminPubkeys.length > 0) {
        fetchOptions.authors = adminPubkeys
      } else {
        // If no admin pubkeys configured, show placeholder
        notes.value = []
        return
      }
    } else if (props.feedType === 'general') {
      // Show notes from everyone EXCEPT admins (if configured)
      // Note: This would require client-side filtering after fetch
      // For now, we'll fetch all and filter
    }
    // 'all' and 'events' types get all notes (no author filter)
    
    notes.value = await client.fetchNotes(fetchOptions)
    
    // Client-side filtering for 'general' feed (exclude admin posts)
    if (props.feedType === 'general' && adminPubkeys.length > 0) {
      notes.value = notes.value.filter(note => !adminPubkeys.includes(note.pubkey))
    }
    
  } catch (err) {
    error.value = err instanceof Error ? err : new Error('Failed to load notes')
  } finally {
    isLoading.value = false
  }
}

function isAdminPost(pubkey: string): boolean {
  return adminPubkeys.includes(pubkey)
}

function getFeedTitle(): string {
  switch (props.feedType) {
    case 'announcements':
      return 'Community Announcements'
    case 'events':
      return 'Events & Calendar'
    case 'general':
      return 'General Discussion'
    default:
      return 'Community Feed'
  }
}

function getFeedDescription(): string {
  switch (props.feedType) {
    case 'announcements':
      return 'Important announcements from community administrators'
    case 'events':
      return 'Upcoming events and calendar updates'
    case 'general':
      return 'Community discussions and general posts'
    default:
      return 'Latest posts from the community'
  }
}

// Real-time subscription for new notes (especially admin announcements)
let unsubscribe: (() => void) | null = null

async function startRealtimeSubscription() {
  try {
    const client = getClient()
    await client.connect()
    
    // Subscribe to real-time notes
    unsubscribe = client.subscribeToNotes((newNote) => {
      // Only process notes newer than last seen
      if (newNote.created_at > lastSeenTimestamp) {
        // Add to feed if it matches our filter
        const shouldInclude = shouldIncludeNote(newNote)
        if (shouldInclude) {
          // Add to beginning of notes array
          notes.value.unshift(newNote)
          
          // Limit the array size to prevent memory issues
          if (notes.value.length > 100) {
            notes.value = notes.value.slice(0, 100)
          }
        }
        
        // Send notification if appropriate (only for admin announcements when not in announcements feed)
        if (props.feedType !== 'announcements' && configUtils.isAdminPubkey(newNote.pubkey)) {
          notificationManager.notifyForNote(newNote, nostrStore.account?.pubkey)
        }
        
        // Update last seen timestamp
        lastSeenTimestamp = Math.max(lastSeenTimestamp, newNote.created_at)
      }
    })
  } catch (error) {
    console.error('Failed to start real-time subscription:', error)
  }
}

function shouldIncludeNote(note: NostrNote): boolean {
  if (props.feedType === 'announcements') {
    return adminPubkeys.length > 0 && adminPubkeys.includes(note.pubkey)
  }
  // For other feed types, include all notes for now
  return true
}

onMounted(async () => {
  await loadNotes()
  // Start real-time subscription after initial load
  await startRealtimeSubscription()
})

onUnmounted(() => {
  if (unsubscribe) {
    unsubscribe()
  }
})

function formatDate(timestamp: number): string {
  return formatDistanceToNow(timestamp * 1000, { addSuffix: true })
}
</script>

<template>
  <div class="w-full max-w-3xl mx-auto p-4">
    <Card class="w-full">
      <CardHeader>
        <CardTitle class="flex items-center gap-2">
          <Megaphone v-if="feedType === 'announcements'" class="h-5 w-5" />
          {{ getFeedTitle() }}
        </CardTitle>
        <CardDescription>{{ getFeedDescription() }}</CardDescription>
      </CardHeader>
      <CardContent>
        <ScrollArea class="h-[600px] w-full pr-4">
          <div v-if="isLoading" class="flex items-center justify-center py-8">
            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
          </div>
          
          <div v-else-if="error" class="text-center py-8 text-destructive">
            {{ error.message }}
          </div>
          
          <div v-else-if="notes.length === 0" class="text-center py-8 text-muted-foreground">
            <div v-if="feedType === 'announcements' && adminPubkeys.length === 0" class="space-y-2">
              <p>No admin pubkeys configured</p>
              <p class="text-xs">Set VITE_ADMIN_PUBKEYS environment variable</p>
            </div>
            <p v-else>No {{ feedType || 'notes' }} found</p>
          </div>
          
          <div v-else class="space-y-4">
            <Card 
              v-for="note in notes" 
              :key="note.id" 
              :class="[
                'p-4 transition-all',
                isAdminPost(note.pubkey) && feedType !== 'announcements' 
                  ? 'border-orange-200 bg-orange-50 dark:border-orange-800 dark:bg-orange-950' 
                  : ''
              ]"
            >
              <div class="flex flex-col gap-2">
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <span class="font-medium text-sm">{{ note.pubkey.slice(0, 8) }}...</span>
                    <Badge 
                      v-if="isAdminPost(note.pubkey)" 
                      variant="secondary" 
                      class="text-xs bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200"
                    >
                      <Megaphone class="h-3 w-3 mr-1" />
                      Admin
                    </Badge>
                  </div>
                  <span class="text-xs text-muted-foreground">{{ formatDate(note.created_at) }}</span>
                </div>
                <p class="text-sm whitespace-pre-wrap">{{ note.content }}</p>
                <div class="flex items-center gap-4 text-xs text-muted-foreground">
                  <span>{{ note.replyCount }} replies</span>
                  <span>{{ note.reactionCount }} reactions</span>
                </div>
              </div>
            </Card>
          </div>
        </ScrollArea>
      </CardContent>
      <CardFooter class="flex justify-between">
        <button 
          class="text-sm text-primary hover:underline" 
          :disabled="isLoading"
          @click="loadNotes"
        >
          Refresh
        </button>
        <span v-if="adminPubkeys.length > 0" class="text-xs text-muted-foreground">
          {{ adminPubkeys.length }} admin(s) configured
        </span>
      </CardFooter>
    </Card>
  </div>
</template> 