<script lang="ts">
import { untrack } from 'svelte';
// *** Import Svelte specific
import { browser } from '$app/environment';
import { goto, invalidateAll } from '$app/navigation';
import { Modal } from 'flowbite-svelte';

// *** Import other supporting libraries
import {
    CircleX,
    Eye,
    EyeOff,
    Key,
    LogIn,
    LogOut,
    LockKeyhole,
    Mail,
    MailCheck,
    UserCheck
} from '@lucide/svelte';

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

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

let {
    log_lvl = $bindable(0),
    data = null,
    hidden = $bindable(true)
}: Props = $props();

let url_user_id = $state(
    untrack(() => data?.url?.searchParams?.get('user_id'))
);
let url_user_key = $state(
    untrack(() => data?.url?.searchParams?.get('user_key'))
); // Reminder that "key" is the site's auth key.
let url_user_username = $state(
    untrack(() => data?.url?.searchParams?.get('username'))
);
let url_user_email = $state(
    untrack(() => data?.url?.searchParams?.get('user_email'))
);

$effect(() => {
    // NOTE: Sync URL params to state.
    // We use untrack to prevent infinite loops if navigation triggers within this effect.
    // WARNING: Ensure this doesn't clobber user-entered data during background URL updates.
    untrack(() => {
        url_user_id = data?.url?.searchParams?.get('user_id');
        url_user_key = data?.url?.searchParams?.get('user_key');
        url_user_username = data?.url?.searchParams?.get('username');
        url_user_email = data?.url?.searchParams?.get('user_email');
    });
});

let ae_promises: key_val = {};

let trigger: null | boolean = $state(null); // Use $state to ensure reactivity
let user_id: string | null = $state(null); // Use $state to ensure reactivity
let user_obj: key_val = $state({}); // Use $state to ensure reactivity
let person_id: string | null = $state(null); // Use $state to ensure reactivity
let person_obj: key_val = $state({}); // Use $state to ensure reactivity

$effect(() => {
    if (user_id && person_id && trigger) {
        // alert(`Ready to sign in person! \n\nuser_id: ${user_id}\nperson_id: ${person_id}\n\nThis is a test alert to confirm the values are set.`);
        trigger = false;
        sign_in();
    }
});

let user_email = $state('scott.idem@gmail.com'); // Used for quick lookup of user by email address
let new_password = $state('test12345');
let confirm_password = $state('test12345');
let is_changing_password = $state(false);
let show_password_text = $state('password'); // password or text

// Email sign-in status: null | 'sending' | 'sent' | 'not_found' | 'no_email' | 'error'
let email_send_status: null | string = $state(null);

// Username/password sign-in status: null | 'signing_in' | 'error' | 'no_credentials'
let user_signin_status: null | string = $state(null);
let user_signin_error: null | string = $state(null);

function sign_in() {
    $ae_loc.jwt = user_obj.jwt; // Store the JSON Web Token
    $ae_loc.person_id = person_id; // Set the person_id in the ae_loc store
    $ae_loc.person = person_obj; // Store the full person object for reference
    $ae_loc.user_id = user_id; // Set the user_id in the ae_loc store
    $ae_loc.user = user_obj; // Store the full user object for reference

    if (user_obj.super) {
        $ae_loc.access_type = 'super';
    } else if (user_obj.manager) {
        $ae_loc.access_type = 'manager';
    } else if (user_obj.administrator) {
        $ae_loc.access_type = 'administrator';
    } else if (user_obj.verified) {
        // They are "trusted" because the user has been verified. External staff usually start with this level.
        $ae_loc.access_type = 'trusted';
    } else if (user_obj.public) {
        $ae_loc.access_type = 'public';
    } else {
        $ae_loc.access_type = 'authenticated';
    }
    $ae_loc.user_access_type = $ae_loc.access_type; // Used to revert back to the user's access type after quick access (temporarily escalate permissions) is turned off.

    let access_checks_results = ae_util.process_permission_checks(
        $ae_loc.access_type
    );
    // WARNING: I think this is causing a loop in Svelte or something.
    // Last ten effects were:
    // Uncaught Svelte error: effect_update_depth_exceeded
    // Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops
    // https://svelte.dev/e/effect_update_depth_exceeded
    $ae_loc = {
        ...$ae_loc,
        ...access_checks_results
    };
    // $ae_loc = {...access_checks_results};

    console.log('Remove the sign in fields from the URL.');
    data.url.searchParams.delete('user_id');
    data.url.searchParams.delete('user_key');
    data.url.searchParams.delete('username');
    data.url.searchParams.delete('user_email');
    data.url.searchParams.delete('valid_email'); // Part of sign in email for possible future use

    let new_url = data.url.toString();

    // We need to set browser history and force all load functions to rerun.
    goto(new_url, { replaceState: true, invalidateAll: true });
}

