<template>
  <div class="page-wrapper">

    <main class="objects-page">
      <div class="container">
        <!-- Заголовок и действия -->
        <div class="page-header">
          <div class="header-content">
            <div class="header-text">
              <h1 class="page-title">Все объекты</h1>
              <p class="page-subtitle">Найдено {{ filteredObjects.length }} объектов</p>
            </div>
            <div class="header-actions">
              <button class="btn btn-outline btn-with-icon" @click="showFilters = !showFilters">
                <span>🔍</span>
                Фильтры
                <span v-if="activeFiltersCount > 0" class="badge badge-primary">
                  {{ activeFiltersCount }}
                </span>
              </button>
              <NuxtLink to="/objects/create" class="btn btn-primary btn-with-icon">
                <span>➕</span>
                Добавить объект
              </NuxtLink>
            </div>
          </div>

          <!-- Быстрые фильтры -->
          <div class="quick-filters">
            <button
            v-for="type in quickTypes" 
            :key="type.value" 
            class="quick-filter"
            :class="{ active: filters.type === type.value }" 
            @click="toggleQuickFilter(type.value)">
              {{ type.icon }} {{ type.label }}
            </button>
          </div>
        </div>

        <!-- Расширенные фильтры -->
        <div v-if="showFilters" class="search-filters card">
          <div class="filter-grid">
            <div class="form-group">
              <label class="form-label">Тип объекта</label>
              <select v-model="filters.type" class="form-select">
                <option value="">Все типы</option>
                <option value="hotel">🏨 Гостиница</option>
                <option value="sanatorium">🏥 Санаторий</option>
                <option value="tour">🧳 Тур</option>
                <option value="restaurant">🍴 Ресторан</option>
                <option value="guest_house">🏡 Гостевой дом</option>
              </select>
            </div>

            <div class="form-group">
              <label class="form-label">Город</label>
              <input v-model="filters.city" type="text" class="form-input" placeholder="Введите город">
            </div>

            <div class="form-group">
              <label class="form-label">Цена до</label>
              <input v-model="filters.maxPrice" type="number" class="form-input" placeholder="Макс. цена">
            </div>

            <div class="form-group">
              <label class="form-label">Рейтинг от</label>
              <select v-model="filters.minRating" class="form-select">
                <option value="0">Любой рейтинг</option>
                <option value="4">⭐ 4.0+</option>
                <option value="4.5">⭐ 4.5+</option>
                <option value="4.8">⭐ 4.8+</option>
              </select>
            </div>
          </div>

          <div class="filter-actions">
            <button class="btn btn-primary" @click="applyFilters">
              Применить фильтры
            </button>
            <button class="btn btn-outline" @click="resetFilters">
              Сбросить
            </button>
          </div>
        </div>

        <!-- Управление видом -->
        <div class="view-controls">
          <div class="sort-controls">
            <select v-model="sortBy" class="form-select">
              <option value="title">По названию</option>
              <option value="price">По цене</option>
              <option value="rating">По рейтингу</option>
              <option value="city">По городу</option>
            </select>
            <button class="btn btn-outline btn-sm" @click="sortOrder = sortOrder === 'asc' ? 'desc' : 'asc'">
              {{ sortOrder === 'asc' ? '↑' : '↓' }}
            </button>
          </div>

          <div class="view-toggle">
            <button
            class="btn btn-outline btn-sm" :class="{ 'btn-primary': viewMode === 'grid' }"
              @click="viewMode = 'grid'">
              ▦
            </button>
            <button
            class="btn btn-outline btn-sm" :class="{ 'btn-primary': viewMode === 'list' }"
              @click="viewMode = 'list'">
              ☰
            </button>
          </div>
        </div>

        <!-- Результаты -->
        <div v-if="loading" class="loading-state">
          <div class="loading-spinner"/>
          <p class="loading-text">Загрузка объектов...</p>
        </div>

        <div v-else-if="filteredObjects.length === 0" class="empty-state">
          <div class="empty-icon">🏢</div>
          <h3 class="empty-title">Объекты не найдены</h3>
          <p class="empty-description">Попробуйте изменить параметры поиска</p>
          <button class="btn btn-primary" @click="resetFilters">
            Сбросить фильтры
          </button>
        </div>

        <!-- Сетка объектов -->
        <div v-else class="objects-grid" :class="viewMode === 'grid' ? 'grid-view' : 'list-view'">
          <ObjectCard 
          v-for="object in paginatedObjects" 
          :key="object.id" 
          :object="object" 
          :view-mode="viewMode"
          @click="navigateToObject(object.id)" />
        </div>

        <!-- Пагинация -->
        <div v-if="!loading && filteredObjects.length > 0" class="pagination">
          <button 
          v-for="page in totalPages" 
          :key="page" 
          class="pagination-btn"
          :class="{ active: currentPage === page }"
          @click="currentPage = page" >
            {{ page }}
          </button>
        </div>
      </div>
    </main>

  </div>
