@extends('admin.layouts.app')

@section('title', __('admin.labels.title') . ' — ' . __('admin.brand.name'))
@section('page_title', __('admin.labels.title'))

@push('styles')
<style>
    .labels-shell {
        display: grid;
        grid-template-columns: minmax(280px, 360px) 1fr;
        gap: 16px;
        align-items: start;
        margin-top: 16px;
    }
    @media (max-width: 900px) { .labels-shell { grid-template-columns: 1fr; } }

    .panel {
        background: #fff;
        border: 1px solid var(--na-border, #e5e7eb);
        border-radius: 14px;
        box-shadow: 0 1px 2px rgba(15,23,42,.04);
        overflow: hidden;
    }
    .panel-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 10px;
        padding: 14px 16px;
        border-bottom: 1px solid var(--na-border, #e5e7eb);
    }
    .panel-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
    .panel-body { padding: 6px; }
    .panel-empty {
        padding: 32px 16px;
        text-align: center;
        color: var(--na-muted, #64748b);
        font-size: 13px;
    }

    /* Type tabs */
    .type-tabs {
        display: inline-flex;
        background: #f1f5f9;
        padding: 4px;
        border-radius: 999px;
        gap: 4px;
    }
    .type-tab {
        padding: 6px 16px;
        border-radius: 999px;
        background: transparent;
        color: var(--na-muted, #64748b);
        border: 0;
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
        transition: all .15s;
    }
    .type-tab[aria-selected="true"] {
        background: #4f46e5;
        color: #fff;
        box-shadow: 0 1px 2px rgba(79,70,229,.2);
    }

    /* Label list */
    .label-list {
        list-style: none; margin: 0; padding: 0;
        display: flex; flex-direction: column; gap: 2px;
    }
    .label-item {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color .12s, opacity .12s, box-shadow .12s;
        border: 1px solid transparent;
    }
    .label-item:hover { background: #f8fafc; }
    .label-item[aria-current="true"] {
        background: #eef2ff;
        border-color: #c7d2fe;
    }
    .label-item.dragging  { opacity: .55; }
    .label-item.drag-over { box-shadow: inset 0 2px 0 #6366f1; }
    .label-item__handle {
        flex: 0 0 auto;
        color: #cbd5e1;
        cursor: grab;
        font-size: 14px;
        line-height: 1;
        user-select: none;
        padding: 2px 2px;
    }
    .label-item__handle:hover  { color: #6366f1; }
    .label-item__handle:active { cursor: grabbing; }
    .label-item__main { flex: 1; min-width: 0; }
    .label-item__name {
        font-weight: 600;
        color: var(--na-text, #0f172a);
        font-size: 14px;
        display: flex; align-items: center; gap: 6px;
    }
    .label-item__key {
        font-size: 11px;
        color: var(--na-muted, #64748b);
        font-family: ui-monospace, monospace;
        margin-top: 2px;
    }
    .label-item__meta {
        flex-shrink: 0;
        display: flex; align-items: center; gap: 6px;
    }
    .pill {
        display: inline-flex; align-items: center;
        padding: 2px 8px;
        background: #f1f5f9;
        color: #475569;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
    }
    .pill--ok { background: #ecfdf5; color: #047857; }
    .pill--off { background: #fef2f2; color: #b91c1c; }

    /* ── Options table ───────────────────────────────────────────────
       Single shared grid template (header + every row) so columns stay
       perfectly aligned. Channels column was removed; the grid is now:
         28px      → drag handle
         1fr       → name_en (inline edit)
         1fr       → name_ar (inline edit)
         auto      → status switch
         18px      → save-state indicator dot
         auto      → row actions (view + delete)
       Adjust here and the header below will track automatically.
    */
    /* ── Options table — simple admin style ──────────────────────────────
       A plain bordered table with bordered text inputs. Boring on purpose.
       Five columns, all the same height, no card backgrounds, no chips,
       no hover gymnastics — just a clean grid the eye can scan.

       Columns:
         28px   drag handle (subtle, always visible)
         1fr    Arabic name (input)
         1fr    English name (input)
         96px   status switch
         88px   actions (view + delete)
    */
    .opt-table {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        overflow: hidden;
    }
    .opt-table__head,
    .opt-table__row {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 112px 96px 88px;
        gap: 12px;
        align-items: center;
        padding: 10px 14px;
    }
    .opt-table__head {
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        font-size: 12px;
        font-weight: 600;
        color: #475569;
    }
    .opt-table__head__center { text-align: center; }

    .opt-table__row {
        border-bottom: 1px solid #f1f5f9;
        background: #fff;
        transition: background-color .12s;
    }
    .opt-table__row:last-child { border-bottom: 0; }
    .opt-table__row:hover { background: #fafbfd; }
    .opt-table__row.dragging  { opacity: .55; }
    .opt-table__row.drag-over { box-shadow: inset 0 2px 0 #6366f1; }

    .opt-handle {
        color: #cbd5e1;
        cursor: grab;
        text-align: center;
        font-size: 14px;
        line-height: 1;
        user-select: none;
    }
    .opt-handle:hover  { color: #6366f1; }
    .opt-handle:active { cursor: grabbing; }

    /* Minimal inline input. Looks like plain text at rest; a soft baseline
       underline appears on hover, a clean focused state on click. No
       boxy border so the row reads as data, not as a form. */
    .opt-input {
        width: 100%;
        height: 36px;
        padding: 0 8px;
        border: 1px solid transparent;
        border-radius: 6px;
        background: transparent;
        font: inherit;
        font-size: 14px;
        color: #0f172a;
        outline: none;
        transition: border-color .12s, background-color .12s, box-shadow .12s;
    }
    .opt-input::placeholder { color: #cbd5e1; }
    .opt-input:hover  { background: #f8fafc; border-color: #e2e8f0; }
    .opt-input:focus  {
        background: #fff;
        border-color: #4f46e5;
        box-shadow: 0 0 0 3px rgba(79,70,229,.12);
    }
    .opt-input[lang="ar"] { font-family: 'Tajawal', 'Segoe UI', sans-serif; }
    .opt-input[data-state="dirty"]  { border-color: #f59e0b; }
    .opt-input[data-state="saving"] { border-color: #6366f1; }
    .opt-input[data-state="saved"]  { border-color: #10b981; }
    .opt-input[data-state="error"]  { border-color: #ef4444; }

    /* Status cell — just the switch, centered. */
    .opt-status-cell {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Actions: two small icon buttons. */
    .opt-actions {
        display: flex;
        justify-content: flex-end;
        gap: 4px;
    }


    /* Toolbar above the table: count on one side, "+ add" on the other. */
    .opt-toolbar {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px;
        margin: 4px 2px 10px;
    }
    .opt-toolbar__count {
        font-size: 13px; font-weight: 600; color: #475569;
    }
    .opt-toolbar__count strong { color: #0f172a; }
    .opt-toolbar__add {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 7px 14px;
        background: #4f46e5; color: #fff;
        border: 0; border-radius: 7px;
        font-weight: 600; font-size: 13px;
        cursor: pointer;
        transition: background-color .12s;
    }
    .opt-toolbar__add:hover { background: #4338ca; }

    /* Responsive: stack name inputs on top of each other so the row stays
       readable on phones. Header hides. */
    @media (max-width: 720px) {
        .opt-table__head { display: none; }
        .opt-table__row {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto auto;
            row-gap: 8px;
        }
        .opt-table__row > :nth-child(1) { display: none; } /* drag handle */
        .opt-table__row > :nth-child(2) { grid-column: 1 / 3; grid-row: 1; }
        .opt-table__row > :nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
        .opt-table__row > :nth-child(4) { grid-column: 1; grid-row: 3; justify-self: start; }
        .opt-table__row > :nth-child(5) { grid-column: 2; grid-row: 3; justify-self: end; }
    }

    /* Per-row save indicator (small dot next to the row actions) */
    .row-indicator {
        display: inline-flex; align-items: center; justify-content: center;
        width: 18px; height: 18px;
        font-size: 11px;
        border-radius: 999px;
        color: transparent;
        transition: color .15s, background-color .15s;
    }
    .row-indicator[data-state="saving"] { color: #4f46e5; }
    .row-indicator[data-state="saved"]  { color: #10b981; }
    .row-indicator[data-state="error"]  { color: #ef4444; }
    .row-indicator[data-state="saving"]::after { content: "◐"; animation: row-spin 1.2s linear infinite; }
    .row-indicator[data-state="saved"]::after  { content: "✓"; }
    .row-indicator[data-state="error"]::after  { content: "!"; font-weight: 700; }
    @keyframes row-spin { to { transform: rotate(360deg); } }
    .option-row__actions { display: flex; gap: 4px; justify-content: flex-end; }
    .icon-btn-mini {
        width: 24px; height: 24px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 6px;
        border: 0;
        background: transparent;
        color: #64748b;
        cursor: pointer;
        transition: background-color .12s;
    }
    .icon-btn-mini:hover { background: #f1f5f9; color: #1e293b; }
    .icon-btn-mini--danger:hover { background: #fef2f2; color: #b91c1c; }

    /* Toggle switch */
    .switch {
        position: relative; display: inline-block;
        width: 36px; height: 20px;
    }
    .switch input { opacity: 0; width: 0; height: 0; }
    .switch__track {
        position: absolute; cursor: pointer;
        inset: 0; background: #cbd5e1;
        border-radius: 999px;
        transition: .2s;
    }
    .switch__track::before {
        content: "";
        position: absolute;
        height: 14px; width: 14px;
        left: 3px; bottom: 3px;
        background: #fff;
        border-radius: 50%;
        transition: .2s;
    }
    .switch input:checked + .switch__track { background: #4f46e5; }
    .switch input:checked + .switch__track::before { transform: translateX(16px); }
    /* Bell variant — same dimensions, amber accent so the
       Notifications switch reads distinct from the option Status
       switch sitting next to it. The base `.switch__track` already
       sets `position: absolute; inset: 0;` to fill the label —
       overriding to `position: relative` here would collapse the
       track to the icon's size, which was the bug that hid the new
       toggles in the row grid (2026-06-11). We leave the
       positioning context to the base styles and only restyle the
       background + tuck the icon in. */
    .switch__icon {
        position: absolute; right: 5px; top: 50%;
        transform: translateY(-50%);
        color: #fff; opacity: .9;
        pointer-events: none;
        transition: opacity .15s;
    }
    .switch input:checked + .switch__track--bell { background: #f59e0b; }
    .switch input:checked + .switch__track--bell .switch__icon { opacity: 0; }

    /* Modal */
    .modal-backdrop {
        position: fixed; inset: 0; z-index: 80;
        background: rgba(15, 23, 42, .55);
        display: flex; align-items: center; justify-content: center;
        padding: 20px;
    }
    .modal-card {
        width: min(100%, 480px);
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 24px 60px -16px rgba(15,23,42,.4);
    }
    .modal-head, .modal-foot {
        padding: 16px 20px;
        border-bottom: 1px solid #f1f5f9;
        display: flex; justify-content: space-between; align-items: center;
    }
    .modal-foot { border-bottom: 0; border-top: 1px solid #f1f5f9; gap: 8px; justify-content: flex-end; }
    .modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
    .modal-body label { font-size: 13px; font-weight: 600; color: #334155; display: block; margin-bottom: 4px; }
    .modal-body input[type="text"] {
        width: 100%; padding: 8px 10px;
        border: 1px solid #cbd5e1; border-radius: 8px;
        font-size: 14px;
    }
    .modal-body .help { font-size: 11px; color: #64748b; margin-top: 4px; }

    .btn-primary {
        background: #4f46e5; color: #fff;
        border: 0; border-radius: 8px;
        padding: 8px 18px; font-weight: 600;
        font-size: 14px; cursor: pointer;
    }
    .btn-primary:hover:not(:disabled) { background: #4338ca; }
    .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
    .btn-ghost {
        background: transparent; color: #334155;
        border: 1px solid #cbd5e1; border-radius: 8px;
        padding: 8px 18px; font-weight: 600;
        font-size: 14px; cursor: pointer;
    }
    .btn-ghost:hover { background: #f8fafc; }
    .btn-add-option {
        width: 100%;
        padding: 10px;
        border: 1px dashed #c7d2fe;
        background: #fff;
        color: #4f46e5;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all .15s;
    }
    .btn-add-option:hover { background: #eef2ff; border-style: solid; }

    .toast {
        position: fixed; top: 20px; right: 20px;
        z-index: 100;
        background: #0f172a; color: #fff;
        padding: 12px 18px;
        border-radius: 10px;
        font-size: 13px;
        box-shadow: 0 12px 28px rgba(15,23,42,.3);
    }
    .toast--error { background: #b91c1c; }
    .toast--ok    { background: #047857; }
</style>
@endpush

@section('content')
@php
    $locale = app()->getLocale();
@endphp

<x-admin.page-header :title="__('admin.labels.title')" :subtitle="__('admin.labels.subtitle')" />

<div
    x-data="labelsManager({
        initialType: @js($initialType),
        initialLabelId: @js($initialLabelId ?? null),
        locale: @js($locale),
        endpoints: {
            list:         @js(route('admin.labels.list')),
            storeLabel:   @js(route('admin.labels.store')),
            // These four endpoints are base URLs that JS appends `/{id}`
            // (or `/{id}/options`) to at call time. They must point at
            // `/admin/labels` to match the prefixed route group; the
            // previous `url('labels')` produced `/labels` which 404s.
            updateLabel:  @js(url('admin/labels')),
            destroyLabel: @js(url('admin/labels')),
            listOptions:  @js(url('admin/labels')),
            storeOption:  @js(url('admin/labels')),
            updateOption: @js(route('admin.labels.options.update', ['option' => 0])),
            destroyOption:@js(route('admin.labels.options.destroy', ['option' => 0])),
            reorder:      @js(route('admin.labels.options.reorder')),
            reorderLabels:@js(route('admin.labels.reorder')),
            optionShow:   @js(route('admin.labels.options.show', ['option' => '__ID__'])),
        },
        csrf: @js(csrf_token()),
        methodLabels: @js([
            'whatsapp'     => __('admin.labels.method_whatsapp'),
            'email'        => __('admin.labels.method_email'),
            'notification' => __('admin.labels.method_notification'),
            'sms'          => __('admin.labels.method_sms'),
        ]),
        groupsByType: @js($groupsByType),
    })"
    x-init="init()"
    x-cloak
>
    {{-- Toast --}}
    <div class="toast"
         :class="toast.kind === 'error' ? 'toast--error' : 'toast--ok'"
         x-show="toast.visible"
         x-transition.opacity
         x-text="toast.message"></div>

    {{-- Type tab switcher --}}
    {{-- Label creation has been removed from the UI per product spec:
         actions/procedures are defined in code/seed data, not by admins. --}}
    <div style="margin: 8px 0 4px;">
        <div class="type-tabs" role="tablist">
            <button class="type-tab"
                    :aria-selected="currentType === 'investor'"
                    @click="switchType('investor')">
                👥 {{ __('admin.labels.types.investor') }}
            </button>
            <button class="type-tab"
                    :aria-selected="currentType === 'startup'"
                    @click="switchType('startup')">
                🚀 {{ __('admin.labels.types.startup') }}
            </button>
        </div>
    </div>

    <div class="labels-shell">
        {{-- ── Left: labels list ── --}}
        <div class="panel">
            <div class="panel-head">
                <h3>{{ __('admin.labels.labels_list') }} <span class="pill" x-text="labels.length"></span></h3>
            </div>
            <div class="panel-body">
                <template x-if="!loading && labels.length === 0">
                    <div class="panel-empty">{{ __('admin.labels.no_labels') }}</div>
                </template>
                <template x-if="loading">
                    <div class="panel-empty">{{ __('admin.labels.loading') }}</div>
                </template>
                <ul class="label-list">
                    <template x-for="(label, idx) in labels" :key="label.id">
                        <li class="label-item"
                            :class="{ dragging: dragLabelId === label.id }"
                            :aria-current="selectedLabel?.id === label.id"
                            draggable="true"
                            @click="selectLabel(label)"
                            @dragstart="onLabelDragStart(label.id, $event)"
                            @dragover.prevent="onLabelDragOver(label.id)"
                            @drop="onLabelDrop()"
                            @dragend="onLabelDragEnd()">

                            {{-- Drag handle. Same visual language as the
                                 options table — quiet at rest, hint of colour
                                 on hover. --}}
                            <span class="label-item__handle"
                                  :title="'{{ __('admin.labels.drag_to_reorder') }}'"
                                  @click.stop>⋮⋮</span>

                            <div class="label-item__main">
                                <div class="label-item__name">
                                    <span x-text="locale === 'ar' ? (label.name_ar || label.name_en) : label.name_en"></span>
                                </div>
                                {{-- Internal key hidden from the UI per product spec.
                                     Stays in the API payload for AJAX state. --}}
                            </div>
                            <div class="label-item__meta">
                                <span class="pill" x-text="label.options_count"></span>
                                <span class="pill" :class="label.status ? 'pill--ok' : 'pill--off'"
                                      x-text="label.status ? '{{ __('admin.labels.on') }}' : '{{ __('admin.labels.off') }}'"></span>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
        </div>

        {{-- ── Right: options of the selected label ── --}}
        <div class="panel">
            <div class="panel-head">
                <h3>
                    {{-- Title shows only the localized name. Internal key is
                         hidden from the UI per product spec. --}}
                    <span x-text="selectedLabel ? (locale === 'ar' ? (selectedLabel.name_ar || selectedLabel.name_en) : selectedLabel.name_en) : '{{ __('admin.labels.no_selection') }}'"></span>
                </h3>
                <div x-show="selectedLabel" style="display:flex; gap:10px; align-items:center;">
                    {{-- Order: switch first, then the "+ new option" button.
                         Reads as "is this label active? · add a new option" —
                         the lightweight state toggle sits closer to the
                         label name, the primary CTA anchors the end. --}}
                    <label class="switch" :title="'{{ __('admin.labels.active') }}'">
                        <input type="checkbox" :checked="selectedLabel?.status" @change="toggleLabelStatus($event.target.checked)">
                        <span class="switch__track"></span>
                    </label>

                    <button type="button" class="opt-toolbar__add" @click="openOptionModal()">
                        <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="12" y1="5" x2="12" y2="19"/>
                            <line x1="5" y1="12" x2="19" y2="12"/>
                        </svg>
                        {{ __('admin.labels.new_option') }}
                    </button>
                </div>
            </div>
            <div class="panel-body">
                <template x-if="!selectedLabel">
                    <div class="panel-empty">{{ __('admin.labels.pick_label_hint') }}</div>
                </template>

                <template x-if="selectedLabel">
                    <div>
                        {{-- The "+ new option" button moved to the panel head
                             so it sits next to the label title. No in-list
                             toolbar / count row is rendered. --}}
                        <template x-if="options.length === 0">
                            <div class="panel-empty">{{ __('admin.labels.no_options') }}</div>
                        </template>

                        {{-- Plain table-style grid. One column per piece of
                             data, bordered text inputs, a switch, two icon
                             actions. No cards, no chips — boring on purpose. --}}
                        <div class="opt-table" x-show="options.length > 0">
                            <div class="opt-table__head">
                                <span></span>
                                <span>{{ __('admin.labels.name_ar') }}</span>
                                <span>{{ __('admin.labels.name_en') }}</span>
                                {{-- Per-option master switch for the
                                     notification dispatcher (2026-06-11).
                                     ON → channels in `methods` fire as
                                     usual. OFF → every channel muted,
                                     content + methods preserved. The
                                     option itself stays selectable. --}}
                                <span class="opt-table__head__center">{{ __('admin.labels.notifications_col') }}</span>
                                <span class="opt-table__head__center">{{ __('admin.labels.status_col') }}</span>
                                <span></span>
                            </div>

                            <template x-for="(opt, idx) in options" :key="opt.id">
                                <div class="opt-table__row"
                                     :class="{ dragging: dragId === opt.id }"
                                     draggable="true"
                                     @dragstart="onDragStart(opt.id, $event)"
                                     @dragover.prevent="onDragOver(opt.id, $event)"
                                     @drop="onDrop(opt.id)"
                                     @dragend="onDragEnd()">

                                    <span class="opt-handle"
                                          :title="'{{ __('admin.labels.drag_to_reorder') }}'">⋮⋮</span>

                                    {{-- name_ar input. Commits on blur or
                                         Enter so we don't hammer the backend
                                         while the admin is still typing. --}}
                                    <input type="text"
                                           class="opt-input"
                                           :value="opt.name_ar"
                                           dir="rtl" lang="ar"
                                           :placeholder="'{{ __('admin.labels.name_ar') }}'"
                                           :aria-label="'{{ __('admin.labels.name_ar') }}'"
                                           :data-state="rowState[opt.id]?.name_ar || ''"
                                           @input="markRowDirty(opt.id, 'name_ar')"
                                           @change="commitInline(opt, 'name_ar', $event.target.value)"
                                           @keydown.enter.prevent="$event.target.blur()">

                                    {{-- name_en input. --}}
                                    <input type="text"
                                           class="opt-input"
                                           :value="opt.name_en"
                                           dir="ltr" lang="en"
                                           :placeholder="'{{ __('admin.labels.name_en') }}'"
                                           :aria-label="'{{ __('admin.labels.name_en') }}'"
                                           :data-state="rowState[opt.id]?.name_en || ''"
                                           @input="markRowDirty(opt.id, 'name_en')"
                                           @change="commitInline(opt, 'name_en', $event.target.value)"
                                           @keydown.enter.prevent="$event.target.blur()">

                                    {{-- Notifications master switch
                                         (independent of `status`).
                                         OFF → dispatcher skips this
                                         option even if `methods` has
                                         channels listed. Bell icon
                                         distinguishes from the option
                                         status switch to its right. --}}
                                    <span class="opt-status-cell">
                                        <label class="switch switch--bell"
                                               :title="opt.notifications_enabled ? '{{ __('admin.labels.notifications_on') }}' : '{{ __('admin.labels.notifications_off') }}'">
                                            <input type="checkbox" :checked="opt.notifications_enabled"
                                                   @change="updateOptionField(opt, 'notifications_enabled', $event.target.checked)">
                                            <span class="switch__track switch__track--bell">
                                                <svg class="switch__icon" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                                    <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
                                                    <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
                                                </svg>
                                            </span>
                                        </label>
                                    </span>

                                    <span class="opt-status-cell">
                                        <label class="switch"
                                               :title="opt.status ? '{{ __('admin.labels.on') }}' : '{{ __('admin.labels.off') }}'">
                                            <input type="checkbox" :checked="opt.status"
                                                   @change="updateOptionField(opt, 'status', $event.target.checked)">
                                            <span class="switch__track"></span>
                                        </label>
                                    </span>

                                    <div class="opt-actions">
                                        <a class="icon-btn-mini"
                                           :href="endpoints.optionShow.replace('__ID__', opt.id)"
                                           :title="'{{ __('admin.labels.view_details') }}'"
                                           aria-label="{{ __('admin.labels.view_details') }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                                <circle cx="12" cy="12" r="3"/>
                                            </svg>
                                        </a>
                                        <button class="icon-btn-mini icon-btn-mini--danger"
                                                @click="deleteOption(opt)"
                                                :title="'{{ __('admin.actions.delete') }}'"
                                                aria-label="{{ __('admin.actions.delete') }}">
                                            <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">
                                                <polyline points="3 6 5 6 21 6"/>
                                                <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
                                                <path d="M10 11v6"/>
                                                <path d="M14 11v6"/>
                                                <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>

    {{-- Label create/edit modal removed: per product spec, labels (actions)
         are managed in code/seeds. Admins only manage their OPTIONS. --}}

    {{-- Option modal --}}
    <div class="modal-backdrop" x-show="optionModal.open" x-transition.opacity x-cloak @keydown.escape.window="optionModal.open = false">
        <div class="modal-card" @click.outside="optionModal.open = false">
            <div class="modal-head">
                <strong>{{ __('admin.labels.create_option') }}</strong>
                <button class="icon-btn-mini" @click="optionModal.open = false">✕</button>
            </div>
            <div class="modal-body">
                <div>
                    <label>{{ __('admin.labels.name_en') }} *</label>
                    <input type="text" x-model="optionModal.form.name_en" required @keydown.enter="saveOption()">
                </div>
                <div>
                    <label>{{ __('admin.labels.name_ar') }}</label>
                    <input type="text" x-model="optionModal.form.name_ar" dir="rtl" @keydown.enter="saveOption()">
                </div>
                <div>
                    <label>{{ __('admin.labels.value') }}</label>
                    <input type="text" x-model="optionModal.form.value" placeholder="auto-derived from name">
                    <p class="help">{{ __('admin.labels.value_hint') }}</p>
                </div>
                {{-- Optional Linked Group — only for action labels, filtered
                     to the selected label's audience type. --}}
                <div x-show="selectedLabel?.key === 'action'">
                    <label>{{ __('admin.labels.linked_group') }}</label>
                    <select x-model="optionModal.form.group_id">
                        <option value="">{{ __('admin.labels.linked_group_none') }}</option>
                        <template x-for="g in availableGroups" :key="g.id">
                            <option :value="g.id" x-text="g.name"></option>
                        </template>
                    </select>
                    <p class="help">{{ __('admin.labels.linked_group_hint') }}</p>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn-ghost" @click="optionModal.open = false">{{ __('admin.actions.cancel') }}</button>
                <button class="btn-primary" @click="saveOption()" :disabled="!optionModal.form.name_en">
                    {{ __('admin.actions.save') }}
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
{{-- Alpine.js is already loaded by admin.layouts.app — don't load it
     a second time, otherwise every binding fires twice (drag handlers,
     reorder, etc.). --}}
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('labelsManager', (cfg) => ({
        currentType:    cfg.initialType,
        initialLabelId: cfg.initialLabelId || null,
        locale:         cfg.locale,
        endpoints:      cfg.endpoints,
        csrf:           cfg.csrf,

        // Localized method labels for inline chips on the options list.
        // Resolved server-side so a future rename / additional channel
        // doesn't need a JS change.
        methodLabels: cfg.methodLabels || {},

        // Groups available to link from an action option, keyed by audience
        // type ({investor:[...], startup:[...]}). Filtered to the selected
        // label's type by the `availableGroups` getter below.
        groupsByType: cfg.groupsByType || {},

        labels:        [],
        selectedLabel: null,
        options:       [],
        loading:       false,

        labelModal:  { open: false, editing: null, form: { name_en: '', name_ar: '', key: '' } },
        optionModal: { open: false, form: { name_en: '', name_ar: '', value: '', group_id: '' } },

        // Groups offered in the create-option modal — only those matching
        // the selected (action) label's type.
        get availableGroups() {
            return this.groupsByType?.[this.selectedLabel?.type] || [];
        },

        toast: { visible: false, message: '', kind: 'ok' },

        dragId: null,
        // Drag state for the LABELS list (left/right panel). Kept separate
        // from `dragId` so a drag in one panel can't bleed into the other.
        dragLabelId: null,

        // Per-row save state used by the inline editors. Shape:
        //   { [optionId]: { name_en: '', name_ar: '', row: '', error: '' } }
        // Each cell tracks its own state independently so a failed
        // name_ar save doesn't visually clobber an in-flight name_en.
        rowState: {},
        // Timers used to clear the 'saved' tick after a short delay.
        _stateTimers: {},

        init() {
            this.loadLabels();
        },

        async loadLabels() {
            this.loading = true;
            try {
                const url = new URL(this.endpoints.list, location.origin);
                url.searchParams.set('type', this.currentType);
                const res = await fetch(url, { headers: { Accept: 'application/json' } });
                const data = await res.json();
                this.labels = data.labels || [];

                // Deep-link support: if the page was loaded with
                // ?type=…&label={id} (the breadcrumb on the option-edit
                // page builds these URLs) we auto-select that label so
                // the admin lands directly in its options list. We
                // consume `initialLabelId` exactly once so subsequent
                // type-switches don't re-trigger the selection.
                if (this.initialLabelId) {
                    const seeded = this.labels.find(l => l.id === this.initialLabelId);
                    this.initialLabelId = null;
                    if (seeded) {
                        await this.selectLabel(seeded);
                        return;
                    }
                }

                // Re-select previously selected label if it still exists; otherwise pick first.
                if (this.selectedLabel) {
                    const match = this.labels.find(l => l.id === this.selectedLabel.id);
                    if (match) this.selectLabel(match);
                    else this.selectedLabel = null, this.options = [];
                }
            } catch (e) {
                this.flash('error', 'Failed to load labels');
            } finally {
                this.loading = false;
            }
        },

        async switchType(type) {
            if (type === this.currentType) return;
            this.currentType = type;
            this.selectedLabel = null;
            this.options = [];
            await this.loadLabels();
        },

        async selectLabel(label) {
            this.selectedLabel = label;
            try {
                const res = await fetch(`${this.endpoints.listOptions}/${label.id}/options`, {
                    headers: { Accept: 'application/json' },
                });
                const data = await res.json();
                this.options = data.options || [];
            } catch (e) {
                this.flash('error', 'Failed to load options');
            }
        },

        // ─── Label modal ───
        openLabelModal(label) {
            this.labelModal.editing = label;
            this.labelModal.form = label
                ? { name_en: label.name_en || '', name_ar: label.name_ar || '', key: label.key || '' }
                : { name_en: '', name_ar: '', key: '' };
            this.labelModal.open = true;
        },

        async saveLabel() {
            const editing = this.labelModal.editing;
            const url = editing
                ? `${this.endpoints.updateLabel}/${editing.id}`
                : this.endpoints.storeLabel;
            const method = editing ? 'PATCH' : 'POST';
            const body = {
                ...(editing ? {} : { type: this.currentType }),
                name_en: this.labelModal.form.name_en,
                name_ar: this.labelModal.form.name_ar || null,
                key:     this.labelModal.form.key || null,
            };
            const res = await this.jsonRequest(method, url, body);
            if (!res.ok) {
                this.flash('error', res.body?.message === 'duplicate_key'
                    ? 'A label with this key already exists in this type.'
                    : 'Save failed');
                return;
            }
            this.labelModal.open = false;
            this.flash('ok', editing ? 'Label updated' : 'Label created');
            await this.loadLabels();
            if (!editing) {
                const created = this.labels.find(l => l.id === res.body.label.id);
                if (created) this.selectLabel(created);
            }
        },

        async toggleLabelStatus(checked) {
            if (!this.selectedLabel) return;
            const url = `${this.endpoints.updateLabel}/${this.selectedLabel.id}`;
            const res = await this.jsonRequest('PATCH', url, { status: checked });
            if (!res.ok) { this.flash('error', 'Failed to toggle'); return; }
            this.selectedLabel.status = checked;
            const inList = this.labels.find(l => l.id === this.selectedLabel.id);
            if (inList) inList.status = checked;
        },

        async deleteLabel(label) {
            if (!confirm(`Delete label "${label.name_en}"? Options will be removed too.`)) return;
            const url = `${this.endpoints.destroyLabel}/${label.id}`;
            const res = await this.jsonRequest('DELETE', url);
            if (!res.ok) {
                this.flash('error', res.body?.reason || 'Cannot delete (in use)');
                return;
            }
            this.flash('ok', 'Label deleted');
            this.selectedLabel = null;
            this.options = [];
            await this.loadLabels();
        },

        // ─── Options ───
        openOptionModal() {
            this.optionModal.form = { name_en: '', name_ar: '', value: '', group_id: '' };
            this.optionModal.open = true;
        },

        async saveOption() {
            if (!this.selectedLabel) return;
            const url = `${this.endpoints.storeOption}/${this.selectedLabel.id}/options`;
            const res = await this.jsonRequest('POST', url, {
                name_en: this.optionModal.form.name_en,
                name_ar: this.optionModal.form.name_ar || null,
                value:   this.optionModal.form.value || null,
                // Only meaningful for action labels; harmless (nullable) otherwise.
                group_id: this.optionModal.form.group_id ? Number(this.optionModal.form.group_id) : null,
            });
            if (!res.ok) {
                // Surface the REAL reason instead of the catch-all "Save
                // failed": a 419 (expired CSRF/session on a long-open page)
                // or 5xx is reported distinctly, and validation/duplicate
                // errors carry a localized message in `errors`.
                this.flash('error', this.errorMessage(res, 'Save failed'));
                return;
            }
            this.options.push(res.body.option);
            this.selectedLabel.options_count++;
            const inList = this.labels.find(l => l.id === this.selectedLabel.id);
            if (inList) inList.options_count++;
            this.optionModal.open = false;
            this.flash('ok', 'Option created');
        },

        async updateOptionField(option, field, value) {
            if (option[field] === value) return;
            // The endpoint URL has a placeholder id we need to swap for the real one.
            const url = this.endpoints.updateOption.replace(/\/0(\?.*)?$/, '/' + option.id);
            const res = await this.jsonRequest('PATCH', url, { [field]: value });
            if (!res.ok) { this.flash('error', this.errorMessage(res, 'Update failed')); return; }
            Object.assign(option, res.body.option);
        },

        // ─── Inline (per-row) editing ───
        // The name_en + name_ar inputs in the options table call these
        // helpers so admins can fix typos without leaving the page.

        /** Initialise / fetch the state bucket for one option row. */
        _ensureRow(id) {
            if (!this.rowState[id]) {
                this.rowState[id] = { name_en: '', name_ar: '', row: '', error: '' };
            }
            return this.rowState[id];
        },

        /** Called on every keystroke — flips the cell to "dirty" so the
         *  border colour confirms the admin's edit is recognised. We DON'T
         *  fire AJAX here (would be wasteful); the actual save happens on
         *  blur (`@change`) or Enter. */
        markRowDirty(id, field) {
            const row = this._ensureRow(id);
            row[field] = 'dirty';
            row.row    = 'dirty';
            row.error  = '';
        },

        /** Commit one inline field. Called from input's @change. Skips
         *  no-op writes (no flicker on focus-out without edits). */
        async commitInline(option, field, value) {
            const trimmed = (value ?? '').trim();
            // Normalise empty name_ar to null so we don't store empty strings.
            const next = trimmed === '' ? null : trimmed;
            const cur  = option[field] ?? null;
            if (cur === next) {
                // Nothing actually changed — clear any leftover dirty styling.
                const row = this._ensureRow(option.id);
                row[field] = '';
                row.row    = '';
                return;
            }

            const row = this._ensureRow(option.id);
            row[field] = 'saving';
            row.row    = 'saving';
            row.error  = '';

            const url = this.endpoints.updateOption.replace(/\/0(\?.*)?$/, '/' + option.id);
            const res = await this.jsonRequest('PATCH', url, { [field]: next });

            if (!res.ok) {
                row[field] = 'error';
                row.row    = 'error';
                row.error  = res.body?.message === 'duplicate_value'
                    ? 'Another option with this name already exists.'
                    : this.errorMessage(res, 'Update failed');
                this.flash('error', row.error);
                return;
            }

            // Merge the server-corrected option back into the row so the
            // local value tracks any normalisation (e.g. derived `value`
            // slug, server-side trimming).
            if (res.body?.option) Object.assign(option, res.body.option);
            row[field] = 'saved';
            row.row    = 'saved';

            // Reset to idle after a moment so the green border doesn't
            // linger forever.
            clearTimeout(this._stateTimers['cell:' + option.id + ':' + field]);
            this._stateTimers['cell:' + option.id + ':' + field] = setTimeout(() => {
                if (this.rowState[option.id] && this.rowState[option.id][field] === 'saved') {
                    this.rowState[option.id][field] = '';
                    this.rowState[option.id].row    = '';
                }
            }, 1600);
        },

        async deleteOption(option) {
            if (!confirm(`Delete option "${option.name_en}"?`)) return;
            const url = this.endpoints.destroyOption.replace(/\/0(\?.*)?$/, '/' + option.id);
            const res = await this.jsonRequest('DELETE', url);
            if (!res.ok) {
                this.flash('error', res.body?.reason || 'Cannot delete (in use)');
                return;
            }
            this.options = this.options.filter(o => o.id !== option.id);
            this.selectedLabel.options_count--;
            const inList = this.labels.find(l => l.id === this.selectedLabel.id);
            if (inList) inList.options_count--;
            this.flash('ok', 'Option deleted');
        },

        // ─── Drag-and-drop reordering ───
        onDragStart(id) { this.dragId = id; },
        onDragOver(targetId) {
            if (this.dragId === null || this.dragId === targetId) return;
            const fromIdx = this.options.findIndex(o => o.id === this.dragId);
            const toIdx   = this.options.findIndex(o => o.id === targetId);
            if (fromIdx === -1 || toIdx === -1) return;
            const moved = this.options.splice(fromIdx, 1)[0];
            this.options.splice(toIdx, 0, moved);
        },
        onDrop() { this.persistReorder(); },
        onDragEnd() { this.dragId = null; },

        async persistReorder() {
            const payload = this.options.map((o, idx) => ({ id: o.id, sort_order: idx }));
            this.options.forEach((o, idx) => o.sort_order = idx);
            await this.jsonRequest('POST', this.endpoints.reorder, { order: payload });
            this.flash('ok', 'Reordered');
        },

        // ─── Labels list reordering (left/right panel) ───
        // Symmetric to the options drag handlers above. We persist after
        // every move to keep server + UI in sync without a save button.
        onLabelDragStart(id) { this.dragLabelId = id; },
        onLabelDragOver(targetId) {
            if (this.dragLabelId === null || this.dragLabelId === targetId) return;
            const fromIdx = this.labels.findIndex(l => l.id === this.dragLabelId);
            const toIdx   = this.labels.findIndex(l => l.id === targetId);
            if (fromIdx === -1 || toIdx === -1) return;
            const moved = this.labels.splice(fromIdx, 1)[0];
            this.labels.splice(toIdx, 0, moved);
        },
        onLabelDrop()    { this.persistLabelReorder(); },
        onLabelDragEnd() { this.dragLabelId = null; },

        async persistLabelReorder() {
            const payload = this.labels.map((l, idx) => ({ id: l.id, sort_order: idx }));
            this.labels.forEach((l, idx) => l.sort_order = idx);
            const res = await this.jsonRequest('POST', this.endpoints.reorderLabels, { order: payload });
            if (res.ok) {
                this.flash('ok', 'Reordered');
            } else {
                this.flash('error', res.body?.message || 'Reorder failed');
            }
        },

        // ─── HTTP plumbing ───
        async jsonRequest(method, url, body = null) {
            try {
                const res = await fetch(url, {
                    method,
                    credentials: 'same-origin',   // always send the session cookie
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': this.csrf,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: body !== null ? JSON.stringify(body) : null,
                });
                const data = await res.json().catch(() => ({}));
                // Expose the HTTP status so callers can turn an opaque
                // failure into an actionable message (419 = expired CSRF /
                // session, 5xx = server error) instead of "Save failed".
                return { ok: res.ok && data.ok !== false, status: res.status, body: data };
            } catch (e) {
                return { ok: false, status: 0, body: { message: e.message } };
            }
        },

        // Turn an HTTP failure into a human, actionable message. Maps the
        // status codes that never reach the controller (so they carry no
        // app-level error) to a clear instruction, and otherwise prefers
        // the server's specific validation/duplicate message.
        errorMessage(res, fallback) {
            if (res.status === 419) return 'Your session expired — refresh the page (F5) and try again.';
            if (res.status === 401 || res.status === 403) return 'Your session ended or you are not authorized. Refresh and sign in again.';
            if (res.status >= 500) return 'Server error while saving. Please try again; if it persists, contact support.';
            if (res.status === 0) return 'Network error — check your connection and try again.';
            const firstError = res.body?.errors ? Object.values(res.body.errors)[0]?.[0] : null;
            return firstError || res.body?.message || fallback;
        },

        flash(kind, message) {
            this.toast = { visible: true, kind, message };
            clearTimeout(this._toastTimer);
            this._toastTimer = setTimeout(() => this.toast.visible = false, 2500);
        },
    }));
});
</script>
@endpush