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

    <main class="object-page">
      <div class="container max-w-6xl">
        <!-- Хлебные крошки -->
        <nav class="breadcrumbs">
          <NuxtLink to="/objects" class="breadcrumb-link">Все объекты</NuxtLink>
          <span class="breadcrumb-separator">/</span>
          <span class="breadcrumb-current">{{ object?.title }}</span>
        </nav>

        <!-- Заголовок и действия -->
        <div class="page-header">
          <div class="header-content">
            <div class="header-text">
              <div class="object-meta">
                <span class="object-type">{{ getTypeLabel(object?.type) }}</span>
                <div class="rating">
                  <div class="rating-stars">
                    <span 
                    v-for="star in 5" 
                    :key="star" 
                    class="rating-star"
                    :class="{ empty: star > Math.round(object?.rating || 0) }">
                      ★
                    </span>
                  </div>
                  <span class="rating-value">{{ object?.rating }}</span>
                  <span class="reviews-count">({{ object?.reviewsCount }} отзывов)</span>
                </div>
              </div>
              <h1 class="page-title">{{ object?.title }}</h1>
              <div class="object-location">
                <span class="location-icon">📍</span>
                {{ object?.city }}, {{ object?.address }}
              </div>
            </div>
            <div class="header-actions">
              <div class="price-section">
                <div class="price">{{ formatPrice(object?.price) }}</div>
                <div class="price-period">за ночь</div>
              </div>
              <div class="action-buttons">
                <button class="btn btn-primary btn-large" @click="showBookingModal = true">
                  Забронировать
                </button>
                <button class="btn btn-outline btn-with-icon">
                  <span>❤️</span>
                  В избранное
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- Галерея изображений -->
        <div class="gallery-section">
          <div class="main-image">
            <img :src="object?.images[0]" :alt="object?.title" class="gallery-image" @click="openGallery(0)" >
          </div>
          <div v-if="object?.images && object.images.length > 1" class="thumbnails">
            <div 
            v-for="(image, index) in object.images.slice(1, 5)" 
            :key="index" class="thumbnail"
            @click="openGallery(index + 1)">
              <img :src="image" :alt="`${object.title} - фото ${index + 2}`">
              <div v-if="index === 3 && object.images.length > 5" class="more-images">
                +{{ object.images.length - 5 }}
              </div>
            </div>
          </div>
        </div>

        <!-- Основной контент -->
        <div class="content-grid">
          <!-- Информация об объекте -->
          <div class="content-main">
            <!-- Описание -->
            <section class="content-section">
              <h2 class="section-title">Описание</h2>
              <p class="object-description">{{ object?.description }}</p>
            </section>

            <!-- Удобства -->
            <section class="content-section">
              <h2 class="section-title">Удобства</h2>
              <div class="amenities-grid">
                <div v-for="amenity in object?.amenities" :key="amenity" class="amenity-item">
                  <span class="amenity-icon">✅</span>
                  <span class="amenity-text">{{ amenity }}</span>
                </div>
              </div>
            </section>

            <!-- Контакты -->
            <section class="content-section">
              <h2 class="section-title">Контакты</h2>
              <div class="contact-info">
                <div class="contact-item">
                  <span class="contact-icon">📞</span>
                  <a :href="`tel:${object?.contact.phone}`" class="contact-link">
                    {{ object?.contact.phone }}
                  </a>
                </div>
                <div class="contact-item">
                  <span class="contact-icon">✉️</span>
                  <a :href="`mailto:${object?.contact.email}`" class="contact-link">
                    {{ object?.contact.email }}
                  </a>
                </div>
                <div class="contact-item">
                  <span class="contact-icon">📍</span>
                  <span class="contact-text">{{ object?.address }}, {{ object?.city }}</span>
                </div>
              </div>
            </section>

            <!-- Отзывы -->
            <section v-if="reviews.length > 0" class="content-section">
              <div class="section-header">
                <h2 class="section-title">Отзывы</h2>
                <div class="reviews-summary">
                  <div class="average-rating">{{ object?.rating }}</div>
                  <div class="reviews-stats">
                    <div class="rating-stars small">
                      <span 
                      v-for="star in 5" 
                      :key="star" 
                      class="rating-star"
                      :class="{ empty: star > Math.round(object?.rating || 0) }">
                        ★
                      </span>
                    </div>
                    <div class="reviews-count">{{ object?.reviewsCount }} отзывов</div>
                  </div>
                </div>
              </div>

              <div class="reviews-list">
                <div v-for="review in reviews" :key="review.id" class="review-card">
                  <div class="review-header">
                    <div class="reviewer-info">
                      <div class="reviewer-avatar">
                        {{ review.author.name.charAt(0) }}
                      </div>
                      <div class="reviewer-details">
                        <div class="reviewer-name">{{ review.author.name }}</div>
                        <div class="review-date">{{ formatDate(review.date) }}</div>
                      </div>
                    </div>
                    <div class="review-rating">
                      <div class="rating-stars small">
                        <span 
                        v-for="star in 5" 
                        :key="star" 
                        class="rating-star"
                        :class="{ empty: star > review.rating }">
                          ★
                        </span>
                      </div>
                    </div>
                  </div>
                  <p class="review-text">{{ review.text }}</p>
                </div>
              </div>
            </section>
          </div>

          <!-- Боковая панель -->
          <div class="content-sidebar">
            <!-- Блок бронирования -->
            <div class="booking-card card">
              <div class="card-header">
                <h3 class="card-title">Бронирование</h3>
                <div class="price-info">
                  <span class="price-large">{{ formatPrice(object?.price) }}</span>
                  <span class="price-period">за ночь</span>
                </div>
              </div>
              <div class="card-body">
                <div class="booking-form">
                  <div class="form-group">
                    <label class="form-label">Даты</label>
                    <div class="date-inputs">
                      <input v-model="bookingDates.checkIn" type="date" class="form-input" placeholder="Заезд">
                      <input v-model="bookingDates.checkOut" type="date" class="form-input" placeholder="Выезд">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="form-label">Гости</label>
                    <select v-model="bookingGuests" class="form-select">
                      <option value="1">1 гость</option>
                      <option value="2">2 гостя</option>
                      <option value="3">3 гостя</option>
                      <option value="4">4 гостя</option>
                    </select>
                  </div>
                  <button 
                  class="btn btn-primary btn-large" 
                  :disabled="!bookingDates.checkIn || !bookingDates.checkOut"
                  @click="showBookingModal = true">
                    Забронировать
                  </button>
                </div>
              </div>
            </div>

            <!-- Контактная информация -->
            <div class="contact-card card">
              <div class="card-header">
                <h3 class="card-title">Контактная информация</h3>
              </div>
              <div class="card-body">
                <div class="contact-actions">
                  <a :href="`tel:${object?.contact.phone}`" class="btn btn-outline btn-with-icon">
                    <span>📞</span>
                    Позвонить
                  </a>
                  <a :href="`mailto:${object?.contact.email}`" class="btn btn-outline btn-with-icon">
                    <span>✉️</span>
                    Написать
                  </a>
                </div>
              </div>
            </div>

            <!-- Действия владельца -->
            <div v-if="isOwner" class="owner-actions card">
              <div class="card-header">
                <h3 class="card-title">Управление объектом</h3>
              </div>
              <div class="card-body">
                <div class="action-buttons">
                  <NuxtLink :to="`/objects/${object?.id}/edit`" class="btn btn-outline btn-with-icon">
                    <span>✏️</span>
                    Редактировать
                  </NuxtLink>
                  <button 
                  class="btn btn-outline btn-with-icon" 
                  :class="{ 'btn-primary': !object?.isActive }"
                  @click="toggleObjectStatus">
                    <span>{{ object?.isActive ? '⏸️' : '▶️' }}</span>
                    {{ object?.isActive ? 'Деактивировать' : 'Активировать' }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>


    <!-- Модальное окно бронирования -->
    <BookingModal 
    v-if="showBookingModal" 
    :object="object" 
    :dates="bookingDates" 
    :guests="bookingGuests"
    @close="showBookingModal = false" 
    @confirm="handleBooking" />

    <!-- Галерея изображений -->
    <ImageGallery 
    v-if="showGallery" 
    :images="object?.images || []" 
    :initial-index="galleryIndex"
    @close="showGallery = false" />
  </div>
</template>

<script setup lang="ts">

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

interface Review {
  id: number
  author: {
    name: string
    avatar?: string
  }
  rating: number
  text: string
  date: string
}

// Route и состояние
const route = useRoute()
const object = ref<ObjectData | null>(null)
const reviews = ref<Review[]>([])
const loading = ref(true)
const showBookingModal = ref(false)
const showGallery = ref(false)
const galleryIndex = ref(0)
const isOwner = ref(false)

// Данные бронирования
const bookingDates = ref({
  checkIn: '',
  checkOut: ''
})
const bookingGuests = ref('2')

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

// Мок-отзывы
const mockReviews: Review[] = [
  {
    id: 1,
    author: { name: 'Анна Петрова' },
    rating: 5,
    text: 'Прекрасное место для отдыха! Очень уютные номера, вкусные завтраки и великолепный вид на озеро. Обязательно вернемся снова.',
    date: '2024-01-15'
  },
  {
    id: 2,
    author: { name: 'Иван Сидоров' },
    rating: 4,
    text: 'Отличный гостевой дом, все понравилось. Особенно порадовала баня и рыбалка. Персонал очень внимательный и доброжелательный.',
    date: '2024-01-10'
  }
]

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

    // Проверка владельца (в реальном приложении - по ID пользователя)
    isOwner.value = object.value.ownerId === 1

    // SEO
    useSeoMeta({
      title: `${object.value.title} - EasySite`,
      description: object.value.description,
      ogTitle: object.value.title,
      ogDescription: object.value.description,
      ogImage: object.value.images[0]
    })
  } catch (error) {
    console.error('Error loading object:', error)
    showError({ statusCode: 404, statusMessage: 'Объект не найден' })
  } finally {
    loading.value = false
  }
})

