<script lang="ts">
interface Props {
    log_lvl?: number;
    lq__journal_obj: any;
    lq__journal_entry_obj_li: any;
    show_found_header?: boolean;
}

let {
    log_lvl = $bindable(0),
    lq__journal_obj,
    lq__journal_entry_obj_li,
    show_found_header = true
}: Props = $props();

// *** Import Svelte specific
import { goto } from '$app/navigation';
import {
    BookOpenText,
    CalendarClock,
    Check,
    CodeXml,
    Copy,
    Eye,
    EyeOff,
    Files,
    FingerprintPattern,
    Flag,
    Group,
    ListPlus,
    LoaderCircle,
    Lock,
    NotebookPen,
    NotebookText,
    NotepadTextDashed,
    RemoveFormatting,
    Shapes,
    Siren,
    Tags,
    TypeOutline,
    X
} from '@lucide/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_loc, ae_sess, ae_api, ae_trig, slct } from '$lib/stores/ae_stores';
import {
    journals_sess,
    journals_slct,
    journals_trig,
    journals_loc
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import AeCompModalJournalEntryAppend from './ae_comp__modal_journal_entry_append.svelte';
import type { ae_JournalEntryDraft } from '$lib/types/ae_types';

let tmp_entry_obj: ae_JournalEntryDraft = $state({});

// Derived state for modal visibility
// We cast to boolean for the prop, but we need to handle the close event to clear the store ID
let show_append_modal = $state(false);

$effect(() => {
    // Sync local boolean with store ID presence
    show_append_modal = !!$journals_sess.show__modal_append__journal_entry_id;
});

function handle_modal_close() {
    $journals_sess.show__modal_append__journal_entry_id = null;
    show_append_modal = false;
}

function handle_modal_update() {
    handle_modal_close();
}

// Derived list of visible items (Standardized Search Pattern 2026-01-27)
// Ensures count matches exactly what is rendered to the user
let visible_journal_entry_obj_li = $derived(
    (() => {
        // Subscribe to the observable
        const list = $lq__journal_entry_obj_li;

        // Return null to signify 'loading' vs [] for 'empty'
        if (list === undefined || list === null) return null;
        if (!Array.isArray(list)) return [];

        const filtered = list.filter((item: any) => !!item);

        if (log_lvl)
            console.log(
                `visible_journal_entry_obj_li: Input=${list.length}, Output=${filtered.length}`
            );

        return filtered;
    })()
);
</script>

<div class="group/entries relative w-full">
    <!-- Subtle glow behind the entry list — same technique as the other journal sections -->
    <div
        class="from-primary-500/50 to-secondary-500/50 pointer-events-none absolute -inset-1
               rounded-2xl bg-linear-to-r opacity-5 blur
               transition duration-700
               group-hover/entries:opacity-15 dark:opacity-10 dark:group-hover/entries:opacity-20">
    </div>
    <section
        class="journal_list relative flex w-full flex-col items-center justify-center gap-1 md:gap-2">
        {#if visible_journal_entry_obj_li === null || ($journals_sess.entry.qry__status === 'loading' && visible_journal_entry_obj_li.length === 0)}
            <!-- Loading state -->
            <div
                class="flex flex-col items-center justify-center p-10 opacity-50">
                <LoaderCircle size="2em" class="mb-2 animate-spin" />
                <p>Loading visible entries...</p>
            </div>
        {:else if visible_journal_entry_obj_li.length > 0}
            {#if show_found_header}
                <div class="mb-2 w-full max-w-(--breakpoint-lg)">
                    <h2 class="h4 flex items-center gap-2 px-2">
                        <span class="text-sm font-normal text-gray-500">
                            Found:
                        </span>
                        <span
                            class="badge preset-tonal-success px-3 py-1 text-lg font-bold">
                            {visible_journal_entry_obj_li.length}<span
                                class="text-gray-400 dark:text-gray-600"
                                >&times;</span>
                        </span>
                    </h2>
                </div>
            {/if}

            {#each visible_journal_entry_obj_li as journals_journal_entry_obj, index (journals_journal_entry_obj.journal_entry_id)}
                <div
                    class="
            journal journal_entry_obj group/entry border-l-primary-500/40
            hover:border-l-primary-500 container flex
            w-full max-w-(--breakpoint-lg)
            flex-col items-center justify-center
            space-y-1 rounded-lg
            border border-l-4 border-gray-200 bg-white
            px-2 py-1
            text-gray-900 transition-all
            duration-200
            ease-out hover:bg-gray-50
            hover:shadow-md dark:border-gray-700
            dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700
            "
                    class:dim={!journals_journal_entry_obj.enable}
                    class:bg-warning-100={!journals_journal_entry_obj?.enable}>
                    <header
                        class="ae_header flex w-full flex-row items-center justify-between gap-2">
                        <span class="flex flex-row flex-wrap gap-1">
                            <span
                                class="journal_entry__name *:hover:inline-block">
                                {#if journals_journal_entry_obj.alert}
                                    <Siren
                                        size="1.25em"
                                        class="mx-1 inline-block text-red-500" />
                                {/if}

                                {#if journals_journal_entry_obj.priority}
                                    <Flag
                                        size="1.25em"
                                        class="mx-1 inline-block text-yellow-500" />
                                {/if}

                                {#if journals_journal_entry_obj.group}
                                    <Group
                                        size="1.25em"
                                        class="mx-1 inline-block text-green-500" />
                                    <span class="hidden text-xs text-gray-500"
                                        >Group:</span>
                                    <span
                                        class="hidden text-sm font-semibold text-gray-500 md:inline">
                                        {journals_journal_entry_obj.group}
                                    </span>
                                {/if}
                            </span>

                            <h3
                                class:dim={journals_journal_entry_obj.hide}
                                class="journal__name h4">
                                {#if journals_journal_entry_obj.template}
                                    <NotepadTextDashed
                                        class="mx-1 inline-block text-neutral-800/60 dark:text-neutral-50/60" />

                                    {@html journals_journal_entry_obj.name ??
                                        '-- no name --'}
                                {:else if journals_journal_entry_obj.name}
                                    <NotebookText
                                        class="mx-1 inline-block text-neutral-800/60 dark:text-neutral-50/60" />
                                    {@html journals_journal_entry_obj.name}
                                {:else}
                                    <CalendarClock
                                        class="mx-1 inline-block text-neutral-800/60 dark:text-neutral-50/60" />
                                    {ae_util.iso_datetime_formatter(
                                        journals_journal_entry_obj.created_on,
                                        'datetime_iso_12_no_seconds'
                                    )}
                                {/if}
                            </h3>

                            <span
                                class="flex flex-row flex-wrap items-center justify-center gap-1">
                                {#if !journals_journal_entry_obj.private}
                                    <!-- Button to copy the Markdown version -->
                                    <button
                                        type="button"
                                        onclick={() => {
                                            let tmp_entry_obj =
                                                journals_journal_entry_obj;

                                            navigator.clipboard
                                                .writeText(
                                                    tmp_entry_obj.content
                                                )
                                                .then(() => {
                                                    alert(
                                                        'Markdown content copied to clipboard!'
                                                    );
                                                })
                                                .catch((error) => {
                                                    console.error(
                                                        'Failed to copy content:',
                                                        error
                                                    );
                                                    alert(
                                                        'Failed to copy content.'
                                                    );
                                                });
                                        }}
                                        class:hidden={$lq__journal_obj?.cfg_json
                                            ?.hide_copy_plain_md}
                                        class="btn btn-sm preset-tonal-surface hover:preset-filled-secondary-500 p-1 text-xs *:hover:inline lg:text-sm"
                                        title="Copy the markdown content">
                                        <RemoveFormatting size="1.25em" />
                                        <span class="hidden">
                                            Copy Plaintext Markdown
                                        </span>
                                    </button>

                                    <!-- Button to copy the rendered to HTML version -->
                                    <button
                                        type="button"
                                        onclick={() => {
                                            let htmlContent =
                                                journals_journal_entry_obj.content_md_html ||
                                                '';

                                            navigator.clipboard
                                                .writeText(htmlContent)
                                                .then(() => {
                                                    alert(
                                                        'Rendered HTML content copied to clipboard!'
                                                    );
                                                })
                                                .catch((error) => {
                                                    console.error(
                                                        'Failed to copy HTML content:',
                                                        error
                                                    );
                                                    alert(
                                                        'Failed to copy HTML content.'
                                                    );
                                                });
                                        }}
                                        class:hidden={journals_journal_entry_obj.template ||
                                            $lq__journal_obj?.cfg_json
                                                ?.hide_copy_html}
                                        class="btn btn-sm preset-tonal-surface hover:preset-filled-secondary-500 p-1 *:hover:inline lg:text-xs"
                                        title="Copy the rendered HTML content">
                                        <CodeXml size="1.25em" />
                                        <span class="hidden">
                                            Copy HTML Markup
                                        </span>
                                    </button>

                                    <!-- Button to copy the rich text (rendered HTML) version -->
                                    <button
                                        type="button"
                                        onclick={async () => {
                                            const element =
                                                document.getElementById(
                                                    `rendered_journal_entry_content_${journals_journal_entry_obj.journal_entry_id}`
                                                );
                                            if (!element) {
                                                console.error(
                                                    'Element not found: rendered_journal_entry_content'
                                                );
                                                alert(
                                                    'Failed to copy rich content.'
                                                );
                                                return;
                                            }

                                            try {
                                                const htmlContent =
                                                    element.innerHTML;
                                                await navigator.clipboard.write(
                                                    [
                                                        new ClipboardItem({
                                                            'text/html':
                                                                new Blob(
                                                                    [
                                                                        htmlContent
                                                                    ],
                                                                    {
                                                                        type: 'text/html'
                                                                    }
                                                                )
                                                        })
                                                    ]
                                                );

                                                alert(
                                                    'Rendered rich content copied to clipboard!'
                                                );
                                            } catch (error) {
                                                console.error(
                                                    'Failed to copy rich content:',
                                                    error
                                                );
                                                alert(
                                                    'Failed to copy rich content.'
                                                );
                                            }
                                        }}
                                        class:hidden={journals_journal_entry_obj.template ||
                                            $lq__journal_obj?.cfg_json
                                                ?.hide_copy_rich}
                                        class="btn btn-sm preset-tonal-surface hover:preset-filled-secondary-500 p-1 *:hover:inline lg:text-xs"
                                        title="Copy the rich text (rendered HTML) content">
                                        <TypeOutline size="1.25em" />
                                        <span class="hidden"
                                            >Copy Rich Text</span>
                                    </button>

                                    <!-- Clone entry -->
                                    <button
                                        type="button"
                                        onclick={() => {
                                            let data_kv = {
                                                code: journals_journal_entry_obj.code,
                                                category_code:
                                                    journals_journal_entry_obj.category_code,
                                                name: journals_journal_entry_obj.name,
                                                short_name:
                                                    journals_journal_entry_obj.short_name,
                                                content:
                                                    journals_journal_entry_obj.content,
                                                description:
                                                    journals_journal_entry_obj.description,
                                                tags: journals_journal_entry_obj.tags
                                            };

                                            journals_func
                                                .create_ae_obj__journal_entry({
                                                    api_cfg: $ae_api,
                                                    journal_id:
                                                        journals_journal_entry_obj.journal_id,
                                                    data_kv: data_kv,
                                                    log_lvl: log_lvl
                                                })
                                                .then((result) => {
                                                    if (
                                                        result?.journal_id &&
                                                        result?.journal_entry_id
                                                    ) {
                                                        alert(
                                                            'Journal entry cloned successfully!'
                                                        );
                                                        goto(
                                                            `/journals/${result.journal_id}/entry/${result.journal_entry_id}`
                                                        );
                                                    }
                                                })
                                                .catch((error) => {
                                                    console.error(
                                                        'Error cloning journal entry:',
                                                        error
                                                    );
                                                    alert(
                                                        'Failed to clone journal entry.'
                                                    );
                                                });
                                        }}
                                        class:hidden={!journals_journal_entry_obj.template}
                                        class="btn btn-sm preset-tonal-surface hover:preset-filled-secondary-500 p-1 *:hover:inline lg:text-xs"
                                        title="Clone this journal entry">
                                        <Copy size="1.25em" />
                                        <span class="hidden md:inline"
                                            >Clone</span>
                                    </button>
                                {:else}
                                    <Lock
                                        size="1.25em"
                                        class="mx-1 inline-block text-red-400 dark:text-red-600" />
                                    <span class="hidden text-xs text-gray-500"
                                        >Private</span>

                                    <!-- Button to copy the Markdown version -->
                                    <button
                                        type="button"
                                        onclick={() => {
                                            let tmp_entry_obj =
                                                journals_journal_entry_obj;

                                            navigator.clipboard
                                                .writeText(
                                                    tmp_entry_obj.content_encrypted
                                                )
                                                .then(() => {
                                                    alert(
                                                        'Encrypted content copied to clipboard!'
                                                    );
                                                })
                                                .catch((error) => {
                                                    console.error(
                                                        'Failed to copy content:',
                                                        error
                                                    );
                                                    alert(
                                                        'Failed to copy content.'
                                                    );
                                                });
                                        }}
                                        class:hidden={$lq__journal_obj?.cfg_json
                                            ?.hide_copy_encrypted}
                                        class="btn btn-sm preset-tonal-surface hover:preset-filled-secondary-500 p-1 text-xs *:hover:inline lg:text-sm"
                                        title="Copy the encrypted content">
                                        <FingerprintPattern size="1.25em" />
                                        <span class="hidden">
                                            Copy Encrypted
                                        </span>
                                    </button>
                                {/if}
                            </span>
                        </span>

                        <div
                            class="flex flex-row flex-wrap items-center justify-end gap-2">
                            <!-- Linked file count -->
                            <div
                                class="ae_linked_file_count flex flex-row flex-wrap items-center justify-start gap-0.5"
                                class:hidden={!journals_journal_entry_obj
                                    ?.data_json?.hosted_file_kv}>
                                <Files class="mx-1 inline-block" />
                                <span
                                    class="hidden text-xs text-gray-500 md:inline"
                                    >Linked files:</span>
                                <span
                                    class="text-sm font-semibold text-gray-500">
                                    {journals_journal_entry_obj?.data_json
                                        ?.hosted_file_kv
                                        ? Object.keys(
                                              journals_journal_entry_obj
                                                  ?.data_json?.hosted_file_kv
                                          ).length
                                        : 0}×
                                </span>
                            </div>

                            <!-- Tags for journal entry. Comma delimited list. -->
                            {#if journals_journal_entry_obj.tags && journals_journal_entry_obj.tags.length}
                                <div
                                    class="tags flex flex-row flex-wrap items-center justify-start gap-0.5 p-1">
                                    <Tags class="mx-1 inline-block" />
                                    <span
                                        class="hidden text-xs text-gray-500 md:inline"
                                        >Tags:</span>

                                    {#each journals_journal_entry_obj.tags.split(',') as tag (tag)}
                                        <span
                                            class="btn btn-sm preset-tonal-tertiary hover:preset-tonal-tertiary border-tertiary-500 border px-2 py-1 transition"
                                            title={`Tag: ${tag.trim()}`}>
                                            {tag.trim()}
                                        </span>
                                    {/each}
                                </div>
                            {/if}

                            <!-- Category code for journal entry -->
                            {#if journals_journal_entry_obj.category_code}
                                <button
                                    type="button"
                                    onclick={() => {
                                        if (
                                            $journals_loc.entry
                                                .qry__category_code ==
                                            journals_journal_entry_obj.category_code
                                        ) {
                                            $journals_loc.entry.qry__category_code =
                                                null;
                                        } else {
                                            $journals_loc.entry.qry__category_code =
                                                journals_journal_entry_obj.category_code;
                                        }
                                        if (
                                            $journals_loc.entry
                                                .search_version === undefined
                                        )
                                            $journals_loc.entry.search_version = 0;
                                        $journals_loc.entry.search_version++;
                                    }}
                                    class:bg-green-100={$journals_loc.entry
                                        .qry__category_code ==
                                        journals_journal_entry_obj.category_code}
                                    class="btn btn-sm preset-outlined-secondary hover:preset-filled-secondary-500 px-2 py-1 transition"
                                    title={`Filter by category: ${journals_journal_entry_obj.category_code}`}>
                                    <Shapes class="mx-1 inline-block" />
                                    {journals_journal_entry_obj.category_code ??
                                        '-- no category --'}
                                </button>
                            {/if}

                            <a
                                href="/journals/{journals_journal_entry_obj?.journal_id ??
                                    $lq__journal_obj?.journal_id}/entry/{journals_journal_entry_obj?.journal_entry_id}"
                                class="btn preset-tonal-primary border-primary-500 hover:preset-filled-primary-500 border transition"
                                title={`View ID: ${journals_journal_entry_obj?.id}
${journals_journal_entry_obj?.name ?? ae_util.iso_datetime_formatter(journals_journal_entry_obj.created_on, 'datetime_iso_12_no_seconds')}
Journal ID: ${journals_journal_entry_obj?.journal_id}
`}>
                                <NotebookPen class="mx-1 inline-block" />
                                <span class="hidden md:inline"> View </span>
                            </a>

                            <!-- Button to show a modal that will allow for a quick append to Journal Entry option. -->
                            <button
                                type="button"
                                onclick={() => {
                                    $journals_sess.show__modal_append__journal_entry_id =
                                        journals_journal_entry_obj?.id;
                                    tmp_entry_obj = JSON.parse(
                                        JSON.stringify(
                                            journals_journal_entry_obj
                                        )
                                    );
                                }}
                                class="btn btn-icon btn-sm preset-tonal-surface border-surface-500 hover:preset-filled-secondary-500 border transition"
                                title={$lq__journal_obj?.cfg_json
                                    ?.entry_add_text == 'append'
                                    ? 'Append to Journal Entry'
                                    : 'Prepend to Journal Entry'}>
                                <ListPlus />
                            </button>
                        </div>
                    </header>

                    {#if journals_journal_entry_obj.content}
                        <div
                            class:hidden={journals_journal_entry_obj.hide ||
                                (journals_journal_entry_obj.private &&
                                    $journals_slct.journal_obj?.cfg_json
                                        .hide_private) ||
                                (journals_journal_entry_obj.personal &&
                                    $journals_slct.journal_obj?.cfg_json
                                        .hide_personal) ||
                                (journals_journal_entry_obj.professional &&
                                    $journals_slct.journal_obj?.cfg_json
                                        .hide_professional)}
                            class="journal__content
                    w-full overflow-scroll
                    rounded-lg border
                    border-gray-200 bg-gray-100
                    p-1 font-mono
                    text-sm text-wrap whitespace-pre-wrap
                    text-gray-900 shadow-lg transition-all delay-1000
                    duration-1000
                    ease-in-out hover:border-blue-500 hover:bg-blue-100
                    hover:delay-1000 hover:duration-200 active:z-10
                    active:delay-100
                    active:duration-200
                    dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:border-blue-500
                    dark:hover:bg-blue-950
                    {$journals_slct.journal_obj.cfg_json.entry_li_max_height
                                ? `${$journals_slct.journal_obj.cfg_json.entry_li_max_height}`
                                : ''}

                    {$journals_slct.journal_obj.cfg_json
                                .entry_li_click_max_height
                                ? `${$journals_slct.journal_obj.cfg_json.entry_li_click_max_height}`
                                : ''}

                    {$journals_slct.journal_obj.cfg_json
                                .entry_li_hover_max_height
                                ? `${$journals_slct.journal_obj.cfg_json.entry_li_hover_max_height}`
                                : ''}
                    ">
                            {@html journals_journal_entry_obj.content}
                        </div>

                        <article
                            class="prose hidden"
                            id="rendered_journal_entry_content_{journals_journal_entry_obj.journal_entry_id}">
                            {@html journals_journal_entry_obj?.content_md_html}
                        </article>
                    {/if}

                    <section
                        class:hidden={!journals_journal_entry_obj?.original_datetime &&
                            !journals_journal_entry_obj?.original_timezone}
                        class="ae_section journal_entry__entry">
                        <div
                            class="ae_group"
                            class:hidden={!journals_journal_entry_obj?.original_datetime &&
                                !journals_journal_entry_obj?.original_timezone}>
                            <span class="ae_label text-sm"
                                >Original date/time:</span>
                            {#if journals_journal_entry_obj.original_datetime}
                                <span
                                    class="ae_value ae_prop prop_original_datetime font-semibold"
                                    >{ae_util.iso_datetime_formatter(
                                        journals_journal_entry_obj.original_datetime,
                                        'datetime_12_long'
                                    )}</span>
                            {/if}
                            {#if journals_journal_entry_obj.original_timezone}
                                <span class="ae_label text-sm">Timezone:</span>
                                <span class="ae_value font-semibold"
                                    >{journals_journal_entry_obj.original_timezone}</span>
                            {/if}
                        </div>
                    </section>

                    <section
                        class="ae_meta mt-2 flex flex-col items-center justify-center gap-2 text-xs text-gray-500 sm:flex-row">
                        <span
                            class:hidden={!$ae_loc.trusted_access ||
                                !$ae_loc.edit_mode}
                            class="flex flex-row items-center justify-center gap-1">
                            <span class="journal_entry__created_on">
                                Created:
                                {ae_util.iso_datetime_formatter(
                                    journals_journal_entry_obj.created_on,
                                    'datetime_12_long'
                                )}
                            </span>
                            <span
                                class:hidden={!journals_journal_entry_obj.updated_on}
                                class="journal_entry__updated_on">
                                Last update:
                                {ae_util.iso_datetime_formatter(
                                    journals_journal_entry_obj.updated_on,
                                    'datetime_12_long'
                                )}
                            </span>
                        </span>

                        <!-- Set/unset hide (boolean) -->
                        <button
                            type="button"
                            onclick={() => {
                                let data_kv = {
                                    hide: journals_journal_entry_obj?.hide
                                        ? false
                                        : true
                                };
                                journals_func
                                    .update_ae_obj__journal_entry({
                                        api_cfg: $ae_api,
                                        journal_entry_id:
                                            journals_journal_entry_obj.journal_entry_id,
                                        data_kv: data_kv,
                                        log_lvl: log_lvl
                                    })
                                    .then(() => {})
                                    .catch((error) => {
                                        console.error(
                                            'Error updating journal entry:',
                                            error
                                        );
                                        alert(
                                            'Failed to update journal entry.'
                                        );
                                    });
                            }}
                            class:hidden={!$ae_loc.edit_mode}
                            class="btn btn-sm preset-tonal-surface hover:preset-filled-warning-500 px-2 py-1 transition"
                            title={`Set entry as ${journals_journal_entry_obj.hide ? 'visible' : 'hidden'}`}>
                            {#if journals_journal_entry_obj.hide}
                                <EyeOff
                                    strokeWidth="1"
                                    class="text-error-500/60 inline-block" />
                                <span class="hidden md:inline">Hidden</span>
                            {:else}
                                <Eye
                                    strokeWidth="2.5"
                                    class="text-success-700 dark:text-success-400 inline-block" />
                                <span class="hidden lg:inline">Visible</span>
                            {/if}
                        </button>
                    </section>
                </div>
            {/each}

            <!-- Modal for quick append to Journal Entry -->
            {#if $journals_sess.show__modal_append__journal_entry_id}
                <AeCompModalJournalEntryAppend
                    bind:open={show_append_modal}
                    journal_entry={tmp_entry_obj}
                    journal_config={$lq__journal_obj?.cfg_json}
                    on_close={handle_modal_close}
                    on_update={handle_modal_update}
                    {log_lvl} />
            {/if}
        {:else}
            <div
                class="flex flex-col items-center justify-center p-10 text-center opacity-50">
                <BookOpenText size="3em" class="mx-auto mb-2 opacity-20" />
                <p>
                    No Journal Entry available to show. Please check the query
                    filters or create a new Entry.
                </p>
            </div>
        {/if}
    </section>
</div>