function sign_out() {
    // Clear the session information
    $ae_loc.jwt = null;
    $ae_loc.person_id = null;
    $ae_loc.person = {};
    $ae_loc.user_id = null;
    $ae_loc.user = {};

    user_id = null; // Clear the user_id
    user_obj = {}; // Clear the user object
    person_id = null; // Clear the person_id
    person_obj = {}; // Clear the person object

    $ae_loc.access_type = ''; // Clear the access type
    let access_checks_results = ae_util.process_permission_checks('');
    $ae_loc = { ...$ae_loc, ...access_checks_results };

    $ae_sess.auth__entered_user_id = null;
    $ae_sess.auth__entered_user_key = null;
    // $ae_sess.auth__entered_username = null; // Keeping the username
    $ae_sess.auth__entered_password = null;

    indexedDB.deleteDatabase('ae_archives_db'); // Archives module
    indexedDB.deleteDatabase('ae_core_db');
    indexedDB.deleteDatabase('ae_events_db'); // Events module
    indexedDB.deleteDatabase('ae_journals_db'); // Journals module
    indexedDB.deleteDatabase('ae_posts_db'); // Posts module
    indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module

    // $ae_loc.allow_access = false;
    $ae_loc.authenticated_access = false;
    $ae_loc.edit_mode = false;

    localStorage.clear();
    sessionStorage.clear();

    console.log('Remove the sign out fields from the URL.');
    data.url.searchParams.delete('user_id');
    data.url.searchParams.delete('user_key');
    data.url.searchParams.delete('username');
    data.url.searchParams.delete('user_email');
    data.url.searchParams.delete('valid_email'); // Part of sign in email for possible future use

    let new_url = data.url.toString();

    // We need to set browser history and force all load functions to rerun.
    // goto(new_url, {replaceState: true, invalidateAll: true});

    // invalidateAll();
    window.location.reload();

    console.log('Signed out successfully.');
}

$effect(() => {
    if (browser) {
        untrack(() => {
            if (url_user_id) {
                // Pre-fill the auth__entered_user_id if passed in via the URL.
                $ae_sess.auth__entered_user_id = url_user_id;
            }
            if (url_user_key) {
                // Pre-fill the auth__entered_key if passed in via the URL.
                $ae_sess.auth__entered_user_key = url_user_key;
            }
            if (url_user_username) {
                // Pre-fill the auth__entered_username if passed in via the URL.
                $ae_sess.auth__entered_username = url_user_username;
            }
            if (url_user_email) {
                // Pre-fill the auth__entered_email if passed in via the URL.
                $ae_sess.auth__entered_email = url_user_email;
            }
        });
    }
});

// Use core_func.send_email_auth_ae_obj__user_id
function handle_send_auth_email({ user_id }: { user_id: string }) {
    console.log('handle_send_auth_email()');

    console.log($ae_loc.base_url); // URL origin
    console.log($ae_loc.hostname); // URL hostname

    // This function creates a new auth_key and then sends an email to the user with the new auth key.
    // WHY: root_url is required by the backend email builder — if null/undefined it
    // produces a broken link ("None?user_id=..."). Fall back to window.location.origin
    // in case $ae_loc.base_url is not yet set when this fires.
    const magic_link_root_url =
        $ae_loc.base_url || (browser ? window.location.origin : '');

    ae_promises.send_email_auth_ae_obj__user_id =
        core_func.send_email_auth_ae_obj__user_id({
            api_cfg: $ae_api,
            account_id: $slct.account_id,
            user_id: user_id,
            base_url: magic_link_root_url,
            log_lvl: 0
        });
}

