<script lang="ts">
/**
 * ae_comp__exhibit_payment.svelte
 * Leads Payment — Stripe Buy Button integration.
 *
 * Stripe config priority (first wins):
 *   1. Props passed from the parent (sourced from event.mod_exhibits_json — preferred)
 *   2. $ae_loc.site_cfg_json fallback (legacy — for events not yet migrated to mod_exhibits_json)
 *
 * Props are set in the exhibit +page.svelte from lq__event_obj.mod_exhibits_json and passed
 * down so this component doesn't need to know the event_id or do its own Dexie query.
 *
 * client_reference_id = exhibit_id — ties each Stripe payment back to this booth record.
 * Payment status (priority flag) is read live from Dexie (IDB).
 *
 * WHY {#key btn_payment_id}: stripe-buy-button is a web component that ignores attribute
 * changes after its initial mount. Keying on btn_payment_id forces Svelte to fully
 * remount the element whenever the selected license tier changes.
 */
import { liveQuery } from 'dexie';
import { db_events } from '$lib/ae_events/db_events';
import { ae_loc } from '$lib/stores/ae_stores';
import { TriangleAlert, CircleCheck, CreditCard, LoaderCircle } from '@lucide/svelte';

interface Props {
    exhibit_id: string;
    /** From event.mod_exhibits_json — set in the Leads Config page. Falls back to site_cfg_json. */
    stripe_publishable_key?: string | null;
    stripe_btn_1_license?:  string | null;
    stripe_btn_3_license?:  string | null;
    stripe_btn_6_license?:  string | null;
    stripe_btn_10_license?: string | null;
    /** Event-level flag: when false, payment UI is hidden (pre-paid events) */
    leads_require_payment?: boolean;
}
let {
    exhibit_id,
    stripe_publishable_key: prop_stripe_key = null,
    stripe_btn_1_license:   prop_btn_1      = null,
    stripe_btn_3_license:   prop_btn_3      = null,
    stripe_btn_6_license:   prop_btn_6      = null,
    stripe_btn_10_license:  prop_btn_10     = null
    , leads_require_payment = true
}: Props = $props();

const lq__exhibit_obj = liveQuery(() => {
    if (!exhibit_id) return undefined;
    return db_events.exhibit.get(exhibit_id);
});

// Stripe config: prefer event-level props (mod_exhibits_json); fall back to site_cfg_json
// for events that haven't been migrated to the per-event config page yet.
const stripe_publishable_key = $derived(
    prop_stripe_key ??
    ($ae_loc.site_cfg_json?.stripe_publishable_key as string | undefined) ?? null
);
const stripe_btn_ids = $derived({
    1:  prop_btn_1  ?? ($ae_loc.site_cfg_json?.stripe_btn_1_license  as string | undefined) ?? null,
    3:  prop_btn_3  ?? ($ae_loc.site_cfg_json?.stripe_btn_3_license  as string | undefined) ?? null,
    6:  prop_btn_6  ?? ($ae_loc.site_cfg_json?.stripe_btn_6_license  as string | undefined) ?? null,
    10: prop_btn_10 ?? ($ae_loc.site_cfg_json?.stripe_btn_10_license as string | undefined) ?? null,
});

const license_tiers = [
    { qty: 1,  label: '1 user license',         price: '$120' },
    { qty: 3,  label: 'Up to 3 user licenses',  price: '$330' },
    { qty: 6,  label: 'Up to 6 user licenses',  price: '$660' },
    { qty: 10, label: 'Up to 10 user licenses', price: '$1,100' },
] as const;

type LicenseQty = 1 | 3 | 6 | 10;
let selected_qty: LicenseQty = $state(1);

const btn_payment_id = $derived(stripe_btn_ids[selected_qty] ?? null);
const is_stripe_configured = $derived(!!stripe_publishable_key);

// Inject the Stripe Buy Button JS once per session (idempotent — skips if already present).
// document.head is outside Svelte's managed DOM tree so this is safe.
$effect(() => {
    if (!is_stripe_configured) return;
    if (document.querySelector('script[src*="stripe.com/v3/buy-button"]')) return;

    const script = document.createElement('script');
    script.src = 'https://js.stripe.com/v3/buy-button.js';
    script.async = true;
    document.head.appendChild(script);
});
</script>

