<script lang="ts">
    import { fileUrl } from '$lib/api/client';
    import { chapterLabel } from '$lib/api/chapters';
    import type { TaggedPageItem } from '$lib/api/page_tags';

    /**
     * Single row in any tagged-page list — used by both the library
     * Page-tags tab and the /search Pages tab. Links the cover and
     * the breadcrumb text to the reader at `?page=N` so the user
     * lands on the exact page they're looking at.
     *
     * `showTagPill` defaults true (library wants it). The /search
     * Pages tab can suppress it when a tag filter is already active,
     * to remove the noise of every row reading "#funny".
     */
    let {
        item,
        showTagPill = true,
        testid
    }: {
        item: TaggedPageItem;
        showTagPill?: boolean;
        testid?: string;
    } = $props();

    const readerHref = $derived(
        `/manga/${item.manga_id}/chapter/${item.chapter_id}?page=${item.page_number}`
    );
</script>

<li class="row" data-testid={testid}>
    <a href={readerHref} class="cover-link" aria-hidden="true" tabindex="-1">
        <img
            src={fileUrl(item.storage_key)}
            alt=""
            class="cover"
            loading="lazy"
            decoding="async"
        />
    </a>
    <div class="meta">
        <a class="title" href={`/manga/${item.manga_id}`}>{item.manga_title}</a>
        <a class="target" href={readerHref}>
            {chapterLabel({
                number: item.chapter_number,
                title: item.chapter_title
            })} — page {item.page_number}
        </a>
        {#if showTagPill}
            <span class="tag-pill">#{item.tag}</span>
        {/if}
    </div>
</li>

<style>
    .row {
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: var(--space-3);
        align-items: center;
    }

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

    .cover {
        width: 56px;
        aspect-ratio: 2 / 3;
        object-fit: cover;
        border-radius: var(--radius-sm);
        background: var(--surface);
    }

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

    .title {
        font-weight: var(--weight-semibold);
        color: var(--text);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

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

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

    .tag-pill {
        align-self: flex-start;
        background: var(--surface-elevated);
        color: var(--text-muted);
        font-size: var(--font-xs);
        padding: 2px var(--space-2);
        border-radius: var(--radius-pill);
    }
</style>
