<!--
Active-view router for the per-entity tables. Phase 17 lit up
ship-classes; Phase 21 sciences; Phase 22 races; F8-10 lights up
planets, ship-groups, and fleets. The wrapper preserves
`data-testid="active-view-table"` and `data-entity={entity}` for
every branch (each leaf component mirrors them) so the navigation
e2e specs (`game-shell.spec.ts`, `view-menu`) keep matching.
-->
<script lang="ts">
	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
	import TablePlanets from "./table-planets.svelte";
	import TableShipClasses from "./table-ship-classes.svelte";
	import TableShipGroups from "./table-ship-groups.svelte";
	import TableFleets from "./table-fleets.svelte";
	import TableSciences from "./table-sciences.svelte";
	import TableRaces from "./table-races.svelte";
	import TableBattles from "./table-battles.svelte";

	type Props = { entity: string };
	let { entity }: Props = $props();

	function entityKey(slug: string): TranslationKey {
		const normalised = slug.replace(/-/g, "_");
		return `game.view.table.${normalised}` as TranslationKey;
	}
</script>

{#if entity === "planets"}
	<TablePlanets />
{:else if entity === "ship-classes"}
	<TableShipClasses />
{:else if entity === "ship-groups"}
	<TableShipGroups />
{:else if entity === "fleets"}
	<TableFleets />
{:else if entity === "sciences"}
	<TableSciences />
{:else if entity === "races"}
	<TableRaces />
{:else if entity === "battles"}
	<TableBattles />
{:else}
	<section
		class="active-view"
		data-testid="active-view-table"
		data-entity={entity}
	>
		<h2>
			{i18n.t("game.view.table")}: {i18n.t(entityKey(entity))}
		</h2>
		<p>{i18n.t("game.shell.coming_soon")}</p>
	</section>
{/if}

<style>
	.active-view {
		padding: 1.5rem;
		font-family: system-ui, sans-serif;
	}
	.active-view h2 {
		margin: 0 0 0.5rem;
		font-size: 1.1rem;
	}
	.active-view p {
		margin: 0;
		color: var(--color-text-muted);
	}
</style>
