<!--
Phase 23 Report View — galaxy summary section. Renders the per-turn
header data (turn, map dimensions, planet count, calling race name)
as a definition-list. The data lives on `GameReport` directly; the
section is never empty as long as the report has loaded.
-->
<script lang="ts">
	import { getContext } from "svelte";

	import { i18n } from "$lib/i18n/index.svelte";
	import {
		RENDERED_REPORT_CONTEXT_KEY,
		type RenderedReportSource,
	} from "$lib/rendered-report.svelte";

	const rendered = getContext<RenderedReportSource | undefined>(
		RENDERED_REPORT_CONTEXT_KEY,
	);
	const report = $derived(rendered?.report ?? null);
</script>

<section
	id="report-galaxy-summary"
	class="grid-section"
	data-testid="report-section-galaxy-summary"
>
	<h2>{i18n.t("game.report.section.galaxy_summary.title")}</h2>

	{#if report === null}
		<p class="status">{i18n.t("game.report.loading")}</p>
	{:else}
		<dl class="kv">
			<dt>{i18n.t("game.report.section.galaxy_summary.field.turn")}</dt>
			<dd data-testid="galaxy-summary-field-turn">{report.turn}</dd>
			<dt>{i18n.t("game.report.section.galaxy_summary.field.size")}</dt>
			<dd data-testid="galaxy-summary-field-size">
				{report.mapWidth} × {report.mapHeight}
			</dd>
			<dt>{i18n.t("game.report.section.galaxy_summary.field.planets")}</dt>
			<dd data-testid="galaxy-summary-field-planets">{report.planetCount}</dd>
			<dt>{i18n.t("game.report.section.galaxy_summary.field.race")}</dt>
			<dd data-testid="galaxy-summary-field-race">{report.race}</dd>
		</dl>
	{/if}
</section>

<style>
	.grid-section h2 {
		margin: 0 0 0.5rem;
		font-size: 1.05rem;
		color: #e8eaf6;
	}
	.status {
		margin: 0;
		color: #888;
		font-size: 0.9rem;
	}
	.kv {
		display: grid;
		grid-template-columns: max-content 1fr;
		gap: 0.3rem 1rem;
		margin: 0;
		font-size: 0.9rem;
	}
	.kv dt {
		color: #aab;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		font-size: 0.75rem;
	}
	.kv dd {
		margin: 0;
		color: #e8eaf6;
		font-variant-numeric: tabular-nums;
	}
</style>