// Use core_func.qry_ae_obj_li__user_email
function handle_lookup_user_email({ email }: { email: string }) {
    console.log('handle_lookup_user_email()');

    // If a user is returned then send the new auth key email
    ae_promises.load__user_obj_li = core_func
        .qry_ae_obj_li__user_email({
            api_cfg: $ae_api,
            account_id: $slct.account_id,
            email: email,
            log_lvl: 0
        })
        .then((user_response) => {
            if (user_response?.user_id) {
                console.log(`User found for email:`, user_response);
                handle_send_auth_email({ user_id: user_response.user_id });
                email_send_status = 'sent';
            } else {
                console.warn('No user found for email:', email);
                email_send_status = 'not_found';
            }
        })
        .catch(() => {
            email_send_status = 'error';
        });
}

async function handle_change_password() {
    if (!new_password) {
        alert('Password cannot be empty.');
        return;
    }

    if (new_password !== confirm_password) {
        alert('Passwords do not match.');
        return;
    }

    let use_user_id = $ae_loc.user_id;
    let use_password = new_password;
    let wait_for_lookup = true;

    // Look up the user by email address to get their user ID
    if (user_email) {
        wait_for_lookup = true;
        // ae_promises.load__user_obj_li = await core_func.qry_ae_obj_li__user_email({
        //     api_cfg: $ae_api,
        //     account_id: $slct.account_id,
        //     null_account_id: false,
        //     email: user_email,
        //     log_lvl: 1
        // }).then((user_response) => {
        //     if (!user_response) {
        //         // This means a 404 was returned
        //         alert('No user found with that email address.');
        //         return;
        //     } else if (user_response?.user_id_random) {
        //         console.log(`User found for email:`, user_response);
        //         use_user_id = user_response.user_id_random;
        //     } else if (user_response.length > 0) {
        //         console.log(`Multiple users found for email:`, user_response);
        //         use_user_id = user_response[0].user_id_random;
        //     }
        // });

        ae_promises.load__user_obj_li =
            await core_func.qry_ae_obj_li__user_email({
                api_cfg: $ae_api,
                account_id: $slct.account_id,
                email: user_email,
                log_lvl: 0
            });

        if (!ae_promises.load__user_obj_li?.user_id) {
            alert('No user found with that email address.');
            return;
        } else {
            console.log(`User found for email:`, ae_promises.load__user_obj_li);
            use_user_id = ae_promises.load__user_obj_li.user_id;
        }
    } else {
        wait_for_lookup = false;
    }

    is_changing_password = true;

    if (user_email && wait_for_lookup) {
        console.log('Waiting for user lookup to complete...');
        // await ae_promises.load__user_obj_li;
    }

    try {
        ae_promises.change_password =
            await core_func.auth_ae_obj__user_id_change_password({
                api_cfg: $ae_api,
                account_id: $ae_loc.account_id,
                user_id: use_user_id,
                password: use_password,
                log_lvl: log_lvl
            });
        // await core_func.auth_ae_obj__user_id_change_password({
        //     api_cfg: $ae_api,
        //     account_id: $ae_loc.account_id,
        //     user_id: use_user_id,
        //     password: use_password,
        //     log_lvl: log_lvl
        // });
        // alert('Password changed successfully.');
        // $ae_sess.show__modal_change_password = false;
    } catch (error) {
        console.error('Error changing password:', error);
        alert('Unexpected Response. Failed to change password.');
    } finally {
        is_changing_password = false;
    }
    if (ae_promises.change_password) {
        console.log('Password changed successfully.');
        alert('Password changed successfully.');
        $ae_sess.show__modal_change_password = false;
    } else {
        console.error('Failed to change password.');
        alert('Failed to change password. Check password length.');
    }
}
</script>

