<template>
  <div class="flex flex-col h-full">
    <!-- Mobile: Peer List View -->
    <div v-if="isMobile && (!selectedPeer || !showChat)" class="flex flex-col h-full">
      <!-- Header -->
      <div class="flex items-center justify-between p-4 border-b">
        <div class="flex items-center space-x-3">
          <h2 class="text-lg font-semibold">Chat</h2>
          <Badge v-if="isConnected" variant="default" class="text-xs">
            Ready
          </Badge>
          <Badge v-else variant="secondary" class="text-xs">
            Initializing...
          </Badge>
          <!-- Total unread count -->
          <Badge v-if="totalUnreadCount > 0" variant="secondary" class="text-xs">
            {{ totalUnreadCount }} unread
          </Badge>
        </div>
        <Button @click="refreshPeers" :disabled="isLoading" size="sm">
          <RefreshCw v-if="isLoading" class="h-4 w-4 animate-spin" />
          <RefreshCw v-else class="h-4 w-4" />
          <span class="hidden sm:inline ml-2">Refresh</span>
        </Button>
      </div>

      <!-- Peer List -->
      <div class="flex-1 flex flex-col overflow-hidden">
        <div class="p-4 border-b flex-shrink-0">
          <div class="flex items-center justify-between mb-2">
            <h3 class="font-medium">Peers ({{ filteredPeers.length }})</h3>
            <span v-if="isSearching" class="text-xs text-muted-foreground">
              {{ resultCount }} found
            </span>
          </div>
          <!-- Search Input -->
          <div class="relative">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <Search class="h-4 w-4 text-muted-foreground" />
            </div>
            <Input
              v-model="searchQuery"
              placeholder="Search peers by name or pubkey..."
              class="pl-10 pr-10"
            />
            <div v-if="searchQuery" class="absolute inset-y-0 right-0 pr-3 flex items-center">
              <Button
                variant="ghost"
                size="sm"
                @click="clearSearch"
                class="h-6 w-6 p-0 hover:bg-muted"
              >
                <X class="h-3 w-3" />
                <span class="sr-only">Clear search</span>
              </Button>
            </div>
          </div>
        </div>
        <ScrollArea class="flex-1">
          <div class="p-2 space-y-1">
            <!-- No results message -->
            <div v-if="isSearching && filteredPeers.length === 0" class="text-center py-8 text-muted-foreground">
              <Search class="h-8 w-8 mx-auto mb-2 opacity-50" />
              <p class="text-sm">No peers found matching "{{ searchQuery }}"</p>
              <p class="text-xs mt-1">Try searching by username or pubkey</p>
            </div>
            
            <!-- Peer list -->
            <div
              v-for="peer in filteredPeers"
              :key="peer.pubkey"
              @click="selectPeer(peer)"
              :class="[
                'flex items-center space-x-3 p-3 rounded-lg cursor-pointer transition-colors touch-manipulation relative',
                selectedPeer?.pubkey === peer.pubkey
                  ? 'bg-primary text-primary-foreground'
                  : 'hover:bg-muted active:bg-muted/80'
              ]"
            >
              <Avatar class="h-10 w-10 sm:h-8 sm:w-8">
                <AvatarImage v-if="getPeerAvatar(peer)" :src="getPeerAvatar(peer)!" />
                <AvatarFallback>{{ getPeerInitials(peer) }}</AvatarFallback>
              </Avatar>
              <div class="flex-1 min-w-0">
                <p class="text-sm font-medium truncate">
                  {{ peer.name || 'Unknown User' }}
                </p>
                <p class="text-xs text-muted-foreground truncate">
                  {{ formatPubkey(peer.pubkey) }}
                </p>
              </div>
              <!-- Unread message indicator -->
              <div v-if="getUnreadCount(peer.pubkey) > 0" class="flex-shrink-0">
                <Badge variant="default" class="h-6 w-6 rounded-full p-0 flex items-center justify-center text-xs font-bold">
                  {{ getUnreadCount(peer.pubkey) > 99 ? '99+' : getUnreadCount(peer.pubkey) }}
                </Badge>
              </div>
            </div>
          </div>
        </ScrollArea>
      </div>
    </div>

    <!-- Mobile: Chat View -->
    <div v-else-if="isMobile && showChat" class="flex flex-col h-full">
      <!-- Chat Header with Back Button -->
      <div class="flex items-center justify-between p-4 border-b">
        <div class="flex items-center space-x-3">
          <Button 
            variant="ghost" 
            size="icon" 
            @click="goBackToPeers"
            class="mr-2"
          >
            <ArrowLeft class="h-5 w-5" />
          </Button>
          <Avatar class="h-8 w-8">
            <AvatarImage v-if="selectedPeer && getPeerAvatar(selectedPeer)" :src="getPeerAvatar(selectedPeer)!" />
            <AvatarFallback>{{ selectedPeer ? getPeerInitials(selectedPeer) : 'U' }}</AvatarFallback>
          </Avatar>
          <div>
            <h3 class="font-medium">{{ selectedPeer?.name || 'Unknown User' }}</h3>
            <p class="text-xs text-muted-foreground">
              {{ selectedPeer ? formatPubkey(selectedPeer.pubkey) : '' }}
            </p>
          </div>
        </div>
        <div class="flex items-center space-x-2">
          <Badge v-if="isConnected" variant="default" class="text-xs">
            Ready
          </Badge>
          <Badge v-else variant="secondary" class="text-xs">
            Initializing...
          </Badge>
          <!-- Unread count for current peer -->
          <Badge v-if="selectedPeer && getUnreadCount(selectedPeer.pubkey) > 0" variant="secondary" class="text-xs">
            {{ getUnreadCount(selectedPeer.pubkey) }} unread
          </Badge>
        </div>
      </div>

      <!-- Messages -->
      <ScrollArea class="flex-1 p-4" ref="messagesScrollArea">
        <div class="space-y-4">
          <div
            v-for="message in currentMessages"
            :key="message.id"
            :class="[
              'flex',
              message.sent ? 'justify-end' : 'justify-start'
            ]"
          >
            <div
              :class="[
                'max-w-xs lg:max-w-md px-4 py-2 rounded-lg',
                message.sent
                  ? 'bg-primary text-primary-foreground'
                  : 'bg-muted'
              ]"
            >
              <p class="text-sm">{{ message.content }}</p>
              <p class="text-xs opacity-70 mt-1">
                {{ formatTime(message.created_at) }}
              </p>
            </div>
          </div>
        </div>
        <!-- Hidden element at bottom for scrolling -->
        <div ref="scrollTarget" class="h-1" />
      </ScrollArea>

      <!-- Message Input -->
      <div class="p-4 border-t">
        <form @submit.prevent="sendMessage" class="flex space-x-2">
          <Input
            v-model="messageInput"
            placeholder="Type a message..."
            :disabled="!isConnected || !selectedPeer"
            class="flex-1"
          />
          <Button type="submit" :disabled="!isConnected || !selectedPeer || !messageInput.trim()">
            <Send class="h-4 w-4" />
          </Button>
        </form>
      </div>
    </div>

    <!-- Desktop: Full Layout -->
    <div v-else-if="!isMobile" class="flex flex-col h-full">
      <!-- Header -->
      <div class="flex items-center justify-between p-4 border-b">
        <div class="flex items-center space-x-3">
          <h2 class="text-lg font-semibold">Chat</h2>
          <Badge v-if="isConnected" variant="default" class="text-xs">
            Ready
          </Badge>
          <Badge v-else variant="secondary" class="text-xs">
            Initializing...
          </Badge>
          <!-- Total unread count -->
          <Badge v-if="totalUnreadCount > 0" variant="secondary" class="text-xs">
            {{ totalUnreadCount }} unread
          </Badge>
        </div>
        <Button @click="refreshPeers" :disabled="isLoading" size="sm">
          <RefreshCw v-if="isLoading" class="h-4 w-4 animate-spin" />
          <RefreshCw v-else class="h-4 w-4" />
          Refresh Peers
        </Button>
      </div>

      <!-- Main Content -->
      <div class="flex flex-1 overflow-hidden">
        <!-- Peer List -->
        <div class="w-80 border-r bg-muted/30 flex flex-col">
          <div class="p-4 border-b flex-shrink-0">
            <div class="flex items-center justify-between mb-2">
              <h3 class="font-medium">Peers ({{ filteredPeers.length }})</h3>
              <span v-if="isSearching" class="text-xs text-muted-foreground">
                {{ resultCount }} found
              </span>
            </div>
            <!-- Search Input -->
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <Search class="h-4 w-4 text-muted-foreground" />
              </div>
              <Input
                v-model="searchQuery"
                placeholder="Search peers by name or pubkey..."
                class="pl-10 pr-10"
              />
              <div v-if="searchQuery" class="absolute inset-y-0 right-0 pr-3 flex items-center">
                <Button
                  variant="ghost"
                  size="sm"
                  @click="clearSearch"
                  class="h-6 w-6 p-0 hover:bg-muted"
                >
                  <X class="h-3 w-3" />
                  <span class="sr-only">Clear search</span>
                </Button>
              </div>
            </div>
          </div>
          <ScrollArea class="flex-1">
            <div class="p-2 space-y-1">
              <!-- No results message -->
              <div v-if="isSearching && filteredPeers.length === 0" class="text-center py-8 text-muted-foreground">
                <Search class="h-8 w-8 mx-auto mb-2 opacity-50" />
                <p class="text-sm">No peers found matching "{{ searchQuery }}"</p>
                <p class="text-xs mt-1">Try searching by username or pubkey</p>
              </div>
              
              <!-- Peer list -->
              <div
                v-for="peer in filteredPeers"
                :key="peer.pubkey"
                @click="selectPeer(peer)"
                :class="[
                  'flex items-center space-x-3 p-3 rounded-lg cursor-pointer transition-colors relative',
                  selectedPeer?.pubkey === peer.pubkey
                    ? 'bg-primary text-primary-foreground'
                    : 'hover:bg-muted'
                ]"
              >
                <Avatar class="h-8 w-8">
                  <AvatarImage v-if="getPeerAvatar(peer)" :src="getPeerAvatar(peer)!" />
                  <AvatarFallback>{{ getPeerInitials(peer) }}</AvatarFallback>
                </Avatar>
                <div class="flex-1 min-w-0">
                  <p class="text-sm font-medium truncate">
                    {{ peer.name || 'Unknown User' }}
                  </p>
                  <p class="text-xs text-muted-foreground truncate">
                    {{ formatPubkey(peer.pubkey) }}
                  </p>
                </div>
                <!-- Unread message indicator -->
                <div v-if="getUnreadCount(peer.pubkey) > 0" class="flex-shrink-0">
                  <Badge variant="default" class="h-6 w-6 rounded-full p-0 flex items-center justify-center text-xs font-bold">
                    {{ getUnreadCount(peer.pubkey) > 99 ? '99+' : getUnreadCount(peer.pubkey) }}
                  </Badge>
                </div>
              </div>
            </div>
          </ScrollArea>
        </div>

        <!-- Chat Area -->
        <div class="flex-1 flex flex-col">
          <!-- Chat Header - Always present to maintain layout -->
          <div class="p-4 border-b" :class="{ 'h-16': !selectedPeer }">
            <div v-if="selectedPeer" class="flex items-center space-x-3">
              <Avatar class="h-8 w-8">
                <AvatarImage v-if="getPeerAvatar(selectedPeer)" :src="getPeerAvatar(selectedPeer)!" />
                <AvatarFallback>{{ getPeerInitials(selectedPeer) }}</AvatarFallback>
              </Avatar>
              <div>
                <h3 class="font-medium">{{ selectedPeer.name || 'Unknown User' }}</h3>
                <p class="text-sm text-muted-foreground">
                  {{ formatPubkey(selectedPeer.pubkey) }}
                </p>
              </div>
            </div>
            <div v-else class="h-8"></div>
          </div>

          <!-- Messages -->
          <ScrollArea v-if="selectedPeer" class="flex-1 p-4" ref="messagesScrollArea">
            <div class="space-y-4" ref="messagesContainer">
              <div
                v-for="message in currentMessages"
                :key="message.id"
                :class="[
                  'flex',
                  message.sent ? 'justify-end' : 'justify-start'
                ]"
              >
                <div
                  :class="[
                    'max-w-xs lg:max-w-md px-4 py-2 rounded-lg',
                    message.sent
                      ? 'bg-primary text-primary-foreground'
                      : 'bg-muted'
                  ]"
                >
                  <p class="text-sm">{{ message.content }}</p>
                  <p class="text-xs opacity-70 mt-1">
                    {{ formatTime(message.created_at) }}
                  </p>
                </div>
              </div>
            </div>
            <!-- Hidden element at bottom for scrolling -->
            <div ref="scrollTarget" class="h-1" />
          </ScrollArea>

          <!-- Message Input -->
          <div v-if="selectedPeer" class="p-4 border-t">
            <form @submit.prevent="sendMessage" class="flex space-x-2">
              <Input
                v-model="messageInput"
                placeholder="Type a message..."
                :disabled="!isConnected || !selectedPeer"
                class="flex-1"
              />
              <Button type="submit" :disabled="!isConnected || !selectedPeer || !messageInput.trim()">
                <Send class="h-4 w-4" />
              </Button>
            </form>
          </div>

          <!-- No Peer Selected -->
          <div v-else class="flex-1 flex items-center justify-center">
            <div class="text-center">
              <MessageSquare class="h-12 w-12 text-muted-foreground mx-auto mb-4" />
              <h3 class="text-lg font-medium mb-2">No peer selected</h3>
              <p class="text-muted-foreground">
                Select a peer from the list to start chatting
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { Send, RefreshCw, MessageSquare, ArrowLeft, Search, X } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { ScrollArea } from '@/components/ui/scroll-area'
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'
import { useChat } from '../composables/useChat'

