<script lang="ts">
    interface Props {
        log_lvl?: number;
        lq__event_presenter_obj?: any;
        lq__event_session_obj: any;
        lq__auth__event_presenter_obj?: any;
        lq__event_presentation_obj_li: any;
    }

    let {
        log_lvl = $bindable(0),
        lq__event_presenter_obj,
        lq__event_session_obj,
        lq__auth__event_presenter_obj,
        lq__event_presentation_obj_li
    }: Props = $props();

    // Imports
    import { Modal } from 'flowbite-svelte';
    import type { key_val } from '$lib/stores/ae_stores';
    import { ae_util } from '$lib/ae_utils/ae_utils';
    import Element_ae_obj_field_editor_v3 from '$lib/elements/element_ae_obj_field_editor_v3.svelte';
    import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';
    import { core_func } from '$lib/ae_core/ae_core_functions';
    import { ae_snip, ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
    import { events_loc, events_sess, events_slct } from '$lib/stores/ae_events_stores';
    import { events_func } from '$lib/ae_events_functions';

    import Comp_event_session_poc_profile from './ae_comp__event_session_poc_profile.svelte';
    import Comp_event_session_poc_form_agree from './ae_comp__event_session_poc_form_agree.svelte';

    if (!$events_sess.pres_mgmt) {
        $events_sess.pres_mgmt = {};
        $events_sess.pres_mgmt.show_modal__presenter_agree = null;
        $events_sess.pres_mgmt.show_content__presenter_start = null;
    }

    $events_sess.pres_mgmt.show_modal__presenter_agree = false;
    $events_sess.pres_mgmt.show_content__presenter_start = false;

    // QR Code Generation Logic
    $events_sess.pres_mgmt.session__updated_on = null;
    $effect(() => {
        if ($lq__event_session_obj?.id && $events_loc.pres_mgmt.show_content__session_qr && !$events_sess.pres_mgmt.session_qr_url[$lq__event_session_obj.id]) {
            $events_sess.pres_mgmt.session_qr_url[$lq__event_session_obj.id] = true;
            let url_str = encodeURI(`${$ae_loc.url_origin}/events/${$lq__event_session_obj.event_id}/session/${$lq__event_session_obj.id}`);

            core_func.generate_qr_code({
                api_cfg: $ae_api,
                account_id: $slct.account_id,
                qr_type: 'str',
                qr_id: `${$lq__event_session_obj.id}_url`,
                str: url_str,
                return_blob: true
            }).then(result => {
                $events_sess.pres_mgmt.session_qr_url[$lq__event_session_obj.id] = result;
            });
        }
    });
</script>

<!--
    SESSION VIEW — Speaker Ready Room & Remote Upload
    Primary users: Presenters uploading files (remote) + Staff helping presenters (onsite).
    Design intent: "Is this the right session?" must be answerable in <3 seconds.
    Show: name, time, room, host, description. Hide admin noise unless edit_mode.
    Section 508: all interactive elements labelled, focus rings, sufficient contrast.
-->
<section class="space-y-3">

    <!-- SESSION HERO: Name + Schedule + Room -->
    <div class="rounded-xl border border-surface-200-800 bg-surface-50-900 shadow-sm overflow-hidden">
        <div class="px-4 pt-4 pb-3 flex flex-col gap-3">

            <!-- QR code: floats top-right, compact by default, toggle to enlarge.
                 Only rendered once the async URL is resolved (string), never while
                 it is still the boolean `true` loading placeholder. -->
            {#if $lq__event_session_obj && typeof $events_sess.pres_mgmt.session_qr_url?.[$lq__event_session_obj.id] === 'string'}
                <div class="float-right ml-3 mb-1 flex flex-col items-center gap-1">
                    <button
                        type="button"
                        onclick={() => $events_sess.pres_mgmt.qr_bigger = !$events_sess.pres_mgmt.qr_bigger}
                        class="rounded focus-visible:ring-2 focus-visible:ring-primary-500"
                        title="Toggle QR code size"
                        aria-label="Toggle QR code size"
                    >
                        <img
                            src={$events_sess.pres_mgmt.session_qr_url[$lq__event_session_obj.id]}
                            class="transition-all duration-500 rounded border border-surface-200-800"
                            class:h-20={!$events_sess.pres_mgmt.qr_bigger}
                            class:w-20={!$events_sess.pres_mgmt.qr_bigger}
                            class:h-40={$events_sess.pres_mgmt.qr_bigger}
                            class:w-40={$events_sess.pres_mgmt.qr_bigger}
                            alt="QR code link to this session page"
                        />
                    </button>
                    <MyClipboard
                        value={encodeURI(`${$ae_loc.url_origin}/events/${$lq__event_session_obj.event_id}/session/${$lq__event_session_obj.id}`)}
                        btn_class="btn btn-sm preset-tonal-surface text-xs"
                        hide_icon={false}
                        hide_text={true}
                    >
                        <span class="fas fa-link" aria-hidden="true"></span>
                    </MyClipboard>
                </div>
            {/if}

            <!-- Session Name: the primary identity check -->
            {#if $lq__event_session_obj}
                <div>
                    <Element_ae_obj_field_editor_v3
                        object_type={'event_session'}
                        object_id={$lq__event_session_obj.id}
                        field_name={'name'}
                        field_type={'text'}
                        current_value={$lq__event_session_obj.name}
                        on_success={() => events_func.load_ae_obj_id__event_session({api_cfg: $ae_api, event_session_id: $lq__event_session_obj.id})}
                    >
                        <h1 class="text-2xl font-bold leading-snug">{$lq__event_session_obj.name}</h1>
                    </Element_ae_obj_field_editor_v3>
                    {#if $ae_loc.edit_mode}
                        <span class="badge preset-tonal-surface text-xs mt-1">code: {$lq__event_session_obj.code}</span>
                    {/if}
                </div>
            {:else}
                <!-- Skeleton placeholder while LiveQuery resolves -->
                <div class="h-7 w-2/3 bg-surface-200-800 animate-pulse rounded"></div>
            {/if}

            <!-- Date/Time + Room as info chips -->
            {#if $lq__event_session_obj}
                <div class="flex flex-wrap gap-2 items-center">
                    <span class="inline-flex items-center gap-1.5 text-sm font-semibold px-3 py-1 rounded-full bg-primary-500/10 text-primary-700 dark:text-primary-300 transition-colors duration-200">
                        <span class="fas fa-clock text-xs" aria-hidden="true"></span>
                        {ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, 'dddd')},
                        {ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, $events_loc.pres_mgmt.datetime_format)}
                        &ndash;
                        {ae_util.iso_datetime_formatter($lq__event_session_obj.end_datetime, $events_loc.pres_mgmt.time_format)}
                    </span>
                    {#if $lq__event_session_obj.event_location_name}
                        <span class="inline-flex items-center gap-1.5 text-sm font-semibold px-3 py-1 rounded-full bg-tertiary-500/10 text-tertiary-700 dark:text-tertiary-300 transition-colors duration-200">
                            <span class="fas fa-map-marker-alt text-xs" aria-hidden="true"></span>
                            {$lq__event_session_obj.event_location_name}
                        </span>
                    {/if}
                </div>
            {:else}
                <div class="h-5 w-1/2 bg-surface-200-800 animate-pulse rounded-full"></div>
            {/if}

        </div>
    </div>

    <!-- Host / POC: visible when assigned and layout config allows -->
    <div class:hidden={$events_loc.pres_mgmt?.hide__session_poc}>
        {#if $lq__event_session_obj?.poc_person_id}
            <div class="flex items-center gap-2">
                <span class="text-sm font-semibold opacity-60">Host:</span>
                <button
                    type="button"
                    class="btn btn-sm preset-tonal-primary transition-colors duration-200"
                    onclick={() => $events_sess.pres_mgmt.show__session_poc_profile = true}
                    aria-haspopup="dialog"
                >
                    <span class="fas fa-id-card mr-1" aria-hidden="true"></span>
                    {$lq__event_session_obj.poc_person_full_name}
                </button>

                <Modal title="Host Profile" bind:open={$events_sess.pres_mgmt.show__session_poc_profile}>
                    <Comp_event_session_poc_profile lq__event_session_obj={$lq__event_session_obj} />
                    {#snippet footer()}
                        <button onclick={() => $events_sess.pres_mgmt.show__session_poc_profile = false} class="btn preset-tonal-warning">Close</button>
                    {/snippet}
                </Modal>
            </div>
        {:else if $lq__event_session_obj && !$events_loc.pres_mgmt?.hide__session_poc}
            <span class="text-sm opacity-40 italic">No host assigned</span>
        {/if}
    </div>

    <!-- Description: shown only when present —
         long descriptions are scrollable via the parent container -->
    {#if $lq__event_session_obj?.description}
        <div class="rounded-lg border border-surface-200-800 bg-surface-50-900 px-4 py-3">
            <span class="text-xs font-bold uppercase tracking-wide opacity-40 block mb-1">Description</span>
            <p class="whitespace-pre-wrap text-sm leading-relaxed">{$lq__event_session_obj.description}</p>
        </div>
    {/if}

</section>
