<script lang="ts">
// *** Import Svelte specific
// import { tick } from 'svelte';
// import { goto, invalidateAll } from '$app/navigation';

// *** Import other supporting libraries
import {
    // ArrowBigRight,
    // Bug,
    CircleX,
    // Eye, EyeOff,
    // Key,
    // LogIn, LogOut, LockKeyhole,
    // Mail, MailCheck,
    Menu,
    // RefreshCw, RefreshCcwDot,
    ShieldEllipsis,
    ShieldMinus,
    ShieldPlus,
    ShieldUser,
    ToggleLeft,
    ToggleRight,
    User,
    UserCheck,
    UserCog,
    Wand2,
    X
} from '@lucide/svelte';

// *** Import Aether specific variables and functions
// import { ae_util } from '$lib/ae_utils/ae_utils';
import {
    ae_loc,
    ae_sess,
    ae_api,
    slct,
    slct_trigger
} from '$lib/stores/ae_stores';

import Element_access_type from '$lib/app_components/e_app_access_type.svelte';
import Element_app_cfg from '$lib/app_components/e_app_cfg.svelte';
import Element_sign_in_out from '$lib/app_components/e_app_sign_in_out.svelte';
import Element_theme from '$lib/app_components/e_app_theme.svelte';

// *** Setup Svelte properties
interface Props {
    log_lvl?: number;
    data: any;
    hide?: null | boolean;
    expand?: boolean;
}

let {
    log_lvl = $bindable(0),
    data = null,
    hide = $bindable(false),
    expand = $bindable(false)
}: Props = $props();

let trigger_clear_access: null | boolean = $state(null);
</script>

<!-- App System Menu -->
<!-- min-h-full
max-h-max
min-w-full
max-w-max -->
<!-- <section
    class="
        ae_app__menu
        hidden-print
        flex flex-col
        items-end justify-center
        gap-1
        absolute right-0 bottom-16
        hover:bottom-6
        bg-white dark:bg-gray-800
        border border-transparent
        hover:border hover:border-gray-200 hover:dark:border-gray-700
        rounded-lg
        p-2
        *:hover:inline
        opacity-40
        hover:opacity-100
        duration-50 delay-1000 hover:delay-100 hover:ease-out
        transition hover:transition-all
        z-10 hover:z-20
    "
    class:hidden={!expand_btn}
    > -->
<!-- && !expand -->
<!-- !$ae_loc
    ?.sys_menu?.expand_btn -->
