<script lang="ts">
    /**
     * src/lib/elements/element_pwa_install_prompt.svelte
     *
     * Reusable PWA install nudge. Drop this anywhere in the app to surface
     * a platform-aware "Add to Home Screen" prompt.
     *
     * - Chrome / Android / Desktop Chrome: shows a button that triggers the
     *   native browser install flow (via the captured beforeinstallprompt event).
     * - iOS Safari: shows manual step-by-step "Share → Add to Home Screen" instructions
     *   since iOS does not support the beforeinstallprompt API.
     * - Already installed (standalone mode) or dismissed: renders nothing.
     *
     * The pwa_install singleton must be initialised first (done in root +layout.svelte).
     */
import { Download, Plus, Share2, Smartphone, X } from '@lucide/svelte';
    import { pwa_install } from '$lib/pwa/pwa_install.svelte';

    interface Props {
        class?: string;
    }
    let { class: extra_class = '' }: Props = $props();
</script>

{#if pwa_install.should_show}
    <div
        class="relative w-full rounded-2xl overflow-hidden
               border border-primary-500/25
               bg-primary-500/8 dark:bg-primary-500/12
               {extra_class}"
    >
        <!-- Dismiss button -->
        <button
            class="absolute top-2 right-2 p-2 rounded-lg
                   opacity-40 hover:opacity-90
                   hover:bg-surface-500/10
                   transition-opacity"
            onclick={() => pwa_install.dismiss()}
            aria-label="Dismiss install prompt"
        >
            <X size="1rem" />
        </button>

        <div class="p-4 pr-10 space-y-3">
            <!-- Header row: icon + text -->
            <div class="flex items-center gap-3">
                <div class="shrink-0 p-2.5 rounded-xl bg-primary-500/15 text-primary-500">
                    <Smartphone size="1.35em" />
                </div>
                <div>
                    <p class="font-bold text-sm leading-tight">Install Aether Leads</p>
                    <p class="text-xs opacity-55 leading-snug mt-0.5">
                        Add to your home screen for the best mobile experience
                    </p>
                </div>
            </div>

            {#if pwa_install.can_prompt}
                <!-- Chrome / Android / Desktop Chrome — native one-tap install -->
                <button
                    class="btn preset-filled-primary w-full"
                    onclick={() => pwa_install.prompt()}
                >
                    <Download size="1em" />
                    <span>Add to Home Screen</span>
                </button>
            {:else}
                <!-- iOS Safari — manual instructions (no API available) -->
                <ol class="space-y-2 text-sm">
                    <li class="flex items-center gap-2.5">
                        <span class="shrink-0 flex items-center justify-center w-5 h-5 rounded-full
                                     bg-primary-500/20 text-primary-600 dark:text-primary-300
                                     text-[10px] font-bold leading-none">1</span>
                        <span class="opacity-75">
                            Tap the
                            <Share2 size="0.85em" class="inline align-middle mx-0.5 text-primary-500" />
                            <strong>Share</strong> button in Safari
                        </span>
                    </li>
                    <li class="flex items-center gap-2.5">
                        <span class="shrink-0 flex items-center justify-center w-5 h-5 rounded-full
                                     bg-primary-500/20 text-primary-600 dark:text-primary-300
                                     text-[10px] font-bold leading-none">2</span>
                        <span class="opacity-75">
                            Tap <strong>Add to Home Screen</strong>
                            <Plus size="0.85em" class="inline align-middle mx-0.5 text-primary-500" />
                        </span>
                    </li>
                </ol>
            {/if}
        </div>
    </div>
{/if}
