@props([
    'name',
    'id' => null,
    'label',
    'domain',
    'options' => [],
    'selected' => null,
    'required' => false,
    'placeholder' => '— Select —',
    'canCreate' => false,
])

@php
    $fieldId = $id ?? \Illuminate\Support\Str::of($name)->replace(['[', ']'], ['_', ''])->trim('_')->toString();
    $selectedValue = old($name, $selected);
    $selectClass = 'block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500';
@endphp

<div
    x-data="{
        showModal: false,
        saving: false,
        error: '',
        newLabel: '',
        domain: @js($domain),
        url: @js($canCreate ? route('loan.system.setup.reference_data.quick_add') : ''),
        csrf: @js(csrf_token()),
        title: @js($label),
        openModal() {
            this.error = '';
            this.newLabel = '';
            this.showModal = true;
            this.$nextTick(() => this.$refs.newLabel?.focus());
        },
        closeModal() {
            this.showModal = false;
            this.saving = false;
            this.error = '';
        },
        async save() {
            if (this.saving) return;
            const label = this.newLabel.trim();
            if (label === '') { this.error = 'Please enter a name.'; return; }
            this.saving = true;
            this.error = '';
            try {
                const res = await fetch(this.url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': this.csrf,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({ domain: this.domain, label }),
                });
                let data = {};
                try { data = await res.json(); } catch (e) { data = {}; }
                if (!res.ok) {
                    this.error = data.message || (data.errors ? Object.values(data.errors).flat().join(' ') : 'Could not add option.');
                    this.saving = false;
                    return;
                }
                const sel = this.$refs.select;
                let opt = Array.from(sel.options).find(o => o.value === data.code);
                if (!opt) {
                    opt = document.createElement('option');
                    opt.value = data.code;
                    opt.textContent = data.label;
                    sel.appendChild(opt);
                }
                sel.value = data.code;
                sel.dispatchEvent(new Event('change', { bubbles: true }));
                this.closeModal();
            } catch (e) {
                this.error = 'Network error. Please try again.';
                this.saving = false;
            }
        },
    }"
    class="relative"
>
    <x-input-label :for="$fieldId" :value="$label" :required="$required" />
    <div class="mt-1 flex items-stretch gap-2">
        <select
            id="{{ $fieldId }}"
            name="{{ $name }}"
            x-ref="select"
            @if ($required) required @endif
            class="{{ $selectClass }}"
        >
            <option value="">{{ $placeholder }}</option>
            @foreach ($options as $code => $optionLabel)
                <option value="{{ $code }}" @selected((string) $selectedValue === (string) $code)>{{ $optionLabel }}</option>
            @endforeach
        </select>
        @if ($canCreate)
            <button
                type="button"
                @click="openModal()"
                title="Add a new {{ \Illuminate\Support\Str::lower($label) }}"
                aria-label="Add a new {{ \Illuminate\Support\Str::lower($label) }}"
                class="inline-flex shrink-0 items-center justify-center gap-1 rounded-md border border-slate-300 bg-white px-3 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500"
            >
                <span class="text-lg leading-none" aria-hidden="true">+</span>
                <span>Add</span>
            </button>
        @endif
    </div>
    <x-input-error class="mt-2" :messages="$errors->get($name)" />

    @if ($canCreate)
        <div
            x-show="showModal"
            x-cloak
            @keydown.escape.window="closeModal()"
            class="fixed inset-0 z-[80] flex items-center justify-center p-4"
        >
            <div class="absolute inset-0 bg-slate-900/50" @click="closeModal()"></div>
            <div class="relative w-full max-w-md rounded-xl bg-white p-5 shadow-2xl" @click.stop>
                <div class="mb-4 flex items-start justify-between gap-3">
                    <div>
                        <h3 class="text-sm font-semibold text-slate-900">Add <span x-text="title.toLowerCase()"></span></h3>
                        <p class="text-xs text-slate-500">This option becomes available for all clients.</p>
                    </div>
                    <button type="button" @click="closeModal()" class="text-slate-400 hover:text-slate-600" aria-label="Close">&times;</button>
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700" for="new_{{ $fieldId }}">Name</label>
                    <input
                        type="text"
                        id="new_{{ $fieldId }}"
                        x-ref="newLabel"
                        x-model="newLabel"
                        @keydown.enter.prevent="save()"
                        maxlength="200"
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                        placeholder="Type the new option"
                    />
                    <p x-show="error" x-cloak x-text="error" class="mt-2 text-xs text-rose-600"></p>
                </div>

                <div class="mt-5 flex items-center justify-end gap-2">
                    <button type="button" @click="closeModal()" class="rounded-md border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</button>
                    <button
                        type="button"
                        @click="save()"
                        :disabled="saving"
                        class="inline-flex items-center gap-2 rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-60"
                    >
                        <span x-show="!saving">Save option</span>
                        <span x-show="saving" x-cloak>Saving…</span>
                    </button>
                </div>
            </div>
        </div>
    @endif
</div>