<!--
Top header for the in-game shell. Composes the in-game ID strip
(race name @ game name) followed by the Phase 26 turn navigator (a
`← Turn N →` triplet with a popover of every turn), the view
dropdown / hamburger, and the account menu. The sidebar-toggle slot
to its left appears only on tablet viewports (768–1024 px) and is
wired by `+layout.svelte`.

The race name is read from the engine's `Report.race`, the game
name from the lobby's `GameSummary.gameName`. While either piece
is missing (boot, network error) we fall back to the
`game.shell.unknown` placeholder so the header chrome keeps its
shape.

The connection-state indicator from the IA section is intentionally
absent until Phase 24 wires push-event state.
-->
<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";
	import ViewMenu from "./view-menu.svelte";
	import AccountMenu from "./account-menu.svelte";
	import TurnNavigator from "./turn-navigator.svelte";

	type Props = {
		gameId: string;
		sidebarOpen: boolean;
		onToggleSidebar: () => void;
	};
	let { gameId, sidebarOpen, onToggleSidebar }: Props = $props();

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

	const raceName = $derived.by(() => {
		const name = gameState?.report?.race;
		return name === undefined || name === ""
			? i18n.t("game.shell.unknown")
			: name;
	});
	const gameName = $derived.by(() => {
		const name = gameState?.gameName ?? "";
		return name === "" ? i18n.t("game.shell.unknown") : name;
	});
</script>

<header class="game-shell-header" data-testid="game-shell-header">
	<div class="left" data-testid="game-shell-headline">
		<span class="identity" data-testid="game-shell-identity">
			{raceName} @ {gameName}
		</span>
		<TurnNavigator />
	</div>
	<div class="right">
		<button
			type="button"
			class="sidebar-toggle"
			data-testid="sidebar-toggle"
			aria-expanded={sidebarOpen}
			aria-label={sidebarOpen
				? i18n.t("game.shell.menu.close_sidebar")
				: i18n.t("game.shell.menu.toggle_sidebar")}
			onclick={onToggleSidebar}
		>
			⤧
		</button>
		<ViewMenu {gameId} />
		<AccountMenu />
	</div>
</header>

<style>
	.game-shell-header {
		position: sticky;
		top: 0;
		z-index: 40;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		padding: 0.5rem 0.75rem;
		background: #0a0e1a;
		color: #e8eaf6;
		border-bottom: 1px solid #20253a;
		font-family: system-ui, sans-serif;
	}
	.left,
	.right {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		min-width: 0;
	}
	.identity {
		font-weight: 500;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.sidebar-toggle {
		font: inherit;
		font-size: 1.1rem;
		padding: 0.25rem 0.6rem;
		background: transparent;
		color: inherit;
		border: 1px solid #2a3150;
		border-radius: 4px;
		cursor: pointer;
		display: none;
	}
	.sidebar-toggle:hover {
		background: #1c2238;
	}
	@media (min-width: 768px) and (max-width: 1023.98px) {
		.sidebar-toggle {
			display: inline-flex;
		}
	}
</style>
