<script lang="ts">
	interface Props {
		log_lvl?: number;
		lq__journal_obj: any;
		// tmp__journal_obj?: key_val;
		show?: boolean;
	}

	let {
		log_lvl = $bindable(0),
		lq__journal_obj, // This is the live query so it updates automatically anyways?
		// tmp__journal_obj = {},
		show = $bindable(false)
	}: Props = $props();

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

	// *** Import other supporting libraries
	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,
		RemoveFormatting,
		SquareLibrary,
		Shapes,
		Share2,
		ShieldCheck,
		ShieldMinus,
		Siren,
		Skull,
		Tags,
		Target,
		ToggleLeft,
		ToggleRight,
		Trash2,
		TypeOutline,
		X
	} from '@lucide/svelte';
	import { Modal } from 'flowbite-svelte';

	// *** Import Aether specific variables and functions
	import type { key_val } from '$lib/stores/ae_stores';
	import { ae_util } from '$lib/ae_utils/ae_utils';
	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 { journals_func } from '$lib/ae_journals/ae_journals_functions';

	let tmp__journal_obj = $state($journals_slct.journal_obj ?? {});

	let tmp__journal_obj_changed: boolean = $state(false);
	// let tmp__journal_obj: key_val = $state( $journals_slct.journal_obj );
	// let tmp__journal_obj: key_val = $state( { ...$lq__journal_obj ?? {} } );
	// let tmp__journal_obj: key_val = { ...$lq__journal_obj ?? {} };
	// let tmp__journal_obj: key_val;

	$effect(() => {
		if (tmp__journal_obj) {
			// console.log(`Journal object has changed from the tmp object.`, tmp__journal_obj);
			tmp__journal_obj_changed =
				JSON.stringify(tmp__journal_obj) != JSON.stringify($lq__journal_obj);

			// if (tmp__journal_obj.cfg_json) {
			//     // Ensure cfg_json is always an object
			//     if (typeof tmp__journal_obj.cfg_json !== 'object') {
			//         console.log(`Journal object cfg_json is not an object.`, tmp__journal_obj);
			//         tmp__journal_obj.cfg_json = {};
			//     }
			// } else {
			//     console.log(`Journal object does not have a cfg_json property.`, tmp__journal_obj);
			//     tmp__journal_obj.cfg_json = {};
			// }

			if (tmp__journal_obj_changed) {
				console.log(`Journal object no longer matches tmp object = `, tmp__journal_obj_changed);
			}
		}
	});

	async function handle_update_journal() {
		if (tmp__journal_obj.name && tmp__journal_obj.type_code) {
			try {
				let data_kv = {
					// account: $slct.account_id,
					name: tmp__journal_obj.name,
					description: tmp__journal_obj.description ?? '', // Ensure description is at least an empty string
					type_code: tmp__journal_obj.type_code,
					passcode: tmp__journal_obj.passcode,
					private_passcode: tmp__journal_obj.private_passcode,
					passcode_timeout: tmp__journal_obj.passcode_timeout,
					auth_key: tmp__journal_obj.auth_key, // The Journal Entry encryption password

					cfg_json: tmp__journal_obj.cfg_json
				};
				journals_func
					.update_ae_obj__journal({
						api_cfg: $ae_api,
						journal_id: $lq__journal_obj?.journal_id ?? '',
						data_kv: data_kv,
						log_lvl: log_lvl
					})
					.then((results) => {
						if (log_lvl) {
							console.log('Journal updated:', results);
						}
						// $journals_slct.journal_id = results?.journal_id_random;
					})
					.catch((error) => {
						console.error('Error updating journal:', error);
						alert('Failed to update journal.');
					})
					.finally(() => {
						if ($journals_slct.journal_id) {
							$journals_sess.show__modal_edit__journal_obj = false;
							// goto(`/journals/${$journals_slct.journal_id}`);
						}
					});
				// console.log('New journal updated:', result);
				// $journals_sess.show__modal_new__journal_obj = false;
				// goto(`/journals/${result.journal_id_random}`);
			} catch (error) {
				console.error('Error updating journal:', error);
				alert('Failed to update journal.');
			}
		} else {
			alert('Please provide both name and type for the journal.');
		}
	}
</script>

<!-- title="Edit Journal / Settings" -->