<!-- It is important to keep in mind that a Person can only fully sign in if they have a linked User record. -->
<!-- *:hover:inline -->
<section
    id="AE-Sign-In-Out"
    class="
        ae_sign_in_out
        hidden-print

        flex w-72
        max-w-72 flex-col

        flex-wrap items-end justify-center gap-1
        border-2 border-gray-200

        bg-blue-100 p-1
        text-gray-900
        transition-all delay-150

        duration-300 hover:delay-1000 hover:ease-out dark:bg-blue-800
        dark:text-gray-200
        "
    class:hidden>
    <span class="flex w-full flex-col gap-2">
        {#if !$ae_loc?.person_id && !$ae_loc?.user_id}
            <!-- Form for user look up based on email address -->
            <form
                class="ae_sign_in_form flex w-full flex-col gap-2"
                onsubmit={async (e) => {
                    e.preventDefault();
                    if ($ae_sess.auth__entered_email) {
                        email_send_status = 'sending';
                        handle_lookup_user_email({
                            email: $ae_sess.auth__entered_email
                        });
                    } else {
                        email_send_status = 'no_email';
                    }
                }}>
                <div
                    class="text-xs font-medium text-gray-400 dark:text-gray-500">
                    Email magic link
                </div>
                <input
                    type="text"
                    class="input w-full text-sm"
                    placeholder="Email Address"
                    value={$ae_sess.auth__entered_email ?? ''}
                    oninput={(e) =>
                        ($ae_sess.auth__entered_email = (
                            e.target as HTMLInputElement
                        ).value)} />
                <button
                    type="submit"
                    class="btn btn-sm w-full justify-center transition-all
                        {email_send_status === 'sent'
                        ? 'preset-filled-success-500'
                        : email_send_status === 'sending'
                          ? 'preset-tonal-surface cursor-wait opacity-70'
                          : email_send_status === 'not_found' ||
                              email_send_status === 'error'
                            ? 'preset-tonal-error border-error-500 border'
                            : 'preset-tonal-secondary border-secondary-500 hover:preset-filled-secondary-500 border'}"
                    disabled={email_send_status === 'sending'}
                    title="Look up user by email and send sign in email"
                    onclick={() => {
                        email_send_status = null;
                    }}>
                    <MailCheck size="1em" class="shrink-0" />
                    <span class="ml-1">
                        {#if email_send_status === 'sending'}
                            Sending…
                        {:else if email_send_status === 'sent'}
                            Email sent ✓
                        {:else if email_send_status === 'not_found'}
                            No account found
                        {:else if email_send_status === 'error'}
                            Error — retry?
                        {:else if email_send_status === 'no_email'}
                            Enter an email first
                        {:else}
                            Send Sign In Email
                        {/if}
                    </span>
                </button>
            </form>

            <!-- Divider between the two sign-in methods -->
            <div
                class="flex items-center gap-2 text-xs text-gray-400 dark:text-gray-600">
                <div
                    class="flex-1 border-t border-gray-200/60 dark:border-gray-700/60">
                </div>
                <span>or</span>
                <div
                    class="flex-1 border-t border-gray-200/60 dark:border-gray-700/60">
                </div>
            </div>

            <!-- We need to get the person's linked User ID and auth_key or User username and password to sign in. -->
            <form
                class="ae_sign_in_form flex w-full flex-col gap-2"
                onsubmit={async (e) => {
                    e.preventDefault();

                    // WARNING: Logging in as a global user does not work yet. The API needs to be updated. Currently it returns multiple user records from the v_user view if there is more than one person record linked to the user ID.

                    // Helper to set error state without repeating the pattern
                    const set_error = (msg: string) => {
                        user_signin_status = 'error';
                        user_signin_error = msg;
                    };

                    if (
                        $ae_sess.auth__entered_user_id &&
                        $ae_sess.auth__entered_user_key
                    ) {
                        user_signin_status = 'signing_in';
                        user_signin_error = null;

                        ae_promises['user'] = await core_func
                            .auth_ae_obj__user_id_user_auth_key({
                                api_cfg: $ae_api,
                                account_id: $ae_loc.account_id,
                                // null_account_id: false, // Set to true to allow to authenticate as global user (Super or Manager)
                                user_id: $ae_sess.auth__entered_user_id,
                                user_auth_key: $ae_sess.auth__entered_user_key,
                                log_lvl: 0
                            })
                            .then((user_response) => {
                                if (user_response?.user_id) {
                                    console.log(
                                        `Successfully authenticated with User ID and Auth Key: ${user_response.username}`,
                                        user_response
                                    );
                                    user_obj = user_response;
                                    user_id = user_obj.user_id;
                                } else if (!user_response) {
                                    set_error(
                                        'No server response. Check your connection and retry.'
                                    );
                                } else {
                                    // API returns 'detail' for validation errors (FastAPI standard), 'error' for app-level errors
                                    const reason =
                                        user_response?.detail ||
                                        user_response?.error ||
                                        'Invalid User ID or Auth Key.';
                                    set_error(reason);
                                }
                            })
                            .then(() => {
                                if (!user_id) {
                                    // Auth failed above — status already set
                                    console.error(
                                        'Auth (user_id+key): user_id not set after authentication attempt.'
                                    );
                                    return;
                                }
                                // Look up the person record linked to this user.
                                // We use enabled:'all' and hidden:'all' to find the record even if
                                // technical fields like 'hide' are NULL or the record is temporarily disabled.
                                ae_promises['person'] = core_func
                                    .load_ae_obj_li__person({
                                        api_cfg: $ae_api,
                                        for_obj_type: 'account',
                                        for_obj_id: $ae_loc.account_id,
                                        qry_user_id: user_id,
                                        enabled: 'all',
                                        hidden: 'all',
                                        log_lvl: 0
                                    })
                                    .then((person_response) => {
                                        // V3 CRUD returns 'id' as the random identifier; 'person_id_random' is a legacy field name.
                                        const person_rec = person_response?.[0];
                                        if (
                                            person_rec &&
                                            (person_rec.id ||
                                                person_rec.person_id_random)
                                        ) {
                                            console.log(
                                                `Successfully loaded person (${user_id}):`,
                                                person_rec
                                            );
                                            person_obj = person_rec;
                                            person_id =
                                                person_rec.id ??
                                                person_rec.person_id_random;
                                            trigger = true; // triggers sign_in() via $effect → page redirect
                                        } else {
                                            set_error(
                                                'No person record linked to this account. Contact your administrator.'
                                            );
                                        }
                                    })
                                    .then(() => {
                                        if (!user_id || !person_id) {
                                            console.error(
                                                'Auth (user_id+key): finished but missing user_id or person_id — sign_in() will not be called.'
                                            );
                                        }
                                    });
                            });
                    } else if (
                        $ae_sess.auth__entered_username &&
                        $ae_sess.auth__entered_password
                    ) {
                        user_signin_status = 'signing_in';
                        user_signin_error = null;

                        ae_promises['user'] = await core_func
                            .auth_ae_obj__username_password({
                                api_cfg: $ae_api,
                                account_id: $ae_loc.account_id,
                                // null_account_id: false, // Set to true to allow to authenticate as global user (Super or Manager)
                                username: $ae_sess.auth__entered_username,
                                password: $ae_sess.auth__entered_password,
                                log_lvl: 0
                            })
                            .then((user_response) => {
                                if (user_response?.user_id) {
                                    console.log(
                                        `Successfully authenticated with Username (${user_response.username}) and Password:`,
                                        user_response
                                    );
                                    user_obj = user_response;
                                    user_id = user_obj.user_id;
                                } else if (!user_response) {
                                    set_error(
                                        'No server response. Check your connection and retry.'
                                    );
                                } else {
                                    // API returns 'detail' for validation errors (FastAPI standard), 'error' for app-level errors
                                    const reason =
                                        user_response?.detail ||
                                        user_response?.error ||
                                        'Invalid username or password.';
                                    set_error(reason);
                                }
                            })
                            .then(() => {
                                if (!user_id) {
                                    // Auth failed above — status already set
                                    console.error(
                                        'Auth (username+password): user_id not set after authentication attempt.'
                                    );
                                    return;
                                }
                                // Look up the person record linked to this user.
                                // We use enabled:'all' and hidden:'all' to find the record even if
                                // technical fields like 'hide' are NULL or the record is temporarily disabled.
                                ae_promises['person'] = core_func
                                    .load_ae_obj_li__person({
                                        api_cfg: $ae_api,
                                        for_obj_type: 'account',
                                        for_obj_id: $ae_loc.account_id,
                                        qry_user_id: user_id,
                                        enabled: 'all',
                                        hidden: 'all',
                                        log_lvl: 0
                                    })
                                    .then((person_response) => {
                                        // V3 CRUD returns 'id' as the random identifier; 'person_id_random' is a legacy field name.
                                        const person_rec = person_response?.[0];
                                        if (
                                            person_rec &&
                                            (person_rec.id ||
                                                person_rec.person_id_random)
                                        ) {
                                            console.log(
                                                `Successfully loaded person (${user_id}):`,
                                                person_rec
                                            );
                                            person_obj = person_rec;
                                            person_id =
                                                person_rec.id ??
                                                person_rec.person_id_random;
                                            trigger = true; // triggers sign_in() via $effect → page redirect
                                        } else {
                                            set_error(
                                                'No person record linked to this account. Contact your administrator.'
                                            );
                                        }
                                    })
                                    .then(() => {
                                        if (!user_id || !person_id) {
                                            console.error(
                                                'Auth (username+password): finished but missing user_id or person_id — sign_in() will not be called.'
                                            );
                                        }
                                    });
                            });
                    } else {
                        user_signin_status = 'no_credentials';
                        return false;
                    }
                }}>
                <div
                    class="text-xs font-medium text-gray-400 dark:text-gray-500">
                    {#if $ae_sess.auth__entered_user_id}
                        User ID &amp; Auth Key
                    {:else}
                        Username &amp; password
                    {/if}
                </div>
                {#if $ae_sess.auth__entered_user_id}
                    <input
                        type="text"
                        class="input w-full text-sm"
                        placeholder="User ID"
                        value={$ae_sess.auth__entered_user_id ?? ''}
                        oninput={(e) =>
                            ($ae_sess.auth__entered_user_id = (
                                e.target as HTMLInputElement
                            ).value)} />
                    <input
                        type="text"
                        class="input w-full text-sm"
                        placeholder="Auth Key"
                        value={$ae_sess.auth__entered_user_key ?? ''}
                        oninput={(e) =>
                            ($ae_sess.auth__entered_user_key = (
                                e.target as HTMLInputElement
                            ).value)} />
                {:else}
                    <input
                        type="text"
                        class="input w-full text-sm"
                        placeholder="Username"
                        value={$ae_sess.auth__entered_username ?? ''}
                        oninput={(e) =>
                            ($ae_sess.auth__entered_username = (
                                e.target as HTMLInputElement
                            ).value)} />
                    <input
                        type="password"
                        class="input w-full text-sm"
                        placeholder="Password"
                        value={$ae_sess.auth__entered_password ?? ''}
                        oninput={(e) =>
                            ($ae_sess.auth__entered_password = (
                                e.target as HTMLInputElement
                            ).value)} />
                {/if}

                <button
                    type="submit"
                    class="btn btn-sm w-full justify-center transition-all
                        {user_signin_status === 'error'
                        ? 'preset-tonal-error border-error-500 border'
                        : user_signin_status === 'signing_in'
                          ? 'preset-tonal-surface cursor-wait opacity-70'
                          : user_signin_status === 'no_credentials'
                            ? 'preset-tonal-warning border-warning-500 border'
                            : 'preset-tonal-secondary border-secondary-500 hover:preset-filled-secondary-500 border'}"
                    disabled={user_signin_status === 'signing_in'}
                    title="Sign in with username and password"
                    onclick={() => {
                        if (user_signin_status !== 'signing_in') {
                            user_signin_status = null;
                            user_signin_error = null;
                        }
                    }}>
                    <UserCheck size="1em" class="shrink-0" />
                    <span class="ml-1">
                        {#if user_signin_status === 'signing_in'}
                            Verifying…
                        {:else if user_signin_status === 'error'}
                            Failed — retry?
                        {:else if user_signin_status === 'no_credentials'}
                            Enter credentials first
                        {:else}
                            {$ae_sess.auth__entered_user_id
                                ? 'User ID'
                                : 'Username'} Sign In
                        {/if}
                    </span>
                </button>
                {#if user_signin_error}
                    <p
                        class="text-error-600 dark:text-error-400 text-center text-xs leading-snug">
                        {user_signin_error}
                    </p>
                {/if}
            </form>
        {:else}
            <!-- Signed in: show username, optional change password, sign out -->
            <div class="flex w-full flex-col items-stretch gap-2">
                <div
                    class="py-1 text-center text-sm font-medium text-gray-500 dark:text-gray-400">
                    {$ae_loc?.user?.username ?? '-- not set --'}
                </div>

                <!-- Change password — edit mode only -->
                {#if $ae_loc.edit_mode}
                    <button
                        type="button"
                        class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 w-full justify-center border"
                        title="Change Password"
                        onclick={() => {
                            $ae_sess.show__modal_change_password = true;
                        }}>
                        <LockKeyhole size="1em" class="shrink-0" />
                        <span class="ml-1">Change Password</span>
                    </button>
                {/if}

                <!-- Sign out -->
                <button
                    type="button"
                    class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 w-full justify-center border"
                    title="Sign Out"
                    onclick={async () => {
                        if (confirm('Are you sure you want to sign out?')) {
                            sign_out();
                        }
                    }}>
                    <LogOut size="1em" class="shrink-0" />
                    <span class="ml-1">Sign Out</span>
                </button>
            </div>
        {/if}
    </span>
</section>

<!-- Change Password Modal -->
<!-- They should be able to see their password (text) -->
<!-- autocomplete="off" -->
{#if $ae_sess.show__modal_change_password}
    <Modal
        title="Change Password"
        bind:open={$ae_sess.show__modal_change_password}
        autoclose={false}
        placement="top-center"
        size="md"
        class="top-center relative mx-auto w-full divide-y divide-gray-200 rounded-lg border-gray-200 bg-white text-gray-800 shadow-md dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200">
        <div class="modal-box flex flex-col items-center justify-center gap-2">
            <!-- If the user is a global Manager or Super then they can change the password for any user. Otherwise, they can only change their own password. Show email address field for a quick lookup to get the user.id. -->
            <div class="flex flex-col flex-wrap gap-2">
                <span class="text-sm text-gray-500">
                    Your Username: {$ae_loc?.user?.username ?? '-- not set --'}
                </span>
                <span class="text-sm text-gray-500">
                    Your Email: {$ae_loc?.user?.email ?? '-- not set --'}
                </span>
                <span class="text-sm text-gray-500">
                    Your User ID: {$ae_loc?.user_id ?? '-- not set --'}
                </span>
            </div>
            {#if $ae_loc?.manager_access}
                <div class="flex flex-row flex-wrap gap-2">
                    <input
                        type="text"
                        name="user_email"
                        autocomplete="off"
                        placeholder="User's email address"
                        bind:value={user_email}
                        class="input input-bordered w-48 max-w-full" />
                </div>
            {/if}

            <!-- Allow for new password and confirm password fields. -->
            <div
                class="flex flex-row flex-wrap items-center justify-center gap-2">
                <span class="flex flex-row flex-wrap gap-1">
                    <input
                        required
                        type={show_password_text}
                        autocomplete="new-password"
                        name="new_password"
                        placeholder="New Password"
                        bind:value={new_password}
                        class="input input-bordered w-48 max-w-full required:border-red-500" />
                    <input
                        required
                        type={show_password_text}
                        autocomplete="off"
                        name="confirm_password"
                        placeholder="Confirm Password"
                        bind:value={confirm_password}
                        class="input input-bordered w-48 max-w-full required:border-red-500" />
                </span>

                <!-- Show/Hide Password Text -->
                <button
                    type="button"
                    class="btn btn-icon preset-tonal-secondary"
                    onclick={() => {
                        // const inputs = document.querySelectorAll('.modal-box input[type="password"]');
                        // inputs.forEach((input) => {
                        //     input.type = input.type === 'password' ? 'text' : 'password';
                        // });
                        if (show_password_text === 'password') {
                            show_password_text = 'text';
                        } else {
                            show_password_text = 'password';
                        }
                    }}
                    title="Show/Hide Password Text">
                    {#if show_password_text === 'password'}
                        <EyeOff class="mx-1" />
                    {:else}
                        <Eye class="mx-1" />
                    {/if}
                    <!-- <Eye class="mx-1"/> -->
                    <!-- <span class="hidden sm:inline">
                    Show/Hide
                </span> -->
                </button>

                <div>
                    <span class="text-warning-800 text-sm dark:text-gray-200">
                        Password must be at <strong>least 10 characters</strong> long.
                        It is recommend that you use a pass phrase (multiple words
                        as your password) or a complex password (uppercase letter,
                        lowercase letters, numbers, and special characters).
                    </span>
                </div>
            </div>

            <div class="flex flex-row flex-wrap gap-2">
                <button
                    type="button"
                    class="btn preset-filled-warning-500"
                    onclick={handle_change_password}
                    disabled={is_changing_password}>
                    <Key class="mx-1" />
                    Change Password
                </button>
                <button
                    type="button"
                    class="btn preset-tonal-secondary"
                    onclick={() =>
                        ($ae_sess.show__modal_change_password = false)}>
                    <CircleX class="mx-1" />
                    Cancel
                </button>
            </div>
        </div>
    </Modal>
{/if}

<style lang="scss">
</style>
