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

    <main class="my-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">Управление вашими добавленными местами</p>
            </div>
            <div class="header-actions">
              <NuxtLink to="/objects" class="btn btn-outline btn-with-icon">
                <span>🔍</span>
                Все объекты
              </NuxtLink>
              <NuxtLink to="/objects/create" class="btn btn-primary btn-with-icon">
                <span>➕</span>
                Добавить объект
              </NuxtLink>
            </div>
          </div>
        </div>

        <!-- Фильтры -->
        <div class="search-filters card">
          <div class="filter-grid">
            <div class="form-group">
              <label class="form-label">Статус</label>
              <select v-model="filters.status" class="form-select">
                <option value="">Все статусы</option>
                <option value="active">Активные</option>
                <option value="inactive">Неактивные</option>
              </select>
            </div>
            <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="guest_house">🏡 Гостевой дом</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Поиск</label>
              <input v-model="filters.search" type="text" class="form-input" placeholder="Название или город">
            </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="objects-grid">
          <!-- Карточка добавления нового объекта -->
          <div class="add-card" @click="navigateToCreate">
            <div class="add-card-content">
              <div class="add-icon">➕</div>
              <h3 class="add-title">Добавить объект</h3>
              <p class="add-description">Создайте новое место для размещения</p>
            </div>
          </div>

          <!-- Карточки объектов -->
          <div v-for="object in myObjects" :key="object.id" class="object-card">
            <div class="card-image">
              <img :src="object.image || '/images/placeholder.jpg'" :alt="object.title" >
              <div class="card-badge" :class="object.isActive ? 'badge-success' : 'badge-secondary'">
                {{ object.isActive ? 'Активен' : 'Неактивен' }}
              </div>
            </div>

            <div class="card-content">
              <h3 class="card-title">{{ object.title }}</h3>
              <div class="card-meta">
                <span class="card-type">{{ getTypeLabel(object.type) }}</span>
                <span class="card-location">📍 {{ object.city }}</span>
              </div>
              <p class="card-description">{{ truncateDescription(object.description) }}</p>
              <div class="card-price">{{ formatPrice(object.price) }}</div>
              <div class="card-date">Добавлен: {{ formatDate(object.createdAt) }}</div>
            </div>

            <div class="card-actions">
              <!-- Кнопка просмотра объекта -->
              <NuxtLink
              :to="`/objects/${object.id}`" 
              class="btn btn-outline btn-sm btn-with-icon view-btn"
              title="Просмотреть объект">
                <span>👁️</span>
                Просмотр
              </NuxtLink>

              <div class="action-buttons">
                <NuxtLink
                :to="`/objects/${object.id}/edit`" 
                class="btn btn-outline btn-sm btn-with-icon"
                  title="Редактировать">
                  <span>✏️</span>
                </NuxtLink>
                <button
                class="btn btn-outline btn-sm btn-with-icon delete-btn" 
                title="Удалить"
                  @click="deleteObject(object.id)">
                  <span>🗑️</span>
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Пустой state -->
        <div v-if="!loading && myObjects.length === 0" class="empty-state">
          <div class="empty-icon">🏢</div>
          <h3 class="empty-title">У вас пока нет объектов</h3>
          <p class="empty-description">Добавьте первый объект, чтобы начать работу</p>
          <NuxtLink to="/objects/create" class="btn btn-primary">
            Добавить первый объект
          </NuxtLink>
        </div>

        <!-- Навигация -->
        <div class="page-navigation">
          <NuxtLink to="/objects" class="btn btn-outline btn-with-icon">
            ← Все объекты
          </NuxtLink>
          <NuxtLink to="/" class="btn btn-outline btn-with-icon">
            🏠 На главную
          </NuxtLink>
        </div>
      </div>
    </main>

  </div>
</template>

<script setup lang="ts">
interface MyObjectItem {
  id: number
  title: string
  type: string
  city: string
  price: number
  isActive: boolean
  createdAt: string
  image?: string
  description: string
}

// Мок-данные с изображениями и описаниями
const mockMyObjects: MyObjectItem[] = [
  {
    id: 1,
    title: 'Гостевой дом "У озера"',
    type: 'guest_house',
    city: 'Карелия',
    price: 2800,
    isActive: true,
    createdAt: '2024-01-15',
    image: '/images/objects/lake-house-1.jpg',
    description: 'Уютный гостевой дом на берегу живописного озера в Карелии. Идеальное место для отдыха от городской суеты.'
  },
  {
    id: 2,
    title: 'Экскурсия по историческому центру',
    type: 'tour',
    city: 'Санкт-Петербург',
    price: 1500,
    isActive: true,
    createdAt: '2024-01-10',
    image: '/images/objects/city-tour.jpg',
    description: 'Увлекательная пешеходная экскурсия по самым знаковым местам Северной столицы с опытным гидом.'
  },
  {
    id: 3,
    title: 'Горнолыжный курорт "Снежный"',
    type: 'hotel',
    city: 'Красная Поляна',
    price: 5200,
    isActive: false,
    createdAt: '2024-01-05',
    image: '/images/objects/ski-resort.jpg',
    description: 'Современный горнолыжный комплекс с комфортабельными номерами и прямым доступом к склонам.'
  },
  {
    id: 4,
    title: 'Санаторий "Здоровье"',
    type: 'sanatorium',
    city: 'Кисловодск',
    price: 3200,
    isActive: true,
    createdAt: '2024-01-03',
    image: '/images/objects/sanatorium.jpg',
    description: 'Лечебно-оздоровительный комплекс с минеральными водами и современным медицинским оборудованием.'
  },
  {
    id: 5,
    title: 'Тур по Золотому кольцу',
    type: 'tour',
    city: 'Москва',
    price: 12500,
    isActive: true,
    createdAt: '2024-01-01',
    image: '/images/objects/golden-ring.jpg',
    description: '7-дневный автобусный тур по древним городам России с проживанием в комфортабельных отелях.'
  }
]

