<!-- components/ObjectForm.vue -->
<template>
    <form class="space-y-6" @submit.prevent="handleSubmit">
        <!-- Основная информация -->
        <div class="card">
            <div class="card-header">
                <h3 class="text-lg font-semibold">Основная информация</h3>
            </div>
            <div class="card-body space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="form-label">Название объекта *</label>
                        <input
                        v-model="formData.title" 
                        type="text" 
                        class="form-input" 
                        required
                        placeholder="Введите название">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Тип объекта *</label>
                        <select v-model="formData.type" class="form-select" required>
                            <option value="">Выберите тип</option>
                            <option value="hotel">Гостиница</option>
                            <option value="sanatorium">Санаторий</option>
                            <option value="guest_house">Гостевой дом</option>
                            <option value="tour">Тур</option>
                            <option value="excursion">Экскурсия</option>
                            <option value="restaurant">Ресторан</option>
                        </select>
                    </div>
                </div>

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

        <!-- Местоположение -->
        <div class="card">
            <div class="card-header">
                <h3 class="text-lg font-semibold">Местоположение</h3>
            </div>
            <div class="card-body space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="form-label">Город *</label>
                        <input v-model="formData.city" type="text" class="form-input" required placeholder="Город">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Адрес *</label>
                        <input
v-model="formData.address" type="text" class="form-input" required
                            placeholder="Полный адрес">
                    </div>
                </div>
            </div>
        </div>

        <!-- Цены и контакты -->
        <div class="card">
            <div class="card-header">
                <h3 class="text-lg font-semibold">Цены и контакты</h3>
            </div>
            <div class="card-body space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="form-group">
                        <label class="form-label">Цена за ночь/услугу *</label>
                        <input v-model="formData.price" type="number" class="form-input" required placeholder="0">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Телефон *</label>
                        <input
v-model="formData.contact.phone" type="tel" class="form-input" required
                            placeholder="+7 (XXX) XXX-XX-XX">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Email</label>
                    <input
v-model="formData.contact.email" type="email" class="form-input"
                        placeholder="email@example.com">
                </div>
            </div>
        </div>

        <!-- Удобства -->
        <div class="card">
            <div class="card-header">
                <h3 class="text-lg font-semibold">Удобства и услуги</h3>
            </div>
            <div class="card-body">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
                    <label v-for="amenity in availableAmenities" :key="amenity" class="flex items-center space-x-2">
                        <input
v-model="formData.amenities" type="checkbox" :value="amenity"
                            class="rounded border-gray-300">
                        <span class="text-sm">{{ amenity }}</span>
                    </label>
                </div>
            </div>
        </div>

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

<script setup lang="ts">
interface ObjectFormData {
    title: string
    type: string
    description: string
    city: string
    address: string
    price: number
    images: string[]
    amenities: string[]
    contact: {
        phone: string
        email: string
    }
}

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

const props = withDefaults(defineProps<Props>(), {
    object: null,
    loading: false
})

const emit = defineEmits<{
    submit: [formData: ObjectFormData]
    cancel: []
}>()

const availableAmenities = [
    'Wi-Fi', 'Парковка', 'Бассейн', 'СПА', 'Завтрак',
    'Кондиционер', 'Трансфер', 'Экскурсии', 'Баня', 'Ресторан'
]

const formData = reactive<ObjectFormData>({
    title: '',
    type: '',
    description: '',
    city: '',
    address: '',
    price: 0,
    images: [],
    amenities: [],
    contact: {
        phone: '',
        email: ''
    }
})

// Заполнение формы данными при редактировании
watch(() => props.object, (newObject) => {
    if (newObject) {
        Object.assign(formData, newObject)
    }
}, { immediate: true })

const handleSubmit = () => {
    emit('submit', { ...formData })
}
</script>