<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_crud from '$lib/elements/element_ae_crud.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>

<!-- STABLE LAYOUT: No top-level #if gate. Children mount immediately. -->
<section class="p-2 space-y-4">
    {#if $lq__event_session_obj && $events_sess.pres_mgmt.session_qr_url[$lq__event_session_obj.id]}
        <div class="float-right m-1 p-1 flex flex-col items-center outline outline-gray-200 group transition-all">
            <img
                src={$events_sess.pres_mgmt.session_qr_url[$lq__event_session_obj.id]}
                onclick={() => $events_sess.pres_mgmt.qr_bigger = !$events_sess.pres_mgmt.qr_bigger}
                class="qr_code h-32 w-32 transition-all duration-500"
                class:h-48={$events_sess.pres_mgmt.qr_bigger}
                alt="URL QR code"
            />
            <MyClipboard
                value={encodeURI(`${$ae_loc.url_origin}/events/${$lq__event_session_obj.event_id}/session/${$lq__event_session_obj.id}`)}
                btn_class="m-1 btn btn-sm preset-tonal-warning"
                hide_icon={true}
                hide_text={true}
            >
                <span class="fas fa-link"></span>
            </MyClipboard>
        </div>
    {/if}

    <ul class="space-y-2 px-4">
        <!-- Name & Code -->
        <li>
            {#if $lq__event_session_obj}
                {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
                    <Element_ae_crud
                        api_cfg={$ae_api}
                        object_type={'event_session'}
                        object_id={$lq__event_session_obj.id}
                        field_name={'name'}
                        field_type={'text'}
                        field_value={$lq__event_session_obj.name}
                        on:ae_crud_updated={() => events_func.load_ae_obj_id__event_session({api_cfg: $ae_api, event_session_id: $lq__event_session_obj.id})}
                    >
                        <span class="font-semibold text-lg">{$lq__event_session_obj.name}</span>
                    </Element_ae_crud>
                {/if}
                {#if $ae_loc.edit_mode}
                    <span class="badge preset-tonal-surface">code: {$lq__event_session_obj.code}</span>
                {/if}
            {/if}
        </li>

        <!-- Date & Time -->
        <li>
            {#if $lq__event_session_obj}
                <span class="text-sm font-semibold opacity-70">Date & Time:</span>
                <span class="fas fa-calendar-alt opacity-50 ml-1"></span>
                <span class="font-medium">
                    {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)}
                    -
                    {ae_util.iso_datetime_formatter($lq__event_session_obj.end_datetime, $events_loc.pres_mgmt.time_format)}
                </span>
            {/if}
        </li>

        <!-- Host / POC -->
        <li class:hidden={$events_loc.pres_mgmt?.hide__session_poc}>
            {#if $lq__event_session_obj}
                <span class="text-sm font-semibold opacity-70">Host:</span>
                {#if $lq__event_session_obj.poc_person_id}
                    <button
                        type="button"
                        class="btn btn-sm preset-tonal-primary"
                        onclick={() => $events_sess.pres_mgmt.show__session_poc_profile = true}
                    >
                        <span class="fas fa-id-card mr-1"></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>
                {:else}
                    <span class="italic opacity-50">Not assigned</span>
                {/if}
            {/if}
        </li>

        <!-- Description -->
        <li>
            {#if $lq__event_session_obj}
                <div class="mt-2">
                    <span class="text-sm font-semibold opacity-70">Description:</span>
                    {#if $lq__event_session_obj.description}
                        <pre class="whitespace-pre-wrap p-3 bg-neutral-100 dark:bg-neutral-800 rounded-md mt-1 text-sm">{$lq__event_session_obj.description}</pre>
                    {:else}
                        <span class="italic opacity-50 ml-1">No description provided</span>
                    {/if}
                </div>
            {/if}
        </li>
    </ul>
</section>