<Modal
	bind:open={show}
	autoclose={false}
	placement="top-center"
	size="xl"
	class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
	headerClass="
        flex flex-row gap-2 items-center justify-between
        w-full
        bg-gray-100 dark:bg-gray-900
        "
	footerClass="
        flex flex-row gap-2 items-center justify-center
        w-full
        bg-gray-100 dark:bg-gray-900
        "
>
	{#snippet header()}
		<h3>
			<span class="text-base font-semibold">
				<span class="text-primary-500">
					<BookOpenText class="inline-block mr-1" />
				</span>
				Edit Journal / Settings:
			</span>
			{$lq__journal_obj?.name ?? '-- not set --'}
		</h3>
	{/snippet}

	<div class="modal">
		<div class="modal-box mx-2 mb-14 space-y-4">
			{#if !tmp__journal_obj || typeof tmp__journal_obj.cfg_json !== 'object'}
				Not found or loading?
			{:else}
				<div class="space-y-2 py-2 mb-2">
					<label class="text-sm text-gray-500 hidden sm:inline">
						Journal Name:
						<input
							type="text"
							placeholder="Journal Name"
							bind:value={tmp__journal_obj.name}
							class="input input-bordered w-full mb-2"
						/>
					</label>

					<!-- Journal Description (Markdown) -->
					<label class="text-sm text-gray-500 hidden sm:inline">
						Journal Description:
						<textarea
							placeholder="Journal Description (Markdown format)"
							bind:value={tmp__journal_obj.description}
							class="input input-bordered w-full mb-2 h-32 resize-none"
							title="Description of the journal (supports Markdown)"
						></textarea>
					</label>

					<div class="*:hover:inline">
						<!-- input for passcode -->
						<div class="*:hover:inline">
							<label class="text-sm text-gray-500">
								Passcode:
								<input
									type="text"
									placeholder="Passcode"
									bind:value={tmp__journal_obj.passcode}
									class="input input-bordered w-64 mb-2"
								/>
							</label>
							<div class="text-xs text-gray-500 hidden md:inline">
								<span class="text-red-500">*</span> This passcode is used to encrypt the Journal Entries.
							</div>
						</div>

						<!-- input for private passcode -->
						<div class="*:hover:inline">
							<label class="text-sm text-gray-500">
								Private Passcode:
								<input
									type="text"
									placeholder="Private Passcode"
									bind:value={tmp__journal_obj.private_passcode}
									class="input input-bordered w-64 mb-2"
								/>
							</label>
							<div class="text-xs text-gray-500 hidden md:inline">
								<span class="text-red-500">*</span> This passcode is combined with the regular passcode
								and used to encrypt the Journal Entries.
							</div>
						</div>

						<!-- input for passcode timeout -->
						<div class="*:hover:inline">
							<label class="text-sm text-gray-500">
								Passcode Timeout:
								<input
									type="number"
									placeholder="Passcode Timeout"
									bind:value={tmp__journal_obj.passcode_timeout}
									class="input input-bordered w-32 mb-2"
								/>
							</label>
						</div>
					</div>

					<!-- input for auth_key -->
					<label class="text-sm text-gray-500 sm:inline">
						Auth Key:
						<input
							type="text"
							placeholder="Auth Key"
							bind:value={tmp__journal_obj.auth_key}
							class="input input-bordered w-64 mb-2"
						/>
					</label>

					<label class="text-sm text-gray-500">
						Journal Type:
						<input
							type="text"
							placeholder="Journal Type"
							bind:value={tmp__journal_obj.type_code}
							class="input input-bordered w-48 mb-2"
						/>
					</label>

					<!-- select option for journal type_code -->
					<div>
						<span class="text-sm text-gray-500 sm:inline"> Journal Type: </span>
						<select
							class="btn btn-sm
            preset-tonal-surface border border-surface-500
            hover:preset-filled-surface-500
            transition
            text-xs
            "
							bind:value={tmp__journal_obj.type_code}
							onchange={(event) => {
								// Update the cfg_json with the selected journal type. Example cate
								tmp__journal_obj.type_code = event.target.value;
								console.log('Selected journal type:', tmp__journal_obj.type_code);
							}}
							title="Select a journal type"
						>
							<option value="">Select Journal Type</option>
							{#each $journals_loc.journal.type_code_li as journal_type}
								<option value={journal_type.code}>{journal_type.name}</option>
							{/each}
						</select>
					</div>

					<div class="flex flex-row flex-wrap gap-1 items-start justify-start">
						<!-- inputs for customizable journal category list -->
						<!-- each category has a code and name; need to be able to add and remove categories -->
						<div class="text-sm text-gray-500 hidden sm:inline">Journal Categories:</div>
						<div class="flex flex-col gap-1 p-4">
							{#each tmp__journal_obj?.cfg_json?.category_li as category, index}
								<div class="flex flex-row items-center gap-1">
									<input
										type="text"
										placeholder="Category Code"
										bind:value={tmp__journal_obj.cfg_json.category_li[index].code}
										class="input input-bordered w-48"
									/>
									<input
										type="text"
										placeholder="Category Name"
										bind:value={tmp__journal_obj.cfg_json.category_li[index].name}
										class="input input-bordered w-full"
									/>
									<button
										type="button"
										class="btn btn-sm preset-tonal-danger border border-danger-500 hover:preset-filled-danger-500 transition"
										onclick={() => {
											tmp__journal_obj.cfg_json.category_li.splice(index, 1);
											tmp__journal_obj.cfg_json.category_li = tmp__journal_obj.cfg_json.category_li;
										}}
									>
										<Minus />
										Remove
									</button>
								</div>
							{/each}
							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.category_li.push({ code: '', name: '' });
									tmp__journal_obj.cfg_json.category_li = tmp__journal_obj.cfg_json.category_li;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition max-w-48 p-1"
							>
								<Plus />
								Add Category
							</button>
						</div>
					</div>

					<!-- Select max height options (Tailwind CSS) -->
					<div class="flex flex-row gap-1 items-center justify-start">
						<span class="text-sm text-gray-500 hidden sm:inline">
							Journal Entry List Max Height:
						</span>
						<!-- {#if tmp__journal_obj?.cfg_json?.entry_li_max_height} -->
						<select
							bind:value={tmp__journal_obj.cfg_json.entry_li_max_height}
							onchange={(event) => {
								tmp__journal_obj.cfg_json.entry_li_max_height = event.target.value;
								console.log('Selected max height:', tmp__journal_obj.cfg_json.entry_li_max_height);
							}}
							class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
							title="Select maximum height for journal entries in the list"
						>
							<option value="">Default (auto)</option>
							<!-- <option value="none">None (no limit)</option> -->
							<option value="max-h-8">Small (8)</option>
							<option value="max-h-16">Medium (16)</option>
							<option value="max-h-32">Large (32)</option>
							<option value="max-h-96">Extra Large (96)</option>
							<option value="max-h-full">Full (no limit)</option>
						</select>
						<!-- {/if} -->
					</div>

					<!-- Select hover max height options (Tailwind CSS) -->
					<div class="flex flex-row gap-1 items-center justify-start">
						<span class="text-sm text-gray-500 hidden sm:inline">
							Journal Entry List Hover Max Height:
						</span>
						<!-- {#if tmp__journal_obj?.cfg_json?.entry_li_hover_max_height} -->
						<select
							bind:value={tmp__journal_obj.cfg_json.entry_li_hover_max_height}
							onchange={(event) => {
								tmp__journal_obj.cfg_json.entry_li_hover_max_height = event.target.value;
								console.log(
									'Selected max height:',
									tmp__journal_obj.cfg_json.entry_li_hover_max_height
								);
							}}
							class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
							title="Select maximum height for journal entries in the list"
						>
							<option value="">Default (auto)</option>
							<!-- <option value="none">None (no limit)</option> -->
							<option value="hover:max-h-8">Small (8)</option>
							<option value="hover:max-h-16">Medium (16)</option>
							<option value="hover:max-h-32">Large (32)</option>
							<option value="hover:max-h-96">Extra Large (96)</option>
							<option value="hover:max-h-full">Full (no limit)</option>
						</select>
						<!-- {/if} -->
					</div>

					<!-- Select click max height options (Tailwind CSS) -->
					<div class="flex flex-row gap-1 items-center justify-start">
						<span class="text-sm text-gray-500 hidden sm:inline">
							Journal Entry List Active (click/press) Max Height:
						</span>
						<select
							bind:value={tmp__journal_obj.cfg_json.entry_li_click_max_height}
							onchange={(event) => {
								tmp__journal_obj.cfg_json.entry_li_click_max_height = event.target.value;
								console.log(
									'Selected max height:',
									tmp__journal_obj.cfg_json.entry_li_click_max_height
								);
							}}
							class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
							title="Select maximum height for journal entries in the list"
						>
							<option value="">Default (auto)</option>
							<!-- <option value="none">None (no limit)</option> -->
							<option value="active:max-h-8">Small (8)</option>
							<option value="active:max-h-16">Medium (16)</option>
							<option value="active:max-h-32">Large (32)</option>
							<option value="active:max-h-96">Extra Large (96)</option>
							<option value="active:max-h-full">Full (no limit)</option>
						</select>
					</div>

					<!-- Toggles for the hover or click to expand Entry content when in a list -->
					<div class="flex flex-row flex-wrap gap-1 items-center justify-start">
						<span class="text-sm text-gray-500 hidden sm:inline">
							Journal Entry List Expand Contents:
						</span>

						<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
							<button
								type="button"
								onclick={() => {
									if (tmp__journal_obj.cfg_json.expand_li_content == 'hover') {
										tmp__journal_obj.cfg_json.expand_li_content = 'click';
									} else {
										tmp__journal_obj.cfg_json.expand_li_content = 'hover';
									}
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle hover or click to expand Entry content in the list"
							>
								{#if tmp__journal_obj.cfg_json.expand_li_content == 'hover'}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />

									<Target strokeWidth="2.5" color="green" />
									<span class="hidden"> Hover </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<Expand strokeWidth="2.5" color="green" />
									<span class="hidden"> Click </span>
								{/if}
								<span class="hidden"> Expand Entry Content </span>
							</button>
						</span>
					</div>

					<!-- Toggles for the of how to add new content to an existing Journal Entry. append, prepend, and defaults to append -->
					<div class="flex flex-row flex-wrap gap-1 items-center justify-start">
						<span class="text-sm text-gray-500 hidden sm:inline"> Journal Entry Add Content: </span>

						<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
							<button
								type="button"
								onclick={() => {
									if (tmp__journal_obj.cfg_json.entry_add_text == 'append') {
										tmp__journal_obj.cfg_json.entry_add_text = 'prepend';
									} else {
										tmp__journal_obj.cfg_json.entry_add_text = 'append';
									}
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition group"
								title="Toggle prepend (start) or append (end) text to Journal Entry content"
							>
								{#if tmp__journal_obj.cfg_json.entry_add_text == 'append'}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleRight strokeWidth="1" color="red" class="mx-1" />

									<!-- <Plus strokeWidth="2.5" color="green" /> -->
									<BetweenVerticalEnd strokeWidth="2.5" color="green" />
									<span class="hidden group-hover:inline"> Append </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleLeft strokeWidth="2.5" color="green" class="mx-1" />
									<!-- <Minus strokeWidth="2.5" color="green" /> -->
									<BetweenVerticalStart strokeWidth="2.5" color="green" />
									<span class="hidden group-hover:inline"> Prepend </span>
								{/if}
								<span class="hidden"> Add Content to Journal Entry </span>
							</button>
						</span>
					</div>

					<!-- Select color scheme for the journal entries -->
					<!-- Should select from the common Tailwind CSS options. Examples: slate, blue, gray, green, orange, red, yellow, etc. -->
					<!-- Saves to cfg_json.color_scheme -->
					<div class="flex flex-row gap-1 items-center justify-start">
						<span class="text-sm text-gray-500 hidden sm:inline"> Color Scheme: </span>
						<select
							bind:value={tmp__journal_obj.cfg_json.color_scheme}
							onchange={(event) => {
								tmp__journal_obj.cfg_json.color_scheme = event.target.value;
								console.log('Selected color scheme:', tmp__journal_obj.cfg_json.color_scheme);
							}}
							class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
							title="Select color scheme for journal entries"
						>
							<option value="">Default (auto)</option>
							<option value="slate">Slate</option>
							<option value="gray">Gray</option>
							<option value="blue">Blue</option>
							<option value="green">Green</option>
							<option value="orange">Orange</option>
							<option value="red">Red</option>
							<option value="yellow">Yellow</option>
						</select>
					</div>

					<div class="flex flex-row gap-1 items-center justify-start">
						<span class="text-sm text-gray-500 hidden sm:inline"> Preferred Viewer: </span>
						<select
							bind:value={tmp__journal_obj.cfg_json.pref_viewer}
							onchange={(event) => {
								tmp__journal_obj.cfg_json.pref_viewer = event.target.value;
								console.log('Selected viewer:', tmp__journal_obj.cfg_json.pref_viewer);
							}}
							class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
							title="Select preferred viewer for journal entries"
						>
							<option value="">Default (Rendered)</option>
							<option value="plain">Plain Text</option>
							<option value="rendered">Rendered (HTML)</option>
							<!-- <option value="textarea">Text Area</option> -->
							<option value="codemirror">CodeMirror (readonly)</option>
						</select>
					</div>

					<div class="flex flex-row gap-1 items-center justify-start">
						<span class="text-sm text-gray-500 hidden sm:inline"> Preferred Editor: </span>
						<select
							bind:value={tmp__journal_obj.cfg_json.pref_editor}
							onchange={(event) => {
								tmp__journal_obj.cfg_json.pref_editor = event.target.value;
								console.log('Selected editor:', tmp__journal_obj.cfg_json.pref_editor);
							}}
							class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition text-xs w-full mb-2 max-w-48"
							title="Select preferred editor for journal entries"
						>
							<option value="">Default (Text Area)</option>
							<option value="textarea">Text Area</option>
							<option value="codemirror">CodeMirror</option>
						</select>
					</div>

					<!-- Toggles for the copy content buttons: plain text (in Markdown), HTML marked up, rendered rich HTML, encrypted content, clone Entry -->
					<div class="flex flex-row flex-wrap gap-1 items-center justify-start">
						<span class="text-sm text-gray-500 hidden sm:inline">
							Journal Entry Copy Options:
						</span>

						<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.hide_copy_plain_md =
										!tmp__journal_obj.cfg_json.hide_copy_plain_md;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle visibility of Markdown copy button(s) on Journal Entry view page"
							>
								{#if tmp__journal_obj.cfg_json.hide_copy_plain_md}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
									<EyeOff strokeWidth="1" color="gray" />
									<span class="hidden"> Hiding </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<Eye strokeWidth="2.5" color="green" />
									<span class="hidden"> Showing </span>
								{/if}
								<span class="hidden"> Plaintext Markdown Copy Button </span>
							</button>

							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.hide_copy_html =
										!tmp__journal_obj.cfg_json.hide_copy_html;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle visibility of HTML copy button(s) on Journal Entry view page"
							>
								{#if tmp__journal_obj.cfg_json.hide_copy_html}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
									<EyeOff strokeWidth="1" color="gray" />
									<span class="hidden"> Hiding </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<Eye strokeWidth="2.5" color="green" />
									<span class="hidden"> Showing </span>
								{/if}
								<span class="hidden"> HTML Copy Button </span>
							</button>

							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.hide_copy_rich =
										!tmp__journal_obj.cfg_json.hide_copy_rich;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle visibility of rendered copy button(s) on Journal Entry view page"
							>
								{#if tmp__journal_obj.cfg_json.hide_copy_rich}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
									<EyeOff strokeWidth="1" color="gray" />
									<span class="hidden"> Hiding </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<Eye strokeWidth="2.5" color="green" />
									<span class="hidden"> Showing </span>
								{/if}
								<span class="hidden"> Rendered Rich Copy Button </span>
							</button>

							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.hide_copy_encrypted =
										!tmp__journal_obj.cfg_json.hide_copy_encrypted;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle visibility of encrypted copy button(s) on Journal Entry view page"
							>
								{#if tmp__journal_obj.cfg_json.hide_copy_encrypted}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
									<EyeOff strokeWidth="1" color="gray" />
									<span class="hidden"> Hiding </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<Eye strokeWidth="2.5" color="green" />
									<span class="hidden"> Showing </span>
								{/if}
								<span class="hidden"> Encrypted Copy Button </span>
							</button>

							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.hide_clone = !tmp__journal_obj.cfg_json.hide_clone;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle visibility of clone button(s) on Journal Entry view page"
							>
								{#if tmp__journal_obj.cfg_json.hide_clone}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
									<Copy strokeWidth="1" color="gray" />
									<span class="hidden"> Hiding </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<Copy strokeWidth="2.5" color="green" />
									<span class="hidden"> Showing </span>
								{/if}
								<span class="hidden"> Clone Button </span>
							</button>
						</span>
					</div>

					<!-- Toggles for automatically hiding Entries marked as either: private, personal, or professional  -->
					<div class="flex flex-row flex-wrap gap-1 items-center justify-start">
						<span class="text-sm text-gray-500 hidden sm:inline"> Journal Entry Visibility: </span>

						<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.hide_private = !tmp__journal_obj.cfg_json.hide_private;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle visibility of private entries"
							>
								{#if tmp__journal_obj.cfg_json.hide_private}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
									<Fingerprint strokeWidth="1" color="gray" class="mx-1" />
									<span class="hidden"> Hiding </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<Fingerprint strokeWidth="2.5" color="green" class="mx-1" />
									<span class="hidden"> Showing </span>
								{/if}
								<span class="hidden"> Private Entries </span>
							</button>

							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.hide_personal =
										!tmp__journal_obj.cfg_json.hide_personal;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle visibility of personal entries"
							>
								{#if tmp__journal_obj.cfg_json.hide_personal}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
									<BookHeart strokeWidth="1" color="gray" />
									<span class="hidden"> Hiding </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<BookHeart strokeWidth="2.5" color="green" />
									<span class="hidden"> Showing </span>
								{/if}
								<span class="hidden"> Personal Entries </span>
							</button>

							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.hide_professional =
										!tmp__journal_obj.cfg_json.hide_professional;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle visibility of professional entries"
							>
								{#if tmp__journal_obj.cfg_json.hide_professional}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
									<BriefcaseBusiness strokeWidth="1" color="gray" />
									<span class="hidden"> Hiding </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<BriefcaseBusiness strokeWidth="2.5" color="green" />
									<span class="hidden"> Showing </span>
								{/if}
								<span class="hidden"> Professional Entries </span>
							</button>
						</span>
					</div>

					<!-- Toggle buttons for showing/hiding various Journal Entry page view buttons: alert, alert message, private, public, personal, professional, template -->
					<div class="flex flox-row flex-wrap gap-1 items-center justify-start">
						<span class="text-sm text-gray-500 hidden sm:inline">
							Journal Entry View Buttons:
						</span>

						<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.hide_btn_alert =
										!tmp__journal_obj.cfg_json.hide_btn_alert;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle visibility of alert icon button(s) on Journal Entry view page"
							>
								{#if tmp__journal_obj?.cfg_json.hide_btn_alert}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
									<Siren strokeWidth="1" color="gray" />
									<span class="hidden"> Hiding </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<Siren strokeWidth="2.5" color="green" />
									<span class="hidden"> Showing </span>
								{/if}
								<span class="hidden"> Alert Button </span>
							</button>

							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.hide_btn_alert_msg =
										!tmp__journal_obj.cfg_json.hide_btn_alert_msg;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle visibility of alert message icon button(s) on Journal Entry view page"
							>
								{#if tmp__journal_obj?.cfg_json.hide_btn_alert_msg}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
									<MessageSquareWarning strokeWidth="1" color="gray" />
									<span class="hidden"> Hiding </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<MessageSquareWarning strokeWidth="2.5" color="green" />
									<span class="hidden"> Showing </span>
								{/if}
								<span class="hidden"> Alert Message Button </span>
							</button>

							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.hide_btn_private =
										!tmp__journal_obj.cfg_json.hide_btn_private;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle visibility of private icon button(s) on Journal Entry view page"
							>
								{#if tmp__journal_obj?.cfg_json.hide_btn_private}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
									<Fingerprint strokeWidth="1" color="gray" />
									<span class="hidden"> Hiding </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<Fingerprint strokeWidth="2.5" color="green" />
									<span class="hidden"> Showing </span>
								{/if}
								<span class="hidden"> Private Button </span>
							</button>

							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.hide_btn_public =
										!tmp__journal_obj.cfg_json.hide_btn_public;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle visibility of public icon button(s) on Journal Entry view page"
							>
								{#if tmp__journal_obj?.cfg_json.hide_btn_public}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
									<EyeOff strokeWidth="1" color="gray" />
									<span class="hidden"> Hiding </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<Eye strokeWidth="2.5" color="green" />
									<span class="hidden"> Showing </span>
								{/if}
								<span class="hidden"> Public Button </span>
							</button>

							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.hide_btn_personal =
										!tmp__journal_obj.cfg_json.hide_btn_personal;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle visibility of personal icon button(s) on Journal Entry view page"
							>
								{#if tmp__journal_obj?.cfg_json.hide_btn_personal}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
									<BookHeart strokeWidth="1" color="gray" />
									<span class="hidden"> Hiding </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<BookHeart strokeWidth="2.5" color="green" />
									<span class="hidden"> Showing </span>
								{/if}
								<span class="hidden"> Personal Button </span>
							</button>

							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.hide_btn_professional =
										!tmp__journal_obj.cfg_json.hide_btn_professional;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle visibility of professional icon button(s) on Journal Entry view page"
							>
								{#if tmp__journal_obj?.cfg_json.hide_btn_professional}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
									<BriefcaseBusiness strokeWidth="1" color="gray" />
									<span class="hidden"> Hiding </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<BriefcaseBusiness strokeWidth="2.5" color="green" />
									<span class="hidden"> Showing </span>
								{/if}
								<span class="hidden"> Professional Button </span>
							</button>

							<button
								type="button"
								onclick={() => {
									tmp__journal_obj.cfg_json.hide_btn_template =
										!tmp__journal_obj.cfg_json.hide_btn_template;
								}}
								class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 transition *:hover:inline"
								title="Toggle visibility of template icon button(s) on Journal Entry view page"
							>
								{#if tmp__journal_obj?.cfg_json.hide_btn_template}
									<!-- <EyeOff strokeWidth="1" color="red" /> -->
									<ToggleLeft strokeWidth="1" color="red" class="mx-1" />
									<FilePlus strokeWidth="1" color="gray" />
									<span class="hidden"> Hiding </span>
								{:else}
									<!-- <Eye strokeWidth="2.5" color="green" /> -->
									<ToggleRight strokeWidth="2.5" color="green" class="mx-1" />
									<FilePlus strokeWidth="2.5" color="green" />
									<span class="hidden"> Showing </span>
								{/if}
								<span class="hidden"> Template Button </span>
							</button>
						</span>
					</div>

					<!-- JSON configuration editor for advanced users -->
					<!-- textarea for json_cfg editing -->
				</div>

				<div class="flex flex-row flex-wrap gap-1 items-center justify-between w-full">
					<!-- Priority Button -->
					<button
						type="button"
						onclick={() => {
							if ($ae_loc.trusted_access) {
								let data_kv = {
									priority: $lq__journal_obj?.priority ? false : true
								};
								journals_func
									.update_ae_obj__journal({
										api_cfg: $ae_api,
										journal_id: $lq__journal_obj?.journal_id,
										data_kv: data_kv,
										log_lvl: log_lvl
									})
									.then(() => {
										alert('Journal priority updated successfully!');
									})
									.catch((error) => {
										console.error('Error updating journal priority:', error);
										alert('Failed to update journal priority.');
									});
							}
						}}
						class="btn-icon-sm preset-tonal-tertiary transition"
						title="Toggle priority of this journal"
					>
						{#if $lq__journal_obj?.priority}
							<Flag strokeWidth="2.5" color="green" />
						{:else}
							<FlagOff strokeWidth="1" color="gray" />
						{/if}
						<span class="hidden lg:inline">Priority</span>
					</button>

					<!-- Sort Buttons -->
					<span
						class="flex flex-row flex-wrap items-center justify-center border border-gray-300 rounded-lg"
					>
						<button
							type="button"
							onclick={() => {
								let data_kv = {
									sort: $lq__journal_obj?.sort ? $lq__journal_obj?.sort + 1 : 1
								};
								journals_func
									.update_ae_obj__journal({
										api_cfg: $ae_api,
										journal_id: $lq__journal_obj?.journal_id,
										data_kv: data_kv,
										log_lvl: log_lvl
									})
									.then(() => {
										// alert('Journal sort order incremented!');
									})
									.catch((error) => {
										console.error('Error updating journal sort order:', error);
										alert('Failed to update journal sort order.');
									});
							}}
							class="btn-icon-sm preset-tonal-tertiary transition"
							title="Increment sort order of this journal"
						>
							<Plus strokeWidth="2.5" color="blue" />
						</button>
						<span class="mx-1">
							{#if $lq__journal_obj?.sort}
								{$lq__journal_obj.sort}
							{:else}
								<ArrowDown10 />
							{/if}
						</span>
						<button
							type="button"
							onclick={() => {
								let data_kv = {
									sort: $lq__journal_obj?.sort ? $lq__journal_obj?.sort - 1 : 0
								};
								journals_func
									.update_ae_obj__journal({
										api_cfg: $ae_api,
										journal_id: $lq__journal_obj?.journal_id,
										data_kv: data_kv,
										log_lvl: log_lvl
									})
									.then(() => {
										// alert('Journal sort order decremented!');
									})
									.catch((error) => {
										console.error('Error updating journal sort order:', error);
										alert('Failed to update journal sort order.');
									});
							}}
							class="btn-icon-sm preset-tonal-tertiary transition"
							title="Decrement sort order of this journal"
						>
							<Minus strokeWidth="2.5" color="blue" />
						</button>
					</span>

					<!-- Group Input -->
					<input
						type="text"
						bind:value={tmp__journal_obj.group}
						placeholder="Group"
						onchange={() => {
							let data_kv = {
								group: tmp__journal_obj.group
							};
							journals_func
								.update_ae_obj__journal({
									api_cfg: $ae_api,
									journal_id: $lq__journal_obj?.journal_id,
									data_kv: data_kv,
									log_lvl: log_lvl
								})
								.then(() => {
									alert('Journal group updated successfully!');
								})
								.catch((error) => {
									console.error('Error updating journal group:', error);
									alert('Failed to update journal group.');
								});
						}}
						class="input input-sm input-bordered w-24"
						title="Set group (for sorting) of this journal"
					/>

					<!-- Hide Button -->
					<button
						type="button"
						onclick={() => {
							let data_kv = {
								hide: tmp__journal_obj.hide ? false : true
							};
							journals_func
								.update_ae_obj__journal({
									api_cfg: $ae_api,
									journal_id: $lq__journal_obj?.journal_id,
									data_kv: data_kv,
									log_lvl: log_lvl
								})
								.then(() => {
									alert('Journal visibility updated successfully!');
								})
								.catch((error) => {
									console.error('Error updating journal visibility:', error);
									alert('Failed to update journal visibility.');
								});
						}}
						class="btn btn-sm md:btn-md preset-tonal-warning hover:preset-filled-warning-500 transition"
						title="Toggle visibility of this journal"
					>
						{#if $lq__journal_obj?.hide}
							<EyeOff strokeWidth="1" color="red" class="inline-block" />
							<span class="hidden md:inline">Hidden</span>
						{:else}
							<Eye strokeWidth="2.5" color="green" class="inline-block" />
							<span class="hidden md:inline">Visible</span>
						{/if}
					</button>

					<!-- Enable Button -->
					<button
						type="button"
						onclick={() => {
							let data_kv = {
								enable: $lq__journal_obj?.enable ? false : true
							};
							journals_func
								.update_ae_obj__journal({
									api_cfg: $ae_api,
									journal_id: $lq__journal_obj?.journal_id,
									data_kv: data_kv,
									log_lvl: log_lvl
								})
								.then(() => {
									alert('Journal enable status updated successfully!');
								})
								.catch((error) => {
									console.error('Error updating journal enable status:', error);
									alert('Failed to update journal enable status.');
								});
						}}
						class="btn btn-sm md:btn-md preset-tonal-error hover:preset-filled-error-500 transition"
						title="Toggle enable status of this journal"
					>
						{#if $lq__journal_obj?.enable}
							<ShieldCheck strokeWidth="2.5" color="green" class="inline-block" />
							<span class="hidden md:inline">Enabled</span>
						{:else}
							<ShieldMinus strokeWidth="1" color="red" class="inline-block" />
							<span class="hidden md:inline">Disabled</span>
						{/if}
					</button>

					<!-- Delete Button -->
					<button
						type="button"
						onclick={() => {
							if (confirm(`Are you sure you want to delete this journal?`)) {
								journals_func
									.delete_ae_obj_id__journal({
										api_cfg: $ae_api,
										journal_id: $lq__journal_obj?.journal_id,
										log_lvl: log_lvl
									})
									.then(() => {
										alert('Journal deleted successfully!');
										goto('/journals');
									})
									.catch((error) => {
										console.error('Error deleting journal:', error);
										alert('Failed to delete journal.');
									});
							}
						}}
						class="btn btn-sm md:btn-md preset-tonal-error hover:preset-filled-error-500 transition"
						title="Delete this journal"
					>
						<Trash2 strokeWidth="2.5" color="orange" class="inline-block" />
						<span class="hidden md:inline">Delete</span>
					</button>
				</div>
			{/if}
		</div>
	</div>

	{#snippet footer()}
		<div
			class="

        "
		>
			<button
				type="button"
				onclick={handle_update_journal}
				class="btn preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 transition"
			>
				<Check />
				Update
			</button>

			<button
				type="button"
				onclick={() => (show = false)}
				class="btn preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition"
			>
				<X />
				Cancel
			</button>
		</div>
	{/snippet}
</Modal>
