<script setup lang="ts">
import { computed, watch, ref } 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
})

// Centralized collapse state management
const collapsedPosts = ref(new Set<string>())

// Initialize collapsed state for posts with many replies
watch(threadedPosts, (newPosts) => {
  if (newPosts.length > 0) {
    const newCollapsed = new Set(collapsedPosts.value)

    // Auto-collapse posts with more than 2 direct replies
    const addCollapsedPosts = (posts: any[]) => {
      posts.forEach(post => {
        if ((post.replies?.length || 0) > 2) {
          newCollapsed.add(post.id)
        }
        // Recursively check nested replies
        if (post.replies?.length > 0) {
          addCollapsedPosts(post.replies)
        }
      })
    }

    addCollapsedPosts(newPosts)
    collapsedPosts.value = newCollapsed
  }
}, { immediate: true })

// 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)
  }
}

// Handle collapse toggle with cascading behavior
function onToggleCollapse(postId: string) {
  const newCollapsed = new Set(collapsedPosts.value)

  if (newCollapsed.has(postId)) {
    // Expand this post (remove from collapsed set)
    newCollapsed.delete(postId)
  } else {
    // Collapse this post (add to collapsed set)
    newCollapsed.add(postId)

    // Find all descendant posts and collapse them too (cascading collapse)
    const collapseDescendants = (posts: any[], targetId: string) => {
      posts.forEach(post => {
        if (post.id === targetId && post.replies) {
          // Found the target post, collapse all its descendants
          const addAllDescendants = (replies: any[]) => {
            replies.forEach(reply => {
              newCollapsed.add(reply.id)
              if (reply.replies?.length > 0) {
                addAllDescendants(reply.replies)
              }
            })
          }
          addAllDescendants(post.replies)
        } else if (post.replies?.length > 0) {
          // Keep searching in nested replies
          collapseDescendants(post.replies, targetId)
        }
      })
    }

    collapseDescendants(threadedPosts.value, postId)
  }

  collapsedPosts.value = newCollapsed
}
</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"
            :parent-collapsed="false"
            :collapsed-posts="collapsedPosts"
            @reply-to-note="onReplyToNote"
            @toggle-like="onToggleLike"
            @toggle-collapse="onToggleCollapse"
          />
        </div>
      </div>
    </div>
  </div>
</template>