</template>

<script setup lang="ts">

interface ObjectItem {
  id: number
  title: string
  type: string
  city: string
  price: number
  rating: number
  image: string
  description: string
  isActive: boolean
  createdAt: string
}

// Навигация
useHead({
  title: 'Все объекты - EasySite'
})

// Состояние
const objects = ref<ObjectItem[]>([])
const loading = ref(true)
const showFilters = ref(false)
const viewMode = ref<'grid' | 'list'>('grid')
const sortBy = ref<'title' | 'price' | 'rating' | 'city'>('title')
const sortOrder = ref<'asc' | 'desc'>('asc')
const currentPage = ref(1)
const itemsPerPage = 9

const filters = ref({
  search: '',
  type: '',
  city: '',
  maxPrice: null as number | null,
  minRating: 0
})

// Быстрые фильтры
const quickTypes = [
  { value: 'hotel', label: 'Гостиницы', icon: '🏨' },
  { value: 'sanatorium', label: 'Санатории', icon: '🏥' },
  { value: 'tour', label: 'Туры', icon: '🧳' },
  { value: 'restaurant', label: 'Рестораны', icon: '🍴' }
]

// Мок-данные
const mockObjects: ObjectItem[] = [
  {
    id: 1,
    title: 'Горный отель "Эдельвейс"',
    type: 'hotel',
    city: 'Сочи',
    price: 4500,
    rating: 4.8,
    image: '/images/hotels/edelweiss.jpg',
    description: 'Комфортабельный отель в горах с видом на море. Идеальное место для отдыха от городской суеты.',
    isActive: true,
    createdAt: '2024-01-15'
  },
  {
    id: 2,
    title: 'Санаторий "Здоровье"',
    type: 'sanatorium',
    city: 'Кисловодск',
    price: 3200,
    rating: 4.6,
    image: '/images/sanatoriums/health.jpg',
    description: 'Лечебно-оздоровительный комплекс с минеральными водами и современным оборудованием.',
    isActive: true,
    createdAt: '2024-01-10'
  },
  {
    id: 3,
    title: 'Тур по Золотому кольцу',
    type: 'tour',
    city: 'Москва',
    price: 12500,
    rating: 4.9,
    image: '/images/tours/golden-ring.jpg',
    description: '7-дневный тур по древним городам России с опытным гидом и комфортабельным транспортом.',
    isActive: true,
    createdAt: '2024-01-08'
  }
]

// Вычисляемые свойства
const activeFiltersCount = computed(() => {
  return Object.values(filters.value).filter(val =>
    val !== '' && val !== null && val !== 0
  ).length
})

const filteredObjects = computed(() => {
  let filtered = [...objects.value]

  if (filters.value.search) {
    const search = filters.value.search.toLowerCase()
    filtered = filtered.filter(obj =>
      obj.title.toLowerCase().includes(search) ||
      obj.city.toLowerCase().includes(search) ||
      obj.description.toLowerCase().includes(search)
    )
  }

  if (filters.value.type) {
    filtered = filtered.filter(obj => obj.type === filters.value.type)
  }

  if (filters.value.city) {
    filtered = filtered.filter(obj =>
      obj.city.toLowerCase().includes(filters.value.city.toLowerCase())
    )
  }

  if (filters.value.maxPrice) {
    filtered = filtered.filter(obj => obj.price <= filters.value.maxPrice!)
  }

  if (filters.value.minRating) {
    filtered = filtered.filter(obj => obj.rating >= filters.value.minRating!)
  }

  return filtered
})

