<script lang="ts">
    /**
     * ae_comp__journal_obj_li.svelte
     * Modernized Journal List Component
     * Layout: Responsive Grid (1 col mobile, 2 col tablet, 3 col desktop)
     * Style: Tailwind 4 + Skeleton UI Reference Standard
     */
    import {
        BookOpenText,
        BookType,
        Hash,
        Calendar,
        Clock
    } from 'lucide-svelte';
    import { ae_util } from '$lib/ae_utils/ae_utils';
    import { ae_loc } from '$lib/stores/ae_stores';

    interface Props {
        lq__journal_obj_li: any;
    }

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

<!-- Responsive Grid Container -->
<section
    class="journal_list grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-7xl px-4"
>
    {#if $lq__journal_obj_li && $lq__journal_obj_li.length}
        {#each $lq__journal_obj_li as journal, index}
            <div
                class="
                    journal_card
                    group relative
                    flex flex-col justify-between
                    bg-surface-50 dark:bg-surface-900
                    border border-surface-500/20 rounded-xl
                    p-5 shadow-sm hover:shadow-xl hover:border-primary-500/50
                    transition-all duration-200 ease-in-out
                "
                class:hidden={(journal?.hide || !journal?.enable) &&
                    !$ae_loc.trusted_access}
                class:opacity-60={journal.hide}
                class:border-warning-500={!journal?.enable}
            >
                <!-- Top Section: Title & Badge -->
                <div class="space-y-3">
                    <header class="flex justify-between items-start gap-2">
                        <div class="flex items-center gap-3">
                            <div
                                class="p-2 bg-primary-500/10 rounded-lg text-primary-500 group-hover:bg-primary-500 group-hover:text-white transition-colors"
                            >
                                <BookType size="1.5em" />
                            </div>
                            <h3
                                class="text-xl font-bold text-surface-900 dark:text-surface-100 line-clamp-1"
                            >
                                {journal.name}
                            </h3>
                        </div>

                        {#if journal.type_code}
                            <span
                                class="badge preset-tonal-warning text-[10px] uppercase tracking-wider font-bold"
                            >
                                {journal.type_code}
                            </span>
                        {/if}
                    </header>

                    <!-- Description (Power User / Edit Mode Only) -->
                    {#if journal.description && $ae_loc.edit_mode}
                        <div
                            class="prose prose-sm dark:prose-invert max-h-24 overflow-y-auto bg-surface-100/50 dark:bg-surface-800/50 p-3 rounded-lg text-xs font-mono"
                        >
                            {@html journal.description_md_html}
                        </div>
                    {/if}

                    <!-- Quick Stats (Clean View) -->
                    <div
                        class="flex items-center gap-4 text-xs text-surface-600 dark:text-surface-400"
                    >
                        <div
                            class="flex items-center gap-1"
                            title="Entry Count"
                        >
                            <Hash size="1.2em" />
                            <span class="font-bold"
                                >{journal.journal_entry_count ?? 0}</span
                            >
                        </div>
                        <div
                            class="flex items-center gap-1"
                            title="Last Updated"
                        >
                            <Clock size="1.2em" />
                            <span
                                >{ae_util.iso_datetime_formatter(
                                    journal.updated_on || journal.created_on,
                                    'date_short'
                                )}</span
                            >
                        </div>
                    </div>
                </div>

                <!-- Bottom Section: Actions -->
                <div
                    class="mt-6 pt-4 border-t border-surface-500/10 flex flex-col gap-3"
                >
                    <a
                        href="/journals/{journal?.journal_id}"
                        class="btn variant-filled-primary w-full font-bold shadow-md hover:scale-[1.02] active:scale-95 transition-all"
                    >
                        <BookOpenText size="1.2em" class="mr-2" />
                        <span>Open Journal</span>
                    </a>

                    <!-- Admin Metadata (Edit Mode Only) -->
                    {#if $ae_loc.edit_mode && $ae_loc.administrator_access}
                        <div
                            class="flex items-center justify-center gap-2 text-[10px] opacity-50 font-mono"
                        >
                            <Calendar size="1em" />
                            <span
                                >Created: {ae_util.iso_datetime_formatter(
                                    journal.created_on,
                                    'datetime_iso_12_no_seconds'
                                )}</span
                            >
                        </div>
                    {/if}
                </div>

                <!-- Status Indicators (Edit Mode Only) -->
                {#if $ae_loc.edit_mode}
                    <div class="absolute -top-2 -right-2 flex gap-1">
                        {#if journal.hide}
                            <span
                                class="badge-icon variant-filled-surface shadow-sm"
                                title="Hidden">🚫</span
                            >
                        {/if}
                        {#if !journal.enable}
                            <span
                                class="badge-icon variant-filled-warning shadow-sm"
                                title="Disabled">⚠️</span
                            >
                        {/if}
                    </div>
                {/if}
            </div>
        {/each}
    {:else}
        <div
            class="col-span-full p-20 text-center opacity-50 flex flex-col items-center gap-4"
        >
            <BookType size="4em" />
            <p class="text-xl">No journals found in this view.</p>
        </div>
    {/if}
</section>
