{{-- Global Asterisk Reload Indicator / Action --}}
@php
    $seed    = session('pending_reload', []);
    $seedHas = (bool) ($seed && count($seed));
@endphp

<div
    x-data="reloadPill({
        seed: @js($seed),
        seedHas: @js($seedHas),
        postUrl: '{{ route('asterisk.reload') }}'
    })"
    x-init="init()"
    class="fixed z-50 bottom-4 right-4"
>
    <!-- Floating Button -->
    <button
        @click="open = true"
        :class="[
            'relative inline-flex items-center gap-2 px-4 py-2 rounded-full shadow-lg text-white text-sm font-semibold',
            pending ? 'bg-red-600 hover:bg-red-700' : 'bg-gray-700 hover:bg-gray-800'
        ]"
        title="Asterisk Reload"
    >
        <span class="relative inline-flex">
            {{-- Icon --}}
            <x-lucide-refresh-cw class="w-4 h-4" />
            {{-- Pulse ring when pending --}}
            <span x-show="pending" class="absolute -top-2 -right-2 inline-flex h-3 w-3">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
                <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
            </span>
        </span>
        <span x-text="pending ? 'Reload required' : 'Reload'"></span>
    </button>

    <!-- Modal -->
    <div
        x-show="open"
        x-cloak
        class="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center p-4"
        @keydown.escape.window="open=false"
    >
        <div class="bg-white rounded-xl w-full max-w-md shadow-xl">
            <div class="px-5 py-4 border-b flex items-center justify-between">
                <h3 class="text-lg font-semibold">Asterisk Reload</h3>
                <button class="text-gray-500 hover:text-gray-700" @click="open=false" aria-label="Close">
                    <x-lucide-x class="w-5 h-5" />
                </button>
            </div>

            <div class="px-5 py-4 space-y-3">
                <p class="text-sm text-gray-600">
                    Choose what to reload.
                    <span x-show="pending" class="text-red-600 font-medium">Changes pending!</span>
                </p>

                <div class="grid grid-cols-3 gap-2">
                    <button
                        @click="doReload('core')"
                        class="inline-flex items-center justify-center gap-2 px-3 py-2 rounded bg-gray-700 hover:bg-gray-800 text-white text-sm font-semibold"
                    >
                        <x-lucide-settings class="w-4 h-4" />
                        Core
                    </button>

                    <button
                        @click="doReload('dialplan')"
                        class="inline-flex items-center justify-center gap-2 px-3 py-2 rounded bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold"
                    >
                        <x-lucide-git-branch class="w-4 h-4" />
                        Dialplan
                    </button>

                    <button
                        @click="doReload('pjsip')"
                        class="inline-flex items-center justify-center gap-2 px-3 py-2 rounded bg-green-600 hover:bg-green-700 text-white text-sm font-semibold"
                    >
                        <x-lucide-radio class="w-4 h-4" />
                        PJSIP
                    </button>
                </div>

                <template x-if="Object.keys(why).length">
                    <div class="mt-2">
                        <p class="text-xs font-medium text-gray-700">Pending reasons:</p>
                        <ul class="text-xs text-gray-600 list-disc ml-5">
                            <template x-for="(v,k) in why" :key="k">
                                <li x-text="k.toUpperCase()"></li>
                            </template>
                        </ul>
                    </div>
                </template>
            </div>

            <div class="px-5 py-3 border-t flex items-center justify-between">
                <button
                    class="text-sm text-gray-600 hover:text-gray-800 underline"
                    @click="clearPending()"
                    x-show="pending"
                >Dismiss reminder</button>

                <button
                    class="px-3 py-2 rounded bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm font-semibold"
                    @click="open=false"
                >Close</button>
            </div>
        </div>
    </div>
</div>

<script>
function reloadPill({ seed, seedHas, postUrl }) {
    return {
        open: false,
        pending: false,
        why: {},
        postUrl,

        init() {
            const ls = JSON.parse(localStorage.getItem('pendingReload') || '{}');
            if (seedHas) {
                this.why = Object.assign({}, ls, seed);
                localStorage.setItem('pendingReload', JSON.stringify(this.why));
            } else {
                this.why = ls;
            }
            this.pending = Object.keys(this.why).length > 0;

            window.addEventListener('storage', (e) => {
                if (e.key === 'pendingReload') {
                    this.why = JSON.parse(e.newValue || '{}');
                    this.pending = Object.keys(this.why).length > 0;
                }
            });
        },

        mark(reason) {
            this.why[reason] = true;
            localStorage.setItem('pendingReload', JSON.stringify(this.why));
            this.pending = true;
        },

        clearPending() {
            this.why = {};
            localStorage.removeItem('pendingReload');
            this.pending = false;
        },

        async doReload(kind) {
            try {
                const r = await fetch(this.postUrl, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]')?.getAttribute('content') || '',
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: new URLSearchParams({ action: kind })
                });
                if (!r.ok) throw new Error('Reload failed');

                if (this.why[kind]) delete this.why[kind];
                if (Object.keys(this.why).length) {
                    localStorage.setItem('pendingReload', JSON.stringify(this.why));
                } else {
                    localStorage.removeItem('pendingReload');
                }
                this.pending = Object.keys(this.why).length > 0;

                window.dispatchEvent?.(new CustomEvent('toast', { detail: { type: 'success', message: `Asterisk ${kind} reload OK` }}));
            } catch (e) {
                window.dispatchEvent?.(new CustomEvent('toast', { detail: { type: 'error', message: `Reload failed: ${e.message}` }}));
            } finally {
                this.open = false;
            }
        }
    }
}
</script>