<template>
    <form @submit.prevent="handleSubmit" class="space-y-8">
        <!-- Основная информация -->
        <div class="card">
            <div class="card-header">
                <h2 class="text-xl font-semibold">Основная информация</h2>
            </div>
            <div class="card-body space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="form-group">
                        <label class="form-label">Название объекта *</label>
                        <input v-model="form.title" type="text" class="form-input"
                            placeholder="Например: Отель 'Морской бриз'" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Тип объекта *</label>
                        <select v-model="form.type" class="form-select" required>
                            <option value="">Выберите тип</option>
                            <option value="hotel">Отель</option>
                            <option value="apartment">Апартаменты</option>
                            <option value="villa">Вилла</option>
                            <option value="camping">Кемпинг</option>
                            <option value="restaurant">Ресторан</option>
                            <option value="attraction">Достопримечательность</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Описание *</label>
                    <textarea v-model="form.description" rows="4" class="form-input"
                        placeholder="Подробное описание объекта, его преимуществ и особенностей..." required></textarea>
                </div>
            </div>
        </div>

        <!-- Местоположение -->
        <div class="card">
            <div class="card-header">
                <h2 class="text-xl font-semibold">Местоположение</h2>
            </div>
            <div class="card-body space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="form-group">
                        <label class="form-label">Страна *</label>
                        <input v-model="form.country" type="text" class="form-input" placeholder="Россия" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Город *</label>
                        <input v-model="form.city" type="text" class="form-input" placeholder="Москва" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Категория *</label>
                        <select v-model="form.category" class="form-select" required>
                            <option value="">Выберите категорию</option>
                            <option value="accommodation">Проживание</option>
                            <option value="food">Питание</option>
                            <option value="entertainment">Развлечения</option>
                            <option value="culture">Культура</option>
                            <option value="nature">Природа</option>
                            <option value="shopping">Шоппинг</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Адрес *</label>
                    <input v-model="form.address" type="text" class="form-input" placeholder="ул. Примерная, 123"
                        required>
                </div>
            </div>
        </div>

        <!-- Цены и услуги -->
        <div class="card">
            <div class="card-header">
                <h2 class="text-xl font-semibold">Цены и услуги</h2>
            </div>
            <div class="card-body space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="form-group">
                        <label class="form-label">Цена *</label>
                        <input v-model="form.price" type="number" class="form-input" placeholder="5000" min="0"
                            required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Единица измерения цены *</label>
                        <select v-model="form.priceUnit" class="form-select" required>
                            <option value="">Выберите единицу</option>
                            <option value="per_night">За ночь</option>
                            <option value="per_person">За человека</option>
                            <option value="fixed">Фиксированная цена</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Услуги и удобства</label>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-2">
                        <label v-for="amenity in availableAmenities" :key="amenity.value"
                            class="flex items-center space-x-2 cursor-pointer">
                            <input type="checkbox" :value="amenity.value" v-model="form.amenities"
                                class="rounded border-gray-300">
                            <span class="text-sm">{{ amenity.label }}</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Контактная информация -->
        <div class="card">
            <div class="card-header">
                <h2 class="text-xl font-semibold">Контактная информация</h2>
            </div>
            <div class="card-body space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="form-group">
                        <label class="form-label">Email для связи *</label>
                        <input v-model="form.contactEmail" type="email" class="form-input"
                            placeholder="contact@example.com" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label">Телефон для связи *</label>
                        <input v-model="form.contactPhone" type="tel" class="form-input" placeholder="+7 999 123-45-67"
                            required>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Веб-сайт (необязательно)</label>
                    <input v-model="form.website" type="url" class="form-input" placeholder="https://example.com">
                </div>
            </div>
        </div>

        <!-- Кнопки действий -->
        <div class="flex justify-end gap-4 pt-6">
            <button type="button" @click="$emit('cancel')" class="btn btn-outline" :disabled="props.loading">
                Отмена
            </button>
            <button type="submit" class="btn btn-primary" :disabled="props.loading">
                <span v-if="props.loading">Сохранение...</span>
                <span v-else>{{ props.object ? 'Обновить' : 'Создать' }} объект</span>
            </button>
        </div>
    </form>
</template>

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

interface Props {
    object?: ObjectItem | null
    loading?: boolean
}

interface Emits {
    (e: 'submit', data: any): void
    (e: 'cancel'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// Доступные услуги
const availableAmenities = [
    { value: 'wifi', label: 'Wi-Fi' },
    { value: 'parking', label: 'Парковка' },
    { value: 'breakfast', label: 'Завтрак' },
    { value: 'pool', label: 'Бассейн' },
    { value: 'spa', label: 'СПА' },
    { value: 'gym', label: 'Тренажерный зал' },
    { value: 'air_conditioning', label: 'Кондиционер' },
    { value: 'heating', label: 'Отопление' },
    { value: 'kitchen', label: 'Кухня' },
    { value: 'washing_machine', label: 'Стиральная машина' },
    { value: 'tv', label: 'Телевизор' },
    { value: 'elevator', label: 'Лифт' }
]

// Форма данных
const form = ref({
    title: '',
    description: '',
    type: '',
    category: '',
    address: '',
    city: '',
    country: '',
    price: 0,
    priceUnit: '',
    amenities: [] as string[],
    contactEmail: '',
    contactPhone: '',
    website: ''
})

// Заполняем форму данными при редактировании
watch(() => props.object, (object) => {
    if (object) {
        form.value = {
            title: object.title,
            description: object.description,
            type: object.type,
            category: object.category,
            address: object.address,
            city: object.city,
            country: object.country,
            price: object.price,
            priceUnit: object.priceUnit,
            amenities: object.amenities || [],
            contactEmail: object.contactEmail,
            contactPhone: object.contactPhone,
            website: object.website || ''
        }
    }
}, { immediate: true })

const handleSubmit = () => {
    // Валидация
    if (!form.value.title || !form.value.type || !form.value.description) {
        alert('Пожалуйста, заполните все обязательные поля')
        return
    }

    emit('submit', form.value)
}
</script>