<script lang="ts">
    interface Props {
        log_lvl?: number;
        additional_kv?: key_val;
        e_success?: boolean;
        e_class?: string;
        e_title?: string;
        e_text?: string;
        e_class_h1?: string;
        e_class_h2?: string;
        e_class_form_hidden?: string;
        e_class_form_showing?: string;
        btn_text?: string;
        btn_title?: string;
        btn_class?: string;
        show_btn_class?: string;
        hide_icon?: boolean;
    }

    let {
        log_lvl = $bindable(0),
        additional_kv = $bindable({}),
        e_success = $bindable(false),
        e_class = '',
        // e_title = 'Technical Help',
        // e_text = 'Request technical help for this application.',
        e_class_h1 = $bindable(''),
        e_class_h2 = $bindable(''),
        e_class_form_hidden = $bindable(''),
        e_class_form_showing = $bindable(''),
        btn_text = 'Technical Help',
        btn_title = 'Technical support help',
        btn_class = '',
        show_btn_class = '',
        hide_icon = false
    }: Props = $props();

    // *** Import Svelte specific
    import { goto } from '$app/navigation';

    // *** Import other supporting libraries
    import {
        // ArrowBigRight,
        BadgeQuestionMark,
        ChevronDown,
        ChevronRight,
        // CircleX,
        // Copy,
        // Eye, EyeOff,
        // Key,
        LifeBuoy,
        // LogIn, LogOut, LockKeyhole,
        // Mail, MailCheck,
        // Menu,
        RefreshCw,
        // RefreshCcw,
        // RefreshCcwDot,
        // ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
        SquareX
        // User, UserCheck
    } from '@lucide/svelte';

    // *** Import Aether specific variables and functions
    import {
        ae_snip,
        ae_loc,
        ae_sess,
        ae_api,
        ae_trig,
        slct,
        slct_trigger,
        type key_val
    } from '$lib/stores/ae_stores';
    import { User } from 'lucide-svelte';
    import { api } from '$lib/api/api';

    if (log_lvl) {
        console.log(`Help - technical support component loaded`);
    }

    let help_tech_text: string = $state('');
    let hide_additional_info: boolean = $state(true);

    function prevent_default<T extends Event>(fn: (event: T) => void) {
        return function (event: T) {
            event.preventDefault();
            fn(event);
        };
    }

    function send_help_tech_email() {
        if (log_lvl) {
            console.log(`*** send_help_tech_email() ***`);
        }

        let subject = `Technical Notification - ${$ae_loc.name}`;

        let body_html = `
    <div>
    Technical Notification,\n\n
    <ul>
        <li>Datetime: ${new Date().toISOString()}</li>
        <li>URL: ${window.location.href}</li>
        <li>Browser: ${navigator.userAgent}</li>
        <li>Viewport Size: ${window.innerWidth} x ${window.innerHeight}</li>
        <li>Screen Resolution: ${window.screen.width} x ${window.screen.height}</li>
        <li>In iframe: ${$ae_loc?.iframe}</li>
        <li>Theme Mode: ${$ae_loc?.theme_mode}</li>
        <li>Theme Name: ${$ae_loc?.theme_name}</li>
        <li>Account ID: ${$slct.account_id}</li>
        <li>Access Type: ${$ae_loc?.access_type}</li>
        ${$ae_loc?.person_id ? `<li>person_id: ${$ae_loc?.person_id}</li>` : ''}
        ${$ae_loc?.user_id ? `<li>user_id: ${$ae_loc?.user_id}</li>` : ''}
        ${$ae_loc?.username ? `<li>username: ${$ae_loc?.username}</li>` : ''}
        ${$ae_loc?.email ? `<li>email: ${$ae_loc?.email}</li>` : ''}
        <li>API Base URL: ${$ae_api.base_url}</li>
    </ul>
    <p>
    Help Request:\n\n
    ${help_tech_text}
    </p>

    </div>
    `;

        api.send_email({
            api_cfg: $ae_api,
            from_email:
                $ae_loc.site_cfg_json?.noreply_email ??
                'noreply+tech@oneskyit.com',
            from_name: $ae_loc.site_cfg_json?.noreply_name ?? 'IT NoReply',
            // to_email: $ae_loc.site_cfg_json?.admin_email ?? 'admin+tech@oneskyit.com', // 'scott+idaabb@oneskyit.com',
            to_email: 'it+tech@oneskyit.com',
            // to_email: $idaa_slct.post_obj.email,
            // to_email: 'scott+idaabb@oneskyit.com',
            // to_name: $ae_loc.site_cfg_json?.admin_name ?? 'IT Tech',
            to_name: 'IT Tech',
            // to_name: $idaa_slct.post_obj.full_name ?? 'IDAA BB Poster',
            subject: subject,
            body_html: body_html
        });

        help_tech_text = ''; // Clear the text area after sending
    }
