<script lang="ts">
/**
 * Badge Review Form
 *
 * Mobile-first form view for attendees and staff to review/edit badge details.
 * Does NOT render the badge layout — that is handled by ae_comp__badge_obj_view.svelte.
 *
 * Access:
 *   - Attendees (passcode-validated): can edit fields listed in can_edit_fields
 *   - Trusted staff: can_edit_fields + additional staff-only fields
 *   - Administrators: all fields
 *
 * Field display is driven by the `can_edit_fields` prop.
 */

interface Props {
    event_id: string;
    event_badge_id: string;
    lq__event_badge_obj?: any;
    can_edit_fields?: string[]; // Whitelist of field names user may edit
    is_staff?: boolean; // True = staff view (shows additional fields)
    log_lvl?: number;
}

let {
    event_id,
    event_badge_id,
    lq__event_badge_obj,
    can_edit_fields = [],
    is_staff = false,
    log_lvl = 0
}: Props = $props();

import { browser } from '$app/environment';
import type { key_val } from '$lib/stores/ae_stores';
import { ae_api, ae_loc } from '$lib/stores/ae_stores';
import { events_func } from '$lib/ae_events/ae_events_functions';
import { core_func } from '$lib/ae_core/ae_core_functions';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { Modal } from 'flowbite-svelte';
import {
    BadgeQuestionMark,
    Briefcase,
    Building,
    Check,
    EyeOff,
    FileCheck,
    FileText,
    Flag,
    LoaderCircle,
    Mail,
    MapPin,
    Pencil,
    Phone,
    Radio,
    RotateCcw,
    Save,
    Tag,
    Ticket,
    User,
    X,
    ZoomIn
} from '@lucide/svelte';
// *** Local edit mode (not related to $ae_loc.edit_mode)
let local_edit_active = $state(false);

// *** Accessibility - text enlargement
let txt_enlarge = $state(false);

// *** Help modal
let help_modal_open = $state(false);

// *** QR Code state
let qr_data_url: string = $state('');
let qr_hovered = $state(false); // Hover zoom effect (overlay)
let qr_expanded = $state(false); // Click to expand (pushes content)

// *** Editable field state
let editable_pronouns_override: string | null = $state(null);
let editable_full_name_override: string | null = $state(null);
let editable_professional_title_override: string | null = $state(null);
let editable_affiliations_override: string | null = $state(null);
let editable_phone_override: string | null = $state(null);
let editable_location_override: string | null = $state(null);
let editable_allow_tracking: boolean = $state(false);
let editable_agree_to_tc: boolean = $state(false);

// Staff-only fields
let editable_email_override: string | null = $state(null);
let editable_badge_type_code_override: string | null = $state(null);
let editable_registration_type_code_override: string | null = $state(null);
let editable_hide: boolean = $state(false);
let editable_priority: number | null = $state(null);
let editable_notes: string | null = $state(null);

// Options (other_1_code through other_8_code)
let editable_other_1_code: string | null = $state(null);
let editable_other_2_code: string | null = $state(null);
let editable_other_3_code: string | null = $state(null);
let editable_other_4_code: string | null = $state(null);
let editable_other_5_code: string | null = $state(null);
let editable_other_6_code: string | null = $state(null);
let editable_other_7_code: string | null = $state(null);
let editable_other_8_code: string | null = $state(null);

// Tickets (ticket_1_code through ticket_8_code)
let editable_ticket_1_code: string | null = $state(null);
let editable_ticket_2_code: string | null = $state(null);
let editable_ticket_3_code: string | null = $state(null);
let editable_ticket_4_code: string | null = $state(null);
let editable_ticket_5_code: string | null = $state(null);
let editable_ticket_6_code: string | null = $state(null);
let editable_ticket_7_code: string | null = $state(null);
let editable_ticket_8_code: string | null = $state(null);

let save_status: 'idle' | 'loading' | 'done' | 'error' = $state('idle');

// Initialize from badge object
$effect(() => {
    if ($lq__event_badge_obj) {
        // Reset to badge values
        editable_pronouns_override =
            $lq__event_badge_obj.pronouns_override ?? null;
        editable_full_name_override =
            $lq__event_badge_obj.full_name_override ?? null;
        editable_professional_title_override =
            $lq__event_badge_obj.professional_title_override ?? null;
        editable_affiliations_override =
            $lq__event_badge_obj.affiliations_override ?? null;
        editable_phone_override = $lq__event_badge_obj.phone_override ?? null;
        editable_location_override =
            $lq__event_badge_obj.location_override ?? null;
        editable_allow_tracking = $lq__event_badge_obj.allow_tracking ?? false;
        editable_agree_to_tc = $lq__event_badge_obj.agree_to_tc ?? false;

        editable_email_override = $lq__event_badge_obj.email_override ?? null;
        editable_badge_type_code_override =
            $lq__event_badge_obj.badge_type_code_override ?? null;
        editable_registration_type_code_override =
            $lq__event_badge_obj.registration_type_code_override ?? null;
        editable_hide = $lq__event_badge_obj.hide ?? false;
        editable_priority = $lq__event_badge_obj.priority ?? null;
        editable_notes = $lq__event_badge_obj.notes ?? null;

        editable_other_1_code = $lq__event_badge_obj.other_1_code ?? null;
        editable_other_2_code = $lq__event_badge_obj.other_2_code ?? null;
        editable_other_3_code = $lq__event_badge_obj.other_3_code ?? null;
        editable_other_4_code = $lq__event_badge_obj.other_4_code ?? null;
        editable_other_5_code = $lq__event_badge_obj.other_5_code ?? null;
        editable_other_6_code = $lq__event_badge_obj.other_6_code ?? null;
        editable_other_7_code = $lq__event_badge_obj.other_7_code ?? null;
        editable_other_8_code = $lq__event_badge_obj.other_8_code ?? null;

        editable_ticket_1_code = $lq__event_badge_obj.ticket_1_code ?? null;
        editable_ticket_2_code = $lq__event_badge_obj.ticket_2_code ?? null;
        editable_ticket_3_code = $lq__event_badge_obj.ticket_3_code ?? null;
        editable_ticket_4_code = $lq__event_badge_obj.ticket_4_code ?? null;
        editable_ticket_5_code = $lq__event_badge_obj.ticket_5_code ?? null;
        editable_ticket_6_code = $lq__event_badge_obj.ticket_6_code ?? null;
        editable_ticket_7_code = $lq__event_badge_obj.ticket_7_code ?? null;
        editable_ticket_8_code = $lq__event_badge_obj.ticket_8_code ?? null;

        // Reset edit mode when badge changes
        local_edit_active = false;
        save_status = 'idle';
    }
});

// Generate QR code
$effect(() => {
    if (browser && $lq__event_badge_obj?.event_badge_id) {
        const params: any = {
            obj_type: 'event_badge',
            obj_id: $lq__event_badge_obj.event_badge_id
        };
        (async () => {
            try {
                qr_data_url = await core_func.js_generate_qr_code(
                    'obj',
                    params
                );
            } catch (error: any) {
                console.error('QR code generation error:', error);
                qr_data_url = '';
            }
        })();
    }
});

