<script lang="ts">
interface Props {
    log_lvl?: number;
    show?: boolean;
    tab?: string;
}

let {
    log_lvl = $bindable(0),
    show = $bindable(true),
    tab = $bindable('form'), // form, local_json, session_json
}: Props = $props();

import {
        ArrowDown01, ArrowDown10, ArrowDownUp,
        BetweenVerticalEnd, BetweenVerticalStart,
        BookHeart, BookImage, Bookmark, BookOpenText, BriefcaseBusiness,
        Check, Copy,
        Expand, Eye, EyeOff,
        Flag, FlagOff, FilePlus, Fingerprint,
        Globe,
        Library,
        MessageSquareWarning, Minus,
        Notebook,
        Pencil, Plus,
        RefreshCcw, RemoveFormatting,
        SquareLibrary,
        Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
        Tags, Target, ToggleLeft, ToggleRight, Trash2, TypeOutline,
        X
    } from '@lucide/svelte';
import { Modal } from 'flowbite-svelte';

import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { journals_loc, journals_sess, journals_slct, journals_prom, journals_trig } from '$lib/ae_journals/ae_journals_stores';
import E_app_codemirror_v5 from '$lib/e_app_codemirror_v5.svelte';

</script>


<Modal
    bind:open={show}
    autoclose={false}
    placement="top-center"
    size="xl"
    class="
        top-center
        relative
        flex flex-col
        mx-auto w-full
        bg-white dark:bg-gray-800
        text-gray-800 dark:text-gray-200
        border border-orange-300 dark:border-orange-700 rounded-lg
        shadow-xl
        "
    headerClass="
        flex flex-row gap-2 items-center justify-between
        w-full
        bg-orange-100 dark:bg-orange-900
        "
    footerClass="
        flex flex-row gap-2 items-center justify-center
        w-full
        bg-orange-100 dark:bg-orange-900
        "
    >

