<script lang="ts">
    import { session } from '$lib/session.svelte';
    import Bookmark from '@lucide/svelte/icons/bookmark';
    import FolderOpen from '@lucide/svelte/icons/folder-open';
    import Calendar from '@lucide/svelte/icons/calendar';

    let { data } = $props();
    const authenticated = $derived(data.authenticated);
    const bookmarkCount = $derived(data.bookmark_count);
    const collectionCount = $derived(data.collection_count);
    const memberSince = $derived(
        session.user
            ? new Date(session.user.created_at).toLocaleDateString()
            : null
    );
</script>

{#if !authenticated}
    <p class="status" data-testid="profile-signin">
        <a href="/login?next=/profile">Sign in</a> to see your bookmarks,
        collections, and reading history.
    </p>
{:else}
    <div class="overview">
        <div class="card" data-testid="overview-member">
            <Calendar size={22} aria-hidden="true" />
            <div>
                <div class="label">Member since</div>
                <div class="value">{memberSince}</div>
            </div>
        </div>
        <a class="card link" href="/profile/bookmarks" data-testid="overview-bookmarks">
            <Bookmark size={22} aria-hidden="true" />
            <div>
                <div class="label">Bookmarks</div>
                <div class="value">{bookmarkCount}</div>
            </div>
        </a>
        <a class="card link" href="/profile/collections" data-testid="overview-collections">
            <FolderOpen size={22} aria-hidden="true" />
            <div>
                <div class="label">Collections</div>
                <div class="value">{collectionCount}</div>
            </div>
        </a>
    </div>
    <p class="hint">
        Use the tabs above to manage your preferences, account, bookmarks, and collections.
    </p>
{/if}

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

    .overview {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }

    .card {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: var(--space-3);
        color: var(--text);
        text-decoration: none;
    }

    .card.link:hover {
        background: var(--surface-elevated);
        border-color: var(--primary);
        text-decoration: none;
    }

    .label {
        color: var(--text-muted);
        font-size: var(--font-xs);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .value {
        font-size: var(--font-xl);
        font-weight: var(--weight-semibold);
    }

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