@props([
    /** DB column name (or relation name for multiselect). */
    'name',
    /** Field definition from EntitySectionSchema (type/label/etc.). */
    'def',
])

@php
    $type     = $def['type'] ?? 'text';
    $labelKey = $def['label'] ?? null;
    $label    = $labelKey ? __($labelKey) : ucfirst(str_replace('_', ' ', $name));
    $dir      = $def['dir'] ?? null;
    $errorRef = "errors['{$name}']";
    $labelOptionsKey = $def['label_key'] ?? null;

    // For `number` fields, look at the validation rules: when `integer` is
    // declared we want the browser to enforce whole-number entry too. Without
    // step="1", `step="0.01"` lets users type "5.5" — the form POSTs cleanly
    // but Laravel rejects with "must be an integer" and the user sees a
    // generic "couldn't save" toast.
    $rules        = (array) ($def['rules'] ?? []);
    $isIntegerRule = in_array('integer', $rules, true);
    $numberStep   = $isIntegerRule ? '1' : '0.01';

    // Multiselect + textarea + string_list should span the full width
    // of the grid so chip lists / long text / repeater rows don't get
    // crammed into one column.
    $fullWidth = in_array($type, ['multiselect', 'textarea', 'string_list'], true);
@endphp

<div class="rd-edit-field @if($fullWidth) rd-edit-field--full @endif"
     :class="{{ $errorRef }} ? 'rd-edit-field--error' : ''">
    <label class="rd-edit-field__label" for="rd-edit-{{ $name }}">{{ $label }}</label>

    @switch($type)
        @case('textarea')
            <textarea
                id="rd-edit-{{ $name }}"
                x-model="values['{{ $name }}']"
                @if ($dir) dir="{{ $dir }}" @endif
                rows="4"
                class="rd-edit-input"
                :disabled="mode === 'saving'"
            ></textarea>
            @break

        @case('email')
            <input id="rd-edit-{{ $name }}" type="email" dir="ltr"
                   x-model="values['{{ $name }}']" class="rd-edit-input" :disabled="mode === 'saving'">
            @break

        @case('number')
            <input id="rd-edit-{{ $name }}" type="number" step="{{ $numberStep }}" @if ($isIntegerRule) min="0" inputmode="numeric" @endif dir="ltr"
                   x-model="values['{{ $name }}']" class="rd-edit-input" :disabled="mode === 'saving'">
            @break

        @case('date')
            <input id="rd-edit-{{ $name }}" type="date" dir="ltr"
                   x-model="values['{{ $name }}']" class="rd-edit-input" :disabled="mode === 'saving'">
            @break

        @case('country')
            {{-- Countries are an ARRAY of {id, name} records — Alpine's
                 x-for can't iterate a plain JS object, so the old
                 [id => name] shape rendered empty.

                 IMPORTANT — explicit `:selected` instead of `x-model`:
                 when <template x-for> inside a <select> populates the
                 <option> list AFTER Alpine's first pass at x-model, the
                 browser silently falls back to the first option (the
                 "Select…" placeholder), and the select never re-syncs
                 once x-for runs. The hero shows "Saudi Arabia · Riyadh"
                 because that path reads the resolved Eloquent relation,
                 but the edit form's dropdown appeared empty. Driving
                 selection from `:selected` per option + writing back on
                 `@change` removes the ordering dependency. --}}
            <select id="rd-edit-{{ $name }}"
                    @change="values['{{ $name }}'] = $event.target.value"
                    class="rd-edit-input rd-edit-select" :disabled="mode === 'saving'">
                <option value=""
                        :selected="!values['{{ $name }}']">{{ __('admin.section_edit.choose') }}</option>
                <template x-for="c in (catalogues.countries || [])" :key="c.id">
                    <option :value="c.id"
                            :selected="String(c.id) === String(values['{{ $name }}'])"
                            x-text="c.name"></option>
                </template>
            </select>
            @break

        @case('city')
            {{-- Same `:selected` pattern as country (see above).
                 filteredCities() re-runs reactively when the user
                 changes the country select — the new city list
                 re-renders and the selected city stays in sync via
                 its own `:selected` binding. --}}
            <select id="rd-edit-{{ $name }}"
                    @change="values['{{ $name }}'] = $event.target.value"
                    class="rd-edit-input rd-edit-select" :disabled="mode === 'saving'">
                <option value=""
                        :selected="!values['{{ $name }}']">{{ __('admin.section_edit.choose') }}</option>
                <template x-for="c in filteredCities()" :key="c.id">
                    <option :value="c.id"
                            :selected="String(c.id) === String(values['{{ $name }}'])"
                            x-text="c.name"></option>
                </template>
            </select>
            @break

        @case('group')
            {{-- Same `:selected` pattern as country/city/label so the
                 dropdown survives the x-for / x-model timing race:
                 each <option> drives its own `selected` state, and we
                 write back to the model on change. Catalog source is
                 `catalogues.groups` (built by
                 EntitySectionSchema::optionCatalogues for any section
                 that declares a `type:group` field). --}}
            <select id="rd-edit-{{ $name }}"
                    @change="values['{{ $name }}'] = $event.target.value"
                    class="rd-edit-input rd-edit-select" :disabled="mode === 'saving'">
                <option value=""
                        :selected="!values['{{ $name }}']">{{ __('admin.section_edit.choose') }}</option>
                <template x-for="g in (catalogues.groups || [])" :key="g.id">
                    <option :value="g.id"
                            :selected="String(g.id) === String(values['{{ $name }}'])"
                            x-text="g.name"></option>
                </template>
            </select>
            @break

        @case('label')
            {{-- Same `:selected` pattern as country/city: x-for-driven
                 <option> elements don't sync with x-model on first pass,
                 so we drive selection per-option and write back on change. --}}
            <select id="rd-edit-{{ $name }}"
                    @change="values['{{ $name }}'] = $event.target.value"
                    class="rd-edit-input rd-edit-select" :disabled="mode === 'saving'">
                <option value=""
                        :selected="!values['{{ $name }}']">{{ __('admin.section_edit.choose') }}</option>
                <template x-for="opt in (catalogues.labels && catalogues.labels[@js($labelOptionsKey)] ? catalogues.labels[@js($labelOptionsKey)] : [])" :key="opt.id">
                    <option :value="opt.id"
                            :selected="String(opt.id) === String(values['{{ $name }}'])"
                            x-text="opt.name"></option>
                </template>
            </select>
            @break

        @case('enum')
            {{-- Plain string enum: a small fixed list (e.g. yes/no). The
                 def carries `options` as an array of raw values; labels
                 are looked up via `options_label_prefix.<value>` so the
                 admin sees a translated label (e.g. "نعم"/"لا").
                 Server-rendered <option>s — x-model works fine here
                 because the options exist at first paint (no x-for). --}}
            @php
                $opts          = $def['options'] ?? [];
                $optLabelPref  = $def['options_label_prefix'] ?? null;
            @endphp
            <select id="rd-edit-{{ $name }}" x-model="values['{{ $name }}']"
                    class="rd-edit-input rd-edit-select" :disabled="mode === 'saving'">
                <option value="">{{ __('admin.section_edit.choose') }}</option>
                @foreach ($opts as $opt)
                    <option value="{{ $opt }}">{{ $optLabelPref ? __($optLabelPref . '.' . $opt) : $opt }}</option>
                @endforeach
            </select>
            @break

        @case('string_list')
            {{-- Repeater: free-form text rows that the admin can add /
                 remove dynamically. Stored as a flat JSON array on the
                 column. Empty rows are stripped server-side. --}}
            <div class="rd-edit-repeater">
                <template x-for="(_, idx) in (values['{{ $name }}'] || [])" :key="'{{ $name }}-' + idx">
                    <div class="rd-edit-repeater__row">
                        <span class="rd-edit-repeater__num" x-text="(idx + 1) + '.'"></span>
                        <input type="text"
                               class="rd-edit-input"
                               :value="values['{{ $name }}'][idx]"
                               @input="values['{{ $name }}'][idx] = $event.target.value"
                               :disabled="mode === 'saving'">
                        <button type="button"
                                class="rd-edit-repeater__rm"
                                @click="stringListRemove('{{ $name }}', idx)"
                                :disabled="mode === 'saving'"
                                :title="@js(__('admin.section_edit.repeater_remove'))"
                                :aria-label="@js(__('admin.section_edit.repeater_remove'))">
                            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                                <line x1="5" y1="12" x2="19" y2="12"/>
                            </svg>
                        </button>
                    </div>
                </template>
                <button type="button"
                        class="rd-edit-repeater__add"
                        @click="stringListAdd('{{ $name }}')"
                        :disabled="mode === 'saving'">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="12" y1="5" x2="12" y2="19"/>
                        <line x1="5" y1="12" x2="19" y2="12"/>
                    </svg>
                    {{ __('admin.section_edit.repeater_add') }}
                </button>
            </div>
            @break

        @case('multiselect')
            {{-- Chip-toggle picker: each option is a clickable pill that
                 flips its selected state. Stored as an array of integer
                 option ids on `values['{name}']`. --}}
            <div class="rd-edit-chips">
                <template x-for="opt in (catalogues.labels && catalogues.labels[@js($labelOptionsKey)] ? catalogues.labels[@js($labelOptionsKey)] : [])" :key="opt.id">
                    <button type="button"
                            class="rd-edit-chip"
                            :class="multiselectHas('{{ $name }}', opt.id) ? 'rd-edit-chip--on' : ''"
                            @click="multiselectToggle('{{ $name }}', opt.id)"
                            :disabled="mode === 'saving'">
                        <span class="rd-edit-chip__tick" aria-hidden="true">
                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                        </span>
                        <span x-text="opt.name"></span>
                    </button>
                </template>
                <template x-if="(catalogues.labels && catalogues.labels[@js($labelOptionsKey)] || []).length === 0">
                    <span class="rd-edit-chips__empty">{{ __('admin.section_edit.no_options') }}</span>
                </template>
            </div>
            @break

        @default
            <input id="rd-edit-{{ $name }}" type="text" @if ($dir) dir="{{ $dir }}" @endif
                   x-model="values['{{ $name }}']" class="rd-edit-input" :disabled="mode === 'saving'">
    @endswitch

    <span x-show="{{ $errorRef }}" x-cloak class="rd-edit-field__error" x-text="{{ $errorRef }}"></span>
</div>