<!-- bg-blue-100/60 dark:bg-blue-800/50 -->
<!-- class:hover:border-transparent={!expand} -->
<!-- mx-1 my-2 -->
<!-- We need to be able to hide the menu button in certain situations. Mainly iframes. -->
<section
    class="
        ae_app__sys_menu

        hidden-print
        md:text-md
        lg:text-md xl:text-md absolute

        right-0
        bottom-6

        z-50
        flex

        w-min max-w-md flex-col-reverse
        items-end justify-center

        gap-1 rounded-lg border-2 border-blue-300/20 bg-blue-200/90 text-sm

        opacity-90

        transition-all delay-500
        duration-500 ease-in-out
        hover:border-blue-500/20 hover:opacity-100

        hover:delay-200
        hover:duration-200 sm:text-sm
        2xl:text-lg dark:border-blue-700/20
        hover:dark:border-blue-500/20
    "
    class:top-0={expand && (1 as any) == 3}
    class:opacity-100={expand}
    class:w-full={expand}
    class:hidden={hide}
    class:border-transparent={!expand}
    class:bg-transparent={!expand}>
    <!-- class:hidden={!expand} -->
    <!-- class:preset-filled-warning-100-900={expand} -->
    <div
        class:opacity-50={!expand}
        class:opacity-100={expand}
        class:light:bg-blue-500={expand}
        class:dark:bg-blue-500={expand}
        class="
        hidden-print
        light:bg-blue-200/10 relative flex w-full
        flex-col

        items-end
        justify-end

        gap-1

        overflow-y-auto
        p-1
        transition-all

        delay-1000

        duration-200
        ease-in-out hover:opacity-100
        hover:delay-500 hover:duration-200
        dark:bg-blue-800/10
        "
        title="
        ID: {$ae_loc?.person_id ?? '-- not set --'} / {$ae_loc?.user_id ??
            '-- not set --'}
        Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
        Username: {$ae_loc?.user?.username ?? '-- not set --'}
        Email: {$ae_loc?.user?.email ?? '-- not set --'}
        Access Type: {$ae_loc?.access_type ?? '-- not set --'}
        ">
        {#if $ae_loc?.person_id}
            <div
                class="group flex w-full flex-row items-center justify-end gap-1 transition-all">
                <User size="1em" class="mx-1 inline-block text-gray-500" />
                <span class:hidden={!expand} class="group-hover:inline-block">
                    {$ae_loc?.person?.informal_name ??
                        $ae_loc?.person?.given_name}
                </span>
            </div>
        {/if}

        {#if $ae_loc?.user_id}
            <!-- This is currently not set to show if not expanded. Saving space. -->
            <div
                class:hidden={!expand}
                class="group flex w-full flex-row items-center justify-end gap-1 transition-all">
                <ShieldUser
                    size="1em"
                    class="mx-1 inline-block text-gray-500" />
                <span class:hidden={!expand} class="group-hover:inline-block">
                    {$ae_loc?.user?.username ?? '-- not set --'}
                </span>
            </div>
        {/if}

        <div
            class="group flex w-full flex-row items-center justify-end gap-1 transition-all">
            {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
                <span
                    class="group flex flex-row-reverse gap-1 text-base"
                    title={`Current access type/level: ${$ae_loc.access_type}`}>
                    <!-- <span class="fas fa-unlock mx-1"></span> -->
                    <!-- <ShieldPlus class="inline-block" /> -->

                    {#if $ae_loc.access_type == 'super'}
                        <Wand2 size="1em" class="m-1 inline-block" />
                        <span
                            class:hidden={!expand}
                            class="hidden group-hover:inline-block">Super</span>
                    {:else if $ae_loc.access_type == 'manager'}
                        <ShieldUser size="1em" class="m-1 inline-block" />
                        <span
                            class:hidden={!expand}
                            class="hidden group-hover:inline-block"
                            >Manager</span>
                    {:else if $ae_loc.access_type == 'administrator'}
                        <UserCog size="1em" class="m-1 inline-block" />
                        <span
                            class:hidden={!expand}
                            class="hidden group-hover:inline-block"
                            >Administrator</span>
                    {:else if $ae_loc.access_type == 'trusted'}
                        <UserCheck size="1em" class="m-1 inline-block" />
                        <span
                            class:hidden={!expand}
                            class="hidden group-hover:inline-block"
                            >Trusted Access</span>
                    {:else if $ae_loc.access_type == 'public'}
                        Public
                        <span
                            class:hidden={!expand}
                            class="hidden group-hover:inline-block"
                            >Access</span>
                    {:else if $ae_loc.access_type == 'authenticated'}
                        Authenticated
                        <span
                            class:hidden={!expand}
                            class="hidden group-hover:inline-block"
                            >Access</span>
                    {:else if $ae_loc.access_type == 'anonymous'}
                        Anonymous Access
                    {:else}
                        Unknown Access
                    {/if}
                </span>

                {#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
                    <button
                        type="button"
                        onclick={() => {
                            // handle_clear_access();
                            // trigger_clear_access = true;
                            // $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;

                            if (!expand) {
                                expand = true;
                                $ae_sess.sys_menu.expand = true;
                                $ae_loc.sys_menu.hide_access_type = false;
                                $ae_loc.sys_menu.expand_access_type = true;
                                // $ae_loc.sys_menu.expand_btn = false;
                                // $ae_loc.app_cfg.show_element__access_type = true;
                                // $ae_loc.app_cfg.show_element__passcode_input = true;
                            } else {
                                // expand = true;
                                // $ae_loc.sys_menu.expand = false;
                                $ae_loc.sys_menu.hide_access_type = false;
                                $ae_loc.sys_menu.expand_access_type = true;

                                // $ae_loc.sys_menu.expand_btn = true;
                            }
                        }}
                        class="btn btn-sm variant-outline-surface hover:variant-ghost-warning group text-xs transition-all"
                        title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}>
                        <!-- <span class="fas fa-lock mx-1"></span> -->
                        <!-- <ShieldMinus /> -->
                        <ShieldEllipsis size="2em" class="inline-block" />
                        <span class="hidden group-hover:inline-block"
                            >Passcode?</span>
                    </button>
                {:else}
                    <button
                        type="button"
                        onclick={() => {
                            trigger_clear_access = true;

                            if (expand) {
                                $ae_loc.sys_menu.hide_access_type = false;
                                // $ae_loc.sys_menu.expand_access_type = false;
                                expand = false;

                                // $ae_loc.sys_menu.expand = true;
                                // $ae_loc.sys_menu.expand_btn = false;
                                $ae_loc.app_cfg.show_element__access_type = true;
                                $ae_sess.app_cfg.show_element__passcode_input = true;

                                // await tick();
                                // console.log('Layout button click: Focus on passcode input!');
                                // /** @type {HTMLElement | null} */
                                // const to_focus = document.getElementById('access_passcode_input');
                                // to_focus?.focus();
                            } else {
                                $ae_loc.sys_menu.hide_access_type = false;
                                $ae_loc.sys_menu.expand_access_type = true;
                                // $ae_loc.sys_menu.expand = false;
                                // $ae_loc.sys_menu.expand_btn = true;
                            }
                        }}
                        class="
                        btn btn-sm variant-outline-surface
                        hover:variant-ghost-warning
                        group flex-row-reverse
                        text-xs transition-all
                        "
                        title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}>
                        <!-- <span class="fas fa-lock mx-1"></span> Lock? -->
                        <ShieldMinus class="inline-block" />
                        <span class="hidden group-hover:inline-block">
                            Clear?
                        </span>
                    </button>
                {/if}
            {:else}
                <button
                    type="button"
                    onclick={async () => {
                        expand = true;
                        $ae_sess.sys_menu.expand = true;
                        $ae_loc.sys_menu.hide_access_type = false;
                        $ae_loc.sys_menu.expand_access_type = true;

                        $ae_sess.app_cfg.show_element__passcode_input = true;
                        $ae_sess.sys_menu.focus_passcode_input = true;

                        // $ae_loc.sys_menu.expand = true;
                        // $ae_loc.sys_menu.expand_btn = false;
                        // $ae_loc.app_cfg.show_element__access_type = true;
                        // $ae_loc.app_cfg.show_element__passcode_input = true;
                        // await tick();
                        console.log(
                            'Layout button click: Focus on passcode input!'
                        );
                        /** @type {HTMLElement | null} */
                        const to_focus = document.getElementById(
                            'access_passcode_input'
                        );
                        to_focus?.focus();
                    }}
                    class="
                        btn btn-sm variant-outline-surface
                        hover:variant-ghost-success
                        group flex-row-reverse
                        text-xs transition-all
                        "
                    title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level.">
                    <!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
                    <!-- <span class="">Unlock?</span> -->
                    <ShieldUser class="inline-block" />
                    <span class="hidden group-hover:inline-block">Auth?</span>
                </button>
            {/if}
        </div>

        {#if $ae_loc.edit_mode}
            <button
                type="button"
                onclick={() => {
                    $ae_loc.edit_mode = false;
                    // dispatch_edit_mode_changed();
                }}
                class="
                btn btn-base preset-tonal-warning
                preset-outlined-warning-800-200
                hover:preset-tonal-success
                group
                w-full max-w-fit
                min-w-22 gap-1 text-sm transition-all
                md:min-w-30
                "
                title="Click to turn off edit mode. Edit mode is currently on.">
                <ToggleRight size="1em" class="m-1 inline-block" />
                <span class="text-xs">Edit</span>
                <span
                    class="hidden group-hover:inline-block group-hover:text-xs">
                    Off
                </span>
            </button>
        {:else if $ae_loc.authenticated_access}
            <button
                type="button"
                onclick={() => {
                    $ae_loc.edit_mode = true;
                    // dispatch_edit_mode_changed();
                }}
                class="
                btn btn-base preset-tonal-surface
                preset-outlined-warning-400-600
                hover:preset-tonal-warning
                group
                w-full max-w-fit
                min-w-22 gap-1 text-sm transition-all
                md:min-w-30
                "
                title="Click to torn on/enable edit mode. Edit mode is currently off/disabled.">
                <ToggleLeft size="1em" class="m-1 inline-block" />
                <span class="text-xs">Edit</span>
                <span
                    class="hidden group-hover:inline-block group-hover:text-xs">
                    On?
                </span>
            </button>
        {/if}

        <!-- Font Size Cycler: default → larger → smaller → default -->
        <button
            type="button"
            class:w-full={expand}
            class="
            btn btn-base preset-tonal-surface
            hover:preset-tonal-primary
            group
            w-full max-w-fit
            min-w-22 px-1 py-1 text-sm
            transition-all md:min-w-30
            "
            title="Cycle font size: default → larger → smaller"
            onclick={() => {
                const mode = $ae_loc.font_size_mode;
                if (!mode || mode === 'default') {
                    $ae_loc.font_size_mode = 'larger';
                } else if (mode === 'larger') {
                    $ae_loc.font_size_mode = 'smaller';
                } else {
                    $ae_loc.font_size_mode = 'default';
                }
            }}>
            {#if !$ae_loc.font_size_mode || $ae_loc.font_size_mode === 'default'}
                <span class="text-sm leading-none font-bold">A</span>
                <span class="hidden text-xs group-hover:inline-block"
                    >Font: Normal</span>
            {:else if $ae_loc.font_size_mode === 'larger'}
                <span class="text-base leading-none font-bold">A+</span>
                <span class="hidden text-xs group-hover:inline-block"
                    >Font: Larger</span>
            {:else}
                <span class="text-xs leading-none font-bold">A−</span>
                <span class="hidden text-xs group-hover:inline-block"
                    >Font: Smaller</span>
            {/if}
        </button>

        <!-- <div> -->
        <!-- class:visible={expand} -->
        <!-- class:invisible={!expand} -->
        <!-- class:hover:visible={true} -->
        <!-- invisible -->
        <button
            type="button"
            class:w-full={expand}
            class="
            btn btn-base preset-filled-tertiary-400-600
            preset-outlined-tertiary-400-600
            hover:preset-filled-success
            active:preset-filled-success group
            w-full max-w-fit
            min-w-22 px-1 py-1 text-sm
            transition-all md:min-w-30
            "
            title="Show/Hide the system menu"
            onclick={async () => {
                if (!expand) {
                    expand = true;
                    $ae_sess.sys_menu.expand = true;

                    // $ae_loc.sys_menu.expand = true;
                    // $ae_loc.sys_menu.expand_btn = false;
                    $ae_loc.app_cfg.show_element__access_type = true;

                    if ($ae_loc?.access_type == 'anonymous') {
                        $ae_sess.sys_menu.focus_passcode_input = true;
                        // $ae_sess.app_cfg.show_element__passcode_input = true;
                    } else {
                        // $ae_sess.app_cfg.show_element__passcode_input = false;
                        $ae_loc.sys_menu.expand_user = false; // Not in use yet
                        $ae_sess.show__sign_in_out__fields = false;
                    }
                    // $ae_loc.app_cfg.show_element__passcode_input = true;
                    // await tick();
                    // console.log('Layout button click: Focus on passcode input!');
                    // /** @type {HTMLElement | null} */
                    // const to_focus = document.getElementById('access_passcode_input');
                    // to_focus?.focus();
                } else {
                    expand = false;
                    $ae_sess.sys_menu.expand = false;
                    // $ae_loc.sys_menu.expand = false;
                    // $ae_loc.sys_menu.expand_btn = true;
                    // $ae_loc.app_cfg.show_element__passcode_input = false;
                }
                // $ae_loc.sys_menu.expand_btn = !expand_btn;
            }}>
            <!-- <span class=""> -->
            {#if expand}
                <CircleX class="m-1 inline-block" />
            {:else}
                <Menu class="m-1 inline-block" />
            {/if}
            <span class="hidden text-xs group-hover:inline-block"> Menu </span>
            <!-- </span> -->
        </button>
        <!-- </div> -->
    </div>

    <!-- Show menu on right side of page -->
    <!-- min-h-96 -->
    <!-- absolute right-0 bottom-10 -->
    <!-- opacity-50 -->
    <!-- hover:opacity-100 -->
    <!-- bg-white dark:bg-gray-800 -->
    <div
        class:preset-filled-warning-200-800={expand}
        class:hidden={!expand}
        class="
        ae_app__sys_menu

        hidden-print
        z-20 flex
        min-w-48
        flex-col
        items-end

        justify-end

        gap-2 rounded-lg

        border border-gray-200 bg-white
        px-1
        py-2 transition-all

        delay-1000
        duration-100 ease-in-out
        hover:z-30 hover:delay-100
        hover:duration-200

        dark:border-gray-700 dark:bg-gray-800
    ">
        <button
            type="button"
            class:w-full={expand}
            class="
            btn btn-sm
            preset-filled-tertiary-400-600
            preset-outlined-tertiary-400-600
            hover:preset-filled-success active:preset-filled-success
            group px-6
            py-1 transition-all
            "
            title="Show/Hide the system menu"
            onclick={() => {
                if (!expand) {
                    expand = true;
                    $ae_sess.sys_menu.expand = true;
                    // $ae_loc.sys_menu.expand_btn = false;
                    // $ae_loc.sys_menu.expand_access_type = true;

                    // $ae_sess.app_cfg.show_element__passcode_input = true;
                    $ae_sess.sys_menu.focus_passcode_input = true;
                } else {
                    $ae_sess.sys_menu.expand = false;
                    $ae_loc.sys_menu.expand_user = false; // Not in use yet
                    $ae_sess.show__sign_in_out__fields = false;
                    // $ae_loc.sys_menu.expand_btn = true;
                }
                // $ae_loc.sys_menu.expand_btn = !expand_btn;
                // $ae_loc.sys_menu.expand = !expand;
            }}>
            {#if expand}
                <CircleX class="m-1 inline-block" />
                <span class="hidden group-hover:inline-block"> Hide Menu </span>
            {:else}
                <Menu class="m-1 inline-block" />
                <span class="hidden group-hover:inline-block"> Menu </span>
            {/if}
        </button>

        <!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
        <span class:hidden={!$ae_loc.edit_mode}>
            <Element_app_cfg
                hide={$ae_loc.sys_menu.hide_app_cfg}
                expand={$ae_loc.sys_menu.expand_app_cfg} />
        </span>
        <span class:hidden={!$ae_loc.edit_mode}>
            <Element_theme
                hide={$ae_loc.sys_menu.hide_app_cfg}
                expand={$ae_loc.sys_menu.expand_app_cfg}
                set_theme_mode={true}
                set_theme_name={true} />
        </span>
        <!-- {/if} -->

        {#if $ae_loc?.app_cfg?.show_element__sign_in_out}
            <!-- hide={$ae_loc.sys_menu.hide_user} -->
            <!-- expand={$ae_loc.sys_menu.expand_user} -->
            <Element_sign_in_out
                {data}
                hidden={$ae_loc.iframe ||
                    !$ae_loc.app_cfg?.show_element__sign_in_out} />
        {/if}

        {#if !$ae_loc?.sys_menu?.hide_access_type && !$ae_loc?.iframe}
            <!-- hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !expand} -->
            <Element_access_type
                bind:hide={$ae_loc.sys_menu.hide_access_type}
                bind:focus_input={$ae_sess.sys_menu.focus_passcode_input}
                bind:expand={$ae_loc.sys_menu.expand_access_type}
                bind:show_passcode_input={
                    $ae_sess.app_cfg.show_element__passcode_input
                }
                bind:trigger_clear_access />
        {/if}
    </div>
</section>
