<script lang="ts">
    import type { Snippet } from 'svelte';
    import ChevronLeft from '@lucide/svelte/icons/chevron-left';

    let {
        title,
        backHref,
        onBack,
        trailing,
        testid
    }: {
        title: string;
        /**
         * If set, the leading slot renders a back chevron linking here.
         * Mutually exclusive with onBack (href wins). Omit both for a
         * brand-only bar (no leading control).
         */
        backHref?: string;
        onBack?: () => void;
        trailing?: Snippet;
        testid?: string;
    } = $props();
</script>

<header class="app-bar" data-testid={testid}>
    <div class="leading">
        {#if backHref}
            <a
                href={backHref}
                class="back"
                aria-label="Back"
                data-testid={testid ? `${testid}-back` : undefined}
            >
                <ChevronLeft size={22} aria-hidden="true" />
            </a>
        {:else if onBack}
            <button
                type="button"
                class="back"
                onclick={onBack}
                aria-label="Back"
                data-testid={testid ? `${testid}-back` : undefined}
            >
                <ChevronLeft size={22} aria-hidden="true" />
            </button>
        {/if}
    </div>
    <h1 class="title">{title}</h1>
    <div class="trailing">
        {#if trailing}{@render trailing()}{/if}
    </div>
</header>

<style>
    .app-bar {
        display: grid;
        grid-template-columns: 44px 1fr auto;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        padding-top: calc(var(--space-2) + var(--safe-top));
        padding-left: calc(var(--space-3) + var(--safe-left));
        padding-right: calc(var(--space-3) + var(--safe-right));
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        min-height: 48px;
    }

    .leading {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        background: transparent;
        color: var(--text);
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        text-decoration: none;
    }

    .back:hover {
        background: var(--surface-elevated);
        text-decoration: none;
    }

    .title {
        font-size: var(--font-lg);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-tight);
        margin: 0;
        text-align: center;
        /* Long titles ellipsize rather than wrap — the bar must stay
           a single row to keep its measured height predictable. */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .trailing {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-1);
        min-width: 44px;
    }
</style>
