<template>
  <div class="flex flex-col h-screen bg-background">
    <PWAInstallPrompt auto-show />
    <!-- TODO: Implement push notifications properly - currently commenting out admin notifications dialog -->
    <!-- <NotificationPermission auto-show /> -->

    <!-- Compact Header with Filters Toggle (Mobile) -->
    <div class="sticky top-0 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
      <div class="flex items-center justify-between px-4 py-2 sm:px-6">
        <h1 class="text-lg font-semibold">Feed</h1>
        <div class="flex items-center gap-2">
          <!-- Active Filter Indicator -->
          <div class="flex items-center gap-1 text-xs text-muted-foreground">
            <span v-if="activeFilterCount > 0">{{ activeFilterCount }} filters</span>
            <span v-else>All content</span>
          </div>
          <!-- Filter Toggle Button -->
          <Button
            variant="ghost"
            size="sm"
            @click="showFilters = !showFilters"
            class="h-8 w-8 p-0"
          >
            <Filter class="h-4 w-4" />
          </Button>
        </div>
      </div>

      <!-- Collapsible Filter Panel -->
      <div v-if="showFilters" class="border-t bg-background/95 backdrop-blur">
        <div class="px-4 py-3 sm:px-6">
          <FeedFilters v-model="selectedFilters" :admin-pubkeys="adminPubkeys" />
        </div>
      </div>
    </div>

    <!-- Main Feed Area - Takes remaining height with scrolling -->
    <div class="flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
      <!-- Collapsible Composer -->
      <div v-if="showComposer || replyTo" class="border-b bg-background sticky top-0 z-10">
        <div class="max-h-[70vh] overflow-y-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
          <div class="px-4 py-3 sm:px-6">
            <!-- Regular Note Composer -->
            <NoteComposer
              v-if="composerType === 'note' || replyTo"
              :reply-to="replyTo"
              @note-published="onNotePublished"
              @clear-reply="onClearReply"
              @close="onCloseComposer"
            />

            <!-- Rideshare Composer -->
            <RideshareComposer
              v-else-if="composerType === 'rideshare'"
              @rideshare-published="onRidesharePublished"
              @close="onCloseComposer"
            />
          </div>
        </div>
      </div>

      <!-- Feed Content - Natural flow with padding for sticky elements -->
      <div>
        <NostrFeed
          :feed-type="feedType"
          :content-filters="selectedFilters"
          :admin-pubkeys="adminPubkeys"
          :key="feedKey"
          :compact-mode="true"
          @reply-to-note="onReplyToNote"
        />
      </div>
    </div>

    <!-- Floating Action Buttons for Compose -->
    <div v-if="!showComposer && !replyTo" class="fixed bottom-6 right-6 z-50">
      <!-- Main compose button -->
      <div class="flex flex-col items-end gap-3">
        <!-- Secondary buttons (when expanded) -->
        <div v-if="showComposerOptions" class="flex flex-col gap-2">
          <Button
            @click="openComposer('note')"
            size="lg"
            class="h-12 px-4 rounded-full shadow-lg hover:shadow-xl transition-all gap-2 bg-card border-2 border-border hover:bg-accent text-card-foreground"
          >
            <MessageSquare class="h-4 w-4" />
            <span class="text-sm font-medium">Note</span>
          </Button>
          <Button
            @click="openComposer('rideshare')"
            size="lg"
            class="h-12 px-4 rounded-full shadow-lg hover:shadow-xl transition-all gap-2 bg-card border-2 border-border hover:bg-accent text-card-foreground"
          >
            <Car class="h-4 w-4" />
            <span class="text-sm font-medium">Rideshare</span>
          </Button>
        </div>

        <!-- Main FAB -->
        <Button
          @click="toggleComposerOptions"
          size="lg"
          class="h-14 w-14 rounded-full shadow-lg hover:shadow-xl transition-all bg-primary hover:bg-primary/90 border-2 border-primary-foreground/20 flex items-center justify-center p-0"
        >
          <Plus
            class="h-6 w-6 stroke-[2.5] transition-transform duration-200"
            :class="{ 'rotate-45': showComposerOptions }"
          />
        </Button>
      </div>
    </div>

    <!-- Quick Filters Bar (Mobile) -->
    <div class="md:hidden sticky bottom-0 z-30 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-t">
      <div class="flex overflow-x-auto px-4 py-2 gap-2 scrollbar-hide">
        <Button
          v-for="(preset, key) in quickFilterPresets"
          :key="key"
          :variant="isPresetActive(key) ? 'default' : 'outline'"
          size="sm"
          @click="setQuickFilter(key)"
          class="whitespace-nowrap"
        >
          {{ preset.label }}
        </Button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// NostrFeed is now registered globally by the nostr-feed module
