<script>
    // Stamp book: a "passport" of every geohash-4 region (~city-sized) this
    // device/user (anonymous Firebase UID) has ever posted a message from -
    // see firebase/stamps.js for how stamps are earned and stored.
    import { onMount } from 'svelte';
    import { getStamps } from '$lib/firebase/stamps.js';
    import Stamp from '$lib/components/Stamp.svelte';

    let stamps = $state([]);
    let loading = $state(true);

    onMount(async () => {
        stamps = await getStamps();
        loading = false;
    });

    // --- scattered "sticker album" layout -----------------------------------
    // Returns a small random rotation + x/y offset for one stamp, so stickers
    // feel hand-placed rather than lined up in a tidy grid. The underlying
    // container is still a flex-wrap grid (see .stamp-grid below), which is
    // what keeps stamps from drastically overlapping or running off the
    // page - this just jitters each one slightly within its grid cell.
    function randomTransform() {
        const rotate = (Math.random() * 16 - 8).toFixed(1);
        const x = (Math.random() * 16 - 8).toFixed(1);
        const y = (Math.random() * 16 - 8).toFixed(1);
        return `transform: rotate(${rotate}deg) translate(${x}px, ${y}px)`;
    }
</script>

<div class="stampbook">
    <div class="stampbook-header">
        <a href="/" class="back">← Back to map</a>
        <h1>Your stamp book</h1>
        <p class="subtitle">A passport of everywhere you've left something behind</p>
    </div>

    {#if loading}
        <div class="loading">Loading your stamps...</div>
    {:else if stamps.length === 0}
        <!-- empty state - same contemplative tone as the "first here" /
             "already faded" ambient messages elsewhere in the app -->
        <div class="empty">
            <p>Your stamp book is empty.</p>
            <p class="empty-sub">Leave a message somewhere new, and a piece of that place will stay here with you.</p>
        </div>
    {:else}
        <div class="stamp-grid">
            {#each stamps as stamp}
                <div class="stamp-slot" style={randomTransform()}>
                    <Stamp {stamp} />
                </div>
            {/each}
        </div>
    {/if}
</div>

<style>
    .stampbook {
        max-width: 700px;
        margin: 0 auto;
        padding: 2rem 1.5rem 4rem;
        font-family: sans-serif;
    }

    .stampbook-header {
        margin-bottom: 2rem;
    }

    .back {
        font-size: 0.85rem;
        color: #999;
        text-decoration: none;
        display: inline-block;
        margin-bottom: 1rem;
    }

    .back:hover {
        color: #111;
    }

    h1 {
        font-size: 1.6rem;
        font-weight: 700;
        color: #111;
        margin-bottom: 0.3rem;
    }

    .subtitle {
        font-size: 0.85rem;
        color: #aaa;
    }

    .loading {
        text-align: center;
        color: #aaa;
        padding: 3rem 0;
        font-size: 0.9rem;
    }

    .empty {
        text-align: center;
        padding: 3rem 1rem;
        color: #999;
    }

    .empty-sub {
        font-size: 0.85rem;
        color: #bbb;
        margin-top: 0.5rem;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.6;
    }

    /* flex-wrap "sticker album" surface - extra row/column gap gives each
       stamp's random translate() room to jitter without colliding with its
       neighbors (see randomTransform above) */
    .stamp-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem 1.5rem;
        padding: 1rem 0;
    }

    .stamp-slot {
        flex-shrink: 0;
    }
</style>
