<script lang="ts">
    import MangaCard from '$lib/components/MangaCard.svelte';
    import ArrowLeft from '@lucide/svelte/icons/arrow-left';

    let { data } = $props();
    const author = $derived(data.author);
    const mangas = $derived(data.mangas);
    const total = $derived(data.total);
</script>

<svelte:head>
    <title>{author.name} — Mangalord</title>
</svelte:head>

<nav class="back">
    <a href="/" class="back-link">
        <ArrowLeft size={16} aria-hidden="true" />
        <span>Back to search</span>
    </a>
</nav>

<header class="overview">
    <h1 data-testid="author-name">{author.name}</h1>
    <p class="count" data-testid="author-manga-count">
        {author.manga_count}
        {author.manga_count === 1 ? 'work' : 'works'}
    </p>
</header>

{#if mangas.length === 0}
    <p class="status" data-testid="author-no-mangas">
        No mangas attributed to this author.
    </p>
{:else}
    {#if total != null}
        <p class="meta" data-testid="author-shown-of-total">
            Showing {mangas.length} of {total}
        </p>
    {/if}
    <ul class="manga-grid" data-testid="author-manga-list">
        {#each mangas as m (m.id)}
            <MangaCard manga={m} testid={`author-manga-${m.id}`} />
        {/each}
    </ul>
{/if}

<style>
    .back {
        margin-bottom: var(--space-3);
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        color: var(--text-muted);
        font-size: var(--font-sm);
    }

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

    .overview {
        margin-bottom: var(--space-5);
    }

    .overview h1 {
        margin: 0 0 var(--space-1);
    }

    .count {
        color: var(--text-muted);
        margin: 0 0 var(--space-2);
    }

    .meta {
        color: var(--text-muted);
        font-size: var(--font-sm);
        margin: 0 0 var(--space-3);
    }

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

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