const sortedObjects = computed(() => {
  const sorted = [...filteredObjects.value].sort((a, b) => {
    let aVal = a[sortBy.value]
    let bVal = b[sortBy.value]

    if (sortBy.value === 'price' || sortBy.value === 'rating') {
      const aNum = Number(aVal)
      const bNum = Number(bVal)
      return sortOrder.value === 'asc' ? aNum - bNum : bNum - aNum
    }

    aVal = String(aVal).toLowerCase()
    bVal = String(bVal).toLowerCase()

    if (sortOrder.value === 'asc') {
      return aVal.localeCompare(bVal)
    } else {
      return bVal.localeCompare(aVal)
    }
  })

  return sorted
})

const paginatedObjects = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage
  return sortedObjects.value.slice(start, start + itemsPerPage)
})

const totalPages = computed(() => {
  return Math.ceil(filteredObjects.value.length / itemsPerPage)
})

// Методы
const toggleQuickFilter = (type: string) => {
  filters.value.type = filters.value.type === type ? '' : type
  applyFilters()
}

const applyFilters = () => {
  currentPage.value = 1
}

const resetFilters = () => {
  filters.value = {
    search: '',
    type: '',
    city: '',
    maxPrice: null,
    minRating: 0
  }
  currentPage.value = 1
}

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

// Инициализация
onMounted(async () => {
  loading.value = true
  await new Promise(resolve => setTimeout(resolve, 800))
  objects.value = mockObjects
  loading.value = false
})

// Следим за изменениями фильтров
watch([filters, sortBy, sortOrder], () => {
  applyFilters()
})
</script>

<style scoped>
.objects-page {
  padding: var(--space-xl) 0;
  min-height: calc(100vh - 160px);
  background: var(--bg-secondary);
}

.page-header {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.header-text {
  flex: 1;
}

.page-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.page-subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

.header-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.quick-filter {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.quick-filter:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
  transform: translateY(-1px);
}

.quick-filter.active {
  background: var(--primary-500);
  color: var(--text-inverse);
  border-color: var(--primary-500);
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.filter-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.view-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

.sort-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.view-toggle {
  display: flex;
  gap: var(--space-xs);
}

.objects-grid.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.objects-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.loading-state {
  text-align: center;
  padding: var(--space-2xl);
}

.loading-spinner {
  width: 3rem;
  height: 3rem;
  border: 3px solid var(--border-light);
  border-top: 3px solid var(--primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-md);
}

.loading-text {
  color: var(--text-secondary);
  font-size: var(--text-lg);
}

.empty-state {
  text-align: center;
  padding: var(--space-2xl);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: var(--space-lg);
  opacity: 0.5;
}

.empty-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.empty-description {
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
}

.pagination-btn {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: var(--font-medium);
}

.pagination-btn:hover {
  border-color: var(--primary-300);
  background: var(--primary-50);
}

.pagination-btn.active {
  background: var(--primary-500);
  color: var(--text-inverse);
  border-color: var(--primary-500);
}

.cursor-pointer:hover {
  cursor: pointer;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Адаптивность */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: stretch;
  }

  .header-actions {
    justify-content: stretch;
  }

  .header-actions .btn {
    flex: 1;
    min-width: auto;
  }

  .filter-grid {
    grid-template-columns: 1fr;
  }

  .view-controls {
    flex-direction: column;
    gap: var(--space-md);
    align-items: stretch;
  }

  .sort-controls {
    justify-content: space-between;
  }

  .objects-grid.grid-view {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: var(--space-lg);
  }

  .page-title {
    font-size: var(--text-2xl);
  }

  .quick-filters {
    justify-content: center;
  }

  .quick-filter {
    flex: 1;
    min-width: 120px;
    text-align: center;
  }
}
</style>