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

    <main class="edit-object-page">
      <div class="container max-w-4xl">
        <!-- Заголовок -->
        <div class="page-header">
          <div class="header-content">
            <div class="header-main">
              <NuxtLink :to="`/objects/${$route.params.id}`" class="btn btn-outline btn-sm btn-with-icon">
                ← Назад к объекту
              </NuxtLink>
              <h1 class="page-title">Редактировать объект</h1>
            </div>
            <p class="page-subtitle">Обновите информацию о вашем объекте</p>
          </div>
        </div>

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

        <!-- Форма -->
        <ObjectForm 
        v-else-if="object" 
        :object="object" 
        :loading="updating" 
        @submit="handleSubmit"
        @cancel="handleCancel" />

        <!-- Объект не найден -->
        <div v-else class="error-state">
          <div class="error-icon">❌</div>
          <h3 class="error-title">Объект не найден</h3>
          <p class="error-description">Возможно, объект был удален или у вас нет к нему доступа</p>
          <div class="error-actions">
            <NuxtLink to="/objects/my-objects" class="btn btn-primary">
              Вернуться к моим объектам
            </NuxtLink>
            <NuxtLink to="/objects" class="btn btn-outline">
              Все объекты
            </NuxtLink>
          </div>
        </div>
      </div>
    </main>

  </div>
</template>

<script setup lang="ts">

interface ObjectData {
  id: number
  title: string
  type: string
  description: string
  city: string
  address: string
  price: number
  images: string[]
  amenities: string[]
  contact: {
    phone: string
    email: string
  }
}

const route = useRoute()
const object = ref<ObjectData | null>(null)
const loading = ref(true)
const updating = ref(false)

// Мок-данные объекта
const mockObject: ObjectData = {
  id: 1,
  title: 'Гостевой дом "У озера"',
  type: 'guest_house',
  description: 'Уютный гостевой дом на берегу живописного озера в Карелии. Идеальное место для отдыха от городской суеты.',
  city: 'Карелия',
  address: 'ул. Озерная, 15',
  price: 2800,
  images: [
    '/images/objects/lake-house-1.jpg',
    '/images/objects/lake-house-2.jpg'
  ],
  amenities: ['Wi-Fi', 'Парковка', 'Завтрак', 'Баня'],
  contact: {
    phone: '+7 (911) 123-45-67',
    email: 'lakehouse@example.com'
  }
}

onMounted(async () => {
  // Имитация загрузки данных
  await new Promise(resolve => setTimeout(resolve, 800))
  object.value = mockObject
  loading.value = false
})

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleSubmit = async (formData: any) => {
  updating.value = true

  try {
    // Имитация обновления
    await new Promise(resolve => setTimeout(resolve, 1000))

    console.log('Обновление объекта:', {
      id: parseInt(route.params.id as string),
      ...formData
    })

    alert('Объект успешно обновлен!')
    await navigateTo(`/objects/${route.params.id}`)
  } catch (error) {
    console.error('Error updating object:', error)
    alert('Ошибка при обновлении объекта')
  } finally {
    updating.value = false
  }
}

const handleCancel = () => {
  const objectId = route.params.id
  navigateTo(`/objects/${objectId}`)
}
</script>

<style scoped>
.edit-object-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;
  flex-direction: column;
  gap: var(--space-md);
}

.header-main {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

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

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

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

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

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

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

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

.error-description {
  color: var(--text-secondary);
  margin-bottom: var(--space-lg);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.error-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

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

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

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

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

  .error-actions {
    flex-direction: column;
    align-items: center;
  }

  .error-actions .btn {
    min-width: 200px;
  }
}

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

  .error-state {
    padding: var(--space-xl);
  }
}
</style>