@props([
    // The shop's intake code. Null when its intake is closed, which is the one
    // case where there is nothing worth installing.
    'code' => null,
    // The request whose progress this device would follow. Null on the intake
    // form itself, where there is not a job to be told about yet.
    'token' => null,
    'company' => null,
])

@php
    $company = $company ?: __('the shop');

    // Notifications are offered only where they can actually be delivered:
    // there is a request to follow AND this installation has notification keys.
    // A fresh deploy has none, and promising a customer their phone will buzz
    // when nothing can send is worse than saying nothing.
    $canNotify = $token && app(\App\Services\PushService::class)->publicKey();

    // Every browser-side outcome, in words a customer can act on. The staff
    // page has its own version of this list; the wording is different here on
    // purpose, because nobody standing in a print queue knows what a service
    // worker is.
    $reasons = [
        'unsupported' => __('This browser cannot do notifications. Chrome, Edge, Firefox and Safari all can.'),
        'not-configured' => __('The shop has not switched notifications on yet.'),
        'ios-needs-install' => __('On iPhone, add this page to your home screen first — then open it from there and turn notifications on.'),
        'blocked' => __('Your browser is blocking notifications for this site. Open the padlock in the address bar and allow them, then try again.'),
        'dismissed' => __('You closed the box without choosing. Tap again when you are ready.'),
        'no-worker' => __('Your browser would not start the background helper needed for this.'),
        'subscribe-failed' => __('Your browser refused to register for notifications. Try again, or restart it.'),
        'server-refused' => __('We could not save this device. Try again in a moment.'),
        'too-many-devices' => __('This request is already being followed on several devices.'),
        'unavailable' => __('Your browser is not offering to install right now. Use its own menu and look for "Install" or "Add to Home screen".'),
        'ios-manual' => __('Tap the Share button below, then "Add to Home Screen".'),
    ];
@endphp

{{-- Nothing to install and nothing to be notified about: a closed intake on a
     server with no notification keys. Say nothing rather than draw an empty
     card offering neither. --}}
@if ($code || $canNotify)

<div class="mt-5 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm"
     x-data="{
        s: { supported: false, configured: false, permission: 'default', subscribed: false, standalone: false, installable: false, ios: false },
        /* Our own record of the answer the customer gave. The browser only
           knows that this site may notify them; it cannot tell us that THIS
           request is the one they asked to be told about. */
        following: false,
        busy: false,
        message: null,
        reasons: @js($reasons),
        followUrl: @js($token ? route('portal.intake.follow', ['token' => $token]) : null),

        get flag() { return 'billpro.portal.follow.' + @js($token ?: ''); },

        async init() {
            await this.refresh();

            try { this.following = window.localStorage.getItem(this.flag) === '1'; } catch (e) { /* blocked site data */ }

            /* Silently re-register a device that has already said yes.
               Permission is granted and the browser still holds a
               subscription, so nothing is asked and nothing pops up — but the
               server may never have heard of this device against THIS request
               (a repeat customer, a new job, a rotated endpoint), and without
               this their phone would simply stay quiet. */
            if (this.following && this.followUrl && this.s.permission === 'granted') {
                await window.BillPro.push.enable({ url: this.followUrl });
                await this.refresh();
            }
        },

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

        async follow() {
            this.busy = true;
            const result = await window.BillPro.push.enable({ url: this.followUrl });
            this.busy = false;
            await this.refresh();

            if (result.ok) {
                this.following = true;
                try { window.localStorage.setItem(this.flag, '1'); } catch (e) { /* ignore */ }
                this.message = '{{ __('Done. We will let you know as soon as anything changes.') }}';
            } else {
                this.message = this.reasons[result.reason] || '{{ __('That did not work. Try again.') }}';
            }
        },

        async unfollow() {
            this.busy = true;
            await window.BillPro.push.disable({ url: this.followUrl });
            this.busy = false;
            this.following = false;
            try { window.localStorage.removeItem(this.flag); } catch (e) { /* ignore */ }
            await this.refresh();
            this.message = '{{ __('Updates are off. You can still check this page any time.') }}';
        },

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

            if (!result.ok) this.message = this.reasons[result.reason] || '';

            await this.refresh();
        },
     }"
     x-on:billpro:push-state.window="refresh()">

    <div class="flex items-start gap-3">
        <span class="brand-grad flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-white">
            <x-icon name="device-phone-mobile" class="h-5 w-5" />
        </span>
        <div class="min-w-0">
            <p class="text-sm font-semibold text-slate-800">{{ __('Keep :company on your phone', ['company' => $company]) }}</p>
            <p class="mt-0.5 text-xs leading-relaxed text-slate-500">
                {{ $canNotify
                    ? __('Add this to your home screen so you can check back with one tap, and let us buzz you the moment your job moves.')
                    : __('Add this to your home screen so your next request is one tap away.') }}
            </p>
        </div>
    </div>

    <div class="mt-4 flex flex-wrap gap-2">

        @if ($code)
            {{-- 1 · Install. Nothing to offer once it is already installed. --}}
            <template x-if="s.standalone">
                <span class="inline-flex items-center gap-1.5 rounded-xl bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-700 ring-1 ring-emerald-200">
                    <x-icon name="check" class="h-3.5 w-3.5" />
                    {{ __('On your home screen') }}
                </span>
            </template>

            <template x-if="!s.standalone">
                <button type="button"
                        x-on:click="s.ios ? (message = reasons['ios-manual']) : install()"
                        class="inline-flex items-center gap-1.5 rounded-xl bg-slate-900 px-3 py-2 text-xs font-semibold text-white shadow-sm transition hover:bg-slate-800">
                    <x-icon name="arrow-down-tray" class="h-3.5 w-3.5" />
                    {{ __('Add to home screen') }}
                </button>
            </template>
        @endif

        @if ($canNotify)
            {{-- 2 · Notifications. Only ever about this one request. --}}
            <template x-if="following">
                <button type="button" x-on:click="unfollow()" :disabled="busy"
                        class="inline-flex items-center gap-1.5 rounded-xl bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-700 ring-1 ring-emerald-200 transition hover:bg-emerald-100 disabled:opacity-50">
                    <x-icon name="bell-alert" class="h-3.5 w-3.5" />
                    {{ __('Updates on') }}
                </button>
            </template>

            {{-- Not offered at all where it cannot work: a browser without
                 push, or a shop whose server has no notification keys yet.
                 A button that can only ever apologise is worse than none. --}}
            <template x-if="!following && s.supported && s.configured">
                <button type="button" x-on:click="follow()" :disabled="busy"
                        class="brand-grad inline-flex items-center gap-1.5 rounded-xl px-3 py-2 text-xs font-semibold text-white shadow-sm transition hover:opacity-90 disabled:opacity-50">
                    <x-icon name="bell" class="h-3.5 w-3.5" />
                    {{ __('Tell me when it moves') }}
                </button>
            </template>
        @endif
    </div>

    <template x-if="message">
        <p class="mt-3 flex items-start gap-1.5 text-xs leading-relaxed text-slate-500">
            <x-icon name="information-circle" class="mt-px h-3.5 w-3.5 shrink-0 text-slate-400" />
            <span x-text="message"></span>
        </p>
    </template>
</div>

@endif