<script lang="ts">
    /**
     * ae_comp__journal_entry_editor.svelte
     * Extracted 2026-01-08 to modularize the massive Journal Entry view.
     * Handles: CodeMirror vs Plain vs Rendered HTML for both View and Edit modes.
     */
    import { LockKeyhole, Save, RefreshCcw } from 'lucide-svelte';
    import { ae_loc } from '$lib/stores/ae_stores';
    import {
        journals_loc,
        journals_sess
    } from '$lib/ae_journals/ae_journals_stores';
    import AE_Comp_Editor_CodeMirror from '$lib/elements/AE_Comp_Editor_CodeMirror.svelte';
    import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';

    interface Props {
        entry: ae_JournalEntry;
        journal: ae_Journal;
        tmp_entry_obj: any; // Bindable
        editor_view?: any; // Bindable
        has_changed: boolean;
        updated_idb: boolean;
        on_save: () => void;
        on_force_reset?: () => void;
    }

    let {
        entry,
        journal,
        tmp_entry_obj = $bindable(),
        editor_view = $bindable(),
        has_changed,
        updated_idb,
        on_save,
        on_force_reset
    }: Props = $props();

    const is_editing = $derived(
        $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'
    );
</script>

<div
    class="journal-entry-editor-wrapper grow w-full flex flex-col items-center"
>
    {#if !is_editing}
        <!-- VIEW MODE -->
        <div class="w-full max-w-6xl p-4 prose dark:prose-invert">
            {@html tmp_entry_obj?.content_md_html || ''}
        </div>
    {:else}
        <!-- EDIT MODE -->
        {#if !tmp_entry_obj?.content && tmp_entry_obj?.content_encrypted}
            <!-- Decryption Required Message -->
            <div
                class="w-full max-w-6xl p-4 bg-error-100 dark:bg-error-900/30 text-error-900 dark:text-error-100 rounded-lg border border-error-500 flex flex-col gap-4"
            >
                <div class="space-y-2">
                    <div class="font-bold flex items-center gap-2">
                        <LockKeyhole size="1.25em" />
                        Decryption Required
                    </div>
                    <p class="text-sm">
                        This entry must be decrypted before it can be edited.
                    </p>
                    {#if tmp_entry_obj?.content === false}
                        <p
                            class="text-xs font-bold text-error-500 uppercase tracking-widest"
                        >
                            Decryption failed. Incorrect passcode.
                        </p>
                    {/if}
                </div>

                {#if $ae_loc.edit_mode && on_force_reset}
                    <div class="pt-4 border-t border-error-500/20">
                        <p class="text-xs mb-2 opacity-70 italic">
                            Passcode lost? You can force a reset to plain text,
                            but all currently encrypted data will be permanently
                            deleted.
                        </p>
                        <button
                            type="button"
                            class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 font-bold"
                            onclick={on_force_reset}
                        >
                            <RefreshCcw size="1.1em" class="mr-2" /> Force Reset to
                            Plain Text
                        </button>
                    </div>
                {/if}
            </div>
        {:else}
            <!-- Actual Editor -->
            {#if journal?.cfg_json?.pref_editor == 'codemirror'}
                <AE_Comp_Editor_CodeMirror
                    bind:content={tmp_entry_obj.content}
                    bind:editor_view
                    theme_mode={$ae_loc.theme_mode}
                    placeholder="Write using Markdown..."
                    class_li="p-2 preset-outlined-warning-300-700 shadow-lg rounded-lg w-full max-w-6xl bg-surface-50 dark:bg-surface-800"
                />
            {:else}
                <textarea
                    bind:value={tmp_entry_obj.content}
                    class="textarea grow w-full max-w-6xl p-4 font-mono shadow-lg rounded-lg border-orange-500/30 h-[500px] whitespace-pre-wrap break-words"
                    placeholder="Edit content..."
                ></textarea>
            {/if}

            <!-- Floating Save Button -->
            <button
                type="button"
                onclick={on_save}
                disabled={!has_changed}
                class="btn btn-sm md:btn-md lg:btn-lg fixed top-72 right-6 min-w-32 preset-filled-success shadow-xl z-20 transition-all"
                class:hidden={!has_changed}
            >
                <Save size="1.2em" class="mr-2" /> Save
            </button>

            <!-- Inline Save Button (Mobile/Context) -->
            <button
                type="button"
                onclick={on_save}
                disabled={!has_changed}
                class="btn preset-tonal-warning hover:preset-filled-warning-500 w-full max-w-96 mt-4"
                class:invisible={!has_changed}
            >
                <Save size="1.2em" class="mr-2" /> Save Changes
            </button>

            {#if updated_idb}
                <p
                    class="text-xs text-error-500 mt-2 font-bold animate-pulse uppercase tracking-widest"
                >
                    IDB object updated since last load!
                </p>
            {/if}
        {/if}
    {/if}
</div>
