<!--
Phase 13 mobile bottom-sheet that hosts the planet inspector when
the user is on the map view on a small screen. Desktop and tablet
breakpoints already render the inspector inside the sidebar, so
the sheet is hidden via a media query above 768 px and the
component is only mounted while the active tool is `map` (so it
does not stack on top of the calc / order overlays).

Phase 13 ships the minimal dismissal surface: a close button (`✕`)
that clears the selection. Swipe-to-dismiss and tap-outside-to-
dismiss from the IA section §6 land in Phase 35 polish.
-->
<script lang="ts">
	import type {
		ReportLocalShipGroup,
		ReportOtherShipGroup,
		ReportPlanet,
		ReportRoute,
		ScienceSummary,
		ShipClassSummary,
	} from "../../api/game-state";
	import { i18n } from "$lib/i18n/index.svelte";
	import Planet from "./planet.svelte";

	type Props = {
		planet: ReportPlanet | null;
		localShipClass: ShipClassSummary[];
		localScience: ScienceSummary[];
		routes: ReportRoute[];
		planets: ReportPlanet[];
		mapWidth: number;
		mapHeight: number;
		localPlayerDrive: number;
		localShipGroups: ReportLocalShipGroup[];
		otherShipGroups: ReportOtherShipGroup[];
		localRace: string;
		onMap: boolean;
		onClose: () => void;
	};
	let {
		planet,
		localShipClass,
		localScience,
		routes,
		planets,
		mapWidth,
		mapHeight,
		localPlayerDrive,
		localShipGroups,
		otherShipGroups,
		localRace,
		onMap,
		onClose,
	}: Props = $props();
</script>

{#if planet !== null && onMap}
	<section
		class="sheet"
		aria-label={i18n.t("game.sidebar.tab.inspector")}
		data-testid="inspector-planet-sheet"
	>
		<button
			type="button"
			class="close"
			data-testid="inspector-planet-sheet-close"
			aria-label={i18n.t("game.inspector.sheet_close")}
			onclick={onClose}
		>
			✕
		</button>
		<Planet
			{planet}
			{localShipClass}
			{localScience}
			{routes}
			{planets}
			{mapWidth}
			{mapHeight}
			{localPlayerDrive}
			{localShipGroups}
			{otherShipGroups}
			{localRace}
		/>
	</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>
