@props([
    /** PATCH endpoint that accepts {field, value} JSON. Required. */
    'updateUrl',
    /** Backend column name, e.g. "sector_option_id". Required. */
    'fieldName',
    /** [id => localized name] map of allowed options. Required. */
    'options' => [],
    /** Currently selected option_id (or null). */
    'currentId' => null,
    /** Currently displayed name (already localized) — falls back to em-dash. */
    'currentName' => null,
    /** Allow choosing "None" / clearing the value. */
    'nullable' => true,
    /** Optional human-readable field label, used in the confirm dialog. */
    'fieldLabel' => null,
    /**
     * Value type sent to the backend. 'int' (default) for label_options FKs,
     * 'string' for fields like monday_group_id whose ids are non-numeric.
     */
    'valueType' => 'int',
])

@php
    // Stable, deterministic instance id (used for ARIA + Alpine refs).
    $uid = 'el-' . substr(md5($fieldName . '|' . (string) $currentId . '|' . microtime(true) . '|' . random_int(0, PHP_INT_MAX)), 0, 8);
    $dash = '—';
    $displayName = $currentName !== null && $currentName !== '' ? $currentName : $dash;
@endphp

<div
    class="editable-label"
    data-editable-label
    x-data="editableLabel({
        url: @js($updateUrl),
        field: @js($fieldName),
        fieldLabel: @js($fieldLabel ?? $fieldName),
        initialId: @js($currentId),
        initialName: @js($displayName),
        emptyDash: @js($dash),
        nullable: @js((bool) $nullable),
        valueType: @js($valueType),
        confirmTitle: @js(__('admin.startups_admin.inline_edit.confirm_title')),
        confirmMessage: @js(__('admin.startups_admin.inline_edit.confirm_message')),
        savingText: @js(__('admin.startups_admin.inline_edit.saving')),
        savedText:  @js(__('admin.startups_admin.inline_edit.saved')),
    })"
    x-cloak
>
    {{-- ── DISPLAY MODE ─────────────────────────────────────────────── --}}
    <span x-show="!editing" class="editable-label-display">
        <span class="editable-label-pill"
              :class="{ 'is-empty': !currentId, 'is-saved-flash': flash }"
              x-text="currentName"></span>

        <button type="button"
                class="editable-label-edit-btn"
                @click="startEdit()"
                :aria-label="'{{ __('admin.actions.edit') }}: ' + fieldLabel"
                :title="'{{ __('admin.actions.edit') }}: ' + fieldLabel">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M12 20h9"/>
                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"/>
            </svg>
        </button>

        {{-- transient saved-feedback hint --}}
        <span class="editable-label-toast is-success"
              x-show="flash"
              x-transition.opacity
              x-text="savedText"></span>

        <span class="editable-label-toast is-error"
              x-show="error"
              x-transition.opacity
              x-text="error"></span>
    </span>

    {{-- ── EDIT MODE ────────────────────────────────────────────────── --}}
    <span x-show="editing" class="editable-label-edit" @keydown.escape.prevent="cancelEdit()">
        <select class="editable-label-select"
                x-ref="select"
                x-model="draftId"
                :disabled="busy">
            @if ($nullable)
                <option value="">{{ __('admin.startups_admin.inline_edit.none_option') }}</option>
            @endif
            @foreach ($options as $optId => $optName)
                <option value="{{ $optId }}">{{ $optName }}</option>
            @endforeach
        </select>

        <button type="button" class="editable-label-action editable-label-save"
                @click="askConfirm()" :disabled="busy">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polyline points="20 6 9 17 4 12"/>
            </svg>
            <span x-text="busy ? savingText : '{{ __('admin.actions.save') }}'"></span>
        </button>

        <button type="button" class="editable-label-action editable-label-cancel"
                @click="cancelEdit()" :disabled="busy"
                aria-label="{{ __('admin.actions.cancel') }}"
                title="{{ __('admin.actions.cancel') }}">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"
                 fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
        </button>
    </span>

    {{-- ── CONFIRMATION MODAL (component-local) ─────────────────────── --}}
    <div class="editable-label-modal" x-show="confirming" x-transition.opacity style="display:none;" role="dialog" aria-modal="true">
        <div class="editable-label-modal-backdrop" @click="confirming = false"></div>
        <div class="editable-label-modal-dialog">
            <header class="editable-label-modal-head">
                <h4 x-text="confirmTitle"></h4>
            </header>
            <div class="editable-label-modal-body">
                <p x-text="confirmMessage"></p>
                <div class="editable-label-modal-diff">
                    <div>
                        <span class="muted">{{ __('admin.startups_admin.inline_edit.from') }}</span>
                        <strong x-text="initialName"></strong>
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
                    </svg>
                    <div>
                        <span class="muted">{{ __('admin.startups_admin.inline_edit.to') }}</span>
                        <strong x-text="draftName()"></strong>
                    </div>
                </div>
            </div>
            <footer class="editable-label-modal-foot">
                <button type="button" class="btn-secondary" @click="confirming = false" :disabled="busy">
                    {{ __('admin.actions.cancel') }}
                </button>
                <button type="button" class="btn-primary" @click="commit()" :disabled="busy">
                    <span x-text="busy ? savingText : '{{ __('admin.actions.confirm') }}'"></span>
                </button>
            </footer>
        </div>
    </div>
