@php
    // Every "reason" resources/js/pwa.js can return, in the words a person can
    // act on. A bare "subscribe-failed" told nobody anything.
    $reasons = [
        'unsupported' => __('This browser cannot do notifications. Chrome, Edge, Firefox and Safari all can.'),
        'not-configured' => __('Notifications are not switched on for this installation yet. An administrator has to set them up.'),
        'ios-needs-install' => __('On iPhone and iPad, notifications only work once BillPro is installed. Add it to your home screen first, then come back here and try again.'),
        'blocked' => __('Your browser is blocking notifications for this site. Open the padlock in the address bar and allow notifications, then try again.'),
        'dismissed' => __('You closed the permission box without choosing. Try again when you are ready.'),
        'no-worker' => __('BillPro could not start its background helper. This normally means the site is not on a secure (https) address.'),
        'subscribe-failed' => __('Your browser refused to register for notifications. Try again, or restart the browser.'),
        'server-refused' => __('The server would not record this device. Try again in a moment.'),
        'unavailable' => __('Your browser is not offering to install right now. Use its own menu — look for "Install" or "Add to Home screen".'),
        'ios-manual' => __('On iPhone and iPad: tap Share, then "Add to Home Screen".'),
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8"
     x-data="{
        /* Mirrors the browser's own answer. Everything on this page that the
           server cannot know — permission, subscription, installability — is
           read from here, and re-read whenever pwa.js says it changed. */
        s: { supported: false, configured: false, permission: 'default', subscribed: false, sound: true, standalone: false, installable: false, ios: false, macSafari: false },
        busy: false,
        message: null,
        messageTone: 'info',
        reasons: @js($reasons),

        async refresh() {
            if (window.BillPro?.push) this.s = await window.BillPro.push.state();
        },

        async enable() {
            this.busy = true;
            const result = await window.BillPro.push.enable();
            this.busy = false;
            await this.refresh();

            if (result.ok) {
                this.say('{{ __('Notifications are on for this device.') }}', 'success');
                $wire.dispatch('push-devices-changed');
            } else {
                this.say(this.reasons[result.reason] || '{{ __('That did not work. Try again.') }}', 'warning');
            }
        },

        async disable() {
            this.busy = true;
            await window.BillPro.push.disable();
            this.busy = false;
            await this.refresh();
            this.say('{{ __('This device will no longer be notified.') }}', 'info');
            $wire.dispatch('push-devices-changed');
        },

        async install() {
            const result = await window.BillPro.install();

            if (!result.ok) this.say(this.reasons[result.reason] || '', 'info');

            await this.refresh();
        },

        toggleSound() {
            window.BillPro.push.setSound(!this.s.sound);
            this.refresh();
        },

        say(text, tone) { this.message = text; this.messageTone = tone; },
     }"
     x-init="refresh()"
     x-on:billpro:push-state.window="refresh()"
     {{-- x-on:, not @, and not by preference: Blade compiles a `@push-…`
          attribute as its own @push directive and the page dies with an
          "Undefined property: $startPush". Any Alpine event whose name starts
          with a Blade directive has to be written the long way. --}}
     x-on:push-device-forgotten.window="
        /* The server dropped a device. If it is this one, drop the browser's
           half too, or the next page load quietly re-registers it. */
        window.BillPro.push.state().then(state => {
            if (state.endpoint === $event.detail.endpoint) window.BillPro.push.disable();
        })
     ">
    <div class="mx-auto max-w-7xl space-y-6">

        <x-page-header
            :title="__('Notifications & app')"
            :subtitle="__('Get told about what needs you — on your phone, on your laptop — and put BillPro on your home screen.')">
            <x-secondary-button wire:click="sendTest" wire:loading.attr="disabled" wire:target="sendTest">
                <x-icon name="paper-airplane" class="mr-1.5 h-4 w-4" />
                <span wire:loading.remove wire:target="sendTest">{{ __('Send a test') }}</span>
                <span wire:loading wire:target="sendTest">{{ __('Sending…') }}</span>
            </x-secondary-button>
        </x-page-header>

        {{-- Browser-side feedback. Server-side actions use the usual banner. --}}
        <template x-if="message">
            <div class="flex items-start gap-3 rounded-2xl px-4 py-3 text-sm ring-1"
                 :class="{
                    'bg-emerald-50 text-emerald-800 ring-emerald-200': messageTone === 'success',
                    'bg-amber-50 text-amber-800 ring-amber-200': messageTone === 'warning',
                    'bg-sky-50 text-sky-800 ring-sky-200': messageTone === 'info',
                 }">
                <x-icon name="information-circle" class="mt-0.5 h-4 w-4 shrink-0" />
                <p class="min-w-0 flex-1" x-text="message"></p>
                <button type="button" @click="message = null" class="shrink-0 opacity-60 transition hover:opacity-100">
                    <x-icon name="x-mark" class="h-4 w-4" />
                </button>
            </div>
        </template>

        {{-- Server not set up. Only worth saying to somebody who can fix it. --}}
        @if (! $pushConfigured)
            <div class="flex items-start gap-3 rounded-2xl bg-slate-100 px-4 py-3 text-sm text-slate-700 ring-1 ring-slate-200">
                <x-icon name="exclamation-triangle" class="mt-0.5 h-4 w-4 shrink-0 text-amber-500" />
                <div class="min-w-0">
                    <p class="font-semibold">{{ __('Notifications are not set up on this server yet.') }}</p>
                    @if ($isAdmin)
                        <p class="mt-1 text-slate-600">
                            {{ __('Run') }} <code class="rounded bg-white px-1.5 py-0.5 font-mono text-xs ring-1 ring-slate-200">php artisan billpro:push-keys</code>
                            {{ __('on the server, paste the two lines it prints into .env, then clear the config cache. Everything else on this page will start working straight away.') }}
                        </p>
                    @else
                        <p class="mt-1 text-slate-600">{{ __('You can still install BillPro on your phone. Ask an administrator to finish setting up alerts.') }}</p>
                    @endif
                </div>
            </div>
        @endif

        {{-- The two decisions, side by side. --}}
        <section class="grid gap-4 lg:grid-cols-2">

            {{-- 1 · Alerts on this device --}}
            <x-card class="flex flex-col overflow-hidden p-6">
                <div class="flex items-start justify-between gap-3">
                    <div class="min-w-0">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('This device') }}</p>
                        <h2 class="mt-1 text-base font-bold text-slate-900">{{ __('Alerts on this device') }}</h2>
                    </div>
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl shadow-sm ring-1 ring-white/40 transition"
                          :class="s.subscribed ? 'bg-brand-gradient text-white' : 'bg-slate-100 text-slate-400'">
                        <x-icon name="bell-alert" class="h-5 w-5" />
                    </span>
                </div>

                <p class="mt-3 text-sm leading-relaxed text-slate-500">
                    {{ __('An approval waiting on you, a job due today, a cash-up that does not balance — sent to this device the moment it happens, whether BillPro is open or not.') }}
                </p>

                {{-- State line. Says what is true right now, in one sentence. --}}
                <div class="mt-5 flex items-center gap-2 rounded-xl bg-slate-50 px-3 py-2.5 text-sm ring-1 ring-slate-200/70">
                    <span class="h-2 w-2 shrink-0 rounded-full"
                          :class="s.subscribed ? 'bg-emerald-500' : (s.permission === 'denied' ? 'bg-rose-500' : 'bg-slate-300')"></span>
                    <span class="min-w-0 flex-1 font-medium text-slate-700"
                          x-text="s.subscribed
                            ? '{{ __('On — this device will be notified') }}'
                            : (s.permission === 'denied'
                                ? '{{ __('Blocked by your browser') }}'
                                : '{{ __('Off — nothing will reach this device') }}')"></span>
                </div>

                <div class="mt-4 flex flex-wrap items-center gap-2">
                    <template x-if="!s.subscribed">
                        <button type="button" @click="enable()" :disabled="busy || !s.supported"
                                class="inline-flex items-center gap-2 rounded-xl bg-brand-gradient px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50">
                            <x-icon name="bell" class="h-4 w-4" />
                            <span x-text="busy ? '{{ __('Just a moment…') }}' : '{{ __('Turn on notifications') }}'"></span>
                        </button>
                    </template>

                    <template x-if="s.subscribed">
                        <button type="button" @click="disable()" :disabled="busy"
                                class="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-600 shadow-xs transition hover:border-slate-300 hover:bg-slate-50 disabled:opacity-50">
                            <x-icon name="no-symbol" class="h-4 w-4" />
                            {{ __('Turn off on this device') }}
                        </button>
                    </template>

                </div>

                {{-- Sound is a browser-side preference for the in-app chime, so
                     it is a switch rather than an action: nothing is submitted
                     and there is nothing to wait for. The per-device switch in
                     the table below is the other half — it governs a push that
                     arrives with the app closed. --}}
                <div class="mt-5 flex items-start justify-between gap-4 border-t border-slate-100 pt-5">
                    <span class="flex items-start gap-3">
                        <span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-slate-50 text-slate-500">
                            <x-icon name="speaker-wave" class="h-5 w-5" />
                        </span>
                        <span class="min-w-0">
                            <span class="block text-sm font-medium text-slate-900">{{ __('Sound in the app') }}</span>
                            <span class="mt-0.5 block text-sm text-slate-500">{{ __('Chime when something arrives while you are looking at BillPro.') }}</span>
                        </span>
                    </span>

                    <x-toggle-switch alpine="s.sound" :label="__('Sound in the app')" @click="toggleSound()" class="mt-0.5" />
                </div>

                {{-- iPhone dead end, stated before they hit it. --}}
                <template x-if="s.ios && !s.standalone">
                    <p class="mt-4 flex items-start gap-2 rounded-xl bg-amber-50 px-3 py-2.5 text-xs leading-relaxed text-amber-800 ring-1 ring-amber-200">
                        <x-icon name="device-phone-mobile" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
                        <span>{{ __('On iPhone and iPad, Apple only allows notifications for an installed app. Install BillPro first (the card beside this one), open it from your home screen, then turn notifications on there.') }}</span>
                    </p>
                </template>
            </x-card>

            {{-- 2 · Install --}}
            <x-card class="flex flex-col overflow-hidden p-6">
                <div class="flex items-start justify-between gap-3">
                    <div class="min-w-0">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Home screen') }}</p>
                        <h2 class="mt-1 text-base font-bold text-slate-900">{{ __('Install BillPro') }}</h2>
                    </div>
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl shadow-sm ring-1 ring-white/40 transition"
                          :class="s.standalone ? 'bg-brand-gradient text-white' : 'bg-slate-100 text-slate-400'">
                        <x-icon name="device-phone-mobile" class="h-5 w-5" />
                    </span>
                </div>

                <p class="mt-3 text-sm leading-relaxed text-slate-500">
                    {{ __('Put BillPro on your phone or desktop with its own icon. It opens full-screen with no address bar, starts faster, and on iPhone it is the only way notifications can work at all.') }}
                </p>

                <template x-if="s.standalone">
                    <div class="mt-5 flex items-center gap-2 rounded-xl bg-emerald-50 px-3 py-2.5 text-sm font-medium text-emerald-800 ring-1 ring-emerald-200">
                        <x-icon name="check-circle" class="h-4 w-4 shrink-0" />
                        {{ __('You are using the installed app right now.') }}
                    </div>
                </template>

                <template x-if="!s.standalone && s.installable">
                    <div class="mt-5">
                        <button type="button" @click="install()"
                                class="inline-flex items-center gap-2 rounded-xl bg-brand-gradient px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:opacity-90">
                            <x-icon name="arrow-down-tray" class="h-4 w-4" />
                            {{ __('Install BillPro') }}
                        </button>
                    </div>
                </template>

                {{-- No install event to offer, so tell them where their own
                     browser hides it. This is the normal case on iOS and on
                     Firefox, and on Chrome for a site already installed once. --}}
                <template x-if="!s.standalone && !s.installable">
                    <div class="mt-5 space-y-2.5 rounded-xl bg-slate-50 p-4 ring-1 ring-slate-200/70">
                        <p class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Install it by hand') }}</p>
                        <template x-if="s.ios">
                            <ol class="space-y-1.5 text-sm text-slate-600">
                                <li class="flex gap-2"><span class="font-bold text-slate-400">1.</span> {{ __('Open this page in Safari (not Chrome).') }}</li>
                                <li class="flex gap-2"><span class="font-bold text-slate-400">2.</span> {{ __('Tap the Share button — the square with the arrow.') }}</li>
                                <li class="flex gap-2"><span class="font-bold text-slate-400">3.</span> {{ __('Scroll down and tap "Add to Home Screen".') }}</li>
                            </ol>
                        </template>
                        {{-- Safari on a Mac has no ⋮ menu and no address-bar
                             install icon. Its own route is File → Add to Dock, and
                             being pointed at the Chrome one is how somebody
                             concludes it cannot be done at all. --}}
                        <template x-if="!s.ios && s.macSafari">
                            <ol class="space-y-1.5 text-sm text-slate-600">
                                <li class="flex gap-2"><span class="font-bold text-slate-400">1.</span> {{ __('In Safari, open the File menu.') }}</li>
                                <li class="flex gap-2"><span class="font-bold text-slate-400">2.</span> {{ __('Choose "Add to Dock…", then Add.') }}</li>
                                <li class="flex gap-2"><span class="font-bold text-slate-400">3.</span> {{ __('That needs macOS Sonoma or later. On an older Mac, open BillPro in Chrome or Edge instead — they show an install icon at the right of the address bar.') }}</li>
                            </ol>
                        </template>
                        <template x-if="!s.ios && !s.macSafari">
                            <ol class="space-y-1.5 text-sm text-slate-600">
                                <li class="flex gap-2"><span class="font-bold text-slate-400">1.</span> {{ __('Open your browser\'s menu (⋮ or ≡).') }}</li>
                                <li class="flex gap-2"><span class="font-bold text-slate-400">2.</span> {{ __('Look for "Install BillPro", "Install app" or "Add to Home screen".') }}</li>
                                <li class="flex gap-2"><span class="font-bold text-slate-400">3.</span> {{ __('On a laptop, Chrome and Edge also show an install icon at the right of the address bar.') }}</li>
                            </ol>
                        </template>
                    </div>
                </template>
            </x-card>
        </section>

        {{-- Devices --}}
        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                <div>
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Your devices') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Everywhere BillPro can reach you. Turning a device off here does not affect the others.') }}</p>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Device') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Added') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Last alert') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Sound') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($devices as $device)
                            <tr wire:key="device-{{ $device->id }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 py-4 text-sm lg:px-4">
                                    @if ($renamingId === $device->id)
                                        <div class="flex items-center gap-2">
                                            <x-input type="text" class="block w-full max-w-xs" wire:model="renameTo" wire:keydown.enter="saveRename" />
                                            <button wire:click="saveRename" class="text-sm font-medium text-indigo-600 transition hover:text-indigo-800">{{ __('Save') }}</button>
                                            <button wire:click="cancelRename" class="text-sm font-medium text-slate-400 transition hover:text-slate-600">{{ __('Cancel') }}</button>
                                        </div>
                                        <x-input-error for="renameTo" class="mt-2" />
                                    @else
                                        <div class="flex items-center gap-2.5">
                                            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-slate-100 text-slate-500">
                                                <x-icon :name="str_contains(strtolower((string) $device->device_label), 'phone') || str_contains(strtolower((string) $device->device_label), 'ipad') ? 'device-phone-mobile' : 'computer-desktop'" class="h-4 w-4" />
                                            </span>
                                            <span class="min-w-0">
                                                <span class="block font-medium text-slate-900">{{ $device->device_label }}</span>
                                                {{-- "this one" is the single most useful thing this
                                                     table can say, and the server cannot know it. --}}
                                                <span class="block text-xs text-indigo-600"
                                                      x-show="s.endpoint === @js($device->endpoint)"
                                                      x-cloak>{{ __('This device') }}</span>
                                            </span>
                                        </div>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">{{ $device->created_at?->timezone(config('app.display_timezone'))->format('j M Y') }}</td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm text-slate-500 lg:px-4">
                                    {{ $device->last_used_at?->timezone(config('app.display_timezone'))->diffForHumans() ?? __('Never') }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-right lg:px-4">
                                    <div class="flex items-center justify-end gap-2.5">
                                        <span class="text-xs font-medium {{ $device->sound ? 'text-slate-600' : 'text-slate-400' }}">
                                            {{ $device->sound ? __('On') : __('Silent') }}
                                        </span>
                                        <x-toggle-switch
                                            :on="$device->sound"
                                            :label="__('Sound on :device', ['device' => $device->device_label])"
                                            wire:click="toggleSound({{ $device->id }})"
                                            wire:loading.attr="disabled"
                                            wire:target="toggleSound" />
                                    </div>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-medium lg:px-4">
                                    <div class="flex items-center justify-end gap-3">
                                        <button wire:click="startRename({{ $device->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Rename') }}</button>
                                        <button wire:click="forget({{ $device->id }})"
                                                wire:confirm="{{ __('Stop sending notifications to this device?') }}"
                                                class="text-rose-600 transition hover:text-rose-800">{{ __('Remove') }}</button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-6 py-12">
                                    <x-empty-state icon="bell"
                                        :title="__('No devices yet')"
                                        :message="__('Turn notifications on above and this phone or computer will appear here.')"
                                        class="border-0 bg-transparent py-0" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-card>

        {{-- What actually gets sent. Worth stating: the commonest reason people
             turn notifications off is not knowing what they signed up for. --}}
        <x-card class="p-6">
            <h2 class="text-base font-semibold text-slate-900">{{ __('What you will be told about') }}</h2>
            <p class="mt-1 text-sm text-slate-500">{{ __('The same things that already appear in the bell — nothing extra, and never anything promotional. What reaches you depends on your role.') }}</p>

            <div class="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                {{-- Chip colours are spelled out rather than built from a tone name:
                     Tailwind scans these files as plain text, so a class it never
                     literally sees is a class it never emits. --}}
                @foreach ([
                    ['icon' => 'check-circle', 'chip' => 'bg-emerald-50 text-emerald-600', 'title' => __('Things waiting on your decision'), 'body' => __('Leave, staff loans, purchase orders, an invoice somebody wants voided.')],
                    ['icon' => 'banknotes', 'chip' => 'bg-sky-50 text-sky-600', 'title' => __('Money'), 'body' => __('A customer has paid, a cash-up does not balance, a supplier bill is falling due.')],
                    ['icon' => 'briefcase', 'chip' => 'bg-amber-50 text-amber-600', 'title' => __('Work'), 'body' => __('A job is due today, a walk-in is waiting at the counter, a quote is about to expire.')],
                    ['icon' => 'users', 'chip' => 'bg-rose-50 text-rose-600', 'title' => __('People'), 'body' => __('Who has not clocked in, leave decisions, and your own payslip.')],
                    ['icon' => 'calendar', 'chip' => 'bg-indigo-50 text-indigo-600', 'title' => __('The month end'), 'body' => __('Targets to set, a period to close, and Friday\'s week in review.')],
                    ['icon' => 'sparkles', 'chip' => 'bg-violet-50 text-violet-600', 'title' => __('Nothing else'), 'body' => __('No marketing, no digests you did not ask for, no alerts from other workspaces.')],
                ] as $group)
                    <div class="flex items-start gap-3 rounded-xl bg-slate-50/70 p-3.5 ring-1 ring-slate-200/60">
                        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg {{ $group['chip'] }}">
                            <x-icon :name="$group['icon']" class="h-4 w-4" />
                        </span>
                        <div class="min-w-0">
                            <p class="text-sm font-semibold text-slate-800">{{ $group['title'] }}</p>
                            <p class="mt-0.5 text-xs leading-relaxed text-slate-500">{{ $group['body'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </x-card>
    </div>
</div>