// Derived: is this field editable for the current user?
function can_edit(field: string): boolean {
    return can_edit_fields.includes('*') || can_edit_fields.includes(field);
}

// Derived: has this field been overridden?
function has_override(base_field: string, override_field: string): boolean {
    const base_val = $lq__event_badge_obj?.[base_field];
    const override_val = $lq__event_badge_obj?.[override_field];
    return !!(override_val && override_val !== base_val);
}

// Get display value (override || base || empty)
function get_display_value(base_field: string, override_field: string): string {
    return (
        $lq__event_badge_obj?.[override_field] ??
        $lq__event_badge_obj?.[base_field] ??
        ''
    );
}

// Check if any changes have been made
let has_changes = $derived.by(() => {
    if (!$lq__event_badge_obj) return false;

    return (
        editable_pronouns_override !==
            ($lq__event_badge_obj.pronouns_override ?? null) ||
        editable_full_name_override !==
            ($lq__event_badge_obj.full_name_override ?? null) ||
        editable_professional_title_override !==
            ($lq__event_badge_obj.professional_title_override ?? null) ||
        editable_affiliations_override !==
            ($lq__event_badge_obj.affiliations_override ?? null) ||
        editable_phone_override !==
            ($lq__event_badge_obj.phone_override ?? null) ||
        editable_location_override !==
            ($lq__event_badge_obj.location_override ?? null) ||
        editable_allow_tracking !==
            ($lq__event_badge_obj.allow_tracking ?? false) ||
        editable_agree_to_tc !== ($lq__event_badge_obj.agree_to_tc ?? false) ||
        editable_email_override !==
            ($lq__event_badge_obj.email_override ?? null) ||
        editable_badge_type_code_override !==
            ($lq__event_badge_obj.badge_type_code_override ?? null) ||
        editable_registration_type_code_override !==
            ($lq__event_badge_obj.registration_type_code_override ?? null) ||
        editable_hide !== ($lq__event_badge_obj.hide ?? false) ||
        editable_priority !== ($lq__event_badge_obj.priority ?? null) ||
        editable_notes !== ($lq__event_badge_obj.notes ?? null) ||
        editable_other_1_code !== ($lq__event_badge_obj.other_1_code ?? null) ||
        editable_other_2_code !== ($lq__event_badge_obj.other_2_code ?? null) ||
        editable_other_3_code !== ($lq__event_badge_obj.other_3_code ?? null) ||
        editable_other_4_code !== ($lq__event_badge_obj.other_4_code ?? null) ||
        editable_other_5_code !== ($lq__event_badge_obj.other_5_code ?? null) ||
        editable_other_6_code !== ($lq__event_badge_obj.other_6_code ?? null) ||
        editable_other_7_code !== ($lq__event_badge_obj.other_7_code ?? null) ||
        editable_other_8_code !== ($lq__event_badge_obj.other_8_code ?? null) ||
        editable_ticket_1_code !==
            ($lq__event_badge_obj.ticket_1_code ?? null) ||
        editable_ticket_2_code !==
            ($lq__event_badge_obj.ticket_2_code ?? null) ||
        editable_ticket_3_code !==
            ($lq__event_badge_obj.ticket_3_code ?? null) ||
        editable_ticket_4_code !==
            ($lq__event_badge_obj.ticket_4_code ?? null) ||
        editable_ticket_5_code !==
            ($lq__event_badge_obj.ticket_5_code ?? null) ||
        editable_ticket_6_code !==
            ($lq__event_badge_obj.ticket_6_code ?? null) ||
        editable_ticket_7_code !==
            ($lq__event_badge_obj.ticket_7_code ?? null) ||
        editable_ticket_8_code !== ($lq__event_badge_obj.ticket_8_code ?? null)
    );
});

// Toggle edit mode
function toggle_edit_mode() {
    if (local_edit_active && !has_changes) {
        // Cancel with no changes
        local_edit_active = false;
    } else {
        // Enter edit mode
        local_edit_active = !local_edit_active;
    }
}

// Name lookup for the hardcoded badge type options in this form.
// Must stay in sync with the <select> options below.
// badge_type_override is always written alongside badge_type_code_override (see handle_save).
const badge_type_name_map: Record<string, string> = {
    member: 'Member',
    'non-member': 'Non-Member',
    guest: 'Guest',
    exhibitor: 'Exhibitor',
    staff: 'Staff',
    test: 'Test'
};

// Revert a specific override field
function revert_override(override_field: string) {
    switch (override_field) {
        case 'pronouns_override':
            editable_pronouns_override = null;
            break;
        case 'full_name_override':
            editable_full_name_override = null;
            break;
        case 'professional_title_override':
            editable_professional_title_override = null;
            break;
        case 'affiliations_override':
            editable_affiliations_override = null;
            break;
        case 'phone_override':
            editable_phone_override = null;
            break;
        case 'location_override':
            editable_location_override = null;
            break;
        case 'email_override':
            editable_email_override = null;
            break;
        case 'badge_type_code_override':
            editable_badge_type_code_override = null;
            break;
        case 'registration_type_code_override':
            editable_registration_type_code_override = null;
            break;
    }
}

// Helper to get option code by index
function get_option_code(idx: number): string | null {
    switch (idx) {
        case 1:
            return editable_other_1_code;
        case 2:
            return editable_other_2_code;
        case 3:
            return editable_other_3_code;
        case 4:
            return editable_other_4_code;
        case 5:
            return editable_other_5_code;
        case 6:
            return editable_other_6_code;
        case 7:
            return editable_other_7_code;
        case 8:
            return editable_other_8_code;
        default:
            return null;
    }
}

// Helper to set option code by index
function set_option_code(idx: number, value: string | null) {
    switch (idx) {
        case 1:
            editable_other_1_code = value;
            break;
        case 2:
            editable_other_2_code = value;
            break;
        case 3:
            editable_other_3_code = value;
            break;
        case 4:
            editable_other_4_code = value;
            break;
        case 5:
            editable_other_5_code = value;
            break;
        case 6:
            editable_other_6_code = value;
            break;
        case 7:
            editable_other_7_code = value;
            break;
        case 8:
            editable_other_8_code = value;
            break;
    }
}

// Helper to get ticket code by index
function get_ticket_code(idx: number): string | null {
    switch (idx) {
        case 1:
            return editable_ticket_1_code;
        case 2:
            return editable_ticket_2_code;
        case 3:
            return editable_ticket_3_code;
        case 4:
            return editable_ticket_4_code;
        case 5:
            return editable_ticket_5_code;
        case 6:
            return editable_ticket_6_code;
        case 7:
            return editable_ticket_7_code;
        case 8:
            return editable_ticket_8_code;
        default:
            return null;
    }
}

