<script lang="ts">
    import {
        listMyPageTags,
        type TaggedPageItem,
        type PageTagSummary
    } from '$lib/api/page_tags';
    import TaggedPageRow from './TaggedPageRow.svelte';

    /**
     * Library tab content for "Page tags". Renders the distinct-tags
     * chip cloud (seeded from the loader) and a paged list of tagged
     * pages, with breadcrumb + thumbnail. Clicking a chip filters the
     * list to that tag; clicking a row jumps to the reader.
     */
    let {
        initialItems,
        initialDistinct
    }: {
        initialItems: TaggedPageItem[];
        initialDistinct: PageTagSummary[];
    } = $props();

    // svelte-ignore state_referenced_locally
    let items = $state<TaggedPageItem[]>([...initialItems]);
    let active: string | null = $state(null);
    let loading = $state(false);
    let error: string | null = $state(null);

    async function setActive(tag: string | null) {
        if (active === tag) {
            // Click the active chip again to clear the filter.
            tag = null;
        }
        active = tag;
        loading = true;
        error = null;
        try {
            const page = await listMyPageTags(
                tag != null ? { tag, limit: 100 } : { limit: 100 }
            );
            items = page.items;
        } catch (e) {
            error = (e as Error).message;
        } finally {
            loading = false;
        }
    }
</script>

{#if initialDistinct.length === 0 && items.length === 0}
    <p class="hint" data-testid="library-page-tags-empty">
        You haven't tagged any pages yet. Open a chapter and right-click
        (or long-press on mobile) a page to add a tag.
    </p>
{:else}
    {#if initialDistinct.length > 0}
        <div class="chip-cloud" data-testid="library-page-tags-chips">
            {#each initialDistinct as s (s.tag)}
                <button
                    type="button"
                    class="chip"
                    class:active={active === s.tag}
                    onclick={() => setActive(s.tag)}
                    data-testid={`library-page-tags-chip-${s.tag}`}
                >
                    {s.tag}
                    <span class="count">{s.count}</span>
                </button>
            {/each}
        </div>
    {/if}

    {#if error}
        <p class="error" role="alert" data-testid="library-page-tags-error">{error}</p>
    {/if}

    {#if loading}
        <p class="hint">Loading…</p>
    {:else if items.length === 0}
        <p class="hint" data-testid="library-page-tags-filtered-empty">
            No pages tagged with "{active}".
        </p>
    {:else}
        <ul class="list" data-testid="library-page-tags-list">
            {#each items as p (`${p.tag}::${p.page_id}`)}
                <TaggedPageRow item={p} />
            {/each}
        </ul>
    {/if}
{/if}

<style>
    .hint {
        color: var(--text-muted);
    }

    .error {
        color: var(--danger);
    }

    .chip-cloud {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-1);
        margin-bottom: var(--space-3);
    }

    .chip {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        background: var(--surface);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: var(--radius-pill);
        padding: 2px var(--space-2);
        font-size: var(--font-sm);
        cursor: pointer;
    }

    .chip.active {
        background: var(--primary-soft-bg);
        border-color: var(--primary);
        color: var(--primary);
    }

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

    .chip.active .count {
        color: var(--primary);
    }

    .list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }
</style>