{#snippet header()}
    <h3>
        <span class="text-base font-semibold">
            <span class="text-primary-500">
                <BookOpenText class="inline-block mr-1" />
            </span>
            &AElig; Journals Settings:
        </span>
        {$journals_loc?.name ?? '-- not set --'}
    </h3>
{/snippet}


<div class="modal h-full md:pb-24">
    <div class="modal-box space-y-2">

<!-- Menu to toggle between viewing JSON and the form view -->
<div
    class="flex flex-row gap-1 items-center justify-center"
    >
    <button
        type="button"
        class:preset-outlined-surface-200-800={tab === 'form'}
        class="
            btn btn-sm
            preset-outlined-surface-50-950
            transition-all
            "
        onclick={() =>
            tab = 'form'
            }
        >
        <span class="fas fa-cog mr-1"></span>
        Config
    </button>
    <button
        type="button"
        class:preset-outlined-surface-200-800={tab === 'local_json'}
        class="
            btn btn-sm
            preset-outlined-surface-50-950
            transition-all
            "
        onclick={() =>
            tab = 'local_json'
            }
        >
        <span class="fas fa-code mr-1"></span>
        Local JSON
    </button>
    <button
        type="button"
        class:preset-outlined-surface-200-800={tab === 'session_json'}
        class="
            btn btn-sm
            preset-outlined-surface-50-950
            transition-all
            "
        onclick={() =>
            tab = 'session_json'
            }        >
        <span class="fas fa-code mr-1"></span>
        Session JSON
    </button>

</div>

<!-- Section for the configuration form -->
<div
    class:hidden={tab !== 'form'}
    class="flex flex-col gap-1 items-start justify-start"
    >

    <!-- <h2 class="font-semibold"></h2> -->

    <div class="w-full space-y-2 p-2 border-t border-surface-100-900">
        <h2 class="font-semibold">$journals_loc:</h2>
        <h3 class="font-semibold">Date and Time:</h3>

        <!-- datetime_format - default 'datetime_12_long'; select options -->
        <label class="flex items-center justify-start gap-1">
            DateTime Format:
            <select
                bind:value={$journals_loc.datetime_format}
                class="select select-sm select-bordered w-full max-w-xs p-1"
                >
                <option value="datetime_12_short">MMM D, YY hh:mm A</option>
                <option value="datetime_12_long">MMMM D, YYYY hh:mm A</option>
                <option value="datetime_short">MMM D, YY HH:mm</option>
                <option value="datetime_long">MMMM D, YYYY HH:mm</option>
                <option value="datetime_us">US (MM/DD/YYYY hh:mm:ss A)</option>
                <option value="datetime_iso">ISO (YYYY-MM-DD HH:mm:ss)</option>
            </select>
        </label>

        <!-- time_format - default 'time_12_short'; select options -->
        <label class="flex items-center justify-start gap-1">
            Time Format:
            <select
                bind:value={$journals_loc.time_format}
                class="select select-sm select-bordered w-full max-w-xs p-1"
                >
                <option value="time_12_short">12-hour short (e.g., 3:30 PM)</option>
                <option value="time_12_long">12-hour long (e.g., 3:30:45 PM)</option>
                <option value="time_short">24-hour short (e.g., 15:30)</option>
                <option value="time_long">24-hour long (e.g., 15:30:45)</option>
            </select>
        </label>

        <!-- time_hours 12 or 24; toggle -->
        <div class="flex flex-row gap-2 items-center justify-start">
        <label class="flex flex-row gap-1 items-center justify-start">
            12
            <input
                type="checkbox"
                checked={$journals_loc.time_hours == 12}
                value={12}
                onchange={() => {
                    $journals_loc.time_hours = 12;
                }}
                class="checkbox checkbox-sm"
                />

        </label>
        <label class="flex flex-row gap-1 items-center justify-start">
            24
            <input
                type="checkbox"
                checked={$journals_loc.time_hours == 24}
                value={24}
                onchange={() => {
                    $journals_loc.time_hours = 24;
                }}
                class="checkbox checkbox-sm"
                />

        </label>
        <span class="text-sm">
            Time Format: <span class="font-semibold">{$journals_loc.time_hours}-hour</span>
        </span>
        </div>

        <h3 class="font-semibold">LLM AI:</h3>

        <button
            type="button"
            class="btn btn-sm preset-outlined-primary-400-600"
            onclick={() => {
                $journals_loc.llm__api_base_url = $ae_loc.site_cfg_json?.llm__api_base_url ?? 'https://ai.dgrzone.com/api';
                $journals_loc.llm__api_model = $ae_loc.site_cfg_json?.llm__api_model ?? 'dgrzone-deepseek-8b-quick';
                $journals_loc.llm__api_token = $ae_loc.site_cfg_json?.llm__api_token ?? '';
                $journals_loc.llm__api_dangerous_browser = $ae_loc.site_cfg_json?.llm__api_dangerous_browser ?? false;
                $journals_loc.entry.llm__system_prompt = $ae_loc.site_cfg_json?.llm__system_prompt ?? '';


            }}
            >
            <Copy class="inline-block mr-1" />
            LLM from Site Cfg
        </button>

        <!-- llm__api_base_url - default 'https://ai.dgrzone.com/api'; input url -->
        <label class="flex items-center justify-start gap-1">
            LLM API Base URL:
        <input
            type="text"
            bind:value={$journals_loc.llm__api_base_url}
            placeholder="LLM API Base URL"
            class="input input-sm input-bordered w-full max-w-xs"
            />
        </label>

        <!-- llm__api_model - default 'dgrzone-deepseek-8b-quick'; input text -->
        <label class="flex items-center justify-start gap-1">
            LLM API Model:
        <input
            type="text"
            bind:value={$journals_loc.llm__api_model}
            placeholder="LLM API Model"
            class="input input-sm input-bordered w-full max-w-xs"
            />
        </label>

        <!-- llm__api_token; input text -->
        <label class="flex items-center justify-start gap-1">
            LLM API Token:
        <input
            type="text"
            bind:value={$journals_loc.llm__api_token}
            placeholder="LLM API Token"
            class="input input-sm input-bordered w-full max-w-4xl"
            />
        </label>

        <!-- llm__api_dangerous_browser - default false; checkbox -->
        <label class="flex flex-row gap-1 items-center justify-start">
            <input
                type="checkbox"
                bind:checked={$journals_loc.llm__api_dangerous_browser}
                class="checkbox checkbox-sm"
                />
            <span class="text-sm">
                LLM API Dangerous Browser
            </span>
        </label>
    </div>

    <div class="w-full space-y-2 p-2 border-t border-surface-100-900">
        <h2 class="font-semibold">$journals_loc?.entry:</h2>

        <!-- entry > ai__system_prompt - textarea -->
        <!-- <div class="h-16"> -->

        <!-- </div> -->

        <!-- entry > llm__max_tokens - number -->
        <label class="flex items-center justify-start gap-1">
            LLM Max Tokens:
            <input
                type="number"
                bind:value={$journals_loc.entry.llm__max_tokens}
                placeholder="LLM Max Tokens"
                class="input input-sm input-bordered w-full max-w-xs"
                />
        </label>

        <!-- entry > llm__temperature - number -->
        <label class="flex items-center justify-start gap-1">
            LLM Temperature:
            <input
                type="number"
                step="0.01"
                min="0"
                max="1"
                bind:value={$journals_loc.entry.llm__temperature}
                placeholder="LLM Temperature"
                class="input input-sm input-bordered w-full max-w-xs"
                />
        </label>

        <label class="flex flex-col items-start justify-start gap-1 h-24">
            LLM System Prompt for Journal Entry summarization:
            <E_app_codemirror_v5
                editable={true}
                readonly={false}
                content={$journals_loc?.entry?.llm__system_prompt}
                bind:new_content={$journals_loc.entry.llm__system_prompt}
                show_line_numbers={false}
                placeholder="LLM System Prompt"
                class="
                    p-1
                    preset-outlined-success-400-600
                    shadow-lg rounded-lg
                    "
                on:change={(e) => {
                    $journals_loc.entry.llm__system_prompt = e.detail;
                }}
                />
        </label>

        <button
            type="button"
            class="btn btn-sm preset-outlined-primary-400-600"
            onclick={() => {
                let default_system_prompt = 'Summarize the following journal entry content in a concise manner, focusing on key points and insights.';
                $journals_loc.entry.llm__system_prompt = default_system_prompt;
            }}
            >
            <RefreshCcw class="inline-block mr-1" />
            Reset to Journal Entry System Prompt
        </button>

    </div>
</div>

<!-- Section for viewing (and direct editing???) the raw localStorage JSON configuration -->
<div
    class:hidden={tab !== 'local_json'}
    class=""
    >
    <E_app_codemirror_v5
        editable={false}
        readonly={true}
        content={JSON.stringify($journals_loc, null, 2)}
        show_line_numbers={false}
        placeholder=""
        class="
            p-1
            preset-outlined-surface-100-900
            rounded-lg
            "
        />
    <!-- <pre class="text-wrap">
    {JSON.stringify($journals_loc, null, 2)}
    </pre> -->
</div>

<!-- Section for viewing (and direct editing???) the raw sessionStorage JSON configuration -->
<div
    class:hidden={tab !== 'session_json'}
    class=""
    >
    <E_app_codemirror_v5
        editable={false}
        readonly={true}
        content={JSON.stringify($journals_sess, null, 2)}
        show_line_numbers={false}
        placeholder=""
        class="
            p-1
            preset-outlined-surface-100-900
            rounded-lg
            "
        />
    <!-- <pre class="text-wrap">
    {JSON.stringify($journals_sess, null, 2)}
    </pre> -->
</div>

    </div>
</div>

{#snippet footer()}
    <button
        class="btn btn-sm btn-outline btn-primary"
        onclick={() => show = false}
        >
        <X class="inline-block mr-1" />
        Close
    </button>
{/snippet}

</Modal>