// Helper to set ticket code by index
function set_ticket_code(idx: number, value: string | null) {
    switch (idx) {
        case 1:
            editable_ticket_1_code = value;
            break;
        case 2:
            editable_ticket_2_code = value;
            break;
        case 3:
            editable_ticket_3_code = value;
            break;
        case 4:
            editable_ticket_4_code = value;
            break;
        case 5:
            editable_ticket_5_code = value;
            break;
        case 6:
            editable_ticket_6_code = value;
            break;
        case 7:
            editable_ticket_7_code = value;
            break;
        case 8:
            editable_ticket_8_code = value;
            break;
    }
}

async function handle_save() {
    if (!$lq__event_badge_obj?.event_badge_id) return;

    save_status = 'loading';
    const data_to_update: key_val = {};

    // Helper to add changed fields
    const add_if_changed = (
        field: string,
        editable_val: any,
        original_val: any
    ) => {
        if (can_edit(field) && editable_val !== original_val) {
            data_to_update[field] = editable_val;
        }
    };

    add_if_changed(
        'pronouns_override',
        editable_pronouns_override,
        $lq__event_badge_obj.pronouns_override ?? null
    );
    add_if_changed(
        'full_name_override',
        editable_full_name_override,
        $lq__event_badge_obj.full_name_override ?? null
    );
    add_if_changed(
        'professional_title_override',
        editable_professional_title_override,
        $lq__event_badge_obj.professional_title_override ?? null
    );
    add_if_changed(
        'affiliations_override',
        editable_affiliations_override,
        $lq__event_badge_obj.affiliations_override ?? null
    );
    add_if_changed(
        'phone_override',
        editable_phone_override,
        $lq__event_badge_obj.phone_override ?? null
    );
    add_if_changed(
        'location_override',
        editable_location_override,
        $lq__event_badge_obj.location_override ?? null
    );
    add_if_changed(
        'allow_tracking',
        editable_allow_tracking,
        $lq__event_badge_obj.allow_tracking ?? false
    );
    add_if_changed(
        'agree_to_tc',
        editable_agree_to_tc,
        $lq__event_badge_obj.agree_to_tc ?? false
    );
    add_if_changed(
        'email_override',
        editable_email_override,
        $lq__event_badge_obj.email_override ?? null
    );
    // badge_type_code_override and badge_type_override must stay in sync.
    // Handled together here instead of via add_if_changed.
    if (
        can_edit('badge_type_code_override') &&
        editable_badge_type_code_override !==
            ($lq__event_badge_obj.badge_type_code_override ?? null)
    ) {
        data_to_update.badge_type_code_override =
            editable_badge_type_code_override;
        // Write the matching name override — null clears it back to the base badge_type field.
        data_to_update.badge_type_override = editable_badge_type_code_override
            ? (badge_type_name_map[editable_badge_type_code_override] ??
              editable_badge_type_code_override)
            : null;
    }
    add_if_changed(
        'registration_type_code_override',
        editable_registration_type_code_override,
        $lq__event_badge_obj.registration_type_code_override ?? null
    );
    add_if_changed('hide', editable_hide, $lq__event_badge_obj.hide ?? false);
    add_if_changed(
        'priority',
        editable_priority,
        $lq__event_badge_obj.priority ?? null
    );
    add_if_changed('notes', editable_notes, $lq__event_badge_obj.notes ?? null);

    add_if_changed(
        'other_1_code',
        editable_other_1_code,
        $lq__event_badge_obj.other_1_code ?? null
    );
    add_if_changed(
        'other_2_code',
        editable_other_2_code,
        $lq__event_badge_obj.other_2_code ?? null
    );
    add_if_changed(
        'other_3_code',
        editable_other_3_code,
        $lq__event_badge_obj.other_3_code ?? null
    );
    add_if_changed(
        'other_4_code',
        editable_other_4_code,
        $lq__event_badge_obj.other_4_code ?? null
    );
    add_if_changed(
        'other_5_code',
        editable_other_5_code,
        $lq__event_badge_obj.other_5_code ?? null
    );
    add_if_changed(
        'other_6_code',
        editable_other_6_code,
        $lq__event_badge_obj.other_6_code ?? null
    );
    add_if_changed(
        'other_7_code',
        editable_other_7_code,
        $lq__event_badge_obj.other_7_code ?? null
    );
    add_if_changed(
        'other_8_code',
        editable_other_8_code,
        $lq__event_badge_obj.other_8_code ?? null
    );

    add_if_changed(
        'ticket_1_code',
        editable_ticket_1_code,
        $lq__event_badge_obj.ticket_1_code ?? null
    );
    add_if_changed(
        'ticket_2_code',
        editable_ticket_2_code,
        $lq__event_badge_obj.ticket_2_code ?? null
    );
    add_if_changed(
        'ticket_3_code',
        editable_ticket_3_code,
        $lq__event_badge_obj.ticket_3_code ?? null
    );
    add_if_changed(
        'ticket_4_code',
        editable_ticket_4_code,
        $lq__event_badge_obj.ticket_4_code ?? null
    );
    add_if_changed(
        'ticket_5_code',
        editable_ticket_5_code,
        $lq__event_badge_obj.ticket_5_code ?? null
    );
    add_if_changed(
        'ticket_6_code',
        editable_ticket_6_code,
        $lq__event_badge_obj.ticket_6_code ?? null
    );
    add_if_changed(
        'ticket_7_code',
        editable_ticket_7_code,
        $lq__event_badge_obj.ticket_7_code ?? null
    );
    add_if_changed(
        'ticket_8_code',
        editable_ticket_8_code,
        $lq__event_badge_obj.ticket_8_code ?? null
    );

    if (Object.keys(data_to_update).length === 0) {
        save_status = 'idle';
        local_edit_active = false;
        return;
    }

    try {
        await events_func.update_ae_obj__event_badge({
            api_cfg: $ae_api,
            event_id,
            event_badge_id: $lq__event_badge_obj.event_badge_id,
            data_kv: data_to_update,
            log_lvl
        });
        save_status = 'done';
        setTimeout(() => {
            save_status = 'idle';
            local_edit_active = false;
        }, 2000);
    } catch (error) {
        console.error('Error saving badge review changes:', error);
        save_status = 'error';
        setTimeout(() => {
            save_status = 'idle';
        }, 3000);
    }
}

