<!--
Mobile-only bottom-tab bar `[Map, Calc, Order, More]`. Map switches
the active view to the map and resets the tool overlay. Calc and
Order also switch to the map view — the shell's tool gate replaces
the active view with the matching sidebar tool only while the map is
the active view, so navigating to any other view via the More drawer
or the header view-menu naturally drops the overlay.

More opens a drawer with the same destination list as the header
view-menu, each entry mutating `activeView` directly (the single-URL
app-shell has no per-view routes). The Tables sub-list includes the
battles roll-up (F8-11) that replaces the standalone Battle log entry;
the single battle viewer is still reachable by clicking a row. A later
polish pass narrows it to the IA-spec subset (Mail, Tables, History,
Settings, Logout) once History exists; until then the convenience of
one source of truth for destinations beats the duplication.
-->
<script lang="ts">
	import { onMount } from "svelte";
	import { activeView, type GameView } from "$lib/app-nav.svelte";
	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
	import { restoreFocus } from "$lib/a11y/restore-focus";
	import type { MobileTool } from "./types";

	type Props = {
		activeTool: MobileTool;
		onSelectTool: (tool: MobileTool) => void;
		hideOrder?: boolean;
	};
	let {
		activeTool,
		onSelectTool,
		hideOrder = false,
	}: Props = $props();

	let moreOpen = $state(false);
	let rootEl: HTMLDivElement | null = $state(null);

	const tableEntities: ReadonlyArray<{ slug: string; key: TranslationKey }> = [
		{ slug: "planets", key: "game.view.table.planets" },
		{ slug: "ship-classes", key: "game.view.table.ship_classes" },
		{ slug: "ship-groups", key: "game.view.table.ship_groups" },
		{ slug: "fleets", key: "game.view.table.fleets" },
		{ slug: "sciences", key: "game.view.table.sciences" },
		{ slug: "races", key: "game.view.table.races" },
		{ slug: "battles", key: "game.view.table.battles" },
	];

	function selectTool(tool: MobileTool): void {
		moreOpen = false;
		onSelectTool(tool);
		// Calc / Order surface only over the map; selecting Map simply
		// drops the overlay. Either way the map must be the active view.
		activeView.select("map");
	}

	function go(view: GameView, params: { tableEntity?: string } = {}): void {
		moreOpen = false;
		onSelectTool("map");
		activeView.select(view, params);
	}

	function toggleMore(): void {
		moreOpen = !moreOpen;
	}

	function onKeyDown(event: KeyboardEvent): void {
		if (event.key === "Escape" && moreOpen) {
			moreOpen = false;
		}
	}

	onMount(() => {
		const handleClick = (event: MouseEvent): void => {
			if (!moreOpen || rootEl === null) return;
			const target = event.target;
			if (target instanceof Node && rootEl.contains(target)) return;
			moreOpen = false;
		};
		document.addEventListener("click", handleClick, true);
		document.addEventListener("keydown", onKeyDown);
		return () => {
			document.removeEventListener("click", handleClick, true);
			document.removeEventListener("keydown", onKeyDown);
		};
	});
</script>

