{{-- PWA install prompt (Android + iOS) + browser push toggle --}}
{{-- Included by all three notification preference partials.      --}}

{{-- Add to Home Screen --}}
<div class="mt-6" x-data="{
    state: 'hidden',
    prompt: null,
    init() {
        const standalone = window.navigator.standalone === true
            || window.matchMedia('(display-mode: standalone)').matches;
        if (standalone) { this.state = 'installed'; return; }

        const isIOS = /iphone|ipad|ipod/i.test(navigator.userAgent);
        if (isIOS) {
            const safari = /safari/i.test(navigator.userAgent) && !/crios|fxios|opios|edgios/i.test(navigator.userAgent);
            this.state = safari ? 'ios' : 'hidden';
            return;
        }
        if (window.ndInstallPrompt) { this.prompt = window.ndInstallPrompt; this.state = 'android'; return; }
        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();
            window.ndInstallPrompt = e;
            this.prompt = e;
            this.state = 'android';
        });
    },
    async install() {
        if (!this.prompt) return;
        this.prompt.prompt();
        const { outcome } = await this.prompt.userChoice;
        if (outcome === 'accepted') { this.state = 'installed'; window.ndInstallPrompt = null; }
    }
}">
    <p x-show="state === 'hidden'" x-cloak class="hidden"></p>

    <div x-show="state === 'installed'" x-cloak
         class="flex items-center gap-3 rounded-xl px-4 py-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700">
        <svg class="w-5 h-5 text-green-600 dark:text-green-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <p class="text-sm text-green-700 dark:text-green-300">{{ __('App is installed on your device.') }}</p>
    </div>

    <div x-show="state === 'android'" x-cloak
         class="flex items-center justify-between gap-4 rounded-xl px-4 py-3 bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
        <div>
            <p class="text-sm font-medium text-gray-800 dark:text-gray-200">{{ __('Add to Home Screen') }}</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ __('Install the app for a better experience and notifications.') }}</p>
        </div>
        <button @click="install()"
                class="shrink-0 px-4 py-2 rounded-lg text-sm font-medium text-white transition hover:opacity-90"
                style="background-color:rgb(var(--a6))">
            {{ __('Install') }}
        </button>
    </div>

    <div x-show="state === 'ios'" x-cloak
         class="rounded-xl px-4 py-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700">
        <p class="text-sm font-medium text-amber-800 dark:text-amber-300">{{ __('Add to Home Screen') }}</p>
        <p class="text-xs text-amber-700 dark:text-amber-400 mt-1 leading-relaxed">
            {{ __('Tap') }}
            <svg class="inline w-3.5 h-3.5 mx-0.5 -mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12V4m0 0L8 8m4-4l4 4"/></svg>
            {{ __('then "Add to Home Screen" to install the app and enable notifications on iOS.') }}
        </p>
    </div>
</div>

{{-- Browser push notifications --}}
<fieldset class="mt-6" x-data="{
    ...ndPushToggle(),
    on: localStorage.getItem('ndChatNotify') === '1',
    get enabled() { return this.on; },
    set enabled(v) { this.on = v; },
}">
    <legend class="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-3">
        {{ __('Browser notifications') }}
    </legend>

    <div x-show="iosNonPwa" x-cloak
         class="text-sm text-amber-700 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-700 rounded-lg px-4 py-3 leading-snug">
        {{ __('On iOS, notifications are only available when ND-Link is added to your Home Screen.') }}
        <span class="block text-xs mt-1 text-amber-600 dark:text-amber-500">
            {{ __('Tap') }}
            <svg class="inline w-3.5 h-3.5 mx-0.5 -mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12V4m0 0L8 8m4-4l4 4"/></svg>
            {{ __('then "Add to Home Screen".') }}
        </span>
    </div>

    <div x-show="!iosNonPwa" class="space-y-3">
        <label class="flex items-start gap-3 cursor-pointer group">
            <input type="checkbox" :checked="on" @change="toggle()"
                   class="mt-0.5 h-4 w-4 shrink-0 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700">
            <span class="text-sm text-gray-700 dark:text-gray-300 group-hover:text-gray-900 dark:group-hover:text-gray-100 leading-snug">
                {{ __('Notify me when I receive a chat message') }}
                <span class="block text-xs text-gray-400 dark:text-gray-500">
                    {{ __('Browser pop-up notification. Your browser will ask for permission when you enable this.') }}
                </span>
            </span>
        </label>
        <p x-show="denied" x-cloak class="text-xs text-red-500">
            {{ __('Notifications are blocked in your browser. Please allow them in your browser settings and reload the page.') }}
        </p>
    </div>
</fieldset>