<script lang="ts">
import { api } from '$lib/ae_api/api';
import { ae_api } from '$lib/stores/ae_stores';
import {
    journals_slct,
    journals_loc,
    journals_trig
} from '$lib/ae_journals/ae_journals_stores';
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import { BookType } from '@lucide/svelte';
// Props
let {
    class: className = '',
    placeholder = 'Type your quick note... (First line = Title)',
    journals_li = [] // Optional list of journals to select from
} = $props();

// State
let note_content = $state('');
let is_submitting = $state(false);

// Derived / Local target
// We prefer the persisted 'qry__journal_id' if we are on the main landing page
let selected_journal_id = $state($journals_loc.entry.qry__journal_id);

// If a journal is explicitly selected via slct (e.g. we are in a journal view), use that
let target_journal_id = $derived(
    $journals_slct.journal_id || selected_journal_id
);

async function handle_submit() {
    if (!note_content.trim()) return;
    if (!target_journal_id) {
        alert('Please select a target journal first.');
        return;
    }

    is_submitting = true;

    const lines = note_content.trim().split('\n');
    let name = lines[0].substring(0, 100);
    if (lines[0].length > 100) name += '...';

    // Remove the first line (title) from the content
    const entry_content = lines.slice(1).join('\n').trim();

    const data_kv = {
        name: name,
        content: entry_content,
        type_code: 'note',
        private: false, // Ensure notes are public/decrypted by default
        enable: true,
        hide: false
    };

    try {
        const res = await journals_func.create_ae_obj__journal_entry({
            api_cfg: $ae_api,
            journal_id: target_journal_id, // Pass string ID here
            data_kv: data_kv,
            log_lvl: 1
        });

        if (res) {
            note_content = '';
            // Trigger refresh
            $journals_trig.journal_entry_li = true;
        } else {
            alert('Failed to create note.');
        }
    } catch (error) {
        console.error('Error creating journal entry:', error);
        alert('Failed to create note.');
    }

    is_submitting = false;
}

function handle_keydown(e: KeyboardEvent) {
    if (e.ctrlKey && e.key === 'Enter') {
        handle_submit();
    }
}

function handle_journal_change(e: Event) {
    const val = (e.target as HTMLSelectElement).value;
    selected_journal_id = val;
    $journals_loc.entry.qry__journal_id = val; // Persist choice
}
</script>

<div class="card preset-tonal-surface space-y-4 p-4 {className}">
    <header
        class="flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-center">
        <h3 class="h3 flex items-center gap-2">
            <BookType size="1.2em" class="text-primary-500" />
            Quick Add
        </h3>

        {#if journals_li && journals_li.length > 0}
            <div class="w-full sm:w-auto">
                <select
                    class="select select-sm font-bold"
                    value={target_journal_id}
                    onchange={handle_journal_change}>
                    <option value="" disabled selected={!target_journal_id}
                        >Select Target Journal...</option>
                    {#each journals_li as journal (journal.id)}
                        <option value={journal.id}>{journal.name}</option>
                    {/each}
                </select>
            </div>
        {:else if !target_journal_id}
            <span class="badge preset-tonal-error">No Journal Selected</span>
        {/if}
    </header>

    <textarea
        class="textarea"
        rows="3"
        bind:value={note_content}
        {placeholder}
        onkeydown={handle_keydown}
        disabled={is_submitting}></textarea>

    <div class="flex items-center justify-between">
        <span
            class="hidden font-mono text-[10px] tracking-tighter uppercase opacity-50 sm:block">
            Press Ctrl + Enter to save
        </span>
        <div class="flex grow justify-end space-x-2 sm:grow-0">
            <button
                type="button"
                class="btn btn-sm preset-tonal-surface"
                onclick={() => (note_content = '')}
                disabled={is_submitting || note_content.length === 0}>
                Clear
            </button>
            <button
                type="button"
                class="btn btn-sm preset-filled-primary font-bold"
                onclick={handle_submit}
                disabled={is_submitting ||
                    !target_journal_id ||
                    note_content.length === 0}>
                {#if is_submitting}Saving...{:else}Add Note{/if}
            </button>
        </div>
    </div>
</div>
