<script setup lang="ts">
const user = useSupabaseUser()
const { trackedSearches, loading, update, remove, fetchAll } = useTrackedSearches()
const router = useRouter()

const showCreateForm = ref(false)

useSeoMeta({ title: 'Vuelato - Seguimiento de precios' })

watch(user, (u) => {
  if (!u) navigateTo('/auth')
}, { immediate: true })

async function onToggle(id: string, active: boolean) {
  await update(id, { is_active: active })
}

async function onRemove(id: string) {
  await remove(id)
}

function onDetail(id: string) {
  router.push(`/tracking/${id}`)
}

function onCreated() {
  showCreateForm.value = false
  fetchAll()
}

const activeCount = computed(() => trackedSearches.value.filter(s => s.is_active).length)
</script>

<template>
  <div v-if="user">
    <UPageHero title="Seguimiento de precios" description="Busquedas automaticas que monitorizan fluctuaciones de precio" />

    <UPageSection>
      <div class="max-w-3xl mx-auto space-y-4">
        <!-- Actions -->
        <div class="flex items-center justify-between">
          <p class="text-sm text-muted">
            {{ trackedSearches.length }} seguimiento{{ trackedSearches.length !== 1 ? 's' : '' }}
            <span v-if="activeCount > 0"> ({{ activeCount }} activo{{ activeCount !== 1 ? 's' : '' }})</span>
          </p>
          <UButton
            v-if="!showCreateForm"
            label="Nuevo seguimiento"
            icon="i-lucide-plus"
            size="sm"
            @click="showCreateForm = true"
          />
        </div>

        <!-- Create form -->
        <TrackingCreateTrackingForm
          v-if="showCreateForm"
          @created="onCreated"
          @cancel="showCreateForm = false"
        />

        <!-- Loading -->
        <div v-if="loading" class="space-y-3">
          <USkeleton v-for="i in 3" :key="i" class="h-28 w-full" />
        </div>

        <!-- Empty -->
        <div v-else-if="trackedSearches.length === 0 && !showCreateForm" class="text-center py-12">
          <UIcon name="i-lucide-bell" class="text-4xl text-neutral-300 mb-2" />
          <p class="text-neutral-500">No tienes busquedas en seguimiento</p>
          <p class="text-sm text-neutral-400 mt-1">Crea una para monitorizar precios automaticamente</p>
          <UButton label="Crear seguimiento" icon="i-lucide-plus" class="mt-3" @click="showCreateForm = true" />
        </div>

        <!-- Search cards -->
        <TrackingTrackedSearchCard
          v-for="search in trackedSearches"
          :key="search.id"
          :search="search"
          @toggle="onToggle"
          @remove="onRemove"
          @detail="onDetail"
        />
      </div>
    </UPageSection>
  </div>
</template>