import { useFuzzySearch } from '@/composables/useFuzzySearch'

// Types
import type { ChatPeer } from '../types'

// Initialize chat composable
const chat = useChat()

// State
const peers = computed(() => chat.peers.value)
const selectedPeer = ref<ChatPeer | null>(null)
const messageInput = ref('')

const isLoading = ref(false)
const showChat = ref(false)
const messagesScrollArea = ref<HTMLElement | null>(null)
const messagesContainer = ref<HTMLElement | null>(null)
const scrollTarget = ref<HTMLElement | null>(null)

// Mobile detection
const isMobile = ref(false)

// Get methods and state from chat composable
// Note: The modular chat service handles connection and peer management automatically
const isConnected = computed(() => chat.isReady.value) // Use chat service ready state
const totalUnreadCount = computed(() => chat.totalUnreadCount.value)

// Helper functions
const getUnreadCount = (peer: string) => {
  const peerData = chat.peers.value.find(p => p.pubkey === peer)
  return peerData?.unreadCount || 0
}

// Computed
const currentMessages = computed(() => {
  return chat.currentMessages.value
})

// Sort peers by unread count and name
const sortedPeers = computed(() => {
  const sorted = [...peers.value].sort((a, b) => {
    const aUnreadCount = getUnreadCount(a.pubkey)
    const bUnreadCount = getUnreadCount(b.pubkey)
    
    // First, sort by unread count (peers with unread messages appear first)
    if (aUnreadCount > 0 && bUnreadCount === 0) return -1
    if (aUnreadCount === 0 && bUnreadCount > 0) return 1
    
    // Finally, sort alphabetically by name for peers with same unread status
    return (a.name || '').localeCompare(b.name || '')
  })
  
  return sorted
})