<div class="exhibit-payment space-y-6">
    {#if $lq__exhibit_obj === undefined}
        <div class="py-6 text-center">
            <LoaderCircle size="2em" class="mx-auto mb-2 animate-spin" />
            <div class="text-sm opacity-70">Loading booth status…</div>
        </div>

    {:else if $lq__exhibit_obj?.priority}
        <!-- Paid Confirmation — shown when admin has marked this booth as paid (priority = true) -->
        <div class="card preset-tonal-success border-success-500/30 border p-6">
            <div class="mb-3 flex items-center gap-3">
                <CircleCheck size="1.5em" class="text-success-500" />
                <h4 class="text-success-500 text-lg font-bold">Marked as Paid</h4>
            </div>
            <p class="text-sm">
                Thank you for your payment. You have purchased
                <strong>{$lq__exhibit_obj?.license_max ?? 0}</strong> user license(s)
                for lead retrieval at this event.
            </p>
            {#if ($lq__exhibit_obj?.leads_device_sm_qty ?? 0) > 0}
                <p class="mt-2 text-sm">
                    Rental device(s): <strong>{$lq__exhibit_obj?.leads_device_sm_qty}</strong>.
                    Pick them up at onsite registration.
                </p>
            {:else}
                <p class="mt-2 text-sm opacity-60">
                    No rental devices. Use your own device(s) with this service.
                </p>
            {/if}
        </div>

    {:else if !leads_require_payment}
        <p class="py-4 text-center text-sm opacity-60">Payment is not required for this event.</p>

    {:else if !is_stripe_configured}
        <!-- Stripe not configured — show a setup hint only to admins -->
        {#if $ae_loc.administrator_access}
            <div
                class="card preset-tonal-warning border-warning-500/30 flex items-start gap-3 border p-4">
                <TriangleAlert size="1.2em" class="text-warning-500 mt-0.5 shrink-0" />
                <div class="text-sm">
                    <p class="font-bold">Stripe not configured for this site.</p>
                    <p class="mt-1 opacity-70">
                        Add <code class="font-mono text-xs">stripe_publishable_key</code>,
                        <code class="font-mono text-xs">stripe_btn_1_license</code>,
                        <code class="font-mono text-xs">stripe_btn_3_license</code>,
                        <code class="font-mono text-xs">stripe_btn_6_license</code>, and
                        <code class="font-mono text-xs">stripe_btn_10_license</code>
                        to <strong>Site Config JSON</strong> to enable payment.
                    </p>
                </div>
            </div>
        {:else}
            <p class="py-4 text-center text-sm opacity-50">
                Online payment is not available at this time. Please contact the event organizer.
            </p>
        {/if}

    {:else}
        <!-- Payment Form — Stripe configured, booth not yet marked as paid -->
        <div class="space-y-6">
            <div class="flex items-center gap-2">
                <CreditCard size="1.2em" class="text-success-500" />
                <h4 class="text-lg font-bold">Purchase Licenses</h4>
            </div>

            <div class="card preset-tonal-surface border-surface-500/10 border p-4 text-sm">
                <p>
                    Each person from your booth who will scan attendee badges needs their own user
                    license. You can use your own smartphone, tablet, or laptop — rental devices are
                    not required.
                </p>
            </div>

            <!-- License Tier Selector -->
            <div class="space-y-1">
                <label class="label">
                    <span class="text-xs font-black tracking-widest uppercase opacity-40"
                        >Select License Tier</span>
                    <select class="select mt-2 w-full" bind:value={selected_qty}>
                        {#each license_tiers as tier (tier.qty)}
                            <option value={tier.qty}>{tier.label} — {tier.price}</option>
                        {/each}
                    </select>
                </label>
                <p class="text-xs opacity-50">One license per team member who will scan badges.</p>
            </div>

            <!-- Stripe Buy Button -->
            <div class="flex flex-col items-center gap-3">
                {#if stripe_publishable_key && btn_payment_id}
                    <!-- {#key} forces full remount when tier changes — stripe-buy-button ignores
                         attribute updates after initial render. See component comment above. -->
                    {#key btn_payment_id}
                        <stripe-buy-button
                            buy-button-id={btn_payment_id}
                            publishable-key={stripe_publishable_key}
                            client-reference-id={exhibit_id}>
                        </stripe-buy-button>
                    {/key}
                    <p class="text-center text-xs opacity-40">
                        Payment processed securely via Stripe. Verify quantities on the checkout
                        page.
                    </p>
                    <div class="card preset-tonal-warning w-full p-3 text-xs">
                        <strong>Note:</strong> Payment confirmation may take up to 2 business days
                        to reflect in your account status. Contact
                        <a
                            href="mailto:exhibits@oneskyit.com"
                            class="font-medium hover:underline">exhibits@oneskyit.com</a>
                        with questions.
                    </div>
                {:else}
                    <p class="text-sm opacity-50">
                        No payment button is configured for this tier. Contact the event organizer.
                    </p>
                {/if}
            </div>
        </div>
    {/if}
</div>
