<script lang="ts">
    import { fileUrl } from '$lib/api/client';
    import type { CollectionSummary } from '$lib/api/collections';
    import FolderOpen from '@lucide/svelte/icons/folder-open';

    let {
        collections
    }: {
        collections: CollectionSummary[];
    } = $props();
</script>

<ul class="grid" data-testid="collections-list">
    {#each collections as c (c.id)}
        <li class="card">
            <a href="/collections/{c.id}" class="cover-link" tabindex="-1" aria-hidden="true">
                <div class="collage">
                    {#if c.sample_covers.length === 0}
                        <div class="collage-empty">
                            <FolderOpen size={36} aria-hidden="true" />
                        </div>
                    {:else}
                        {#each c.sample_covers as cover (cover)}
                            <img
                                src={fileUrl(cover)}
                                alt=""
                                class="collage-cover"
                                loading="lazy"
                                decoding="async"
                            />
                        {/each}
                    {/if}
                </div>
            </a>
            <div class="meta">
                <a href="/collections/{c.id}" class="name" data-testid={`collection-${c.id}`}>
                    {c.name}
                </a>
                <span class="count">
                    {c.manga_count}
                    {c.manga_count === 1 ? 'manga' : 'mangas'}
                </span>
            </div>
        </li>
    {/each}
</ul>

<style>
    .grid {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--space-4);
    }

    .card {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

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

    .collage {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 2px;
        aspect-ratio: 2 / 3;
        border-radius: var(--radius-md);
        overflow: hidden;
        background: var(--surface);
    }

    .collage-empty {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
    }

    .collage-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .collage-cover:only-child {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
    }

    .collage-cover:first-child:nth-last-child(2),
    .collage-cover:first-child:nth-last-child(2) ~ .collage-cover {
        grid-row: 1 / -1;
    }

    .collage-cover:first-child:nth-last-child(3) {
        grid-row: 1 / -1;
    }

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

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

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

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