// No need to import it directly - use the modular version
// TODO: Re-enable when push notifications are properly implemented
// import NotificationPermission from '@/components/notifications/NotificationPermission.vue'
import { ref, computed, watch } from 'vue'

import { Button } from '@/components/ui/button'
import { Filter, Plus, MessageSquare, Car } from 'lucide-vue-next'
import PWAInstallPrompt from '@/components/pwa/PWAInstallPrompt.vue'
import FeedFilters from '@/modules/nostr-feed/components/FeedFilters.vue'
import NoteComposer from '@/modules/nostr-feed/components/NoteComposer.vue'
import RideshareComposer from '@/modules/nostr-feed/components/RideshareComposer.vue'
import NostrFeed from '@/modules/nostr-feed/components/NostrFeed.vue'
import { FILTER_PRESETS } from '@/modules/nostr-feed/config/content-filters'
import appConfig from '@/app.config'
import type { ContentFilter } from '@/modules/nostr-feed/services/FeedService'
import type { ReplyToNote } from '@/modules/nostr-feed/components/NoteComposer.vue'

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

// UI state
const showFilters = ref(false)
const showComposer = ref(false)
const showComposerOptions = ref(false)
const composerType = ref<'note' | 'rideshare'>('note')

// Feed configuration
const selectedFilters = ref<ContentFilter[]>(FILTER_PRESETS.all)
const feedKey = ref(0) // Force feed component to re-render when filters change

// Note composer state
const replyTo = ref<ReplyToNote | undefined>()

// Quick filter presets for mobile bottom bar
const quickFilterPresets = {
  all: { label: 'All', filters: FILTER_PRESETS.all },
  announcements: { label: 'Announcements', filters: FILTER_PRESETS.announcements },
  rideshare: { label: 'Rideshare', filters: FILTER_PRESETS.rideshare }
}

// Computed properties
const activeFilterCount = computed(() => selectedFilters.value.length)

const isPresetActive = (presetKey: string) => {
  const preset = quickFilterPresets[presetKey as keyof typeof quickFilterPresets]
  if (!preset) return false

  return preset.filters.length === selectedFilters.value.length &&
    preset.filters.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))
}

// Determine feed type based on selected filters
const feedType = computed(() => {
  if (selectedFilters.value.length === 0) return 'all'

  // Check if it matches the 'all' preset
  if (selectedFilters.value.length === FILTER_PRESETS.all.length &&
      FILTER_PRESETS.all.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
    return 'all'
  }

  // Check if it matches the announcements preset
  if (selectedFilters.value.length === FILTER_PRESETS.announcements.length &&
      FILTER_PRESETS.announcements.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
    return 'announcements'
  }

  // Check if it matches the rideshare preset
  if (selectedFilters.value.length === FILTER_PRESETS.rideshare.length &&
      FILTER_PRESETS.rideshare.every(pf => selectedFilters.value.some(sf => sf.id === pf.id))) {
    return 'rideshare'
  }

  // For all other cases, use custom
  return 'custom'
})

// Force feed to reload when filters change
watch(selectedFilters, () => {
  feedKey.value++
}, { deep: true })

// Handle note composer events
// Methods
const setQuickFilter = (presetKey: string) => {
  const preset = quickFilterPresets[presetKey as keyof typeof quickFilterPresets]
  if (preset) {
    selectedFilters.value = preset.filters
  }
}

const onNotePublished = (noteId: string) => {
  console.log('Note published:', noteId)
  // Refresh the feed to show the new note
  feedKey.value++
  // Clear reply state and hide composer
  replyTo.value = undefined
  showComposer.value = false
}

const onClearReply = () => {
  replyTo.value = undefined
  showComposer.value = false
}

const onReplyToNote = (note: ReplyToNote) => {
  replyTo.value = note
  showComposer.value = true
}

const onCloseComposer = () => {
  showComposer.value = false
  showComposerOptions.value = false
  replyTo.value = undefined
}

// New composer methods
const toggleComposerOptions = () => {
  showComposerOptions.value = !showComposerOptions.value
}

const openComposer = (type: 'note' | 'rideshare') => {
  composerType.value = type
  showComposer.value = true
  showComposerOptions.value = false
}

const onRidesharePublished = (noteId: string) => {
  console.log('Rideshare post published:', noteId)
  // Refresh the feed to show the new rideshare post
  feedKey.value++
  // Hide composer
  showComposer.value = false
  showComposerOptions.value = false
}
</script>
