<!--
Sidebar with three tabs (Calculator, Inspector, Order). The parent
shell 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 shell never remounts when the user
switches the active view within a game.

The `historyMode` prop hides the Order tab when true: the tab-bar
filters it out and the history-mode reset falls back to `inspector`.
Phase 12 wires the prop through the shell as a constant `false`;
Phase 26 flips it on for past-turn snapshots.

`activeTab` is a `$bindable` prop so the shell can drive it from
external events (Phase 13 reveals the inspector tab when a planet
is clicked on the map). The history-mode reset mutates the bindable
in place; the shell sees the change through the binding without
extra plumbing.
-->
<script lang="ts">
	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();

	$effect(() => {
		if (historyMode && activeTab === "order") {
			activeTab = "inspector";
		}
	});
</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"
		role="tabpanel"
		id="sidebar-panel"
		aria-labelledby="sidebar-tab-{activeTab}"
		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: var(--color-surface);
		color: var(--color-text);
		border-left: 1px solid var(--color-border-subtle);
	}
	.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: var(--color-accent);
	}
	.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>
