/**
 * SearchSelectModal Component
 *
 * Reusable bottom sheet modal for searching and selecting items.
 * Works correctly with iPhone Dynamic Island by using bottom sheet pattern.
 *
 * Usage:
 * <SearchSelectModal
 *     :show="showModal"
 *     title="Select Item"
 *     :searchable="true"
 *     :items="items"
 *     :loading="loading"
 *     v-model="searchQuery"
 *     @select="handleSelect"
 *     @close="showModal = false"
 * >
 *     <template #item="{ item }">
 *         <div>{{ item.name }}</div>
 *     </template>
 * </SearchSelectModal>
 */

export default {
    name: 'SearchSelectModal',
    emits: ['select', 'close', 'update:modelValue'],
    props: {
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: 'Auswählen'
        },
        searchable: {
            type: Boolean,
            default: false
        },
        searchPlaceholder: {
            type: String,
            default: 'Suchen...'
        },
        modelValue: {
            type: String,
            default: ''
        },
        items: {
            type: Array,
            default: () => []
        },
        loading: {
            type: Boolean,
            default: false
        },
        emptyText: {
            type: String,
            default: 'Keine Ergebnisse gefunden'
        },
        emptyIcon: {
            type: String,
            default: 'search' // search, users, box, list
        },
        selectedId: {
            type: [String, Number],
            default: null
        },
        itemKey: {
            type: String,
            default: 'id'
        },
        showNoneOption: {
            type: Boolean,
            default: false
        },
        noneOptionText: {
            type: String,
            default: 'Keine Auswahl'
        }
    },

    setup(props, { emit, slots }) {
        const { ref, computed, watch } = Vue;

        const searchInput = ref(null);

        // Focus search input when modal opens
        watch(() => props.show, (newVal) => {
            if (newVal && props.searchable) {
                setTimeout(() => {
                    searchInput.value?.focus();
                }, 100);
            }
        });

        const updateSearch = (event) => {
            emit('update:modelValue', event.target.value);
        };

        const selectItem = (item) => {
            emit('select', item);
        };

        const selectNone = () => {
            emit('select', null);
        };

        const close = () => {
            emit('close');
        };

        const isSelected = (item) => {
            if (props.selectedId === null || props.selectedId === undefined) return false;
            return item[props.itemKey] === props.selectedId;
        };

        // Icons for empty states
        const emptyIcons = {
            search: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />`,
            users: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />`,
            box: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />`,
            list: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />`
        };

        const getEmptyIcon = computed(() => {
            return emptyIcons[props.emptyIcon] || emptyIcons.search;
        });

        return {
            searchInput,
            updateSearch,
            selectItem,
            selectNone,
            close,
            isSelected,
            getEmptyIcon
        };
    },

    template: `
        <teleport to="body">
            <transition name="fade">
                <div v-if="show" class="fixed inset-0 z-50">
                    <!-- Backdrop -->
                    <div class="absolute inset-0 bg-black/50" @click="close"></div>

                    <!-- Sheet -->
                    <transition name="slide-up-sheet">
                        <div v-if="show" class="absolute bottom-0 left-0 right-0 bg-white dark:bg-slate-800 rounded-t-2xl shadow-xl max-h-[85vh] flex flex-col">
                            <!-- Handle -->
                            <div class="flex justify-center pt-2 pb-1 flex-shrink-0">
                                <div class="w-10 h-1 bg-slate-300 dark:bg-slate-600 rounded-full"></div>
                            </div>

                            <!-- Header -->
                            <div class="px-4 pb-3 border-b border-slate-100 dark:border-slate-700 flex-shrink-0">
                                <h3 class="text-lg font-semibold text-slate-800 dark:text-white text-center">
                                    {{ title }}
                                </h3>
                            </div>

                            <!-- Search Input (optional) -->
                            <div v-if="searchable" class="px-4 py-3 flex-shrink-0">
                                <div class="relative">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                    </svg>
                                    <input
                                        ref="searchInput"
                                        type="text"
                                        :value="modelValue"
                                        @input="updateSearch"
                                        :placeholder="searchPlaceholder"
                                        class="w-full pl-10 pr-4 py-3 bg-slate-100 dark:bg-slate-700 rounded-xl text-slate-800 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-primary"
                                    >
                                </div>
                            </div>

                            <!-- Results List -->
                            <div class="flex-1 overflow-y-auto px-4 pb-6">
                                <!-- Loading -->
                                <div v-if="loading" class="py-8 text-center">
                                    <div class="animate-spin w-8 h-8 border-3 border-primary border-t-transparent rounded-full mx-auto"></div>
                                </div>

                                <!-- Empty State -->
                                <div v-else-if="items.length === 0" class="py-8 text-center text-slate-500 dark:text-slate-400">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-3 text-slate-300 dark:text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" v-html="getEmptyIcon"></svg>
                                    <p>{{ emptyText }}</p>
                                </div>

                                <!-- Items List -->
                                <div v-else class="space-y-2">
                                    <!-- None Option -->
                                    <button
                                        v-if="showNoneOption"
                                        @click="selectNone"
                                        class="w-full flex items-center p-3 bg-slate-50 dark:bg-slate-700/50 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-700 transition text-left"
                                    >
                                        <div class="w-10 h-10 bg-slate-200 dark:bg-slate-600 rounded-full flex items-center justify-center flex-shrink-0">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                            </svg>
                                        </div>
                                        <div class="ml-3 flex-1">
                                            <p class="font-medium text-slate-500 dark:text-slate-400">{{ noneOptionText }}</p>
                                        </div>
                                    </button>

                                    <!-- Regular Items -->
                                    <button
                                        v-for="item in items"
                                        :key="item[itemKey]"
                                        @click="selectItem(item)"
                                        :class="[
                                            'w-full flex items-center p-3 rounded-xl transition text-left',
                                            isSelected(item)
                                                ? 'bg-primary/10 border-2 border-primary'
                                                : 'bg-slate-50 dark:bg-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-700'
                                        ]"
                                    >
                                        <!-- Custom slot for item content -->
                                        <slot name="item" :item="item" :selected="isSelected(item)">
                                            <!-- Default item rendering -->
                                            <div class="w-10 h-10 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
                                                <span class="text-primary font-semibold text-sm">
                                                    {{ (item.name || item.title || '?').charAt(0).toUpperCase() }}
                                                </span>
                                            </div>
                                            <div class="ml-3 flex-1 min-w-0">
                                                <p class="font-medium text-slate-800 dark:text-white truncate">
                                                    {{ item.name || item.title }}
                                                </p>
                                                <p v-if="item.subtitle" class="text-sm text-slate-500 dark:text-slate-400 truncate">
                                                    {{ item.subtitle }}
                                                </p>
                                            </div>
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                            </svg>
                                        </slot>
                                    </button>
                                </div>
                            </div>

                            <!-- Safe area padding for iOS -->
                            <div class="h-6 flex-shrink-0"></div>
                        </div>
                    </transition>
                </div>
            </transition>
        </teleport>
    `
};