<script lang="ts">
    /**
     * JournalEntry_Metadata.svelte
     * Extracted 2026-01-08 to modularize the massive Journal Entry God Component.
     * Displays creation, update, and original datetime/timezone information.
     */
    import { ae_util } from '$lib/ae_utils/ae_utils';
    import { ae_loc } from '$lib/stores/ae_stores';
    import type { ae_JournalEntry } from '$lib/types/ae_types';

    interface Props {
        entry: ae_JournalEntry;
    }

    let { entry }: Props = $props();
</script>

<section class="journal-metadata w-full space-y-4">
    <!-- Original Date/Time Info -->
    {#if entry.original_datetime || entry.original_timezone}
        <div class="flex flex-col sm:flex-row gap-4 p-3 bg-surface-500/5 rounded-lg border border-surface-500/20">
            <div class="flex flex-col">
                <span class="text-xs font-semibold uppercase tracking-wider text-surface-500">Original Date/Time</span>
                <span class="text-sm font-medium">
                    {entry.original_datetime ? ae_util.iso_datetime_formatter(entry.original_datetime, 'datetime_12_long') : '--'}
                </span>
            </div>
            {#if entry.original_timezone}
                <div class="flex flex-col">
                    <span class="text-xs font-semibold uppercase tracking-wider text-surface-500">Timezone</span>
                    <span class="text-sm font-medium">{entry.original_timezone}</span>
                </div>
            {/if}
        </div>
    {/if}

    <!-- System Timestamps -->
    <div class="flex flex-col sm:flex-row justify-between items-center gap-2 px-1 text-xs text-surface-500">
        <div class="flex gap-4">
            <span title="Creation date">
                <span class="font-semibold">Created:</span> 
                {ae_util.iso_datetime_formatter(entry.created_on, 'datetime_12_long')}
            </span>
            {#if entry.updated_on}
                <span title="Last update">
                    <span class="font-semibold">Updated:</span> 
                    {ae_util.iso_datetime_formatter(entry.updated_on, 'datetime_12_long')}
                </span>
            {/if}
        </div>

        {#if entry.journal_entry_type}
            <span class="badge variant-soft-surface">
                Type: {entry.journal_entry_type}
            </span>
        {/if}
    </div>
</section>