function handle_cancel() {
    if ($lq__event_badge_obj) {
        // Reset all fields
        editable_pronouns_override =
            $lq__event_badge_obj.pronouns_override ?? null;
        editable_full_name_override =
            $lq__event_badge_obj.full_name_override ?? null;
        editable_professional_title_override =
            $lq__event_badge_obj.professional_title_override ?? null;
        editable_affiliations_override =
            $lq__event_badge_obj.affiliations_override ?? null;
        editable_phone_override = $lq__event_badge_obj.phone_override ?? null;
        editable_location_override =
            $lq__event_badge_obj.location_override ?? null;
        editable_allow_tracking = $lq__event_badge_obj.allow_tracking ?? false;
        editable_agree_to_tc = $lq__event_badge_obj.agree_to_tc ?? false;

        editable_email_override = $lq__event_badge_obj.email_override ?? null;
        editable_badge_type_code_override =
            $lq__event_badge_obj.badge_type_code_override ?? null;
        editable_registration_type_code_override =
            $lq__event_badge_obj.registration_type_code_override ?? null;
        editable_hide = $lq__event_badge_obj.hide ?? false;
        editable_priority = $lq__event_badge_obj.priority ?? null;
        editable_notes = $lq__event_badge_obj.notes ?? null;

        editable_other_1_code = $lq__event_badge_obj.other_1_code ?? null;
        editable_other_2_code = $lq__event_badge_obj.other_2_code ?? null;
        editable_other_3_code = $lq__event_badge_obj.other_3_code ?? null;
        editable_other_4_code = $lq__event_badge_obj.other_4_code ?? null;
        editable_other_5_code = $lq__event_badge_obj.other_5_code ?? null;
        editable_other_6_code = $lq__event_badge_obj.other_6_code ?? null;
        editable_other_7_code = $lq__event_badge_obj.other_7_code ?? null;
        editable_other_8_code = $lq__event_badge_obj.other_8_code ?? null;

        editable_ticket_1_code = $lq__event_badge_obj.ticket_1_code ?? null;
        editable_ticket_2_code = $lq__event_badge_obj.ticket_2_code ?? null;
        editable_ticket_3_code = $lq__event_badge_obj.ticket_3_code ?? null;
        editable_ticket_4_code = $lq__event_badge_obj.ticket_4_code ?? null;
        editable_ticket_5_code = $lq__event_badge_obj.ticket_5_code ?? null;
        editable_ticket_6_code = $lq__event_badge_obj.ticket_6_code ?? null;
        editable_ticket_7_code = $lq__event_badge_obj.ticket_7_code ?? null;
        editable_ticket_8_code = $lq__event_badge_obj.ticket_8_code ?? null;
    }
    save_status = 'idle';
    local_edit_active = false;
}
</script>

