<script lang="ts">
    import { Modal } from 'flowbite-svelte';
    import { Check, X } from 'lucide-svelte';
    import { ae_util } from '$lib/ae_utils/ae_utils';
    import { journals_func } from '$lib/ae_journals/ae_journals_functions';
    import { ae_api } from '$lib/stores/ae_stores';
    import type { key_val } from '$lib/stores/ae_stores';

    interface Props {
        open: boolean;
        journal_entry: key_val;
        journal_config: key_val; // The cfg_json from the journal object
        mode?: 'append' | 'prepend' | 'auto';
        on_close: () => void;
        on_update: () => void;
        log_lvl?: number;
    }

    let {
        open = $bindable(false),
        journal_entry,
        journal_config,
        mode = 'auto',
        on_close,
        on_update,
        log_lvl = 0
    }: Props = $props();
    // Local State
    let tmp_entry_obj: key_val = $state({});

    // Header Options
    let add_timestamp_header: boolean = $state(true);
    let add_timestamp_header_w_day_of_week: boolean = $state(true);
    let add_text_header: string = $state('');
    let add_text: string = $state('');

    // Change detection
    let has_changes: boolean = $derived(
        add_text_header.length > 0 || add_text.length > 0
    );

    // Initialize tmp object when entry changes or modal opens
    $effect(() => {
        if (open && journal_entry) {
            tmp_entry_obj = JSON.parse(JSON.stringify(journal_entry));
            // Reset fields
            add_text_header = '';
            add_text = '';
        }
    });

    async function handle_save() {
        let current_entry_content = tmp_entry_obj?.content || '';
        let add_content = '';
        let new_content = current_entry_content;

        // Construct the header/content to add (Following original logic)
        let timestamp_str = ae_util.iso_datetime_formatter(
            new Date(),
            'datetime_iso_12_no_seconds'
        );
        let day_of_week_str = add_timestamp_header_w_day_of_week
            ? ' (' +
              ae_util.iso_datetime_formatter(new Date(), 'week_long') +
              ')'
            : '';

        if (add_timestamp_header && add_text_header) {
            add_content =
                '## ' +
                timestamp_str +
                day_of_week_str +
                ' - ' +
                add_text_header.trim() +
                '\n' +
                add_text.trim() +
                '\n\n';
        } else if (add_timestamp_header) {
            add_content =
                '## ' +
                timestamp_str +
                day_of_week_str +
                '\n' +
                add_text.trim() +
                '\n\n';
        } else if (add_text_header) {
            add_content =
                '## ' +
                add_text_header.trim() +
                day_of_week_str +
                '\n' +
                add_text.trim() +
                '\n\n';
        } else {
            add_content = add_text.trim() + '\n\n';
        }

        // Determine Append or Prepend
        let effective_mode = mode;
        if (effective_mode === 'auto') {
            effective_mode = journal_config?.entry_add_text || 'append';
        }

        if (effective_mode == 'prepend') {
            new_content = add_content + new_content;
        } else {
            // Append
            new_content = new_content.trim() + '\n\n' + add_content;
        }

        new_content = new_content.trim() + '\n';

        let data_kv = { content: new_content };

        try {
            let update_result =
                await journals_func.update_ae_obj__journal_entry({
                    api_cfg: $ae_api,
                    journal_entry_id: tmp_entry_obj?.journal_entry_id,
                    data_kv: data_kv,
                    log_lvl: log_lvl
                });

            if (update_result) {
                // Success
                on_update();
                open = false;
            } else {
                alert('Failed to update journal entry.');
            }
        } catch (error) {
            console.error('Error updating journal entry:', error);
            alert('Failed to update journal entry.');
        }
    }
</script>

<Modal
    title="{(mode === 'auto' ? journal_config?.entry_add_text : mode) ==
    'append'
        ? 'Append to'
        : 'Prepend to'} Journal Entry: {journal_entry?.name ??
        journal_entry?.created_on}"
    bind:open
    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 gap-1 mx-auto w-full"
>
    <div class="modal">
        <div class="modal-box">
            <div class="flex flex-col gap-1">
                <!-- Checkbox Options -->
                <div>
                    <input
                        type="checkbox"
                        id="append_timestamp_header"
                        bind:checked={add_timestamp_header}
                        class="p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500 inline-block"
                    />
                    <label
                        for="append_timestamp_header"
                        class="p-2 inline-block"
                    >
                        Use timestamp as Markdown header
                    </label>

                    <input
                        type="checkbox"
                        id="append_timestamp_header_w_day_of_week"
                        bind:checked={add_timestamp_header_w_day_of_week}
                        class="p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500 inline-block"
                    />
                    <label
                        for="append_timestamp_header_w_day_of_week"
                        class="p-2 inline-block"
                    >
                        Include day of week
                    </label>
                </div>

                <!-- Text Header Input -->
                <input
                    type="text"
                    placeholder="Markdown header for content (Optional)"
                    bind:value={add_text_header}
                    class="grow min-h-12 h-full w-full p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500"
                />

                <!-- Main Content Area -->
                <textarea
                    bind:value={add_text}
                    class="grow min-h-48 h-full w-full p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500"
                    placeholder="Content to {mode === 'auto'
                        ? journal_config?.entry_add_text
                        : mode}..."
                >
                </textarea>
            </div>

            <div class="modal-action flex justify-end gap-2 mt-4">
                <button
                    type="button"
                    disabled={!has_changes}
                    onclick={handle_save}
                    class="btn btn-sm md:btn-md lg:btn-lg min-w-32 hover:variant-outline-success hover:preset-filled-success-500"
                    class:preset-filled-primary-500={has_changes}
                    class:preset-filled-surface-500={!has_changes}
                >
                    <Check class="mr-1" />
                    Update
                </button>
                <button
                    type="button"
                    onclick={on_close}
                    class="btn preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition"
                >
                    <X class="mr-1" />
                    Cancel
                </button>
            </div>
        </div>
    </div>
</Modal>
