<script setup lang="ts">
import type { SortKey } from '~/composables/useResultFilters'

const sortBy = defineModel<SortKey>('sortBy', { default: 'price' })
const viewMode = defineModel<'full' | 'compact'>('viewMode', { default: 'full' })
const { showOriginTime } = useOriginTime()

defineProps<{
  count: number
  hasActiveFilters: boolean
}>()

defineEmits<{
  toggleFilters: []
  resetFilters: []
}>()

const sortOptions: { value: SortKey, label: string, icon: string }[] = [
  { value: 'price', label: 'Precio', icon: 'i-lucide-arrow-down-narrow-wide' },
  { value: 'departure', label: 'Salida', icon: 'i-lucide-clock' },
  { value: 'duration', label: 'Duracion', icon: 'i-lucide-timer' },
  { value: 'stops', label: 'Escalas', icon: 'i-lucide-git-branch' }
]
</script>

<template>
  <div class="flex items-center justify-between flex-wrap gap-2">
    <div class="flex items-center gap-2">
      <p class="text-sm text-muted">
        {{ count }} resultado{{ count !== 1 ? 's' : '' }}
      </p>
      <UButton
        v-if="hasActiveFilters"
        label="Limpiar filtros"
        icon="i-lucide-x"
        color="neutral"
        variant="ghost"
        size="xs"
        @click="$emit('resetFilters')"
      />
    </div>

    <div class="flex items-center gap-2">
      <!-- Sort buttons -->
      <div class="flex gap-0.5">
        <UButton
          v-for="opt in sortOptions"
          :key="opt.value"
          :label="opt.label"
          :icon="opt.icon"
          :color="sortBy === opt.value ? 'primary' : 'neutral'"
          :variant="sortBy === opt.value ? 'soft' : 'ghost'"
          size="xs"
          @click="sortBy = opt.value"
        />
      </div>

      <USeparator orientation="vertical" class="h-5" />

      <!-- View mode -->
      <div class="flex gap-0.5">
        <UButton
          icon="i-lucide-rows-3"
          :color="viewMode === 'full' ? 'primary' : 'neutral'"
          :variant="viewMode === 'full' ? 'soft' : 'ghost'"
          size="xs"
          @click="viewMode = 'full'"
        />
        <UButton
          icon="i-lucide-list"
          :color="viewMode === 'compact' ? 'primary' : 'neutral'"
          :variant="viewMode === 'compact' ? 'soft' : 'ghost'"
          size="xs"
          @click="viewMode = 'compact'"
        />
      </div>

      <!-- Origin time toggle -->
      <UButton
        icon="i-lucide-clock"
        label="Hora origen"
        :color="showOriginTime ? 'primary' : 'neutral'"
        :variant="showOriginTime ? 'soft' : 'ghost'"
        size="xs"
        @click="showOriginTime = !showOriginTime"
      />

      <!-- Filter toggle -->
      <UButton
        icon="i-lucide-sliders-horizontal"
        label="Filtros"
        :color="hasActiveFilters ? 'primary' : 'neutral'"
        :variant="hasActiveFilters ? 'soft' : 'ghost'"
        size="xs"
        @click="$emit('toggleFilters')"
      />
    </div>
  </div>
</template>
