<template>
  <div class="min-h-screen bg-gray-50">
    <!-- Хлебные крошки -->
    <div class="bg-white border-b">
      <div class="container py-4">
        <nav class="flex items-center gap-2 text-sm">
          <NuxtLink to="/objects" class="text-primary-600 hover:text-primary-700">
            Объекты
          </NuxtLink>
          <span class="text-gray-400">/</span>
          <span class="text-gray-600">{{ object?.title }}</span>
        </nav>
      </div>
    </div>

    <div class="container py-8">
      <!-- Заголовок и действия -->
      <div class="flex justify-between items-start mb-8">
        <div>
          <h1 class="text-3xl font-bold mb-2">{{ object?.title }}</h1>
          <div class="flex items-center gap-4 text-gray-600">
            <span class="flex items-center gap-1">
              📍 {{ object?.city }}, {{ object?.country }}
            </span>
            <span class="badge badge-primary">
              {{ getTypeLabel(object?.type || '') }}
            </span>
            <span v-if="object?.rating" class="flex items-center gap-1">
              ⭐ {{ object.rating }} ({{ object.reviewCount }} отзывов)
            </span>
          </div>
        </div>

        <div class="flex gap-3" v-if="isOwner">
          <NuxtLink 
            :to="`/objects/${object?.id}/edit`"
            class="btn btn-outline"
          >
            Редактировать
          </NuxtLink>
          <button 
            @click="handleDelete"
            class="btn btn-outline text-red-600 hover:bg-red-50"
          >
            Удалить
          </button>
        </div>
      </div>

      <!-- Основной контент -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Левая колонка - изображения и описание -->
        <div class="lg:col-span-2 space-y-8">
          <!-- Галерея изображений -->
          <div class="card">
            <div class="card-body p-0">
              <div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden">
                <img 
                  :src="object?.images[0] || '/images/placeholder.jpg'"
                  :alt="object?.title"
                  class="w-full h-96 object-cover"
                >
              </div>
              <div class="grid grid-cols-4 gap-2 p-4" v-if="object?.images.length > 1">
                <img 
                  v-for="(image, index) in object.images.slice(1, 5)"
                  :key="index"
                  :src="image"
                  :alt="`${object.title} - изображение ${index + 2}`"
                  class="w-full h-20 object-cover rounded cursor-pointer"
                  @click="currentImage = image"
                >
              </div>
            </div>
          </div>

          <!-- Описание -->
          <div class="card">
            <div class="card-header">
              <h2 class="text-xl font-semibold">Описание</h2>
            </div>
            <div class="card-body">
              <p class="text-gray-700 leading-relaxed">{{ object?.description }}</p>
            </div>
          </div>

          <!-- Услуги -->
          <div class="card">
            <div class="card-header">
              <h2 class="text-xl font-semibold">Услуги и удобства</h2>
            </div>
            <div class="card-body">
              <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                <div 
                  v-for="amenity in object?.amenities"
                  :key="amenity"
                  class="flex items-center gap-2"
                >
                  <span class="w-2 h-2 bg-primary-500 rounded-full"></span>
                  <span>{{ getAmenityLabel(amenity) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Правая колонка - информация и контакты -->
        <div class="space-y-6">
          <!-- Карточка цены и бронирования -->
          <div class="card sticky top-24">
            <div class="card-body">
              <div class="text-3xl font-bold text-primary-600 mb-2">
                {{ formatPrice(object?.price || 0) }}
                <span class="text-sm font-normal text-gray-500">
                  {{ getPriceUnitLabel(object?.priceUnit || '') }}
                </span>
              </div>
              
              <div class="space-y-4 mt-6">
                <button class="btn btn-primary w-full">
                  📞 Связаться
                </button>
                <button class="btn btn-outline w-full">
                  📍 Показать на карте
                </button>
              </div>
            </div>
          </div>

          <!-- Контактная информация -->
          <div class="card">
            <div class="card-header">
              <h3 class="font-semibold">Контактная информация</h3>
            </div>
            <div class="card-body space-y-3">
              <div class="flex items-center gap-3">
                <span class="text-gray-400">📧</span>
                <a 
                  :href="`mailto:${object?.contactEmail}`"
                  class="text-primary-600 hover:underline"
                >
                  {{ object?.contactEmail }}
                </a>
              </div>
              <div class="flex items-center gap-3">
                <span class="text-gray-400">📞</span>
                <a 
                  :href="`tel:${object?.contactPhone}`"
                  class="text-primary-600 hover:underline"
                >
                  {{ object?.contactPhone }}
                </a>
              </div>
              <div 
                v-if="object?.website"
                class="flex items-center gap-3"
              >
                <span class="text-gray-400">🌐</span>
                <a 
                  :href="object.website"
                  target="_blank"
                  class="text-primary-600 hover:underline"
                >
                  {{ object.website }}
                </a>
              </div>
              <div class="flex items-center gap-3">
                <span class="text-gray-400">📍</span>
                <span>{{ object?.address }}</span>
              </div>
            </div>
          </div>

          <!-- Информация о владельце -->
          <div class="card">
            <div class="card-header">
              <h3 class="font-semibold">О владельце</h3>
            </div>
            <div class="card-body">
              <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center">
                  <span class="text-primary-600 font-semibold">
                    {{ getInitials(object?.userId === 1 ? 'Иван Иванов' : 'Владелец') }}
                  </span>
                </div>
                <div>
                  <div class="font-medium">
                    {{ object?.userId === 1 ? 'Иван Иванов' : 'Владелец объекта' }}
                  </div>
                  <div class="text-sm text-gray-600">На сайте с 2024</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const route = useRoute()
const { isAuthenticated } = useAuth()
const { fetchObjectById, deleteObject } = useObjects()

const object = ref<ObjectItem | null>(null)
const loading = ref(true)
const currentImage = ref('')

// Проверяем, является ли текущий пользователь владельцем
const isOwner = computed(() => {
  return isAuthenticated && object.value?.userId === 1 // В реальном приложении сравниваем с ID текущего пользователя
})

onMounted(async () => {
  const objectId = parseInt(route.params.id as string)
  if (objectId) {
    const result = await fetchObjectById(objectId)
    object.value = result
    if (result?.images?.[0]) {
      currentImage.value = result.images[0]
    }
  }
  loading.value = false
})

const getTypeLabel = (type: string) => {
  const types: Record<string, string> = {
    hotel: 'Отель',
    apartment: 'Апартаменты',
    villa: 'Вилла',
    camping: 'Кемпинг',
    restaurant: 'Ресторан',
    attraction: 'Достопримечательность'
  }
  return types[type] || type
}

const getAmenityLabel = (amenity: string) => {
  const amenities: Record<string, string> = {
    wifi: 'Wi-Fi',
    parking: 'Парковка',
    breakfast: 'Завтрак',
    pool: 'Бассейн',
    spa: 'СПА',
    kitchen: 'Кухня',
    washing_machine: 'Стиральная машина',
    air_conditioning: 'Кондиционер',
    heating: 'Отопление',
    gym: 'Тренажерный зал',
    tv: 'Телевизор',
    elevator: 'Лифт'
  }
  return amenities[amenity] || amenity
}

const getPriceUnitLabel = (unit: string) => {
  const units: Record<string, string> = {
    per_night: '/ночь',
    per_person: '/человека',
    fixed: ''
  }
  return units[unit] || unit
}

const formatPrice = (price: number) => {
  return new Intl.NumberFormat('ru-RU').format(price) + ' ₽'
}

const getInitials = (name: string) => {
  return name.split(' ').map(n => n[0]).join('').toUpperCase()
}

const handleDelete = async () => {
  if (!object.value) return
  
  if (confirm('Вы уверены, что хотите удалить этот объект? Это действие нельзя отменить.')) {
    try {
      await deleteObject(object.value.id)
      alert('Объект успешно удален')
      await navigateTo('/objects/my-objects')
    } catch (error) {
      console.error('Error deleting object:', error)
      alert('Ошибка при удалении объекта')
    }
  }
}
</script>