// Методы
const getTypeLabel = (type: string | undefined) => {
  const types: Record<string, string> = {
    hotel: '🏨 Гостиница',
    sanatorium: '🏥 Санаторий',
    guest_house: '🏡 Гостевой дом',
    tour: '🧳 Тур',
    restaurant: '🍴 Ресторан'
  }
  return types[type || ''] || type
}

const formatPrice = (price: number | undefined) => {
  if (!price) return '0 ₽'
  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', {
    day: 'numeric',
    month: 'long',
    year: 'numeric'
  })
}

const openGallery = (index: number) => {
  galleryIndex.value = index
  showGallery.value = true
}

const toggleObjectStatus = async () => {
  if (!object.value) return

  object.value.isActive = !object.value.isActive
  // В реальном приложении здесь был бы API-запрос
}

const handleBooking = (bookingData: unknown) => {
  console.log('Booking confirmed:', bookingData)
  showBookingModal.value = false
  // Здесь обработка бронирования
}
</script>

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

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.breadcrumb-link {
  color: var(--primary-500);
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb-link:hover {
  color: var(--primary-600);
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--text-tertiary);
}

.breadcrumb-current {
  color: var(--text-primary);
  font-weight: var(--font-medium);
}

.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: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xl);
  align-items: flex-start;
}

