@extends('admin.layouts.app')

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

@push('styles')
<style>
    .ax-head { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0 0 18px; }
    .ax-tabs { display:inline-flex;background:#f1f5f9;border-radius:999px;padding:4px;gap:3px; }
    .ax-tabs a { padding:7px 18px;border-radius:999px;font-size:13px;font-weight:700;text-decoration:none;color:#475569;display:inline-flex;align-items:center;gap:6px; }
    .ax-tabs a.is-active { background:#4f46e5;color:#fff; }
    .ax-new { border:0;background:#4f46e5;color:#fff;border-radius:10px;padding:9px 18px;font-weight:700;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px; }
    .ax-new:hover { background:#4338ca; } .ax-new:disabled { opacity:.5;cursor:not-allowed; }

    /* Grid table — same div-grid approach as the Labels options table
       (a real <table> + <template x-for> can fail to render). */
    .ax-grid { background:#fff;border:1px solid #e2e8f0;border-radius:16px;overflow:hidden; }
    .ax-grid__head, .ax-grid__row {
        display:grid;
        grid-template-columns: 28px minmax(0,1.2fr) minmax(0,1.2fr) 96px 96px minmax(0,1fr) 150px;
        gap:12px; align-items:center; padding:11px 16px;
    }
    /* Header text in the sidebar-item colour (--na-text). */
    .ax-grid__head { background:#fbfcfe;border-bottom:1px solid #eef2f7;font-size:11px;font-weight:800;color:#1f1235;text-transform:uppercase;letter-spacing:.04em; }
    .ax-grid__head .c { text-align:center; }
    .ax-grid__row { border-bottom:1px solid #f4f6fa;background:#fff;transition:background-color .12s; }
    .ax-grid__row:last-child { border-bottom:0; }
    .ax-grid__row:hover { background:#fbfcff; }
    .ax-grid__row.dragging { opacity:.5; } .ax-grid__row.drop-target { box-shadow: inset 0 2px 0 #4f46e5; }
    .ax-cell-c { display:flex;justify-content:center; }
    .ax-handle { cursor:grab;color:#cbd5e1;font-size:16px;user-select:none;text-align:center; } .ax-handle:active { cursor:grabbing; }

    /* inline-editable names — IDENTICAL to the Labels options table (.opt-input). */
    .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; }

    /* toggle switches — IDENTICAL to the Labels options table. */
    .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); }
    .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; }

    /* Compact policy summary (Option 3) */
    .ax-polsum { display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:5px 10px;border:1px solid #eef2f7;border-radius:999px;background:#fbfcfe;transition:.12s;max-width:100%; }
    .ax-polsum:hover { border-color:#c7d2fe;background:#eef2ff; }
    .ax-polsum__agents { display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:#4338ca;white-space:nowrap; }
    .ax-polsum__agents svg { flex:0 0 auto; }
    .ax-polcounts { display:inline-flex;align-items:center;gap:5px; }
    .polc { display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:800;position:relative; }
    .polc::before { content:"";width:6px;height:6px;border-radius:50%;background:currentColor;margin-inline-end:4px; }
    .polc--allow { background:#ecfdf5;color:#047857; } .polc--approval { background:#fff7ed;color:#b45309; } .polc--blocked { background:#fef2f2;color:#b91c1c; }
    .ax-muted { color:#cbd5e1;font-size:12px; }
    .ax-act { display:flex;gap:6px;justify-content:flex-end; }
    .ax-ic { width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e2e8f0;border-radius:9px;background:#fff;cursor:pointer;color:#475569;text-decoration:none; }
    .ax-ic:hover { border-color:#c7d2fe;color:#4f46e5; } .ax-ic--danger:hover { border-color:#fecaca;color:#dc2626; }
    .ax-ic--agents:hover { border-color:#c7d2fe;color:#4f46e5;background:#eef2ff; }
    .ax-grid__empty { text-align:center;color:#94a3b8;padding:40px;font-size:14px; }
    .ax-toast { position:fixed;bottom:20px;inset-inline-end:20px;background:#0f172a;color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;z-index:60;opacity:0;transform:translateY(8px);transition:.2s; }
    .ax-toast.show { opacity:1;transform:translateY(0); }
    /* modal */
    .ax-modal { position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:70;padding:20px; }
    .ax-modal__box { background:#fff;border-radius:18px;width:100%;max-width:460px;box-shadow:0 24px 60px rgba(0,0,0,.2);overflow:hidden; }
    .ax-modal__head { padding:18px 22px;border-bottom:1px solid #eef2f7;display:flex;align-items:center;justify-content:space-between; }
    .ax-modal__head h3 { margin:0;font-size:16px;font-weight:800;color:#0f172a; }
    .ax-modal__x { border:0;background:transparent;font-size:20px;color:#94a3b8;cursor:pointer;line-height:1; }
    .ax-modal__body { padding:20px 22px;display:flex;flex-direction:column;gap:14px; }
    .ax-fld label { display:block;font-size:12px;font-weight:700;color:#475569;margin:0 0 5px; }
    .ax-fld input[type=text] { width:100%;border:1px solid #e2e8f0;border-radius:9px;padding:9px 11px;font-size:13.5px; }
    .ax-fld input:focus { border-color:#4f46e5;outline:none; }
    .ax-fld .hint { font-size:11px;color:#94a3b8;margin-top:4px; }
    .ax-switches { display:flex;gap:24px; }
    .ax-switch { display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#334155; }
    .ax-modal__foot { padding:16px 22px;border-top:1px solid #eef2f7;display:flex;justify-content:flex-end;gap:10px; }
    .ax-btn-ghost { border:1px solid #e2e8f0;background:#fff;border-radius:9px;padding:9px 16px;font-weight:700;font-size:13px;cursor:pointer;color:#475569; }
    .ax-err { color:#dc2626;font-size:12.5px;margin:0; }
</style>
@endpush

@section('content')
@php
    $rows = $actions->map(function ($o) use ($policies, $agentNames) {
        $p = $policies->get($o->value, collect());
        return [
            'id'       => $o->id,
            'name_en'  => $o->name_en,
            'name_ar'  => $o->name_ar ?? '',
            'slug'     => $o->value,
            'enabled'  => (bool) $o->status,
            'notify'   => $o->notifications_enabled !== false,
            // Compact policy summary (Option 3): total + per-policy counts.
            'total'    => $p->count(),
            'counts'   => [
                'always_allow'   => $p->where('policy', 'always_allow')->count(),
                'needs_approval' => $p->where('policy', 'needs_approval')->count(),
                'blocked'        => $p->where('policy', 'blocked')->count(),
            ],
        ];
    })->values();
@endphp

<div x-data="actionsTable(
        @js($rows),
        '{{ csrf_token() }}',
        '{{ url('admin/labels/options') }}',
        '{{ route('admin.labels.options.reorder') }}',
        '{{ route('admin.actions.agent-policies', ['tab' => $tab]) }}',
        '{{ $labelId ? url('admin/labels/'.$labelId.'/options') : '' }}'
     )">
    <div class="ax-head">
        <div class="ax-tabs">
            <a href="{{ route('admin.actions.index', ['tab' => 'startups']) }}" class="{{ $tab === 'startups' ? 'is-active' : '' }}">🚀 {{ __('admin.nav.startups') }}</a>
            <a href="{{ route('admin.actions.index', ['tab' => 'investors']) }}" class="{{ $tab === 'investors' ? 'is-active' : '' }}">👥 {{ __('admin.nav.investors') }}</a>
        </div>
        <button type="button" class="ax-new" @click="openModal()" @if (! $labelId) disabled @endif>
            ＋ {{ __('admin.actions_admin.new_action') }}
        </button>
    </div>

    @if (session('status'))<div class="alert alert-success">{{ session('status') }}</div>@endif

    <div class="ax-grid">
        <div class="ax-grid__head">
            <span></span>
            <span>{{ __('admin.labels.name_en') }}</span>
            <span>{{ __('admin.labels.name_ar') }}</span>
            <span class="c">{{ __('admin.actions_admin.notify') }}</span>
            <span class="c">{{ __('admin.actions_admin.enabled') }}</span>
            <span>{{ __('admin.actions_admin.policy') }}</span>
            <span></span>
        </div>

        <template x-for="r in rows" :key="r.id">
            <div class="ax-grid__row"
                 :class="{ dragging: dragId === r.id, 'drop-target': dropId === r.id }"
                 draggable="true"
                 @dragstart="dragId = r.id" @dragend="onDrop()"
                 @dragover.prevent="dropId = r.id" @drop.prevent="onDrop()">

                <span class="ax-handle">⋮⋮</span>

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

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

                {{-- Notify (bell, amber) --}}
                <span class="ax-cell-c">
                    <label class="switch switch--bell">
                        <input type="checkbox" :checked="r.notify" @change="toggle(r, '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>

                {{-- Enabled (indigo) --}}
                <span class="ax-cell-c">
                    <label class="switch"><input type="checkbox" :checked="r.enabled" @change="toggle(r, 'status', $event.target.checked)"><span class="switch__track"></span></label>
                </span>

                {{-- Policy — compact summary (Option 3). Click → policies page. --}}
                <div>
                    <template x-if="r.total">
                        <a class="ax-polsum" :href="agentsUrl + '&action=' + r.slug"
                           :title="r.total + ' agents — ' + r.counts.always_allow + ' allow, ' + r.counts.needs_approval + ' approval, ' + r.counts.blocked + ' blocked'">
                            <span class="ax-polsum__agents">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2M20 14h2M15 13v2M9 13v2"/></svg>
                                <span x-text="r.total"></span> <span x-text="r.total === 1 ? 'agent' : 'agents'"></span>
                            </span>
                            <span class="ax-polcounts">
                                <template x-if="r.counts.always_allow"><span class="polc polc--allow" x-text="r.counts.always_allow"></span></template>
                                <template x-if="r.counts.needs_approval"><span class="polc polc--approval" x-text="r.counts.needs_approval"></span></template>
                                <template x-if="r.counts.blocked"><span class="polc polc--blocked" x-text="r.counts.blocked"></span></template>
                            </span>
                        </a>
                    </template>
                    <template x-if="!r.total"><span class="ax-muted">—</span></template>
                </div>

                {{-- Actions --}}
                <div class="ax-act">
                    <a class="ax-ic" :href="optionBase + '/' + r.id" title="{{ __('admin.actions.view') }}">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>
                    </a>
                    <template x-if="r.total">
                        <a class="ax-ic ax-ic--agents" :href="agentsUrl + '&action=' + r.slug" title="{{ __('admin.actions_matrix.title') }}">
                            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2M20 14h2M15 13v2M9 13v2"/></svg>
                        </a>
                    </template>
                    <button type="button" class="ax-ic ax-ic--danger" title="{{ __('admin.actions.delete') }}" @click="remove(r)">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                    </button>
                </div>
            </div>
        </template>

        <div class="ax-grid__empty" x-show="rows.length === 0">{{ __('admin.actions_admin.empty') }}</div>
    </div>

    {{-- New Action modal --}}
    <div class="ax-modal" x-show="modal" x-cloak @keydown.escape.window="modal=false" style="display:none;">
        <div class="ax-modal__box" @click.outside="modal=false">
            <div class="ax-modal__head">
                <h3>{{ __('admin.actions_admin.new_action') }} · <span x-text="tabLabel"></span></h3>
                <button type="button" class="ax-modal__x" @click="modal=false">×</button>
            </div>
            <div class="ax-modal__body">
                <p class="ax-err" x-show="error" x-text="error"></p>
                <div class="ax-fld"><label>{{ __('admin.actions_admin.name_en') }} *</label><input type="text" x-model="form.name_en" placeholder="e.g. Reject"></div>
                <div class="ax-fld"><label>{{ __('admin.actions_admin.name_ar') }}</label><input type="text" x-model="form.name_ar" dir="rtl" placeholder="مثال: رفض"></div>
                <div class="ax-fld">
                    <label>{{ __('admin.actions_admin.slug') }}</label>
                    <input type="text" x-model="form.slug" placeholder="reject" pattern="[a-z0-9_\-]*">
                    <p class="hint">{{ __('admin.actions_admin.slug_hint') }}</p>
                </div>
                <div class="ax-switches">
                    <label class="ax-switch"><span class="switch"><input type="checkbox" x-model="form.enabled"><span class="switch__track"></span></span> {{ __('admin.actions_admin.enabled') }}</label>
                    <label class="ax-switch"><span class="switch switch--bell"><input type="checkbox" x-model="form.notify"><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"><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></span> {{ __('admin.actions_admin.notify') }}</label>
                </div>
            </div>
            <div class="ax-modal__foot">
                <button type="button" class="ax-btn-ghost" @click="modal=false">{{ __('admin.actions_admin.cancel') }}</button>
                <button type="button" class="ax-new" :disabled="!form.name_en || busy" @click="create()">{{ __('admin.actions_admin.create') }}</button>
            </div>
        </div>
    </div>

    <div class="ax-toast" :class="{ show: toast }" x-text="toast"></div>
</div>

@push('scripts')
<script>
function actionsTable(initial, csrf, optionBase, reorderUrl, agentsUrl, storeUrl) {
    return {
        rows: initial, dragId: null, dropId: null, toast: '', optionBase, agentsUrl, storeUrl, _t: null,
        modal: false, busy: false, error: '', rowState: {}, _stateTimers: {},
        tabLabel: @js($tab === 'investors' ? __('admin.nav.investors') : __('admin.nav.startups')),
        form: { name_en: '', name_ar: '', slug: '', enabled: true, notify: true },
        flash(msg) { this.toast = msg; clearTimeout(this._t); this._t = setTimeout(() => this.toast = '', 1800); },
        async patch(id, body) {
            const res = await fetch(optionBase + '/' + id, {
                method: 'PATCH',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                body: JSON.stringify(body),
            });
            return res.ok;
        },
        async toggle(r, field, val) {
            const ok = await this.patch(r.id, { [field]: val });
            if (ok) { if (field === 'status') r.enabled = val; else r.notify = val; this.flash('Saved'); } else { this.flash('Failed'); }
        },
        // ── Inline name editing — mirrors the Labels options table ──
        _ensureRow(id) {
            if (!this.rowState[id]) this.rowState[id] = { name_ar: '', name_en: '', row: '' };
            return this.rowState[id];
        },
        markRowDirty(id, field) {
            const row = this._ensureRow(id);
            if (row[field] !== 'saving') { row[field] = 'dirty'; row.row = 'dirty'; }
        },
        async commitInline(r, field, value) {
            const trimmed = (value ?? '').trim();
            if (field === 'name_en' && trimmed === '') {
                const row = this._ensureRow(r.id); row[field] = 'error'; row.row = 'error';
                this.flash('English name is required'); return;
            }
            const next = (field === 'name_ar' && trimmed === '') ? null : trimmed;
            const cur  = r[field] ?? null;
            if (cur === next) { const row = this._ensureRow(r.id); row[field] = ''; row.row = ''; return; }

            const row = this._ensureRow(r.id); row[field] = 'saving'; row.row = 'saving';
            const ok = await this.patch(r.id, { [field]: next });
            if (!ok) { row[field] = 'error'; row.row = 'error'; this.flash('Update failed'); return; }

            r[field] = next; row[field] = 'saved'; row.row = 'saved';
            clearTimeout(this._stateTimers['cell:' + r.id + ':' + field]);
            this._stateTimers['cell:' + r.id + ':' + field] = setTimeout(() => {
                if (this.rowState[r.id] && this.rowState[r.id][field] === 'saved') {
                    this.rowState[r.id][field] = ''; this.rowState[r.id].row = '';
                }
            }, 1600);
        },
        async remove(r) {
            if (!confirm('Delete action "' + (r.name_en || r.slug) + '"?')) return;
            const res = await fetch(optionBase + '/' + r.id, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' } });
            if (res.ok) { this.rows = this.rows.filter(x => x.id !== r.id); this.flash('Deleted'); } else { this.flash('Failed'); }
        },
        openModal() {
            this.form = { name_en: '', name_ar: '', slug: '', enabled: true, notify: true };
            this.error = ''; this.modal = true;
        },
        async create() {
            if (!this.form.name_en || this.busy || !this.storeUrl) return;
            this.busy = true; this.error = '';
            const res = await fetch(this.storeUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                body: JSON.stringify({
                    name_en: this.form.name_en, name_ar: this.form.name_ar, value: this.form.slug,
                    status: this.form.enabled, notifications_enabled: this.form.notify,
                }),
            });
            const data = await res.json().catch(() => ({}));
            if (res.ok && data.ok !== false) { window.location.reload(); }
            else { this.error = (data.errors && Object.values(data.errors)[0][0]) || 'Could not create action.'; this.busy = false; }
        },
        onDrop() {
            if (this.dragId && this.dropId && this.dragId !== this.dropId) {
                const from = this.rows.findIndex(x => x.id === this.dragId);
                const to = this.rows.findIndex(x => x.id === this.dropId);
                const [m] = this.rows.splice(from, 1); this.rows.splice(to, 0, m);
                this.persistOrder();
            }
            this.dragId = null; this.dropId = null;
        },
        async persistOrder() {
            const order = this.rows.map((r, i) => ({ id: r.id, sort_order: i }));
            const res = await fetch(reorderUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                body: JSON.stringify({ order }),
            });
            this.flash(res.ok ? 'Order saved' : 'Order failed');
        },
    };
}
</script>
@endpush
@endsection