<script lang="ts">
    /**
     * AE_MetadataFooter.svelte
     * GENERIC Aether Metadata Display
     * Reusable across all modules to standardize created/updated/original info.
     */
    import { ae_util } from '$lib/ae_utils/ae_utils';
    import { ae_loc } from '$lib/stores/ae_stores';
    import { Clock, CalendarClock, Globe } from '@lucide/svelte';

    interface Props {
        obj: any;
        showOriginal?: boolean;
        containerClass?: string;
    }

    let { 
        obj, 
        showOriginal = true,
        containerClass = "ae_meta flex flex-col gap-2 p-4 border-t border-surface-500/10 text-xs text-surface-500 w-full"
    }: Props = $props();
</script>

<footer class={containerClass}>
    <!-- Original Date/Time Info (if applicable) -->
    {#if showOriginal && (obj?.original_datetime || obj?.original_timezone)}
        <div class="flex flex-row flex-wrap gap-x-4 gap-y-1 items-center bg-surface-500/5 p-2 rounded">
            <span class="flex items-center gap-1">
                <Globe size="1.1em" class="opacity-70" />
                <span class="font-bold uppercase tracking-tighter">Original:</span>
                {obj?.original_datetime ? ae_util.iso_datetime_formatter(obj.original_datetime, 'datetime_iso_12_no_seconds') : '--'}
            </span>
            {#if obj?.original_timezone}
                <span class="flex items-center gap-1">
                    <span class="font-bold uppercase tracking-tighter">TZ:</span>
                    {obj.original_timezone}
                </span>
            {/if}
        </div>
    {/if}

    <!-- System Timestamps -->
    <div class="flex flex-col sm:flex-row justify-between items-center gap-2 px-1">
        <div class="flex flex-wrap gap-4 justify-center sm:justify-start">
            <span class="flex items-center gap-1" title="Creation date">
                <CalendarClock size="1.1em" class="opacity-70 text-primary-500" />
                <span class="font-semibold uppercase tracking-tighter">Created:</span> 
                {ae_util.iso_datetime_formatter(obj?.created_on, 'datetime_iso_12_no_seconds')}
            </span>
            {#if obj?.updated_on}
                <span class="flex items-center gap-1" title="Last update">
                    <Clock size="1.1em" class="opacity-70 text-secondary-500" />
                    <span class="font-semibold uppercase tracking-tighter">Updated:</span> 
                    {ae_util.iso_datetime_formatter(obj.updated_on, 'datetime_iso_12_no_seconds')}
                </span>
            {/if}
        </div>

        {#if obj?.journal_entry_type || obj?.type}
            <span class="badge variant-soft-surface text-[10px] uppercase font-bold tracking-widest">
                Type: {obj?.journal_entry_type || obj?.type}
            </span>
        {/if}
    </div>
</footer>