</div>

@once
    @push('scripts')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('editableLabel', (cfg) => ({
                // ── state ──────────────────────────────────────────────
                editing:     false,
                confirming:  false,
                busy:        false,
                error:       '',
                flash:       false,

                currentId:   cfg.initialId,
                currentName: cfg.initialName,

                draftId:     cfg.initialId === null || cfg.initialId === undefined ? '' : String(cfg.initialId),
                initialName: cfg.initialName,

                // ── config (kept on the instance for template access) ─
                fieldLabel:     cfg.fieldLabel,
                confirmTitle:   cfg.confirmTitle,
                confirmMessage: cfg.confirmMessage,
                savingText:     cfg.savingText,
                savedText:      cfg.savedText,

                // ── lifecycle ──────────────────────────────────────────
                startEdit() {
                    this.error    = '';
                    this.flash    = false;
                    this.draftId  = this.currentId === null || this.currentId === undefined ? '' : String(this.currentId);
                    this.editing  = true;
                    this.$nextTick(() => this.$refs.select?.focus());
                },
                cancelEdit() {
                    this.editing    = false;
                    this.confirming = false;
                    this.error      = '';
                },

                askConfirm() {
                    // No change → just close edit mode silently.
                    // Compare via string coercion so the same logic works for
                    // numeric label_options ids and string monday_group_ids.
                    const draftRaw   = this.draftId === '' ? '' : String(this.draftId);
                    const currentRaw = this.currentId === null || this.currentId === undefined ? '' : String(this.currentId);
                    if (draftRaw === currentRaw) {
                        this.editing = false;
                        return;
                    }
                    this.confirming = true;
                },

                draftName() {
                    if (this.draftId === '' || this.draftId === null) return cfg.emptyDash;
                    const opt = this.$root.querySelector('select.editable-label-select option[value="' + CSS.escape(this.draftId) + '"]');
                    return opt ? opt.textContent.trim() : cfg.emptyDash;
                },

                async commit() {
                    if (this.busy) return;
                    this.busy  = true;
                    this.error = '';
                    try {
                        const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';
                        // Coerce per the field's expected backend type. String
                        // path keeps non-numeric ids (e.g. monday_group_id like
                        // "new_group30359") intact.
                        const value = this.draftId === ''
                            ? null
                            : (cfg.valueType === 'string' ? String(this.draftId) : Number(this.draftId));
                        const res = await fetch(cfg.url, {
                            method:  'PATCH',
                            headers: {
                                'Content-Type':     'application/json',
                                'Accept':           'application/json',
                                'X-CSRF-TOKEN':     csrf,
                                'X-Requested-With': 'XMLHttpRequest',
                            },
                            credentials: 'same-origin',
                            body: JSON.stringify({ field: cfg.field, value }),
                        });
                        const body = await res.json().catch(() => ({}));
                        if (!res.ok || body.ok !== true) {
                            const msg = body?.message
                                || (body?.errors ? Object.values(body.errors).flat().join(' ') : '')
                                || ('HTTP ' + res.status);
                            throw new Error(msg);
                        }

                        // Apply locally — no page reload.
                        this.currentId   = body.option_id;
                        this.currentName = body.name || cfg.emptyDash;
                        this.initialName = this.currentName;
                        this.editing     = false;
                        this.confirming  = false;
                        this.flash       = true;
                        // auto-hide saved chip
                        setTimeout(() => { this.flash = false; }, 1800);
                    } catch (e) {
                        this.error      = e.message || 'Update failed';
                        this.confirming = false;
                        // auto-hide error after a few seconds
                        setTimeout(() => { this.error = ''; }, 4000);
                    } finally {
                        this.busy = false;
                    }
                },
            }));
        });
    </script>
    @endpush

    @push('styles')
    <style>
        [x-cloak] { display: none !important; }

        .editable-label { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

        .editable-label-display { display: inline-flex; align-items: center; gap: 6px; }

        .editable-label-pill {
            display: inline-flex;
            align-items: center;
            padding: 3px 10px;
            border-radius: 999px;
            background: rgba(111, 63, 194, 0.08);
            color: var(--na-primary, #6f3fc2);
            font-size: 12.5px;
            font-weight: 600;
            border: 1px solid rgba(111, 63, 194, 0.18);
            transition: background-color .25s ease, color .25s ease, border-color .25s ease;
            white-space: nowrap;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .editable-label-pill.is-empty {
            background: transparent;
            color: var(--na-muted, #6b7280);
            border-color: var(--na-border, #e5e7eb);
            font-weight: 500;
        }
        .editable-label-pill.is-saved-flash {
            background: rgba(46, 125, 50, 0.12);
            color: #1f6b27;
            border-color: rgba(46, 125, 50, 0.35);
        }

        .editable-label-edit-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            padding: 0;
            border: 1px solid transparent;
            background: transparent;
            color: var(--na-muted, #6b7280);
            border-radius: 6px;
            cursor: pointer;
            transition: background-color .12s ease, color .12s ease, border-color .12s ease;
        }
        .editable-label-edit-btn:hover {
            background: var(--na-bg, #f4f4f8);
            color: var(--na-primary, #6f3fc2);
            border-color: var(--na-border, #e5e7eb);
        }

        .editable-label-edit { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

        .editable-label-select {
            min-width: 180px;
            padding: 6px 10px;
            font-size: 13px;
            border: 1px solid var(--na-primary, #6f3fc2);
            border-radius: 8px;
            background: #fff;
            color: var(--na-text, #111);
            box-shadow: 0 0 0 3px rgba(111, 63, 194, 0.12);
        }

        .editable-label-action {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            height: 30px;
            padding: 0 10px;
            font-size: 12px;
            font-weight: 600;
            border-radius: 6px;
            cursor: pointer;
            border: 1px solid transparent;
            transition: background-color .12s ease, color .12s ease, opacity .12s ease;
        }
        .editable-label-action:disabled { opacity: .55; cursor: progress; }

        .editable-label-save {
            background: var(--na-primary, #6f3fc2);
            color: #fff;
        }
        .editable-label-save:hover:not(:disabled) {
            background: #5a2fa8;
        }

        .editable-label-cancel {
            background: transparent;
            color: var(--na-muted, #6b7280);
            border-color: var(--na-border, #e5e7eb);
            width: 30px; padding: 0; justify-content: center;
        }
        .editable-label-cancel:hover:not(:disabled) {
            background: var(--na-bg, #f4f4f8);
            color: var(--na-text, #111);
        }

        .editable-label-toast {
            font-size: 11.5px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: 999px;
            line-height: 1.6;
        }
        .editable-label-toast.is-success { background: rgba(46, 125, 50, 0.14); color: #1f6b27; }
        .editable-label-toast.is-error   { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }

        /* ── Confirmation modal ───────────────────────────────────── */
        .editable-label-modal {
            position: fixed; inset: 0; z-index: 9000;
            display: flex; align-items: center; justify-content: center;
            padding: 16px;
        }
        .editable-label-modal-backdrop {
            position: absolute; inset: 0;
            background: rgba(15, 17, 26, 0.55);
            backdrop-filter: blur(2px);
        }
        .editable-label-modal-dialog {
            position: relative;
            width: 100%; max-width: 460px;
            background: #fff;
            border-radius: 14px;
            box-shadow: 0 30px 60px -12px rgba(15, 17, 26, .35);
            overflow: hidden;
            animation: editable-pop .15s ease-out both;
        }
        @keyframes editable-pop {
            from { opacity: 0; transform: translateY(8px) scale(.98); }
            to   { opacity: 1; transform: none; }
        }
        .editable-label-modal-head {
            padding: 18px 22px 12px;
            border-bottom: 1px solid var(--na-border, #e5e7eb);
        }
        .editable-label-modal-head h4 {
            margin: 0; font-size: 16px; font-weight: 700; color: var(--na-text, #111);
        }
        .editable-label-modal-body {
            padding: 18px 22px;
            font-size: 14px; color: var(--na-text, #111); line-height: 1.55;
        }
        .editable-label-modal-body p { margin: 0 0 14px 0; color: var(--na-muted, #4b5563); }
        .editable-label-modal-diff {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 12px;
            align-items: center;
            padding: 12px 14px;
            background: var(--na-bg, #f7f7fa);
            border-radius: 10px;
            border: 1px solid var(--na-border, #e5e7eb);
        }
        .editable-label-modal-diff .muted {
            display: block;
            font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
            color: var(--na-muted, #6b7280); margin-bottom: 2px;
        }
        .editable-label-modal-diff strong { font-size: 13.5px; color: var(--na-text, #111); }
        .editable-label-modal-diff svg    { color: var(--na-primary, #6f3fc2); flex-shrink: 0; }
        [dir="rtl"] .editable-label-modal-diff svg { transform: scaleX(-1); }

        .editable-label-modal-foot {
            display: flex; gap: 10px; justify-content: flex-end;
            padding: 14px 22px; border-top: 1px solid var(--na-border, #e5e7eb);
            background: var(--na-bg, #fbfbfd);
        }
    </style>
    @endpush
@endonce