<script setup lang="ts">
import { computed, watch } from 'vue'
import { Button } from '@/components/ui/button'
import { Megaphone, RefreshCw, AlertCircle } from 'lucide-vue-next'
import { useFeed } from '../composables/useFeed'
import { useProfiles } from '../composables/useProfiles'
import { useReactions } from '../composables/useReactions'
import ThreadedPost from './ThreadedPost.vue'
import appConfig from '@/app.config'
import type { ContentFilter, FeedPost } from '../services/FeedService'

interface Emits {
  (e: 'reply-to-note', note: { id: string; content: string; pubkey: string }): void
}

const props = defineProps<{
  relays?: string[]
  feedType?: 'all' | 'announcements' | 'events' | 'general' | 'custom'
  contentFilters?: ContentFilter[]
  adminPubkeys?: string[]
  compactMode?: boolean
}>()

const emit = defineEmits<Emits>()

// Get admin/moderator pubkeys from props or app config
const adminPubkeys = props.adminPubkeys || appConfig.modules['nostr-feed']?.config?.adminPubkeys || []

// Use centralized feed service - this handles all subscription management and deduplication
const { posts: notes, threadedPosts, isLoading, error, refreshFeed } = useFeed({
  feedType: props.feedType || 'all',
  maxPosts: 100,
  adminPubkeys,
  contentFilters: props.contentFilters
})

// Use profiles service for display names
const { getDisplayName, fetchProfiles } = useProfiles()

// Use reactions service for likes/hearts
const { getEventReactions, subscribeToReactions, toggleLike } = useReactions()

// Watch for new posts and fetch their profiles and reactions
watch(notes, async (newNotes) => {
  if (newNotes.length > 0) {
    const pubkeys = [...new Set(newNotes.map(note => note.pubkey))]
    const eventIds = newNotes.map(note => note.id)

    // Fetch profiles and subscribe to reactions in parallel
    await Promise.all([
      fetchProfiles(pubkeys),
      subscribeToReactions(eventIds)
    ])
  }
}, { immediate: true })

// Check if we have admin pubkeys configured
const hasAdminPubkeys = computed(() => adminPubkeys.length > 0)

// Get feed title and description based on type
const feedTitle = computed(() => {
  switch (props.feedType) {
    case 'announcements':
      return 'Community Announcements'
    case 'events':
      return 'Events & Calendar'
    case 'general':
      return 'General Discussion'
    default:
      return 'Community Feed'
  }
})

const feedDescription = computed(() => {
  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'
  }
})



// Handle reply to note
function onReplyToNote(note: any) {
  emit('reply-to-note', {
    id: note.id,
    content: note.content,
    pubkey: note.pubkey
  })
}

// Handle like/heart reaction toggle
async function onToggleLike(note: FeedPost) {
  try {
    await toggleLike(note.id, note.pubkey, note.kind)
  } catch (error) {
    console.error('Failed to toggle like:', error)
  }
}
</script>

<template>
  <div class="flex flex-col h-full">
    <!-- Compact Header (only in non-compact mode) -->
    <div v-if="!compactMode" class="flex items-center justify-between p-4 border-b">
      <div class="flex items-center gap-2">
        <Megaphone class="h-5 w-5 text-primary" />
        <div>
          <h2 class="text-lg font-semibold">{{ feedTitle }}</h2>
          <p class="text-sm text-muted-foreground">{{ feedDescription }}</p>
        </div>
      </div>
      <Button
        variant="outline"
        size="sm"
        @click="refreshFeed"
        :disabled="isLoading"
        class="gap-2"
      >
        <RefreshCw :class="{ 'animate-spin': isLoading }" class="h-4 w-4" />
        Refresh
      </Button>
    </div>

    <!-- Feed Content Container -->
    <div class="flex-1 overflow-hidden">
      <!-- Loading State -->
      <div v-if="isLoading" class="flex items-center justify-center py-8">
        <div class="flex items-center gap-2">
          <RefreshCw class="h-4 w-4 animate-spin" />
          <span class="text-muted-foreground">Loading feed...</span>
        </div>
      </div>

      <!-- Error State -->
      <div v-else-if="error" class="text-center py-8 px-4">
        <div class="flex items-center justify-center gap-2 text-destructive mb-4">
          <AlertCircle class="h-5 w-5" />
          <span>Failed to load feed</span>
        </div>
        <p class="text-sm text-muted-foreground mb-4">{{ error }}</p>
        <Button @click="refreshFeed" variant="outline">Try Again</Button>
      </div>

      <!-- No Admin Pubkeys Warning -->
      <div v-else-if="!hasAdminPubkeys && props.feedType === 'announcements'" class="text-center py-8 px-4">
        <div class="flex items-center justify-center gap-2 text-muted-foreground mb-4">
          <Megaphone class="h-5 w-5" />
          <span>No admin pubkeys configured</span>
        </div>
        <p class="text-sm text-muted-foreground">
          Community announcements will appear here once admin pubkeys are configured.
        </p>
      </div>

      <!-- No Posts -->
      <div v-else-if="threadedPosts.length === 0" class="text-center py-8 px-4">
        <div class="flex items-center justify-center gap-2 text-muted-foreground mb-4">
          <Megaphone class="h-5 w-5" />
          <span>No posts yet</span>
        </div>
        <p class="text-sm text-muted-foreground">
          Check back later for community updates.
        </p>
      </div>

      <!-- Posts List - Full height scroll with threaded view -->
      <div v-else class="h-full overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
        <div>
          <ThreadedPost
            v-for="post in threadedPosts"
            :key="post.id"
            :post="post"
            :admin-pubkeys="adminPubkeys"
            :get-display-name="getDisplayName"
            :get-event-reactions="getEventReactions"
            :depth="0"
            @reply-to-note="onReplyToNote"
            @toggle-like="onToggleLike"
          />
        </div>
      </div>
    </div>
  </div>
</template>