</script>

<!-- class:bg-radial-[at_55%_50%]={$ae_sess.show_help_tech}
class:from-blue-400={$ae_sess.show_help_tech}
class:to-transparent={$ae_sess.show_help_tech}
class:to-90%={$ae_sess.show_help_tech} -->
<div
    class="
        flex flex-row
        items-center justify-center
        rounded-lg shadow-2xl
        border border-transparent
        transition-all
        {e_class}
        {!$ae_sess.show_help_tech ? e_class_form_hidden : e_class_form_showing}
        relative
        "
    class:w-xl={$ae_sess.show_help_tech}
    class:w-fit={!$ae_sess.show_help_tech}
    class:mx-auto={$ae_sess.show_help_tech}
    class:m-2={$ae_sess.show_help_tech}
    class:p-2={$ae_sess.show_help_tech}
    class:hover:border-blue-400={$ae_sess.show_help_tech}
    class:hover:dark:border-blue-600={$ae_sess.show_help_tech}
    class:hover:shadow-blue-200={$ae_sess.show_help_tech}
    class:hover:dark:shadow-blue-800={$ae_sess.show_help_tech}
    class:bg-blue-100={$ae_sess.show_help_tech}
    class:dark:bg-blue-900={$ae_sess.show_help_tech}
>
    {#if $ae_sess.show_help_tech}
        <div
            class="
                w-xl
                flex flex-col gap-1
                items-center justify-center
                p-2
                border rounded-xl border-gray-500/20
                bg-blue-200
                dark:bg-blue-800
                transition-all
                "
        >
            <div
                class="
                    d-flex align-items-center justify-content-between
                    flex flex-row gap-1 items-center justify-between
                    w-full
                    "
            >
                <h1
                    class="
                        h1
                        text-base font-semibold text-gray-800 dark:text-gray-200
                        w-fit
                        {e_class_h1}
                        "
                >
                    {#if e_success}
                        <span
                            class="text-lg text-green-800 dark:text-green-200 font-semibold"
                        >
                            <BadgeQuestionMark class="inline-block mr-2" />
                            Help Requested
                        </span>
                    {:else}
                        <span
                            class="text-lg text-gray-800 dark:text-gray-200 font-semibold"
                        >
                            <BadgeQuestionMark class="inline-block mr-2" />
                            <!-- Request Technical Help -->
                            Notify Technical Support
                        </span>
                        <!-- <span class="text-gray-500">
                            Send your help request with or without a description.
                        </span> -->
                    {/if}

                    <!-- Cancel button -->
                </h1>
                <button
                    type="button"
                    onclick={() => ($ae_sess.show_help_tech = false)}
                    class="
                        btn btn-base
                        preset-tonal-tertiary
                        preset-outlined-tertiary-100-900
                        hover:preset-filled-tertiary-200-800
                        transition-all
                        {btn_class}
                        "
                    title="Close Help Request Form"
                >
                    <!-- <span class="fas fa-times"></span> -->
                    <SquareX size="1em" />
                    <span class="sr-only">Close</span>
                </button>
            </div>

            <form
                class="
                    m-1
                    flex flex-col gap-1
                    items-center justify-center
                    w-md max-w-lg
                    "
                onsubmit={prevent_default(() => {
                    // Do stuff...
                    send_help_tech_email();

                    // Hide the request form
                    $ae_sess.show_help_tech = false;

                    alert('Notification sent to the IT team.');
                })}
            >
                <textarea
                    class="
                        form-control
                        w-full max-w-lg h-24 p-2
                        border border-gray-300 rounded
                        text-gray-950 dark:text-gray-50
                        bg-white dark:bg-gray-500
                        hover:dark:bg-gray-50
                        hover:dark:text-gray-950
                        "
                    placeholder="Send with or without a description...."
                    bind:value={help_tech_text}
                ></textarea>

                <button
                    type="submit"
                    class="
                        btn btn-lg
                        m-1
                        preset-tonal-warning
                        preset-outlined-warning-100-900
                        hover:preset-filled-warning-200-800


                        transition-all
                        {btn_class}
                        "
                    title={btn_title}
                >
                    {#if !hide_icon}
                        <!-- <BadgeQuestionMark class="inline-block mr-2" /> -->
                        <LifeBuoy class="inline-block m-1" />
                    {/if}

                    {#if !help_tech_text}
                        Notify Without Description
                    {:else}
                        Send Notification
                    {/if}
                </button>
            </form>

            <div
                class="
                    text-sm text-gray-700 dark:text-gray-300 text-center italic
                    "
            >
                This is intended for technical issues only. Please contact your
                organization's staff if you have a question about your
                membership, recorded content, meetings, or posts.
            </div>

            <div
                class="
                    border border-gray-300 rounded p-2
                    w-full
                    max-w-2xl
                    overflow-scroll
                    "
            >
                <div
                    class="
                        d-flex align-items-center justify-content-between
                        flex flex-row gap-1 items-center justify-between
                        w-full
                        "
                >
                    <h2
                        class="
                            h2
                            text-base font-semibold text-gray-800 dark:text-gray-200
                            {e_class_h2}
                            "
                    >
                        <span
                            class="text-base font-semibold text-gray-800 dark:text-gray-200"
                        >
                            Additional Information Included
                        </span>
                    </h2>
                    <!-- Button to expand and show additional information -->
                    <button
                        type="button"
                        class="
                            btn btn-sm preset-tonal-tertiary
                            {btn_class}
                            "
                        onclick={() =>
                            (hide_additional_info = !hide_additional_info)}
                        title="Toggle additional information"
                    >
                        <span>
                            {#if hide_additional_info}
                                <!-- <span class="fas fa-caret-right"></span> -->
                                <ChevronRight size="1em" class="inline-block" />
                                Show
                            {:else}
                                <!-- <span class="fas fa-caret-down"></span> -->
                                <ChevronDown size="1em" class="inline-block" />
                                Hide
                            {/if}
                        </span>
                    </button>
                </div>
                <ul
                    class="list-disc list-inside text-sm text-gray-800 dark:text-gray-200"
                    class:hidden={hide_additional_info}
                >
                    <li>
                        <span class="text-sm text-gray-500 dark:text-gray-400"
                            >Datetime =</span
                        >
                        {new Date().toISOString()}
                    </li>
                    <li>
                        <span class="text-sm text-gray-500 dark:text-gray-400"
                            >URL =</span
                        >
                        {window.location.href}
                    </li>
                    <li>
                        <span class="text-sm text-gray-500 dark:text-gray-400"
                            >Browser =</span
                        >
                        {navigator.userAgent}
                    </li>
                    <li>
                        <span class="text-sm text-gray-500 dark:text-gray-400"
                            >Viewport Size =</span
                        >
                        {window.innerWidth} x {window.innerHeight}
                    </li>
                    <li>
                        <span class="text-sm text-gray-500 dark:text-gray-400"
                            >Screen Resolution =</span
                        >
                        {window.screen.width} x {window.screen.height}
                    </li>
                    <li>
                        <span class="text-sm text-gray-500 dark:text-gray-400"
                            >Dark mode =</span
                        >
                        {window?.matchMedia?.('(prefers-color-scheme:dark)')
                            ?.matches ?? false}
                    </li>
                    <li>
                        <span class="text-sm text-gray-500 dark:text-gray-400"
                            >In iframe =</span
                        >
                        {$ae_loc?.iframe}
                    </li>
                    <li>
                        <span class="text-sm text-gray-500 dark:text-gray-400"
                            >Theme Mode =</span
                        >
                        {$ae_loc?.theme_mode}
                    </li>
                    <li>
                        <span class="text-sm text-gray-500 dark:text-gray-400"
                            >Theme Name =</span
                        >
                        {$ae_loc?.theme_name}
                    </li>
                    <li>
                        <span class="text-sm text-gray-500 dark:text-gray-400"
                            >Account ID =</span
                        >
                        {$slct.account_id}
                    </li>
                    <li>
                        <span class="text-sm text-gray-500 dark:text-gray-400"
                            >Access Type =</span
                        >
                        {$ae_loc?.access_type}
                    </li>
                    {#if $ae_loc?.person_id}
                        <li>
                            <span
                                class="text-sm text-gray-500 dark:text-gray-400"
                                >person_id =</span
                            >
                            {$ae_loc?.person_id}
                        </li>
                        <li>
                            <span
                                class="text-sm text-gray-500 dark:text-gray-400"
                                >full_name =</span
                            >
                            {$ae_loc?.full_name}
                        </li>
                    {/if}
                    {#if $ae_loc?.user_id}
                        <li>
                            <span
                                class="text-sm text-gray-500 dark:text-gray-400"
                                >user_id =</span
                            >
                            {$ae_loc?.user_id}
                        </li>
                        <li>
                            <span
                                class="text-sm text-gray-500 dark:text-gray-400"
                                >username =</span
                            >
                            {$ae_loc?.username}
                        </li>
                        <li>
                            <span
                                class="text-sm text-gray-500 dark:text-gray-400"
                                >email =</span
                            >
                            {$ae_loc?.email}
                        </li>
                    {/if}
                    <li>
                        <span class="text-sm text-gray-500 dark:text-gray-400"
                            >API Base URL =</span
                        >
                        {$ae_api.base_url}
                    </li>

                    {#if additional_kv && Object.keys(additional_kv).length > 0}
                        <h2 class="text-base font-semibold text-gray-800">
                            Component Info:
                        </h2>
                        <ul class="list-disc list-inside text-gray-800 text-sm">
                            {#each Object.entries(additional_kv) as [key, value] (key)}
                                <li>
                                    <span
                                        class="text-sm text-gray-500 dark:text-gray-400"
                                        >{key} =</span
                                    >
                                    {value ?? '-- not set --'}
                                </li>
                            {/each}
                        </ul>
                    {/if}
                </ul>
                <div
                    class="text-sm text-gray-700 dark:text-gray-300 text-center italic"
                >
                    This information will be included in the help request to
                    assist technical support in diagnosing the issue.
                </div>
            </div>

            <div
                class="
                    flex flex-row gap-2 items-center justify-around
                    w-full
                    mt-2
                    "
            >
                <button
                    type="button"
                    onclick={() => {
                        if ($ae_loc.edit_mode) {
                            // Confirm before clearing
                            if (
                                !confirm(
                                    'Are you sure you want to clear IndexedDB databases, localStorage, and sessionStorage? This will also reload the page.'
                                )
                            ) {
                                return;
                            }

                            console.log(
                                'Clearing IndexedDB, localStorage, sessionStorage, and reloading the page...'
                            );

                            // Clear Indexed DB
                            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

                            // Clear localStorage and sessionStorage
                            // Clearing the localStorage will force it to be re-created.
                            localStorage.clear();
                            sessionStorage.clear();

                            goto('/', { invalidateAll: true });

                            // window.location.reload();
                        } else {
                            // Confirm before clearing
                            if (
                                !confirm(
                                    'Are you sure you want to clear IndexedDB databases and some caches? This will also reload the page.'
                                )
                            ) {
                                return;
                            }

                            console.log(
                                'Clearing IndexedDB, localStorage, sessionStorage, and reloading the page...'
                            );

                            // Clear Indexed DB
                            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

                            window.location.reload();
                        }

                        // This does not seem to work fast enough or something?
                        // goto('/', {invalidateAll: true});

                        // The page does usually seem to reload correctly?
                        // window.location.reload(true); // true only works with Firefox
                        // alert('Local and Session Storage cleared and Indexed DBs deleted. You will probably want to refresh the page.');
                    }}
                    class="
                        btn btn-sm
                        preset-tonal-surface
                        preset-outlined-warning-100-900
                        hover:preset-filled-warning-200-800
                        transition-all
                        {btn_class}
                        "
                    title="Clear App Data & Settings: Clear IndexedDB and reload. If in edit mode localStorage and sessionStorage will also be cleared."
                >
                    <!-- <span class="fas fa-eraser mx-1"></span> -->
                    <!-- <span class="fas fa-sync mx-1"></span> -->
                    <RefreshCw size="1em" class="inline-block" />
                    <span class="md:inline">Clear & Reload</span>
                </button>

                <!-- Cancel button -->
                <button
                    type="button"
                    onclick={() => ($ae_sess.show_help_tech = false)}
                    class="
                        btn btn-sm
                        preset-tonal-tertiary
                        preset-outlined-tertiary-100-900
                        hover:preset-filled-tertiary-100-900
                        transition-all
                        {btn_class}
                        "
                    title="Close Help Request Form"
                >
                    <!-- <span class="fas fa-times"></span> -->
                    <SquareX size="1em" class="inline-block" />
                    <span class="">Cancel</span>
                </button>
            </div>
        </div>
    {:else}
        <button
            type="button"
            onclick={() => ($ae_sess.show_help_tech = true)}
            class="
                btn btn-sm
                preset-filled-tertiary-400-600
                preset-outlined-tertiary-100-900
                hover:preset-filled-warning-500
                transition-all
                {btn_class}
                {show_btn_class}
                "
            title={btn_title}
        >
            {#if !hide_icon}
                <BadgeQuestionMark class="inline-block m-0.5" />
            {/if}
            <span class="hidden">
                {btn_text}
            </span>
        </button>
    {/if}
</div>
