<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import DirectoryGrid from '@/components/directory/DirectoryGrid.vue'
import DirectoryFilter from '@/components/directory/DirectoryFilter.vue'
import { mockDirectoryItems } from '@/data/directory'
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTheme } from '@/components/theme-provider'

const { t } = useI18n()

const route = useRoute()
const router = useRouter()
const { currentTown } = useTheme()

// Use the imported mock data
const items = mockDirectoryItems

const category = ref('all')
const search = ref('')
const town = ref(currentTown.value)

// Watch for route changes to update filters
watch(() => route.query, (newQuery) => {
  category.value = newQuery.category?.toString() || 'all'
  search.value = newQuery.search?.toString() || ''
  town.value = newQuery.town === undefined ? currentTown.value : (newQuery.town?.toString() || 'all')
}, { immediate: true })

// Watch for filter changes and update URL
watch([category, search, town], ([newCategory, newSearch, newTown]) => {
  // Don't update URL if it matches current query params
  if (
    newCategory === route.query.category &&
    newSearch === route.query.search &&
    newTown === route.query.town
  ) {
    return
  }

  const query = {
    ...(newCategory !== 'all' && { category: newCategory }),
    ...(newSearch && { search: newSearch }),
    ...(newTown !== currentTown.value && { town: newTown })
  }
  router.replace({ query })
})

// Filter items based on category, search, and town
const filteredItems = computed(() => {
  return items.filter(item => {
    const matchesCategory = category.value === 'all' || item.category === category.value
    const matchesSearch = !search.value ||
      item.name.toLowerCase().includes(search.value.toLowerCase()) ||
      item.description?.toLowerCase().includes(search.value.toLowerCase())
    const matchesTown = town.value === 'all' || item.town === town.value
    return matchesCategory && matchesSearch && matchesTown
  })
})
</script>

<template>
  <div class="px-0 md:container md:px-4 py-2 md:py-8">
    <div class="space-y-4 md:space-y-6">
      <!-- Directory Header -->
      <div class="text-center space-y-2 mb-2 md:mb-6">
        <h1 class="md:hidden text-lg font-semibold tracking-tight px-4">
          {{ t('directory.title') }}
        </h1>
        <div class="hidden md:block space-y-2">
          <h1 class="text-2xl font-bold tracking-tight sm:text-3xl">
            {{ t('directory.title') }}
          </h1>
          <p class="text-sm sm:text-base text-muted-foreground">
            {{ t('directory.subtitle') }}
          </p>
        </div>
      </div>

      <!-- Sticky Container for Filter -->
      <div class="sticky top-14 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b md:border-b-0 w-full shadow-sm transition-all duration-200">
        <div class="w-full">
          <DirectoryFilter v-model:category="category" v-model:search="search" v-model:town="town" class="py-3 px-4" />
        </div>
      </div>

      <!-- Directory Grid -->
      <div class="pt-4 px-4 md:px-0">
        <DirectoryGrid :items="filteredItems" class="transition-all duration-300" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.fade-leave-active {
  position: absolute;
}
</style>
