<script lang="ts">
    import { thumbUrl } from '$lib/api/client';
    import type { Bookmark } from '$lib/api/bookmarks';
    import { overflowTooltip } from '$lib/actions/overflowTooltip';
    import BookImage from '@lucide/svelte/icons/book-image';

    let {
        bookmarks,
        testid
    }: {
        bookmarks: Bookmark[];
        testid?: string;
    } = $props();
</script>

<ul class="bookmark-list" data-testid={testid ?? 'bookmark-list'}>
    {#each bookmarks as b (b.id)}
        <li class="bookmark">
            <a href="/manga/{b.manga_id}" class="cover-link" aria-hidden="true" tabindex="-1">
                {#if b.manga_cover_image_path}
                    <img
                        src={thumbUrl(b.manga_cover_image_path, 320)}
                        alt=""
                        class="cover"
                        loading="lazy"
                        decoding="async"
                    />
                {:else}
                    <div class="cover cover-placeholder">
                        <BookImage size={22} aria-hidden="true" />
                    </div>
                {/if}
            </a>
            <div class="meta">
                <a
                    href="/manga/{b.manga_id}"
                    class="title"
                    data-testid="bookmark-title"
                    use:overflowTooltip={b.manga_title ?? 'Unknown manga'}
                >
                    {b.manga_title ?? 'Unknown manga'}
                </a>
                {#if b.chapter_id && b.chapter_number != null}
                    <a
                        href="/manga/{b.manga_id}/chapter/{b.chapter_id}"
                        class="target"
                    >
                        Chapter {b.chapter_number}{#if b.page != null && b.page > 0} — page {b.page}{/if}
                    </a>
                {:else if b.chapter_id}
                    <!-- Chapter bookmark whose chapter was deleted;
                         chapter_id != null but chapter_number == null
                         because the LEFT JOIN found nothing. -->
                    <span class="target muted">(chapter removed)</span>
                {:else}
                    <span class="target muted">Whole manga</span>
                {/if}
                <span class="created">
                    Bookmarked {new Date(b.created_at).toLocaleDateString()}
                </span>
            </div>
        </li>
    {/each}
</ul>

<style>
    .bookmark-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .bookmark {
        display: grid;
        grid-template-columns: 64px 1fr;
        gap: var(--space-4);
        align-items: start;
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--border);
    }

    .cover-link {
        display: block;
        line-height: 0;
    }

    .cover {
        width: 64px;
        height: 96px;
        object-fit: cover;
        border-radius: var(--radius-md);
        background: var(--surface);
    }

    .cover-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        user-select: none;
    }

    .meta {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        min-width: 0;
    }

    .title {
        font-weight: var(--weight-semibold);
        font-size: var(--font-base);
        color: var(--text);
    }

    .title:hover {
        color: var(--primary);
    }

    .target {
        font-size: var(--font-sm);
    }

    .muted {
        color: var(--text-muted);
    }

    .created {
        color: var(--text-muted);
        font-size: var(--font-xs);
    }
</style>
