<script setup lang="ts">
const router = useRouter()
const user = useSupabaseUser()
const { saveSearch } = useRecentSearches()

useSeoMeta({ title: 'Vuelato - Buscar vuelos' })

function onSearch(data: any) {
  // Build route summary
  const dep = data.departures.join(',')
  const dest = data.destination.join(',')
  const summary = dest
    ? `${dep} > ${dest}`
    : `${dep} > Explorar`

  // Save to recent searches if logged in
  if (user.value) {
    saveSearch(data, summary, data.mode)
  }

  if (data.mode === 'explore') {
    router.push({
      path: '/explore',
      query: { dep, budget: data.budget }
    })
    return
  }

  router.push({
    path: '/results',
    query: {
      mode: data.mode,
      dep,
      dest,
      from: data.dateFrom,
      to: data.dateTo,
      smin: data.stayMinDays,
      smax: data.stayMaxDays,
      adults: data.passengers.adult,
      children: data.passengers.child,
      infants: data.passengers.infant,
      maxStops: data.maxStops ?? undefined,
      budget: data.budget ?? undefined
    }
  })
}
</script>

<template>
  <div>
    <UPageHero title="Buscar vuelos" description="5 modos de busqueda para encontrar el vuelo perfecto" />

    <UPageSection>
      <UCard class="max-w-2xl mx-auto">
        <SearchForm @search="onSearch" />
      </UCard>
    </UPageSection>
  </div>
</template>