// Fuzzy search for peers
// This integrates the useFuzzySearch composable to provide intelligent search functionality
// for finding peers by username or pubkey with typo tolerance and scoring
const {
  searchQuery,
  filteredItems: filteredPeers,
  isSearching,
  resultCount,
  clearSearch
} = useFuzzySearch(sortedPeers, {
  fuseOptions: {
    keys: [
      { name: 'name', weight: 0.7 },      // Name has higher weight for better UX
      { name: 'pubkey', weight: 0.3 }     // Pubkey has lower weight but still searchable
    ],
    threshold: 0.3,                       // Fuzzy matching threshold (0.0 = perfect, 1.0 = match anything)
    distance: 100,                        // Maximum distance for fuzzy matching
    ignoreLocation: true,                 // Ignore location for better performance
    useExtendedSearch: false,             // Don't use extended search syntax
    minMatchCharLength: 1,                // Minimum characters to match
    shouldSort: true,                     // Sort results by relevance
    findAllMatches: false,                // Don't find all matches for performance
    location: 0,                          // Start search from beginning
    isCaseSensitive: false,               // Case insensitive search
  },
  resultLimit: 50,                        // Limit results for performance
  matchAllWhenSearchEmpty: true,          // Show all peers when search is empty
  minSearchLength: 1,                     // Start searching after 1 character
})

