<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, Calendar, Clock, Hash } 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>

<!--
    Compact mobile-first list — the entire row is the tap target.
    Glow effect mirrors the Quick Add section above it.
    Uses plain Tailwind gray scale with explicit dark: variants — no Skeleton paired utilities —
    so behavior is predictable regardless of which Skeleton theme is active.
-->
<div class="group/list relative w-full max-w-2xl">
    <!-- Glow ring behind the list, same technique as Quick Add -->
    <div
        class="from-primary-500 to-secondary-500 pointer-events-none absolute -inset-1
               rounded-2xl bg-linear-to-r opacity-10 blur
               transition duration-700
               group-hover/list:opacity-25 dark:opacity-20 dark:group-hover/list:opacity-35">
    </div>

    <section
        class="journal_list relative w-full space-y-1.5 rounded-2xl border
                     border-gray-200 bg-white
                     p-2 shadow-xl sm:p-3
                     dark:border-gray-700 dark:bg-gray-900">
        {#if $lq__journal_obj_li && $lq__journal_obj_li.length}
            {#each $lq__journal_obj_li as journal (journal.journal_id)}
                <a
                    href="/journals/{journal?.journal_id}"
                    class="journal_card group border-l-primary-500/60
                           hover:border-l-primary-500 relative flex items-center gap-3
                           rounded-xl border
                           border-l-4 border-gray-200 bg-gray-50
                           px-4 py-3
                           shadow-sm transition-all
                           duration-150 ease-in-out
                           hover:bg-gray-100 hover:shadow-md
                           active:scale-[0.99]
                           dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
                    class:hidden={(journal?.hide || !journal?.enable) &&
                        !$ae_loc.trusted_access}
                    class:opacity-60={journal.hide}
                    class:!border-l-warning-500={!journal?.enable}>
                    <!-- Icon: fixed size, never squashed -->
                    <div
                        class="bg-primary-500/10 text-primary-500 group-hover:bg-primary-500 shrink-0 rounded-lg
                                p-2 transition-colors group-hover:text-white">
                        <BookType size="1.3em" />
                    </div>

                    <!-- Name + badge: min-w-0 flex-1 lets text shrink and wrap -->
                    <div class="min-w-0 flex-1">
                        <div
                            class="text-sm leading-snug font-bold
                                    break-words text-gray-900
                                    sm:text-base dark:text-gray-100">
                            {journal.name}
                        </div>
                        <div class="mt-0.5 flex flex-wrap items-center gap-2">
                            {#if journal.type_code}
                                <span
                                    class="badge preset-tonal-warning text-[10px] font-bold tracking-wider uppercase">
                                    {journal.type_code}
                                </span>
                            {/if}
                            <!-- Description snippet: edit mode only -->
                            {#if journal.description && $ae_loc.edit_mode}
                                <span
                                    class="max-w-[16rem] truncate font-mono text-[11px] text-gray-500 dark:text-gray-400">
                                    {ae_util.strip_html
                                        ? ae_util
                                              .strip_html(journal.description)
                                              .slice(0, 60)
                                        : journal.description.slice(
                                              0,
                                              60
                                          )}&hellip;
                                </span>
                            {/if}
                        </div>
                    </div>

                    <!-- Stats: right-aligned, compact -->
                    <div
                        class="flex shrink-0 flex-col items-end gap-0.5
                                text-xs text-gray-500 dark:text-gray-400">
                        <div
                            class="flex items-center gap-1"
                            title="Entry Count">
                            <Hash size="0.85em" />
                            <span class="font-bold tabular-nums"
                                >{journal.journal_entry_count ??
                                    0}&times;</span>
                        </div>
                        <div
                            class="flex items-center gap-1"
                            title="Last Updated">
                            <Clock size="0.85em" />
                            <span class="tabular-nums"
                                >{ae_util.iso_datetime_formatter(
                                    journal.updated_on || journal.created_on,
                                    'date_short'
                                )}</span>
                        </div>
                        {#if $ae_loc.edit_mode && $ae_loc.administrator_access}
                            <div
                                class="flex items-center gap-1 opacity-40"
                                title="Created">
                                <Calendar size="0.85em" />
                                <span class="font-mono text-[10px] tabular-nums"
                                    >{ae_util.iso_datetime_formatter(
                                        journal.created_on,
                                        'date_short'
                                    )}</span>
                            </div>
                        {/if}
                    </div>

                    <!-- Chevron hint: desktop only -->
                    <BookOpenText
                        size="0.95em"
                        class="hidden shrink-0 opacity-0 transition-opacity group-hover:opacity-30 sm:block" />

                    <!-- Status overlays: edit mode only -->
                    {#if $ae_loc.edit_mode}
                        <div class="absolute -top-1.5 -right-1.5 flex gap-1">
                            {#if journal.hide}
                                <span
                                    class="badge-icon preset-tonal-surface shadow-sm"
                                    title="Hidden">🚫</span>
                            {/if}
                            {#if !journal.enable}
                                <span
                                    class="badge-icon preset-tonal-warning shadow-sm"
                                    title="Disabled">⚠️</span>
                            {/if}
                        </div>
                    {/if}
                </a>
            {/each}
        {:else}
            <div
                class="flex flex-col items-center gap-4 p-20 text-center text-gray-400 dark:text-gray-500">
                <BookType size="4em" />
                <p class="text-xl">No journals found in this view.</p>
            </div>
        {/if}
    </section>
</div>
