<!--
Phase 19 mobile bottom-sheet that hosts the ship-group inspector when
the user is on the map view on a small screen. Mirrors the existing
`planet-sheet.svelte` layout: hidden via media query above 768 px, and
mounted by the in-game shell layout only while the active tool is
`map` so it does not stack on top of the calc / order overlays.
-->
<script lang="ts">
	import type {
		ReportLocalFleet,
		ReportPlanet,
		ShipClassSummary,
	} from "../../api/game-state";
	import { i18n } from "$lib/i18n/index.svelte";
	import ShipGroup, { type ShipGroupSelection } from "./ship-group.svelte";

	type Props = {
		selection: ShipGroupSelection | null;
		planets: ReportPlanet[];
		localShipClass: ShipClassSummary[];
		localFleets: ReportLocalFleet[];
		otherRaces: string[];
		mapWidth: number;
		mapHeight: number;
		localPlayerDrive: number;
		localPlayerWeapons: number;
		localPlayerShields: number;
		localPlayerCargo: number;
		onMap: boolean;
		onClose: () => void;
	};
	let {
		selection,
		planets,
		localShipClass,
		localFleets,
		otherRaces,
		mapWidth,
		mapHeight,
		localPlayerDrive,
		localPlayerWeapons,
		localPlayerShields,
		localPlayerCargo,
		onMap,
		onClose,
	}: Props = $props();
</script>

{#if selection !== null && onMap}
	<section
		class="sheet"
		aria-label={i18n.t("game.sidebar.tab.inspector")}
		data-testid="inspector-ship-group-sheet"
	>
		<button
			type="button"
			class="close"
			data-testid="inspector-ship-group-sheet-close"
			aria-label={i18n.t("game.inspector.sheet_close")}
			onclick={onClose}
		>
			✕
		</button>
		<ShipGroup
			{selection}
			{planets}
			{localShipClass}
			{localFleets}
			{otherRaces}
			{mapWidth}
			{mapHeight}
			{localPlayerDrive}
			{localPlayerWeapons}
			{localPlayerShields}
			{localPlayerCargo}
		/>
	</section>
{/if}

<style>
	.sheet {
		display: none;
	}
	@media (max-width: 767.98px) {
		.sheet {
			display: block;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 3.25rem;
			max-height: calc(100vh - 6rem);
			overflow-y: auto;
			background: #14182a;
			color: #e8eaf6;
			border-top: 1px solid #2a3150;
			box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
			z-index: 40;
		}
	}
	.close {
		position: absolute;
		top: 0.4rem;
		right: 0.4rem;
		font: inherit;
		font-size: 1rem;
		padding: 0.2rem 0.55rem;
		background: transparent;
		color: #aab;
		border: 1px solid #2a3150;
		border-radius: 3px;
		cursor: pointer;
	}
	.close:hover {
		color: #e8eaf6;
		border-color: #6d8cff;
	}
</style>