<div class="bottom-tabs" data-testid="bottom-tabs" bind:this={rootEl}>
	<div class="tabs" role="tablist" aria-label={i18n.t("game.bottom_tabs.map")}>
		<button
			type="button"
			role="tab"
			data-testid="bottom-tab-map"
			aria-selected={activeTool === "map"}
			class:active={activeTool === "map"}
			onclick={() => selectTool("map")}
		>
			<span class="icon" aria-hidden="true">▣</span>
			<span class="label">{i18n.t("game.bottom_tabs.map")}</span>
		</button>
		<button
			type="button"
			role="tab"
			data-testid="bottom-tab-calc"
			aria-selected={activeTool === "calc"}
			class:active={activeTool === "calc"}
			onclick={() => selectTool("calc")}
		>
			<span class="icon" aria-hidden="true">🧮</span>
			<span class="label">{i18n.t("game.bottom_tabs.calc")}</span>
		</button>
		{#if !hideOrder}
			<button
				type="button"
				role="tab"
				data-testid="bottom-tab-order"
				aria-selected={activeTool === "order"}
				class:active={activeTool === "order"}
				onclick={() => selectTool("order")}
			>
				<span class="icon" aria-hidden="true">📝</span>
				<span class="label">{i18n.t("game.bottom_tabs.order")}</span>
			</button>
		{/if}
		<button
			type="button"
			data-testid="bottom-tab-more"
			aria-haspopup="menu"
			aria-expanded={moreOpen}
			class:active={moreOpen}
			onclick={toggleMore}
		>
			<span class="icon" aria-hidden="true">☰</span>
			<span class="label">{i18n.t("game.bottom_tabs.more")}</span>
		</button>
	</div>
	{#if moreOpen}
		<div
			class="drawer"
			role="menu"
			data-testid="bottom-tabs-more-drawer"
			use:restoreFocus
		>
			<button
				type="button"
				role="menuitem"
				data-testid="bottom-tabs-more-map"
				onclick={() => go("map")}
			>
				{i18n.t("game.view.map")}
			</button>
			<details data-testid="bottom-tabs-more-tables">
				<summary>{i18n.t("game.view.table")}</summary>
				<div class="sub">
					{#each tableEntities as entry (entry.slug)}
						<button
							type="button"
							role="menuitem"
							data-testid="bottom-tabs-more-table-{entry.slug}"
							onclick={() => go("table", { tableEntity: entry.slug })}
						>
							{i18n.t(entry.key)}
						</button>
					{/each}
				</div>
			</details>
			<button
				type="button"
				role="menuitem"
				data-testid="bottom-tabs-more-report"
				onclick={() => go("report")}
			>
				{i18n.t("game.view.report")}
			</button>
			<button
				type="button"
				role="menuitem"
				data-testid="bottom-tabs-more-mail"
				onclick={() => go("mail")}
			>
				{i18n.t("game.view.mail")}
			</button>
			<button
				type="button"
				role="menuitem"
				data-testid="bottom-tabs-more-designer-science"
				onclick={() => go("designer-science")}
			>
				{i18n.t("game.view.designer.science")}
			</button>
		</div>
	{/if}
</div>

<style>
	.bottom-tabs {
		display: none;
		position: relative;
	}
	@media (max-width: 767.98px) {
		.bottom-tabs {
			display: block;
		}
	}
	.tabs {
		display: flex;
		justify-content: space-around;
		align-items: stretch;
		background: var(--color-bg);
		color: var(--color-text);
		border-top: 1px solid var(--color-border-subtle);
		font-family: var(--font-sans);
	}
	.tabs button {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.15rem;
		padding: 0.4rem 0.25rem;
		font: inherit;
		font-size: 0.75rem;
		background: transparent;
		color: var(--color-text-muted);
		border: 0;
		cursor: pointer;
	}
	.tabs button.active {
		color: var(--color-text);
		background: var(--color-surface-hover);
	}
	.tabs .icon {
		font-size: 1.25rem;
	}
	.drawer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 3.25rem;
		max-height: calc(100vh - 6rem);
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		background: var(--color-surface-overlay);
		color: var(--color-text);
		border-top: 1px solid var(--color-border);
		box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
		z-index: 50;
		font-family: var(--font-sans);
	}
	.drawer > button,
	.drawer > details > summary {
		text-align: left;
		font: inherit;
		padding: 0.55rem 0.9rem;
		background: transparent;
		color: inherit;
		border: 0;
		cursor: pointer;
	}
	.drawer > button:hover,
	.drawer > details > summary:hover {
		background: var(--color-surface-hover);
	}
	.drawer > details > summary {
		list-style: none;
	}
	.drawer > details > summary::-webkit-details-marker {
		display: none;
	}
	.drawer > details > summary::after {
		content: "▸";
		float: right;
		opacity: 0.7;
	}
	.drawer > details[open] > summary::after {
		content: "▾";
	}
	.sub {
		display: flex;
		flex-direction: column;
		padding-left: 0.5rem;
		border-left: 1px solid var(--color-border);
		margin: 0 0.5rem 0.25rem;
	}
	.sub > button {
		text-align: left;
		font: inherit;
		padding: 0.4rem 0.5rem;
		background: transparent;
		color: inherit;
		border: 0;
		cursor: pointer;
	}
	.sub > button:hover {
		background: var(--color-surface-hover);
	}
</style>
