<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 other supporting libraries
import {
    BadgeQuestionMark,
    ChevronDown,
    ChevronRight,
    LifeBuoy,
    RefreshCw,
    SquareX,
    Trash2
} from '@lucide/svelte';
// *** Import Aether specific variables and functions
import {
    ae_loc,
    ae_sess,
    ae_api,
    slct,
    type key_val
} from '$lib/stores/ae_stores';
import { api } from '$lib/ae_api/api';
import { core_func } from '$lib/ae_core/ae_core_functions';

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 border
        border-transparent shadow-2xl
        transition-all
        {e_class}
        {!$ae_sess.show_help_tech ? e_class_form_hidden : e_class_form_showing}
        relative
        "
    class:w-lg={$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="
                flex
                w-sm sm:w-xl flex-col items-center
                justify-center gap-1
                rounded-xl
                border border-gray-500/20 bg-blue-200
                p-2
                transition-all
                dark:bg-blue-800
                ">
            <div
                class="
                    d-flex align-items-center justify-content-between
                    flex w-full flex-row items-center justify-between
                    gap-1
                    ">
                <h1
                    class="
                        h1
                        w-fit text-base font-semibold text-gray-800
                        dark:text-gray-200
                        {e_class_h1}
                        ">
                    {#if e_success}
                        <span
                            class="text-lg font-semibold text-green-800 dark:text-green-200">
                            <BadgeQuestionMark class="mr-2 inline-block" />
                            Help Requested
                        </span>
                    {:else}
                        <span
                            class="text-lg font-semibold text-gray-800 dark:text-gray-200">
                            <BadgeQuestionMark class="mr-2 inline-block" />
                            <!-- 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 w-md max-w-lg
                    flex-col items-center
                    justify-center gap-1
                    "
                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
                        h-24
                        w-full max-w-xs sm:max-w-xl rounded
                        border border-gray-300 bg-white
                        p-2 text-gray-950
                        dark:bg-gray-500 dark:text-gray-50
                        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
                        preset-tonal-warning
                        preset-outlined-warning-100-900
                        hover:preset-filled-warning-200-800
                        m-1


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

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

            <div
                class="
                    text-center text-sm text-gray-700 italic dark:text-gray-300
                    ">
                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="
                    w-full max-w-2xl overflow-scroll rounded
                    border
                    border-gray-300
                    p-2
                    ">
                <div
                    class="
                        d-flex align-items-center justify-content-between
                        flex w-full flex-row items-center justify-between
                        gap-1
                        ">
                    <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-inside list-disc 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-inside list-disc text-sm text-gray-800">
                            {#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-center text-sm text-gray-700 italic dark:text-gray-300">
                    This information will be included in the help request to
                    assist technical support in diagnosing the issue.
                </div>
            </div>

            <div
                class="
                    mt-2 flex w-full flex-row items-center
                    justify-around
                    gap-2
                    ">
                <button
                    type="button"
                    onclick={async () => {
                        const edit_mode = $ae_loc.edit_mode;
                        const confirm_msg = edit_mode
                            ? 'Clear all IDB caches, service worker caches, localStorage, and sessionStorage? Your sign-in will be preserved. This will reload the page.'
                            : 'Clear all IDB caches and service worker caches? This will reload the page.';

                        if (!confirm(confirm_msg)) return;

                        // Non-edit: skip_ls=true — SW+Cache+IDB only, localStorage untouched (sign-in preserved naturally).
                        // Edit mode: preserve_ls_keys=['ae_loc'] — full clear but sign-in survives the wipe.
                        await core_func.clear_all_storage(
                            undefined,
                            edit_mode ? { preserve_ls_keys: ['ae_loc'] } : { skip_ls: true }
                        );
                        window.location.reload();
                    }}
                    class="
                        btn btn-sm
                        preset-tonal-surface
                        preset-outlined-warning-100-900
                        hover:preset-filled-warning-200-800
                        transition-all
                        {btn_class}
                        "
                    title="Clear & Reload: Delete all IDB caches, unregister service workers, and reload, preserving your sign-in. In edit mode also clears localStorage/sessionStorage.">
                    <RefreshCw size="1em" class="inline-block" />
                    <span class="md:inline">Clear & Reload</span>
                </button>

                <!-- Nuclear clear: enumerates all IDB databases dynamically + always clears localStorage/sessionStorage.
                     Useful when the hardcoded list above is stale or when diagnosing quota/storage bugs. -->
                <button
                    type="button"
                    onclick={async () => {
                        if (
                            !confirm(
                                'FULL RESET: Unregister service workers, clear all caches, delete ALL IndexedDB databases, clear localStorage and sessionStorage, then reload?'
                            )
                        ) {
                            return;
                        }

                        await core_func.clear_all_storage();
                        window.location.reload();
                    }}
                    class="
                        btn btn-sm
                        preset-tonal-surface
                        preset-outlined-error-100-900
                        hover:preset-filled-error-200-800
                        transition-all
                        {btn_class}
                        "
                    title="Full Reset: Unregister service workers, clear SW Cache Storage, delete all IndexedDB databases, clear localStorage and sessionStorage, then reload.">
                    <Trash2 size="1em" class="inline-block" />
                    <span class="md:inline">Full Reset</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="m-0.5 inline-block" />
            {/if}
            <span class="hidden">
                {btn_text}
            </span>
        </button>
    {/if}
</div>
