<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/elements/pwa_install.svelte';

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

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

        <div class="space-y-3 p-4 pr-10">
            <!-- Header row: icon + text -->
            <div class="flex items-center gap-3">
                <div
                    class="bg-primary-500/15 text-primary-500 shrink-0 rounded-xl p-2.5">
                    <Smartphone size="1.35em" />
                </div>
                <div>
                    <p class="text-sm leading-tight font-bold">
                        Install Aether Leads
                    </p>
                    <p class="mt-0.5 text-xs leading-snug opacity-55">
                        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="bg-primary-500/20 text-primary-600 dark:text-primary-300 flex h-5 w-5 shrink-0
                                     items-center justify-center rounded-full
                                     text-[10px] leading-none font-bold"
                            >1</span>
                        <span class="opacity-75">
                            Tap the
                            <Share2
                                size="0.85em"
                                class="text-primary-500 mx-0.5 inline align-middle" />
                            <strong>Share</strong> button in Safari
                        </span>
                    </li>
                    <li class="flex items-center gap-2.5">
                        <span
                            class="bg-primary-500/20 text-primary-600 dark:text-primary-300 flex h-5 w-5 shrink-0
                                     items-center justify-center rounded-full
                                     text-[10px] leading-none font-bold"
                            >2</span>
                        <span class="opacity-75">
                            Tap <strong>Add to Home Screen</strong>
                            <Plus
                                size="0.85em"
                                class="text-primary-500 mx-0.5 inline align-middle" />
                        </span>
                    </li>
                </ol>
            {/if}
        </div>
    </div>
{/if}
