<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/stores/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/app_components/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>
