<template>
  <button 
    class="favorite-btn" 
    :class="{ 'is-favorite': isFavorited, 'is-loading': isLoading }"
    @click.stop="handleToggle"
    :title="isFavorited ? 'Quitar de favoritos' : 'Agregar a favoritos'"
  >
    <span class="material-icons heart-icon">
      {{ isFavorited ? 'favorite' : 'favorite_border' }}
    </span>
  </button>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useFavoritesStore } from '@/stores/favorites'
import { useAuthStore } from '@/stores/auth'
import { analyticsService } from '@/services/analyticsService'

const props = defineProps<{
  itemType: 'coupon' | 'business' | 'taxi' | 'route' | 'stop' | 'shuttle'
  itemId: string
  itemName?: string
  itemImage?: string
}>()

const favoritesStore = useFavoritesStore()
const authStore = useAuthStore()
const isLoading = ref(false)

const isFavorited = computed(() => {
  return favoritesStore.isFavorite(props.itemType, props.itemId)
})

// Observamos isAuthenticated con immediate:true para cubrir 2 casos:
// 1. El usuario ya estaba autenticado cuando el componente montó.
// 2. Supabase completó INITIAL_SESSION DESPUÉS de que el componente montó
//    (race condition común al navegar directamente a una URL).
watch(
  () => authStore.isAuthenticated,
  (authenticated) => {
    if (authenticated && favoritesStore.favorites.length === 0 && !favoritesStore.isLoading) {
      favoritesStore.loadFavorites()
    }
  },
  { immediate: true }
)

async function handleToggle() {
  if (!authStore.isAuthenticated) {
    alert('Debes iniciar sesión para agregar favoritos')
    return
  }

  isLoading.value = true
  try {
    await favoritesStore.toggleFavorite(
      props.itemType,
      props.itemId,
      props.itemName,
      props.itemImage
    )
    
    const isNowFavorited = favoritesStore.isFavorite(props.itemType, props.itemId)
    const entityTypeMap: Record<string, any> = { business: 'business', shuttle: 'shuttle', coupon: 'coupon', stop: 'stop', route: 'route' }
    analyticsService.logEvent({
      event_name: isNowFavorited ? 'favorite_add' : 'favorite_remove',
      entity_type: entityTypeMap[props.itemType] || 'other',
      entity_id: props.itemId,
      entity_name: props.itemName || 'item'
    })
  } catch (error) {
    console.error('Error toggling favorite:', error)
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
.favorite-btn {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.favorite-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.favorite-btn:active {
  transform: scale(0.95);
}

.heart-icon {
  color: #9ca3af;
  font-size: 22px;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}

.favorite-btn.is-favorite .heart-icon {
  color: #e91e63;
  animation: heartBeat 0.5s ease;
}

.favorite-btn.is-loading {
  pointer-events: none;
  opacity: 0.6;
}

.favorite-btn.is-loading .heart-icon {
  animation: pulse 1s ease-in-out infinite;
}

@keyframes heartBeat {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(1.2);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Dark mode support */
.dark .favorite-btn {
  background: rgba(30, 30, 30, 0.9);
}
</style>
