{# Inline Entity Creation Component #}
{# Searchable dropdown with "+ Create New" button #}

<div class="mb-4 {{ css_class }}" x-data="inlineCreate({
    value: '{{ value|escapejs }}',
    label: '{{ current_label|escapejs }}',
    options: {{ options_json }},
    searchUrl: '{{ search_url|escapejs }}',
    createUrl: '{{ create_url|escapejs }}',
    modelName: '{{ model_name|escapejs }}',
    displayField: '{{ display_field|escapejs }}',
    valueField: '{{ value_field|escapejs }}'
})">
    {# Label #}
    {% if label %}
    <label for="id_{{ name }}" class="block text-sm font-medium text-gray-700 mb-1">
        {{ label }}{% if required %} <span class="text-red-500">*</span>{% endif %}
    </label>
    {% endif %}

    <div class="relative">
        {# Hidden input for form submission #}
        <input type="hidden" name="{{ name }}" id="id_{{ name }}" x-ref="hiddenInput"
               value="{{ value }}" x-bind:value="selectedValue"{% if required %} required{% endif %}>

        {# Main select container (shown when not in create mode) #}
        <div x-show="!showCreateForm">
            <div class="relative">
                {# Search input (shown when open or nothing selected) #}
                <input
                    type="text"
                    x-show="!selectedValue || open"
                    x-model="search"
                    @input.debounce.200ms="filter()"
                    @focus="open = true"
                    @keydown="onKeydown($event)"
                    @click.away="open = false"
                    placeholder="{{ placeholder }}"
                    autocomplete="off"
                    class="w-full px-3 py-2 pr-8 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                >

                {# Selected value display #}
                <button
                    type="button"
                    x-show="selectedValue && !open"
                    @click="open = true; $nextTick(() => $el.previousElementSibling.focus())"
                    class="w-full px-3 py-2 pr-8 border border-gray-300 rounded-lg text-sm text-left bg-white hover:bg-gray-50 focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                >
                    <span x-text="selectedLabel" class="text-gray-900"></span>
                </button>

                {# Clear button #}
                <button
                    type="button"
                    x-show="selectedValue"
                    @click.stop="clear()"
                    class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
                >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>

                {# Chevron icon (when nothing selected) #}
                <div x-show="!selectedValue" class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </div>
            </div>

            {# Dropdown #}
            <div
                x-show="open"
                x-cloak
                x-transition:enter="transition ease-out duration-100"
                x-transition:enter-start="opacity-0 -translate-y-1"
                x-transition:enter-end="opacity-100 translate-y-0"
                x-transition:leave="transition ease-in duration-75"
                x-transition:leave-start="opacity-100 translate-y-0"
                x-transition:leave-end="opacity-0 -translate-y-1"
                class="absolute z-50 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto"
            >
                {# Loading state #}
                <div x-show="loading" class="px-3 py-2 text-sm text-gray-500">
                    <span class="inline-flex items-center">
                        <svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        Buscando...
                    </span>
                </div>

                {# Options list #}
                <template x-for="(option, index) in filteredOptions" :key="option.value">
                    <button
                        type="button"
                        @click="select(option.value, option.label)"
                        :class="{
                            'bg-primary-50 text-primary-700': option.value === selectedValue,
                            'bg-gray-100': highlightIndex === index && option.value !== selectedValue,
                            'text-gray-900': option.value !== selectedValue
                        }"
                        class="w-full text-left px-3 py-2 text-sm hover:bg-gray-50 cursor-pointer"
                        x-text="option.label"
                    ></button>
                </template>

                {# No results #}
                <div x-show="!loading && filteredOptions.length === 0 && search" class="px-3 py-2 text-sm text-gray-500">
                    No se encontraron resultados.
                </div>

                {# Divider #}
                <div class="border-t border-gray-100"></div>

                {# Create new button #}
                <button
                    type="button"
                    @click.stop="openCreateForm()"
                    class="w-full text-left px-3 py-2.5 text-sm font-medium text-primary-600 hover:bg-primary-50 flex items-center gap-2 cursor-pointer"
                >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                    </svg>
                    <span>Crear <span x-text="modelName.toLowerCase()"></span> nuevo</span>
                </button>
            </div>
        </div>

        {# Create form panel (slide-over style) #}
        <div
            x-show="showCreateForm"
            x-cloak
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 translate-y-2"
            x-transition:enter-end="opacity-100 translate-y-0"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 translate-y-0"
            x-transition:leave-end="opacity-0 translate-y-2"
            class="border border-gray-200 rounded-lg bg-white shadow-lg overflow-hidden"
        >
            {# Create form header #}
            <div class="px-4 py-3 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
                <h4 class="text-sm font-semibold text-gray-900">
                    Crear <span x-text="modelName"></span>
                </h4>
                <button
                    type="button"
                    @click="closeCreateForm()"
                    class="text-gray-400 hover:text-gray-600 p-1 rounded hover:bg-gray-200"
                >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            {# Create form body #}
            <div class="p-4" x-ref="createFormContainer">
                {# Error message #}
                <div x-show="error" class="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700" x-text="error"></div>

                {# Loading state for form #}
                <div x-show="loading && !createFormHtml" class="py-6 text-center text-gray-500">
                    <svg class="animate-spin h-6 w-6 mx-auto text-gray-400" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <p class="mt-2 text-sm">Cargando formulario...</p>
                </div>

                {# Dynamic form container #}
                <div x-show="createFormHtml" x-html="createFormHtml"></div>

                {# Default inline form (when createFormHtml is not loaded via AJAX) #}
                <form x-show="!loading && !createFormHtml" @submit="submitCreate($event)" class="space-y-4">
                    {% csrf_token %}

                    {# Default name field #}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Nombre <span class="text-red-500">*</span></label>
                        <input
                            type="text"
                            name="name"
                            required
                            x-bind:value="search"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                            placeholder="Nombre..."
                        >
                    </div>

                    {# Form actions #}
                    <div class="flex items-center justify-end gap-3 pt-2">
                        <button
                            type="button"
                            @click="closeCreateForm()"
                            class="px-3 py-2 text-sm font-medium text-gray-700 hover:text-gray-900"
                        >
                            Cancelar
                        </button>
                        <button
                            type="submit"
                            :disabled="creating"
                            class="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
                        >
                            <svg x-show="creating" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            <span x-text="creating ? 'Creando...' : 'Crear'"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {% if help_text %}
    <p class="mt-1 text-sm text-gray-500">{{ help_text }}</p>
    {% endif %}
</div>