<script setup lang="ts">
import type { PassengersCount } from '~/server/utils/flightics'

const props = defineProps<{
  bookingToken: string
  originalPrice: number
  passengers: PassengersCount
}>()

const { checkPrice } = useFlightSearch()
const checkedPrice = ref<number | null>(null)
const checking = ref(false)

async function verify() {
  checking.value = true
  try {
    const data = await checkPrice(props.bookingToken, props.passengers)
    checkedPrice.value = data.trip.totalCost
  } catch {
    checkedPrice.value = -1
  } finally {
    checking.value = false
  }
}
</script>

<template>
  <UCard>
    <div class="flex items-center justify-between">
      <div>
        <h3 class="font-semibold">Verificar precio actual</h3>
        <p class="text-sm text-neutral-500">Comprueba si el precio sigue disponible</p>
      </div>
      <div class="flex items-center gap-3">
        <template v-if="checkedPrice !== null">
          <UBadge v-if="checkedPrice === -1" label="No disponible" color="error" />
          <UBadge v-else-if="checkedPrice <= originalPrice" :label="`${checkedPrice.toFixed(0)}€`" color="success" />
          <UBadge v-else :label="`${checkedPrice.toFixed(0)}€ (subio)`" color="warning" />
        </template>
        <UButton label="Verificar" icon="i-lucide-refresh-cw" :loading="checking" @click="verify" />
      </div>
    </div>
  </UCard>
</template>
