<!--
Sidebar with three tabs (Calculator, Inspector, Order). The parent
layout decides whether the sidebar is rendered at all (mobile hides
it, tablet collapses it behind the header toggle, desktop keeps it
always visible). State preservation across active-view switches
works for free because the layout never remounts when the user
navigates within `/games/:id/*`.

The optional `?sidebar=calc|calculator|inspector|order` URL param
seeds the initial tab on first mount — used by the lobby card path
when later phases want to land directly on a particular tool.

The `historyMode` prop hides the Order tab when true: the tab-bar
filters it out and any URL seed targeting `order` falls back to
`inspector`. Phase 12 wires the prop through the layout as a
constant `false`; Phase 26 flips it on for past-turn snapshots.

`activeTab` is a `$bindable` prop so the layout can drive it from
external events (Phase 13 reveals the inspector tab when a planet
is clicked on the map). The URL seed and the history-mode reset
both mutate the bindable in place; the layout sees the change
through the binding without extra plumbing.
-->
<script lang="ts">
	import { onMount } from "svelte";
	import { page } from "$app/state";
	import TabBar from "./tab-bar.svelte";
	import Calculator from "./calculator-tab.svelte";
	import Inspector from "./inspector-tab.svelte";
	import Order from "./order-tab.svelte";
	import type { SidebarTab } from "./types";
	import { i18n } from "$lib/i18n/index.svelte";

	type Props = {
		open: boolean;
		onClose: () => void;
		historyMode?: boolean;
		activeTab?: SidebarTab;
	};
	let {
		open,
		onClose,
		historyMode = false,
		activeTab = $bindable<SidebarTab>("inspector"),
	}: Props = $props();

	function readUrlSeed(): SidebarTab | null {
		const v = page.url.searchParams.get("sidebar");
		if (v === "calc" || v === "calculator") return "calculator";
		if (v === "inspector") return "inspector";
		if (v === "order") return "order";
		return null;
	}

	$effect(() => {
		if (historyMode && activeTab === "order") {
			activeTab = "inspector";
		}
	});

	onMount(() => {
		const seed = readUrlSeed();
		if (seed === null) return;
		if (seed === "order" && historyMode) {
			activeTab = "inspector";
			return;
		}
		activeTab = seed;
	});
</script>

<aside
	class="sidebar"
	data-testid="sidebar"
	data-active-tab={activeTab}
	data-open={open}
>
	<div class="head">
		<TabBar
			{activeTab}
			onSelect={(tab) => (activeTab = tab)}
			hideOrder={historyMode}
		/>
		<button
			type="button"
			class="close"
			data-testid="sidebar-close"
			aria-label={i18n.t("game.shell.menu.close_sidebar")}
			onclick={onClose}
		>
			✕
		</button>
	</div>
	<div class="content" data-testid="sidebar-content">
		{#if activeTab === "calculator"}
			<Calculator />
		{:else if activeTab === "inspector"}
			<Inspector />
		{:else}
			<Order />
		{/if}
	</div>
</aside>

<style>
	.sidebar {
		display: flex;
		flex-direction: column;
		width: 18rem;
		min-width: 18rem;
		background: #0e1322;
		color: #e8eaf6;
		border-left: 1px solid #20253a;
	}
	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
	}
	.close {
		display: none;
		font: inherit;
		font-size: 1rem;
		padding: 0.25rem 0.5rem;
		margin-right: 0.5rem;
		background: transparent;
		color: inherit;
		border: 0;
		cursor: pointer;
	}
	.close:hover {
		color: #6d8cff;
	}
	.content {
		flex: 1;
		overflow-y: auto;
	}
	@media (max-width: 1023.98px) {
		.sidebar {
			display: none;
		}
	}
	@media (min-width: 768px) and (max-width: 1023.98px) {
		.sidebar[data-open="true"] {
			display: flex;
			position: fixed;
			top: 3rem;
			right: 0;
			bottom: 0;
			width: min(20rem, 80vw);
			z-index: 30;
			box-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
		}
		.sidebar[data-open="true"] .close {
			display: inline-flex;
		}
	}
</style>
