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

    /**
     * Single row in the /search Chapters tab. Renders the breadcrumb
     * (manga title · chapter label), a match-count pill, and a
     * thumbnail strip of up to 3 matching pages. Clicking the row
     * lands on the reader at chapter page 1; the reader will respect
     * the user's single/continuous mode preference.
     */
    let {
        item,
        testid
    }: {
        item: TaggedChapterAggregate;
        testid?: string;
    } = $props();

    const href = $derived(
        `/manga/${item.manga_id}/chapter/${item.chapter_id}`
    );
    const primaryCover = $derived(item.sample_storage_keys[0] ?? null);
</script>

<li class="row" data-testid={testid}>
    <a {href} class="cover-link" aria-hidden="true" tabindex="-1">
        {#if primaryCover}
            <img src={fileUrl(primaryCover)} alt="" class="cover" loading="lazy" decoding="async" />
        {:else}
            <div class="cover cover-placeholder"></div>
        {/if}
    </a>
    <div class="meta">
        <a class="title" {href}>
            {item.manga_title} · {chapterLabel({
                number: item.chapter_number,
                title: item.chapter_title
            })}
        </a>
        <span class="match-count">
            {item.match_count}
            {item.match_count === 1 ? 'page' : 'pages'}
        </span>
        {#if item.sample_storage_keys.length > 1}
            <div class="samples">
                {#each item.sample_storage_keys.slice(1) as key (key)}
                    <img src={fileUrl(key)} alt="" class="sample" loading="lazy" decoding="async" />
                {/each}
            </div>
        {/if}
    </div>
</li>

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

    .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);
    }

    .cover-placeholder {
        background: var(--surface-elevated);
    }

    .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;
    }

    .match-count {
        align-self: flex-start;
        background: var(--primary-soft-bg);
        color: var(--primary);
        font-size: var(--font-xs);
        padding: 2px var(--space-2);
        border-radius: var(--radius-pill);
    }

    .samples {
        display: flex;
        gap: var(--space-1);
        margin-top: var(--space-1);
    }

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