{{--
    Responsive payment checkout shell: bottom sheet on mobile, centered modal on desktop.

    Audiences:
      - buyer (default): public ticket buyers, donors, shoppers — self-serve checkout
      - operator: signed-in staff flows such as wallet top-up

    Optional overrides: $sheetTitle, $sheetSubtitle, $sheetFooter, $sheetAria, $iframeTitle
    Requires Alpine ancestor with: showSheet (bool), checkoutUrl (string).

    Paystack (checkout.paystack.com) sends X-Frame-Options: SAMEORIGIN and cannot be
    embedded. Same-origin URLs (e.g. MoMo waiting pages) still load in an iframe.
    External checkouts open in a named window, with an in-sheet Continue CTA as a
    user-gesture fallback when the popup is blocked after an async fetch.
--}}
@php
    $audience = $audience ?? 'buyer';
    $defaults = match ($audience) {
        'operator' => [
            'title' => 'Complete payment',
            'subtitle' => null,
            'aria' => 'Complete payment',
            'iframe' => 'Payment checkout',
            'footer' => null,
        ],
        default => [
            'title' => 'Complete your payment',
            'subtitle' => 'Pay securely. You\'ll get a confirmation when it succeeds.',
            'aria' => 'Complete your payment',
            'iframe' => 'Secure payment checkout',
            'footer' => 'Your payment is processed securely. Do not close this window until finished.',
        ],
    };
    $sheetTitle = $sheetTitle ?? $defaults['title'];
    $sheetSubtitle = $sheetSubtitle ?? $defaults['subtitle'];
    $sheetAria = $sheetAria ?? $defaults['aria'];
    $iframeTitle = $iframeTitle ?? $defaults['iframe'];
    $sheetFooter = $sheetFooter ?? $defaults['footer'];
