<template>
  <div class="min-h-screen bg-gray-50 py-8">
    <div class="container">
      <!-- Заголовок и кнопка добавления -->
      <div class="flex justify-between items-center mb-8">
        <div>
          <h1 class="text-3xl font-bold">Все объекты</h1>
          <p class="text-gray-600 mt-2">База объектов для путешествий</p>
        </div>
        <NuxtLink to="/objects/create" class="btn btn-primary">
          Добавить объект
        </NuxtLink>
      </div>

      <!-- Простой поиск -->
      <div class="search-filters mb-8">
        <div class="flex gap-4">
          <div class="form-group flex-1">
            <input 
              v-model="searchQuery"
              type="text" 
              class="form-input"
              placeholder="Поиск по названию, городу или описанию..."
              @keyup.enter="searchObjects"
            >
          </div>
          <button @click="searchObjects" class="btn btn-primary">
            Найти
          </button>
          <button @click="resetSearch" class="btn btn-outline">
            Сброс
          </button>
        </div>
      </div>

      <!-- Быстрые ссылки -->
      <div class="flex gap-4 mb-6">
        <NuxtLink to="/objects/my-objects" class="btn btn-outline">
          📝 Мои объекты
        </NuxtLink>
        <NuxtLink to="/objects/create" class="btn btn-outline">
          ➕ Добавить объект
        </NuxtLink>
      </div>

      <!-- Результаты поиска -->
      <div v-if="loading" class="text-center py-12">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mx-auto"></div>
        <p class="mt-4 text-gray-600">Загрузка объектов...</p>
      </div>

      <div v-else-if="objects.length === 0" class="text-center py-12">
        <div class="text-gray-400 text-6xl mb-4">🏢</div>
        <h3 class="text-xl font-semibold mb-2">Объекты не найдены</h3>
        <p class="text-gray-600 mb-6">Попробуйте изменить поисковый запрос или добавьте первый объект</p>
        <NuxtLink to="/objects/create" class="btn btn-primary">
          Добавить первый объект
        </NuxtLink>
      </div>

      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <ObjectCard 
          v-for="object in objects"
          :key="object.id"
          :object="object"
          @click="navigateToObject(object.id)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ObjectItem } from '~/composables/useObjects'

const route = useRoute()
const { objects, loading, fetchObjects } = useObjects()

const searchQuery = ref(route.query.search as string || '')

// Загрузка объектов при монтировании
onMounted(() => {
  if (searchQuery.value) {
    searchObjects()
  } else {
    fetchObjects()
  }
})

const searchObjects = async () => {
  await fetchObjects({
    search: searchQuery.value
  })
}

const resetSearch = async () => {
  searchQuery.value = ''
  await fetchObjects()
}

const navigateToObject = (id: number) => {
  navigateTo(`/objects/${id}`)
}
</script>