<!--
Phase 26 read-only banner. Renders directly under the shell header
whenever the user is viewing a past turn (`gameState.historyMode`).
Carries the turn number and a "Return to current turn" action that
delegates to `gameState.returnToCurrent()`. The banner is invisible
in live mode so the active-view chrome keeps its full vertical
budget.
-->
<script lang="ts">
	import { getContext } from "svelte";
	import { i18n } from "$lib/i18n/index.svelte";
	import {
		GAME_STATE_CONTEXT_KEY,
		type GameStateStore,
	} from "$lib/game-state.svelte";

	const gameState = getContext<GameStateStore | undefined>(
		GAME_STATE_CONTEXT_KEY,
	);

	const viewedTurn = $derived(gameState?.viewedTurn ?? 0);
	const visible = $derived(gameState?.historyMode === true);

	function onReturn(): void {
		void gameState?.returnToCurrent();
	}
</script>

{#if visible}
	<aside class="history-banner" data-testid="history-banner" role="status">
		<span class="message">
			{i18n.t("game.shell.history.viewing", { turn: String(viewedTurn) })}
		</span>
		<button
			type="button"
			class="return"
			data-testid="history-banner-return"
			onclick={onReturn}
		>
			{i18n.t("game.shell.history.return_to_current")}
		</button>
	</aside>
{/if}

<style>
	.history-banner {
		position: sticky;
		top: 3rem;
		z-index: 35;
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.4rem 0.9rem;
		background: #2a2438;
		color: #efe9c8;
		border-bottom: 1px solid #45375a;
		font-family: system-ui, sans-serif;
		font-size: 0.9rem;
	}
	.message {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.return {
		font: inherit;
		padding: 0.25rem 0.65rem;
		background: transparent;
		color: inherit;
		border: 1px solid #6c5a8a;
		border-radius: 4px;
		cursor: pointer;
		white-space: nowrap;
	}
	.return:hover {
		background: #3a3050;
	}
</style>