@endphp
@once
<script>
(function () {
    if (window.LadillPayCheckout) return;

    function isFrameable(url) {
        if (!url) return false;
        try {
            return new URL(url, window.location.href).origin === window.location.origin;
        } catch (e) {
            return false;
        }
    }

    function openCheckout(url) {
        if (!url) return null;
        try {
            // Named window (no noopener) so payment-return can redirect window.opener.
            return window.open(url, 'ladill_pay_checkout', 'width=480,height=720');
        } catch (e) {
            return null;
        }
    }

    function ensureStore() {
        if (!window.Alpine || typeof window.Alpine.store !== 'function') return null;
        if (window.Alpine.store('ladillPayCheckout')) {
            return window.Alpine.store('ladillPayCheckout');
        }
        window.Alpine.store('ladillPayCheckout', {
            frameable: false,
            popupBlocked: false,
            launchKey: '',
            reset() {
                this.frameable = false;
                this.popupBlocked = false;
                this.launchKey = '';
            },
            sync(show, url) {
                if (!show) {
                    this.reset();
                    return;
                }
                if (!url) return;
                this.frameable = isFrameable(url);
                if (this.frameable) {
                    this.popupBlocked = false;
                    return;
                }
                if (this.launchKey === url) return;
                this.launchKey = url;
                var popup = openCheckout(url);
                this.popupBlocked = !(popup && !popup.closed);
            },
            continueTo(url) {
                if (!url) return;
                var popup = openCheckout(url);
                this.popupBlocked = !(popup && !popup.closed);
                if (this.popupBlocked) {
                    window.location.assign(url);
                }
            },
        });
        return window.Alpine.store('ladillPayCheckout');
    }

    function onAlpineReady() {
        ensureStore();
    }

    if (window.Alpine) {
        onAlpineReady();
    }
    document.addEventListener('alpine:init', onAlpineReady);

    window.LadillPayCheckout = {
        isFrameable: isFrameable,
        open: openCheckout,
        ensureStore: ensureStore,
    };
})();
</script>
@endonce
<template x-teleport="body">
<div x-show="showSheet"
     x-cloak
     x-effect="
        document.documentElement.style.overflow = showSheet ? 'hidden' : '';
        if (typeof window.LadillPayCheckout !== 'undefined') {
            window.LadillPayCheckout.ensureStore();
        }
        if ($store.ladillPayCheckout) {
            $store.ladillPayCheckout.sync(showSheet, checkoutUrl);
        }
     "
     @keydown.escape.window="if (showSheet) showSheet = false"
     class="fixed inset-0 z-[9999] flex items-end justify-center md:items-center md:p-6"
     role="dialog"
     aria-modal="true"
     :aria-hidden="(!showSheet).toString()"
     aria-label="{{ $sheetAria }}">

    <div class="absolute inset-0 bg-black/60"
         x-show="showSheet"
         x-transition:enter="transition-opacity duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition-opacity duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="showSheet = false">
    </div>

    {{-- Mobile bottom sheet --}}
    <div class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white md:hidden"
         style="height:90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
         x-show="showSheet"
         x-transition:enter="transition-transform duration-300 ease-out"
         x-transition:enter-start="translate-y-full"
         x-transition:enter-end="translate-y-0"
         x-transition:leave="transition-transform duration-200 ease-in"
         x-transition:leave-start="translate-y-0"
         x-transition:leave-end="translate-y-full"
         @click.stop>
        <div class="relative flex shrink-0 flex-col gap-0.5 border-b border-slate-100 px-4 pb-3 pt-5"
             style="padding-top: max(1.25rem, env(safe-area-inset-top, 0px))">
            <div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200"></div>
            <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                    <p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
                    @if (! empty($sheetSubtitle))
                        <p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
                    @endif
                </div>
                <button type="button"
                        x-ref="checkoutCloseMobile"
                        @click="showSheet = false"
                        class="shrink-0 rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
                        aria-label="Close">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
        </div>
        <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
            <iframe x-show="$store.ladillPayCheckout?.frameable"
                    :src="showSheet && $store.ladillPayCheckout?.frameable ? checkoutUrl : ''"
                    class="h-full min-h-[60dvh] w-full border-0"
                    allow="payment *"
                    title="{{ $iframeTitle }}"></iframe>
            <div x-show="!$store.ladillPayCheckout?.frameable"
                 class="flex min-h-[60dvh] flex-col items-center justify-center gap-4 px-6 py-10 text-center">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-50 text-indigo-600" aria-hidden="true">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/>
                    </svg>
                </div>
                <div class="max-w-xs space-y-1">
                    <p class="text-sm font-semibold text-slate-800"
                       x-text="$store.ladillPayCheckout?.popupBlocked ? 'Continue in a secure payment window' : 'Complete payment in the secure window'"></p>
                    <p class="text-xs leading-snug text-slate-500">
                        <span x-show="!$store.ladillPayCheckout?.popupBlocked">A Paystack window should be open. If you do not see it, tap continue below.</span>
                        <span x-show="$store.ladillPayCheckout?.popupBlocked">Your browser blocked the popup. Tap continue to open Paystack.</span>
                    </p>
                </div>
                <button type="button"
                        @click="$store.ladillPayCheckout?.continueTo(checkoutUrl)"
                        class="inline-flex w-full max-w-xs items-center justify-center rounded-xl bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700">
                    Continue to Paystack
                </button>
                <button type="button"
                        @click="showSheet = false"
                        class="text-xs font-medium text-slate-500 hover:text-slate-700">
                    Cancel
                </button>
            </div>
        </div>
        @if (! empty($sheetFooter))
            <p class="shrink-0 border-t border-slate-100 bg-slate-50 px-4 py-2 text-center text-[11px] text-slate-500">
                {{ $sheetFooter }}
            </p>
        @endif
    </div>

    {{-- Desktop centered modal --}}
    <div class="relative hidden w-full max-w-lg overflow-hidden rounded-2xl bg-white shadow-2xl md:flex md:h-[min(720px,85vh)] md:flex-col"
         x-show="showSheet"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 scale-95"
         x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         @click.stop>
        <div class="flex shrink-0 items-start justify-between gap-3 border-b border-slate-100 px-5 py-3">
            <div class="min-w-0">
                <p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
                @if (! empty($sheetSubtitle))
                    <p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
                @endif
            </div>
            <button type="button"
                    x-ref="checkoutCloseDesktop"
                    x-init="$watch('showSheet', value => { if (value) { $nextTick(() => ($refs.checkoutCloseDesktop || $refs.checkoutCloseMobile)?.focus()) } })"
                    @click="showSheet = false"
                    class="shrink-0 rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
                    aria-label="Close">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>
        <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
            <iframe x-show="$store.ladillPayCheckout?.frameable"
                    :src="showSheet && $store.ladillPayCheckout?.frameable ? checkoutUrl : ''"
                    class="h-full min-h-0 w-full border-0"
                    style="min-height: 28rem"
                    allow="payment *"
                    title="{{ $iframeTitle }}"></iframe>
            <div x-show="!$store.ladillPayCheckout?.frameable"
                 class="flex h-full min-h-[28rem] flex-col items-center justify-center gap-4 px-8 py-12 text-center">
                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-50 text-indigo-600" aria-hidden="true">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/>
                    </svg>
                </div>
                <div class="max-w-sm space-y-1">
                    <p class="text-sm font-semibold text-slate-800"
                       x-text="$store.ladillPayCheckout?.popupBlocked ? 'Continue in a secure payment window' : 'Complete payment in the secure window'"></p>
                    <p class="text-xs leading-snug text-slate-500">
                        <span x-show="!$store.ladillPayCheckout?.popupBlocked">A Paystack window should be open. If you do not see it, click continue below.</span>
                        <span x-show="$store.ladillPayCheckout?.popupBlocked">Your browser blocked the popup. Click continue to open Paystack.</span>
                    </p>
                </div>
                <button type="button"
                        @click="$store.ladillPayCheckout?.continueTo(checkoutUrl)"
                        class="inline-flex w-full max-w-xs items-center justify-center rounded-xl bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700">
                    Continue to Paystack
                </button>
                <button type="button"
                        @click="showSheet = false"
                        class="text-xs font-medium text-slate-500 hover:text-slate-700">
                    Cancel
                </button>
            </div>
        </div>
        @if (! empty($sheetFooter))
            <p class="shrink-0 border-t border-slate-100 bg-slate-50 px-5 py-2 text-center text-[11px] text-slate-500">
                {{ $sheetFooter }}
            </p>
        @endif
    </div>
</div>
</template>