// Check if device is mobile
const checkMobile = () => {
  isMobile.value = window.innerWidth < 768 // md breakpoint
}

// Mobile navigation
const goBackToPeers = () => {
  showChat.value = false
  selectedPeer.value = null
}

// Methods



const refreshPeers = async () => {
  await chat.refreshPeers()
}

const selectPeer = async (peer: ChatPeer) => {
  selectedPeer.value = peer
  messageInput.value = ''
  
  // Use the modular chat service
  chat.selectPeer(peer.pubkey)
  
  // On mobile, show chat view
  if (isMobile.value) {
    showChat.value = true
  }
  
  // Scroll to bottom to show latest messages when selecting a peer
  nextTick(() => {
    scrollToBottom()
  })
}

const sendMessage = async () => {
  if (!selectedPeer.value || !messageInput.value.trim()) return
  
  try {
    await chat.sendMessage(messageInput.value)
    messageInput.value = ''
    
    // Scroll to bottom
    nextTick(() => {
      scrollToBottom()
    })
  } catch (error) {
    console.error('Failed to send message:', error)
  }
}

const scrollToBottom = () => {
  nextTick(() => {
    if (scrollTarget.value) {
      // Use scrollIntoView on the target element
      scrollTarget.value.scrollIntoView({ 
        behavior: 'smooth',
        block: 'end'
      })
    }
  })
}

const formatPubkey = (pubkey: string) => {
  return pubkey.slice(0, 8) + '...' + pubkey.slice(-8)
}

const formatTime = (timestamp: number) => {
  return new Date(timestamp * 1000).toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit'
  })
}

const getPeerAvatar = (_peer: ChatPeer) => {
  // You can implement avatar logic here
  return null
}

const getPeerInitials = (peer: ChatPeer) => {
  if (peer.name) {
    return peer.name.slice(0, 2).toUpperCase()
  }
  return peer.pubkey.slice(0, 2).toUpperCase()
}



// Lifecycle
onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})

// Watch for connection state changes
watch(isConnected, async () => {
  // Note: Peer subscriptions are handled by the preloader
})

// Watch for new messages and scroll to bottom
watch(currentMessages, (newMessages, oldMessages) => {
  // Scroll to bottom when new messages are added
  if (newMessages.length > 0 && (!oldMessages || newMessages.length > oldMessages.length)) {
    nextTick(() => {
      scrollToBottom()
    })
  }
})
</script> 