.header-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.object-meta {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.object-type {
  padding: var(--space-xs) var(--space-sm);
  background: var(--primary-100);
  color: var(--primary-700);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.rating {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.rating-stars {
  display: flex;
  gap: 2px;
}

.rating-star {
  color: var(--secondary-400);
  font-size: var(--text-lg);
}

.rating-star.empty {
  color: var(--gray-300);
}

.rating-stars.small .rating-star {
  font-size: var(--text-sm);
}

.rating-value {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.reviews-count {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

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

.object-location {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-lg);
  color: var(--text-secondary);
}

.location-icon {
  font-size: var(--text-xl);
}

.header-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 280px;
}

.price-section {
  text-align: center;
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

.price {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--primary-600);
  line-height: 1;
}

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

.price-period {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-xs);
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Галерея */
.gallery-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  height: 400px;
}

.main-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.gallery-image:hover {
  transform: scale(1.02);
}

.thumbnails {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  height: 100%;
}

.thumbnail {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  height: calc(50% - var(--space-sm) / 2);
}

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

.thumbnail:hover img {
  transform: scale(1.05);
}

.more-images {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
}

/* Основной контент */
.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.content-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

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

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

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

.reviews-summary {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.average-rating {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

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

.object-description {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}

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

.amenity-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.amenity-icon {
  font-size: var(--text-lg);
}

.amenity-text {
  font-weight: var(--font-medium);
  color: var(--text-primary);
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

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

.contact-icon {
  font-size: var(--text-lg);
  width: 1.5rem;
}

.contact-link {
  color: var(--primary-600);
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-link:hover {
  color: var(--primary-700);
  text-decoration: underline;
}

.contact-text {
  color: var(--text-primary);
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.review-card {
  padding: var(--space-lg);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

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

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

.reviewer-avatar {
  width: 3rem;
  height: 3rem;
  background: var(--primary-500);
  color: var(--text-inverse);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
}

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

.reviewer-name {
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.review-date {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.review-rating {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.review-text {
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}

/* Боковая панель */
.content-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  position: sticky;
  top: var(--space-xl);
}

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

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

.booking-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.date-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.contact-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.owner-actions .action-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Адаптивность */
@media (max-width: 1024px) {
  .content-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .content-sidebar {
    position: static;
  }

  .gallery-section {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .header-content {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .header-actions {
    min-width: auto;
  }

  .gallery-section {
    grid-template-columns: 1fr;
    height: auto;
  }

  .thumbnails {
    grid-template-columns: repeat(4, 1fr);
    height: 100px;
  }

  .thumbnail {
    height: 100px;
  }

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

  .content-section {
    padding: var(--space-lg);
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

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

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

  .object-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .gallery-section {
    height: auto;
  }

  .thumbnails {
    grid-template-columns: repeat(2, 1fr);
    height: auto;
  }

  .thumbnail {
    height: 80px;
  }

  .action-buttons .btn {
    width: 100%;
  }

  .date-inputs {
    grid-template-columns: 1fr;
  }
}
</style>