{#if $lq__event_badge_obj}
    <div class="relative mx-auto w-full max-w-3xl min-w-full md:min-w-2xl">
        <!-- Sticky header with all action buttons -->
        <div
            class="bg-surface-50 dark:bg-surface-900 sticky top-0 z-10 mb-4 w-full border-b border-gray-300 px-4 py-3">
            <header
                class="flex w-full flex-wrap items-center justify-center gap-3 md:justify-between">
                <h3 class="text-lg font-semibold">Badge Review</h3>
                <!-- Help: Give attendee information about what this page and next steps -->
                <button
                    type="button"
                    class="btn btn-sm preset-tonal-surface preset-outlined-surface-100-900"
                    onclick={() => {
                        help_modal_open = true;
                    }}
                    title="Attendee badge review and printing help">
                    <BadgeQuestionMark size="14" />
                    <span class="ml-1 text-base">Help</span>
                </button>

                <!-- Accessibility: Font size toggle -->
                <button
                    type="button"
                    class="btn btn-sm preset-tonal-surface preset-outlined-surface-100-900"
                    class:preset-tonal-surface={!txt_enlarge}
                    class:preset-filled-primary={txt_enlarge}
                    onclick={() => {
                        txt_enlarge = !txt_enlarge;
                    }}
                    title={txt_enlarge
                        ? 'Decrease font size'
                        : 'Increase font size'}>
                    <ZoomIn size="14" />
                    <span class="ml-1 text-base"
                        >{txt_enlarge ? 'Smaller' : 'Larger'}</span>
                </button>

                {#if can_edit_fields.length > 0}
                    <div
                        class="flex flex-wrap items-center justify-center gap-1">
                        {#if local_edit_active}
                            <!-- Save button (primary) - only show if changes exist -->
                            {#if has_changes}
                                <button
                                    type="button"
                                    class="btn btn-lg preset-tonal-warning preset-outlined-warning-100-900"
                                    class:preset-filled-primary={save_status ===
                                        'idle'}
                                    class:preset-tonal-primary={save_status ===
                                        'loading'}
                                    class:preset-filled-success-500={save_status ===
                                        'done'}
                                    class:preset-filled-error-500={save_status ===
                                        'error'}
                                    disabled={save_status === 'loading'}
                                    onclick={handle_save}
                                    data-testid="badge-review-save-btn"
                                    title="Save changes to badge information">
                                    {#if save_status === 'loading'}
                                        <LoaderCircle
                                            size="16"
                                            class="animate-spin" />
                                    {:else if save_status === 'done'}
                                        <Check size="16" />
                                    {:else}
                                        <Save size="16" />
                                    {/if}
                                    <span class="ml-2">
                                        {#if save_status === 'loading'}
                                            Saving…
                                        {:else if save_status === 'done'}
                                            Saved!
                                        {:else if save_status === 'error'}
                                            Error — try again
                                        {:else}
                                            Save
                                        {/if}
                                    </span>
                                </button>
                            {/if}

                            <!-- Cancel button (secondary) -->
                            {#if save_status !== 'done'}
                                <button
                                    type="button"
                                    class="btn btn-lg preset-tonal-warning preset-outlined-warning-100-900"
                                    class:w-48={!has_changes}
                                    onclick={handle_cancel}
                                    data-testid="badge-review-cancel-btn"
                                    title="Cancel changes">
                                    <X size="16" />
                                    <span
                                        class="ml-2"
                                        class:hidden={has_changes}>Cancel</span>
                                </button>
                            {/if}
                        {:else}
                            <!-- Edit Details button (primary, prominent when inactive) -->
                            <button
                                type="button"
                                class="btn btn-lg preset-filled-primary preset-outlined-primary-100-900 w-48"
                                onclick={toggle_edit_mode}>
                                <Pencil size="20" />
                                <span class="ml-2">Edit Details</span>
                            </button>
                        {/if}
                    </div>
                {/if}
            </header>
        </div>

        <div class="space-y-6 px-4 pb-4">
            <!-- Section 1: Print Status (display-only, hidden if not printed and not in edit mode) -->
            {#if ($lq__event_badge_obj.print_count ?? 0) > 0 || $ae_loc.edit_mode}
                <div class="card bg-gray-50 p-4 dark:bg-gray-800">
                    <h4
                        class="mb-2 text-center font-semibold"
                        class:text-sm={!txt_enlarge}
                        class:text-base={txt_enlarge}>
                        Print Status
                    </h4>
                    {#if ($lq__event_badge_obj.print_count ?? 0) === 0}
                        <p
                            class:text-sm={!txt_enlarge}
                            class:text-base={txt_enlarge}>
                            Not yet printed
                        </p>
                    {:else}
                        <p
                            class:text-sm={!txt_enlarge}
                            class:text-base={txt_enlarge}>
                            Printed {$lq__event_badge_obj.print_count}×
                            {#if $lq__event_badge_obj.print_first_datetime}
                                — first: {ae_util.iso_datetime_formatter(
                                    $lq__event_badge_obj.print_first_datetime,
                                    'datetime_iso_12_no_seconds'
                                )}
                            {/if}
                            {#if $lq__event_badge_obj.print_last_datetime}
                                , last: {ae_util.iso_datetime_formatter(
                                    $lq__event_badge_obj.print_last_datetime,
                                    'datetime_iso_12_no_seconds'
                                )}
                            {/if}
                        </p>
                    {/if}
                </div>
            {/if}

            <!-- Section 2: QR Code -->
            {#if qr_data_url}
                <div class="card flex flex-col items-center p-4">
                    <h4
                        class="mb-2 w-full text-center font-semibold"
                        class:text-sm={!txt_enlarge}
                        class:text-base={txt_enlarge}>
                        Badge QR Code
                    </h4>
                    <button
                        type="button"
                        class="relative mx-auto cursor-pointer transition-all duration-200"
                        class:scale-150={qr_hovered && !qr_expanded}
                        class:z-20={qr_hovered && !qr_expanded}
                        onclick={() => (qr_expanded = !qr_expanded)}
                        onmouseover={() => (qr_hovered = true)}
                        onmouseout={() => (qr_hovered = false)}
                        onfocus={() => (qr_hovered = true)}
                        onblur={() => (qr_hovered = false)}
                        title={qr_expanded
                            ? 'Click to collapse'
                            : 'Hover to preview, click to expand'}>
                        <img
                            src={qr_data_url}
                            alt="Badge QR Code"
                            class="mx-auto block rounded bg-white p-2 shadow-sm transition-all duration-200"
                            class:w-32={!qr_expanded}
                            class:h-32={!qr_expanded}
                            class:max-w-md={qr_expanded}
                            class:w-full={qr_expanded}
                            class:p-6={qr_expanded}
                            class:shadow-lg={qr_expanded} />
                    </button>
                    <p
                        class="mt-2 text-center text-gray-500"
                        class:text-xs={!txt_enlarge}
                        class:text-sm={txt_enlarge}>
                        {qr_expanded
                            ? 'Click QR to collapse'
                            : 'Scan or click to enlarge'}
                    </p>
                </div>
            {/if}

            <!-- Section 3: Editable Fields -->
            <div class="card space-y-4 p-4">
                <!-- Pronouns -->
                {#if can_edit('pronouns_override') || is_staff}
                    <div class="grid grid-cols-[120px_1fr] items-center gap-4">
                        <label
                            for="badge-review-pronouns"
                            class="flex items-center gap-1 tracking-wide text-gray-500 uppercase"
                            class:text-xs={!txt_enlarge}
                            class:text-sm={txt_enlarge}>
                            <User size="12" />
                            <span>Pronouns</span>
                            {#if has_override('pronouns', 'pronouns_override')}
                                <span class="ml-1 text-[10px] text-amber-600"
                                    >*</span>
                            {/if}
                        </label>
                        <div class="flex items-center gap-2">
                            {#if local_edit_active && can_edit('pronouns_override')}
                                <input
                                    id="badge-review-pronouns"
                                    type="text"
                                    class="input w-full"
                                    class:text-2xl={!txt_enlarge}
                                    class:text-4xl={txt_enlarge}
                                    bind:value={editable_pronouns_override}
                                    placeholder={$lq__event_badge_obj.pronouns ??
                                        'Pronouns'} />
                                {#if has_override('pronouns', 'pronouns_override')}
                                    <button
                                        type="button"
                                        class="btn btn-xs preset-tonal-surface"
                                        onclick={() =>
                                            revert_override(
                                                'pronouns_override'
                                            )}
                                        title="{$lq__event_badge_obj.pronouns} was overridden with {$lq__event_badge_obj.pronouns_override}">
                                        <RotateCcw size="12" />
                                    </button>
                                {/if}
                            {:else}
                                <div
                                    class:text-2xl={!txt_enlarge}
                                    class:text-4xl={txt_enlarge}>
                                    {get_display_value(
                                        'pronouns',
                                        'pronouns_override'
                                    ) || '—'}
                                </div>
                            {/if}
                        </div>
                    </div>
                {/if}

                <!-- Full Name -->
                {#if can_edit('full_name_override') || is_staff}
                    <div class="grid grid-cols-[120px_1fr] items-center gap-4">
                        <label
                            for="badge-review-full-name"
                            class="flex items-center gap-1 tracking-wide text-gray-500 uppercase"
                            class:text-xs={!txt_enlarge}
                            class:text-sm={txt_enlarge}>
                            <User size="12" />
                            <span>Full Name</span>
                            {#if has_override('full_name', 'full_name_override')}
                                <span class="ml-1 text-[10px] text-amber-600"
                                    >*</span>
                            {/if}
                        </label>
                        <div class="flex items-center gap-2">
                            {#if local_edit_active && can_edit('full_name_override')}
                                <input
                                    id="badge-review-full-name"
                                    data-testid="badge-review-full-name-input"
                                    type="text"
                                    class="input w-full font-semibold"
                                    class:text-2xl={!txt_enlarge}
                                    class:text-4xl={txt_enlarge}
                                    bind:value={editable_full_name_override}
                                    placeholder={$lq__event_badge_obj.full_name ??
                                        'Full name'} />
                                {#if has_override('full_name', 'full_name_override')}
                                    <button
                                        type="button"
                                        class="btn btn-sm preset-tonal-surface p-1"
                                        onclick={() =>
                                            revert_override(
                                                'full_name_override'
                                            )}
                                        title="Revert to: {$lq__event_badge_obj.full_name}">
                                        <RotateCcw size="12" />
                                    </button>
                                {/if}
                            {:else}
                                <div
                                    class="font-semibold"
                                    class:text-2xl={!txt_enlarge}
                                    class:text-4xl={txt_enlarge}>
                                    {@html get_display_value(
                                        'full_name',
                                        'full_name_override'
                                    ) || '—'}
                                </div>
                            {/if}
                        </div>
                    </div>
                {/if}

                <!-- Professional Title -->
                {#if can_edit('professional_title_override') || is_staff}
                    <div class="grid grid-cols-[120px_1fr] items-center gap-4">
                        <label
                            for="badge-review-pro-title"
                            class="flex items-center gap-1 tracking-wide text-gray-500 uppercase"
                            class:text-xs={!txt_enlarge}
                            class:text-sm={txt_enlarge}>
                            <Briefcase size="12" />
                            <span>Prof. Title</span>
                            {#if has_override('professional_title', 'professional_title_override')}
                                <span class="ml-1 text-[10px] text-amber-600"
                                    >*</span>
                            {/if}
                        </label>
                        <div class="flex items-center gap-2">
                            {#if local_edit_active && can_edit('professional_title_override')}
                                <input
                                    id="badge-review-pro-title"
                                    type="text"
                                    class="input w-full"
                                    class:text-2xl={!txt_enlarge}
                                    class:text-4xl={txt_enlarge}
                                    bind:value={
                                        editable_professional_title_override
                                    }
                                    placeholder={$lq__event_badge_obj.professional_title ??
                                        'Professional title'} />
                                {#if has_override('professional_title', 'professional_title_override')}
                                    <button
                                        type="button"
                                        class="btn btn-sm preset-tonal-surface p-1"
                                        onclick={() =>
                                            revert_override(
                                                'professional_title_override'
                                            )}
                                        title="Revert to: {$lq__event_badge_obj.professional_title}">
                                        <RotateCcw size="12" />
                                    </button>
                                {/if}
                            {:else}
                                <div
                                    class:text-2xl={!txt_enlarge}
                                    class:text-4xl={txt_enlarge}>
                                    {@html get_display_value(
                                        'professional_title',
                                        'professional_title_override'
                                    ) || '—'}
                                </div>
                            {/if}
                        </div>
                    </div>
                {/if}

                <!-- Affiliations -->
                {#if can_edit('affiliations_override') || is_staff}
                    <div class="grid grid-cols-[120px_1fr] items-start gap-4">
                        <label
                            for="badge-review-affiliations"
                            class="pt-2 tracking-wide text-gray-500 uppercase"
                            class:text-xs={!txt_enlarge}
                            class:text-sm={txt_enlarge}>
                            <Building size="12" class="mr-1 inline" />
                            Affiliations
                            {#if has_override('affiliations', 'affiliations_override')}
                                <span class="ml-1 text-[10px] text-amber-600"
                                    >*</span>
                            {/if}
                        </label>
                        <div class="flex items-start gap-2">
                            {#if local_edit_active && can_edit('affiliations_override')}
                                <textarea
                                    id="badge-review-affiliations"
                                    class="textarea w-full"
                                    class:text-2xl={!txt_enlarge}
                                    class:text-4xl={txt_enlarge}
                                    rows="2"
                                    bind:value={editable_affiliations_override}
                                    placeholder={$lq__event_badge_obj.affiliations ??
                                        'Affiliations / organization'}
                                ></textarea>
                                {#if has_override('affiliations', 'affiliations_override')}
                                    <button
                                        type="button"
                                        class="btn btn-sm preset-tonal-surface mt-1 p-1"
                                        onclick={() =>
                                            revert_override(
                                                'affiliations_override'
                                            )}
                                        title="Revert to: {$lq__event_badge_obj.affiliations}">
                                        <RotateCcw size="12" />
                                    </button>
                                {/if}
                            {:else}
                                <div
                                    class="whitespace-pre-line"
                                    class:text-2xl={!txt_enlarge}
                                    class:text-4xl={txt_enlarge}>
                                    {@html get_display_value(
                                        'affiliations',
                                        'affiliations_override'
                                    ) || '—'}
                                </div>
                            {/if}
                        </div>
                    </div>
                {/if}

                <!-- Phone -->
                {#if can_edit('phone_override') || is_staff}
                    <div class="grid grid-cols-[120px_1fr] items-center gap-4">
                        <label
                            for="badge-review-phone"
                            class="flex items-center gap-1 tracking-wide text-gray-500 uppercase"
                            class:text-xs={!txt_enlarge}
                            class:text-sm={txt_enlarge}>
                            <Phone size="12" />
                            <span>Phone</span>
                            {#if has_override('phone', 'phone_override')}
                                <span class="ml-1 text-[10px] text-amber-600"
                                    >*</span>
                            {/if}
                        </label>
                        <div class="flex items-center gap-2">
                            {#if local_edit_active && can_edit('phone_override')}
                                <input
                                    id="badge-review-phone"
                                    type="tel"
                                    class="input w-full"
                                    class:text-2xl={!txt_enlarge}
                                    class:text-4xl={txt_enlarge}
                                    bind:value={editable_phone_override}
                                    placeholder={$lq__event_badge_obj.phone ??
                                        'Phone number'} />
                                {#if has_override('phone', 'phone_override')}
                                    <button
                                        type="button"
                                        class="btn btn-sm preset-tonal-surface p-1"
                                        onclick={() =>
                                            revert_override('phone_override')}
                                        title="Revert to: {$lq__event_badge_obj.phone}">
                                        <RotateCcw size="12" />
                                    </button>
                                {/if}
                            {:else}
                                <div
                                    class:text-2xl={!txt_enlarge}
                                    class:text-4xl={txt_enlarge}>
                                    {get_display_value(
                                        'phone',
                                        'phone_override'
                                    ) || '—'}
                                </div>
                            {/if}
                        </div>
                    </div>
                {/if}

                <!-- Location -->
                {#if can_edit('location_override') || is_staff}
                    <div class="grid grid-cols-[120px_1fr] items-center gap-4">
                        <label
                            for="badge-review-location"
                            class="flex items-center gap-1 tracking-wide text-gray-500 uppercase"
                            class:text-xs={!txt_enlarge}
                            class:text-sm={txt_enlarge}>
                            <MapPin size="12" />
                            <span>Location</span>
                            {#if has_override('location', 'location_override')}
                                <span class="ml-1 text-[10px] text-amber-600"
                                    >*</span>
                            {/if}
                        </label>
                        <div class="flex items-center gap-2">
                            {#if local_edit_active && can_edit('location_override')}
                                <input
                                    id="badge-review-location"
                                    type="text"
                                    class="input w-full"
                                    class:text-2xl={!txt_enlarge}
                                    class:text-4xl={txt_enlarge}
                                    bind:value={editable_location_override}
                                    placeholder={$lq__event_badge_obj.location ??
                                        'City, State/Province, Country'} />
                                {#if has_override('location', 'location_override')}
                                    <button
                                        type="button"
                                        class="btn btn-sm preset-tonal-surface p-1"
                                        onclick={() =>
                                            revert_override(
                                                'location_override'
                                            )}
                                        title="Revert to: {$lq__event_badge_obj.location}">
                                        <RotateCcw size="12" />
                                    </button>
                                {/if}
                            {:else}
                                <div
                                    class:text-2xl={!txt_enlarge}
                                    class:text-4xl={txt_enlarge}>
                                    {@html get_display_value(
                                        'location',
                                        'location_override'
                                    ) || '—'}
                                </div>
                            {/if}
                        </div>
                    </div>
                {/if}

                <!-- Allow Tracking checkbox -->
                {#if can_edit('allow_tracking')}
                    <label class="flex cursor-pointer items-center gap-2">
                        <input
                            type="checkbox"
                            class="checkbox"
                            bind:checked={editable_allow_tracking}
                            disabled={!local_edit_active} />
                        <Radio size="12" class="text-gray-500" />
                        <span
                            class:text-sm={!txt_enlarge}
                            class:text-base={txt_enlarge}
                            >Allow exhibitor lead scanning</span>
                    </label>
                {/if}

                <!-- Staff-only fields -->
                {#if is_staff}
                    <div class="mt-4 border-t border-gray-300 pt-4">
                        <h5
                            class="mb-3 text-center font-semibold text-gray-600"
                            class:text-sm={!txt_enlarge}
                            class:text-base={txt_enlarge}>
                            Staff Only
                        </h5>

                        <!-- Email Override -->
                        {#if can_edit('email_override') || is_staff}
                            <div
                                class="grid grid-cols-[140px_1fr] items-center gap-4">
                                <div class="flex items-center gap-2">
                                    <label
                                        for="badge-review-email"
                                        class="flex items-center gap-1 text-xs tracking-wide text-gray-500 uppercase">
                                        <Mail size="12" />
                                        <span>Email (override)</span>
                                    </label>
                                    {#if has_override('email', 'email_override')}
                                        <span class="text-xs text-amber-600"
                                            >(overridden)</span>
                                    {/if}
                                </div>
                                <div class="flex items-center gap-2">
                                    {#if local_edit_active && can_edit('email_override')}
                                        <input
                                            id="badge-review-email"
                                            type="email"
                                            class="input w-full text-sm"
                                            bind:value={editable_email_override}
                                            placeholder={$lq__event_badge_obj.email ??
                                                'Email address'} />
                                    {:else}
                                        <div class="text-sm">
                                            {get_display_value(
                                                'email',
                                                'email_override'
                                            ) || '—'}
                                        </div>
                                    {/if}
                                    {#if local_edit_active && can_edit('email_override') && has_override('email', 'email_override')}
                                        <button
                                            type="button"
                                            class="btn btn-xs preset-tonal-surface flex shrink-0 items-center gap-1"
                                            onclick={() =>
                                                revert_override(
                                                    'email_override'
                                                )}
                                            title="{$lq__event_badge_obj.email} was overridden with {$lq__event_badge_obj.email_override}">
                                            <RotateCcw size="12" />
                                            <span class="text-xs">Revert</span>
                                        </button>
                                    {/if}
                                </div>
                            </div>
                        {/if}

                        <!-- Badge Type Code Override -->
                        {#if can_edit('badge_type_code_override')}
                            <div
                                class="grid grid-cols-[140px_1fr] items-center gap-4">
                                <label
                                    for="badge-type-code"
                                    class="flex items-center gap-1 text-xs tracking-wide text-gray-500 uppercase">
                                    <Tag size="12" />
                                    <span>Badge Type Code</span>
                                </label>
                                <div>
                                    {#if local_edit_active}
                                        <select
                                            id="badge-type-code"
                                            class="select w-full text-sm"
                                            bind:value={
                                                editable_badge_type_code_override
                                            }>
                                            <option value={null}
                                                >— Select badge type —</option>
                                            <option value="member"
                                                >Member</option>
                                            <option value="non-member"
                                                >Non-Member</option>
                                            <option value="guest">Guest</option>
                                            <option value="exhibitor"
                                                >Exhibitor</option>
                                            <option value="staff">Staff</option>
                                            <option value="test">Test</option>
                                        </select>
                                    {:else}
                                        <div class="text-sm">
                                            {$lq__event_badge_obj.badge_type_code_override ??
                                                $lq__event_badge_obj.badge_type_code ??
                                                '—'}
                                        </div>
                                    {/if}
                                </div>
                            </div>
                        {/if}

                        <!-- Registration Type Code Override -->
                        {#if can_edit('registration_type_code_override')}
                            <div
                                class="grid grid-cols-[140px_1fr] items-center gap-4">
                                <label
                                    for="reg-type-code"
                                    class="flex items-center gap-1 text-xs tracking-wide text-gray-500 uppercase">
                                    <Ticket size="12" />
                                    <span>Registration Type Code</span>
                                </label>
                                <div>
                                    {#if local_edit_active}
                                        <select
                                            id="reg-type-code"
                                            class="select w-full text-sm"
                                            bind:value={
                                                editable_registration_type_code_override
                                            }>
                                            <option value={null}
                                                >— Select registration type —</option>
                                            <option value="member"
                                                >Member</option>
                                            <option value="non-member"
                                                >Non-Member</option>
                                            <option value="guest">Guest</option>
                                            <option value="exhibitor"
                                                >Exhibitor</option>
                                            <option value="staff">Staff</option>
                                            <option value="test">Test</option>
                                        </select>
                                    {:else}
                                        <div class="text-sm">
                                            {$lq__event_badge_obj.registration_type_code_override ??
                                                $lq__event_badge_obj.registration_type_code ??
                                                '—'}
                                        </div>
                                    {/if}
                                </div>
                            </div>
                        {/if}

                        <!-- Hide checkbox -->
                        {#if can_edit('hide')}
                            <label
                                class="flex cursor-pointer items-center gap-2">
                                <input
                                    type="checkbox"
                                    class="checkbox"
                                    bind:checked={editable_hide}
                                    disabled={!local_edit_active} />
                                <EyeOff size="12" class="text-gray-500" />
                                <span class="text-sm"
                                    >Hidden from search results</span>
                            </label>
                        {/if}

                        <!-- Priority -->
                        {#if can_edit('priority')}
                            <div
                                class="grid grid-cols-[140px_1fr] items-center gap-4">
                                <label
                                    for="priority"
                                    class="flex items-center gap-1 text-xs tracking-wide text-gray-500 uppercase">
                                    <Flag size="12" />
                                    <span>Priority</span>
                                </label>
                                <div>
                                    {#if local_edit_active}
                                        <input
                                            id="priority"
                                            type="number"
                                            class="input w-full text-sm"
                                            bind:value={editable_priority} />
                                    {:else}
                                        <div class="text-sm">
                                            {$lq__event_badge_obj.priority ??
                                                '—'}
                                        </div>
                                    {/if}
                                </div>
                            </div>
                        {/if}

                        <!-- Notes -->
                        {#if can_edit('notes')}
                            <div
                                class="grid grid-cols-[140px_1fr] items-start gap-4">
                                <label
                                    for="notes"
                                    class="pt-2 text-xs tracking-wide text-gray-500 uppercase">
                                    <FileText size="12" class="mr-1 inline" />
                                    Notes
                                </label>
                                <div>
                                    {#if local_edit_active}
                                        <textarea
                                            id="notes"
                                            class="textarea w-full text-sm"
                                            rows="3"
                                            bind:value={editable_notes}
                                        ></textarea>
                                    {:else}
                                        <div class="text-sm">
                                            {$lq__event_badge_obj.notes ?? '—'}
                                        </div>
                                    {/if}
                                </div>
                            </div>
                        {/if}

                        <!-- Options (other_1 through other_8) -->
                        <div class="mt-4">
                            <h6
                                class="mb-2 text-center font-semibold text-gray-500 uppercase"
                                class:text-xs={!txt_enlarge}
                                class:text-sm={txt_enlarge}>
                                Options
                            </h6>
                            <div class="grid grid-cols-2 gap-2">
                                {#each [1, 2, 3, 4, 5, 6, 7, 8] as idx (idx)}
                                    {#if $lq__event_badge_obj[`other_${idx}_code`] || local_edit_active}
                                        <div class="space-y-1">
                                            <label
                                                class="block text-xs text-gray-500"
                                                for="badge-option-{idx}"
                                                >Option {idx}</label>
                                            {#if local_edit_active}
                                                <input
                                                    id="badge-option-{idx}"
                                                    type="text"
                                                    class="input input-sm w-full"
                                                    value={get_option_code(
                                                        idx
                                                    ) ?? ''}
                                                    oninput={(e) =>
                                                        set_option_code(
                                                            idx,
                                                            e.currentTarget
                                                                .value || null
                                                        )}
                                                    placeholder="—" />
                                            {:else}
                                                <div class="text-sm">
                                                    {#if $lq__event_badge_obj[`other_${idx}_code`]}
                                                        <Check
                                                            size="14"
                                                            class="text-success-500 inline" />
                                                        {$lq__event_badge_obj[
                                                            `other_${idx}_code`
                                                        ]}
                                                    {:else}
                                                        <span
                                                            class="text-xs text-gray-400 italic"
                                                            >(empty)</span>
                                                    {/if}
                                                </div>
                                            {/if}
                                        </div>
                                    {/if}
                                {/each}
                            </div>
                        </div>

                        <!-- Tickets (ticket_1 through ticket_8) -->
                        <div class="mt-4">
                            <h6
                                class="mb-2 text-center font-semibold text-gray-500 uppercase"
                                class:text-xs={!txt_enlarge}
                                class:text-sm={txt_enlarge}>
                                Tickets
                            </h6>
                            <div class="grid grid-cols-2 gap-2">
                                {#each [1, 2, 3, 4, 5, 6, 7, 8] as idx (idx)}
                                    {#if $lq__event_badge_obj[`ticket_${idx}_code`] || local_edit_active}
                                        <div class="space-y-1">
                                            <label
                                                class="block text-xs text-gray-500"
                                                for="badge-ticket-{idx}"
                                                >Ticket {idx}</label>
                                            {#if local_edit_active}
                                                <input
                                                    id="badge-ticket-{idx}"
                                                    type="text"
                                                    class="input input-sm w-full"
                                                    value={get_ticket_code(
                                                        idx
                                                    ) ?? ''}
                                                    oninput={(e) =>
                                                        set_ticket_code(
                                                            idx,
                                                            e.currentTarget
                                                                .value || null
                                                        )}
                                                    placeholder="—" />
                                            {:else}
                                                <div class="text-sm">
                                                    {#if $lq__event_badge_obj[`ticket_${idx}_code`]}
                                                        <Check
                                                            size="14"
                                                            class="text-success-500 inline" />
                                                        {$lq__event_badge_obj[
                                                            `ticket_${idx}_code`
                                                        ]}
                                                    {:else}
                                                        <span
                                                            class="text-xs text-gray-400 italic"
                                                            >(empty)</span>
                                                    {/if}
                                                </div>
                                            {/if}
                                        </div>
                                    {/if}
                                {/each}
                            </div>
                        </div>
                    </div>
                {/if}

                <!-- Attendee-only: Options & Tickets (display only) -->
                {#if !is_staff}
                    {#each [1, 2, 3, 4, 5, 6, 7, 8] as idx (idx)}
                        {#if $lq__event_badge_obj[`other_${idx}_code`]}
                            <div class="text-sm">
                                <Check
                                    size="14"
                                    class="text-success-500 inline" /> Option {idx}:
                                {$lq__event_badge_obj[`other_${idx}_code`]}
                            </div>
                        {/if}
                    {/each}
                    {#each [1, 2, 3, 4, 5, 6, 7, 8] as idx (idx)}
                        {#if $lq__event_badge_obj[`ticket_${idx}_code`]}
                            <div class="text-sm">
                                <Check
                                    size="14"
                                    class="text-success-500 inline" /> Ticket {idx}:
                                {$lq__event_badge_obj[`ticket_${idx}_code`]}
                            </div>
                        {/if}
                    {/each}
                {/if}

                <!-- Terms & Conditions -->
                {#if can_edit('agree_to_tc')}
                    <div class="mt-4 border-t border-gray-300 pt-4">
                        <label class="flex flex-col gap-2">
                            <div class="flex cursor-pointer items-center gap-2">
                                <input
                                    type="checkbox"
                                    class="checkbox"
                                    bind:checked={editable_agree_to_tc}
                                    disabled={!local_edit_active} />
                                <FileCheck size="12" class="text-gray-500" />
                                <span class="text-sm font-medium"
                                    >I agree to the Terms and Conditions</span>
                            </div>
                            <div
                                class="ml-6 rounded bg-gray-50 p-3 text-xs text-gray-600 dark:bg-gray-800">
                                <p>
                                    By checking this box, I confirm that the
                                    information on my badge is correct to the
                                    best of my knowledge. I agree that this
                                    badge may be used for identification
                                    purposes during the event and that my
                                    attendance may be recorded by exhibitors
                                    using the lead scanning feature if I permit
                                    it.
                                </p>
                            </div>
                        </label>
                    </div>
                {/if}
            </div>

            <!-- Bottom padding (buttons moved to sticky header) -->
            <div class="pb-4"></div>
        </div>
    </div>

    <!-- Help Modal -->
    <Modal
        title="Badge Review Help"
        bind:open={help_modal_open}
        autoclose={false}
        size="xl"
        placement="top-center"
        class="w-full">
        <div class="space-y-4 text-base">
            <!-- NOTE: This will largely be replaced by the AE Data Store element to populate correctly per client Event. -->
            <section>
                <h4 class="mb-2 text-lg font-semibold">Reviewing Your Badge</h4>
                <p class="text-gray-700 dark:text-gray-300">
                    This page allows you to review and update the information
                    that will appear on your event badge. Please verify that all
                    details are correct before your badge is printed.
                </p>
            </section>

            <section>
                <h4 class="mb-2 text-lg font-semibold">
                    Editing Your Information
                </h4>
                <p class="mb-2 text-gray-700 dark:text-gray-300">
                    Click the <strong>"Edit Details"</strong> button to make changes
                    to your badge information. You can update fields like your name,
                    professional title, affiliations, and location.
                </p>
                <p class="text-gray-700 dark:text-gray-300">
                    When you're done editing, click <strong>"Save"</strong> to
                    submit your changes, or <strong>"Cancel"</strong> to discard them.
                </p>
            </section>

            <section>
                <h4 class="mb-2 text-lg font-semibold">Accessibility</h4>
                <p class="text-gray-700 dark:text-gray-300">
                    Use the <strong>"Larger"</strong> button to increase text size
                    for easier reading. Click again to return to normal size.
                </p>
            </section>

            <section>
                <h4 class="mb-2 text-lg font-semibold">QR Code</h4>
                <p class="text-gray-700 dark:text-gray-300">
                    Your badge QR code can be scanned at the event for check-in
                    and registration. You can hover over or click the QR code to
                    view it larger.
                </p>
            </section>

            <section>
                <h4 class="mb-2 text-lg font-semibold">Lead Scanning</h4>
                <p class="text-gray-700 dark:text-gray-300">
                    If you check <strong>"Allow exhibitor lead scanning"</strong
                    >, exhibitors will be able to scan your badge to collect
                    your contact information. You can change this setting at any
                    time.
                </p>
            </section>

            <section>
                <h4 class="mb-2 text-lg font-semibold">Need Assistance?</h4>
                <p class="text-gray-700 dark:text-gray-300">
                    If you have questions or need help with your badge
                    information, please contact event staff at the registration
                    desk.
                </p>
            </section>
        </div>

        <div class="modal-action flex w-full items-center justify-center">
            <button
                type="button"
                class="btn btn-lg preset-filled-primary preset-outlined-primary-100-900"
                onclick={() => (help_modal_open = false)}>
                Got It
            </button>
        </div>
    </Modal>
{/if}