const myObjects = ref<MyObjectItem[]>(mockMyObjects)
const loading = ref(false)

const filters = ref({
  status: '',
  type: '',
  search: ''
})

// Навигация
const navigateToCreate = () => {
  navigateTo('/objects/create')
}

// Методы
const applyFilters = () => {
  let filtered = [...mockMyObjects]

  if (filters.value.status) {
    filtered = filtered.filter(obj =>
      filters.value.status === 'active' ? obj.isActive : !obj.isActive
    )
  }

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

  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)
    )
  }

  myObjects.value = filtered
}

const resetFilters = () => {
  filters.value = {
    status: '',
    type: '',
    search: ''
  }
  myObjects.value = mockMyObjects
}

const deleteObject = async (id: number) => {
  if (confirm('Вы уверены, что хотите удалить этот объект?')) {
    myObjects.value = myObjects.value.filter(obj => obj.id !== id)
  }
}

const getTypeLabel = (type: string) => {
  const types: Record<string, string> = {
    hotel: '🏨 Гостиница',
    sanatorium: '🏥 Санаторий',
    guest_house: '🏡 Гостевой дом',
    tour: '🧳 Тур',
    excursion: '🚶 Экскурсия'
  }
  return types[type] || type
}

const truncateDescription = (description: string, maxLength: number = 100) => {
  if (description.length <= maxLength) return description
  return description.substring(0, maxLength) + '...'
}

const formatPrice = (price: number) => {
  return new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: 'RUB',
    minimumFractionDigits: 0
  }).format(price)
}

const formatDate = (dateString: string) => {
  return new Date(dateString).toLocaleDateString('ru-RU')
}
</script>

<style scoped>
.my-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);
}

.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;
}

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

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

/* Сетка карточек */
.objects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

/* Карточка добавления */
.add-card {
  background: var(--bg-primary);
  border: 2px dashed var(--border-medium);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 300px;
}

.add-card:hover {
  border-color: var(--primary-500);
  background: var(--primary-50);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.add-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.add-icon {
  font-size: 3rem;
  opacity: 0.7;
  transition: transform 0.3s ease;
}

.add-card:hover .add-icon {
  transform: scale(1.1);
  opacity: 1;
}

.add-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.add-description {
  color: var(--text-secondary);
  margin: 0;
  font-size: var(--text-sm);
}

/* Карточка объекта */
.object-card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.object-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.object-card:hover .card-image img {
  transform: scale(1.05);
}

.card-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.badge-success {
  background: var(--success-50);
  color: var(--success-600);
}

.badge-secondary {
  background: var(--gray-100);
  color: var(--gray-600);
}

.card-content {
  padding: var(--space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.card-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.card-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.card-type {
  font-size: var(--text-sm);
  color: var(--primary-600);
  font-weight: var(--font-medium);
}

.card-location {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.card-description {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: var(--space-xs) 0;
  flex: 1;
}

.card-price {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--primary-600);
  margin-top: auto;
}

.card-date {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.card-actions {
  padding: var(--space-lg);
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

.view-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-weight: var(--font-medium);
}

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

.action-buttons {
  display: flex;
  gap: var(--space-xs);
}

.delete-btn:hover {
  background: var(--error-50);
  border-color: var(--error-300);
  color: var(--error-600);
}

/* Пустой state */
.empty-state {
  text-align: center;
  padding: var(--space-2xl);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  margin: var(--space-xl) 0;
}

.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);
}

.page-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-light);
}

/* Адаптивность */
@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;
  }

  .objects-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .card-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .view-btn {
    order: -1;
    margin-bottom: var(--space-sm);
  }

  .action-buttons {
    justify-content: space-between;
  }

  .page-navigation {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .page-navigation .btn {
    justify-content: center;
  }
}

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

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

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

  .add-card {
    min-height: 250px;
    padding: var(--space-lg);
  }

  .card-content {
    padding: var(--space-md);
  }

  .card-actions {
    padding: var(--space-md);
    padding-top: 0;
  }
}

/* Анимации для плавного появления */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.object-card {
  animation: fadeInUp 0.5s ease forwards;
}

.object-card:nth-child(1) {
  animation-delay: 0.1s;
}

.object-card:nth-child(2) {
  animation-delay: 0.2s;
}

.object-card:nth-child(3) {
  animation-delay: 0.3s;
}

.object-card:nth-child(4) {
  animation-delay: 0.4s;
}

.object-card:nth-child(5) {
  animation-delay: 0.5s;
}
</style>