<script lang="ts">

interface Props {
    log_lvl?: number;
    additional_kv?: key_val;
    e_success?: boolean;
    e_class?: string;
    e_title?: string;
    e_text?: string;
    btn_text?: string;
    btn_title?: string;
    btn_class?: string;
    hide_icon?: boolean;
}

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

// *** Import Svelte specific

// *** Import other supporting libraries
import {
    // ArrowBigRight,
    BadgeQuestionMark,
    // CircleX,
    // Copy,
    // Eye, EyeOff,
    // Key,
    LifeBuoy,
    // LogIn, LogOut, LockKeyhole,
    // Mail, MailCheck,
    // Menu,
    // RefreshCw, RefreshCcw, RefreshCcwDot,
    // ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
    // 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/ae_stores';
	import { User } from 'lucide-svelte';
	import { api } from './api';

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

let help_tech_text: string = $state('');

function preventDefault(fn) {
    return function (event) {
        event.preventDefault();
        fn.call(this, 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 ?? 'Tech NoReply',
        // to_email: $ae_loc.site_cfg_json?.admin_email ?? 'admin+tech@oneskyit.com', // 'scott+idaabb@oneskyit.com',
        to_email: 'scott+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 ?? 'Tech Admin',
        // to_name: $idaa_slct.post_obj.full_name ?? 'IDAA BB Poster',
        subject: subject,
        body_html: body_html,
    });

}

</script>


<div
    class="
        m-2
        p-2
        flex flex-row
        items-center justify-center
        preset-tonal-surface
        rounded-lg shadow-2xl
        border-2
        border-blue-400 dark:border-blue-600
        shadow-blue-200 dark:shadow-blue-800
        bg-blue-100 dark:bg-blue-900
        transition-all
        {e_class}
        "
    >


    {#if $ae_sess.show_help_tech}
        <div
            class="
                flex flex-col gap-1
                items-center justify-center
                transition-all
                "
            >
        {#if e_success}
            <span class="text-green-500">
                <BadgeQuestionMark class="inline-block mr-2" />
                Help Requested
            </span>
        {:else}
            <span class="text-gray-800 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}

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

                // Hide the request form
                $ae_sess.show_help_tech = false;
            })}
            >
            <textarea
                class="w-full max-w-lg h-24 p-2 border border-gray-300 rounded"
                placeholder="Send with or without a description...."
                bind:value={help_tech_text}
                ></textarea>
            <button
                type="submit"
                class="
                    btn btn-lg
                    m-1
                    preset-tonal-success
                    preset-outlined-warning-600-400
                    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>

        <p class="text-sm text-gray-500 text-center">
            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.
        </p>

        <div>
            <h2 class="text-lg font-semibold text-gray-800">
                Additional Information Included
            </h2>
            <ul class="list-disc list-inside text-gray-800 text-sm">
                <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>
                {#if $ae_loc?.person_id}
                    <li>person_id = {$ae_loc?.person_id}</li>
                    <li>full_name = {$ae_loc?.full_name}</li>
                {/if}
                {#if $ae_loc?.user_id}
                    <li>user_id = {$ae_loc?.user_id}</li>
                    <li>username = {$ae_loc?.username}</li>
                    <li>email = {$ae_loc?.email}</li>
                {/if}
                <li>API Base URL: {$ae_api.base_url}</li>

                {#if additional_kv && Object.keys(additional_kv).length > 0}
                    <h2 class="text-lg font-semibold text-gray-800">Additional Component Info:</h2>
                <ul class="list-disc list-inside text-gray-800 text-sm">
                {#each Object.entries(additional_kv) as [key, value]}
                    <li>{key} = {value}</li>
                {/each}
                </ul>
                {/if}

            </ul>
            <p class="text-gray-600 text-sm mt-2">
                This information will be included in the help request to assist technical support in diagnosing the issue.
            </p>

        </div>
        </div>

    {:else}

        <button
            onclick={() => ($ae_sess.show_help_tech = true)}
            class="
                btn btn-sm
                m-1
                preset-outlined-warning-600-400
                transition-all
                {btn_class}
                "
            title={btn_title}
            >
            {#if !hide_icon}
                <BadgeQuestionMark class="inline-block mr-2" />
            {/if}
            {btn_text}
        </button>

    {/if}








</div>