<!--
DEV-only synthetic-report loader. Lifts the old `lobby.synthetic`
section out of Overview into its own top-level sidebar item that only
appears when `VITE_GALAXY_DEV_AFFORDANCES === "true"`. The conditional
is statically evaluated by Vite — prod bundles strip the whole screen
out of the tree.

Reports are JSON files produced offline by the Go CLI in
`tools/local-dev/legacy-report/`. They open the map view against a
synthetic snapshot; orders compose locally but never reach the server.
See `ui/docs/testing.md#synthetic-reports` for the workflow.
-->
<script lang="ts">
	import { onMount } from "svelte";
	import { appScreen, activeView } from "$lib/app-nav.svelte";
	import { account } from "$lib/account-store.svelte";
	import { lobbyData } from "$lib/lobby-data.svelte";
	import LobbyShell from "./lobby-shell.svelte";
	import {
		SyntheticReportError,
		loadSyntheticReportFromJSON,
	} from "../../api/synthetic-report";

	let error = $state<string | null>(null);

	onMount(() => {
		lobbyData.ensure().then((client) => {
			if (client !== null) {
				account.ensure(client).catch(() => {});
			}
		});
	});

	async function onFileChange(
		event: Event & { currentTarget: HTMLInputElement },
	): Promise<void> {
		const input = event.currentTarget;
		error = null;
		const file = input.files?.[0];
		if (file === undefined) return;
		try {
			const text = await file.text();
			const json: unknown = JSON.parse(text);
			const { gameId } = loadSyntheticReportFromJSON(json);
			activeView.reset();
			appScreen.go("game", { gameId });
		} catch (err) {
			if (err instanceof SyntheticReportError) {
				error = err.message;
			} else if (err instanceof SyntaxError) {
				error = `invalid JSON: ${err.message}`;
			} else if (err instanceof Error) {
				error = err.message;
			} else {
				error = "failed to load synthetic report";
			}
		} finally {
			input.value = "";
		}
	}
</script>

<LobbyShell>
	<section data-testid="lobby-synthetic-section">
		<h2>Synthetic test reports (DEV)</h2>
		<p class="meta">
			Load a JSON file produced by
			<code>legacy-report-to-json</code> to open the map view against
			a synthetic snapshot. Orders compose locally but never reach
			the server.
		</p>
		<label class="synthetic-loader">
			Load JSON…
			<input
				type="file"
				accept=".json,application/json"
				onchange={onFileChange}
				data-testid="lobby-synthetic-file"
			/>
		</label>
		{#if error !== null}
			<p role="alert" data-testid="lobby-synthetic-error">{error}</p>
		{/if}
	</section>
</LobbyShell>

<style>
	section { margin-bottom: var(--space-6); }
	section h2 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
	.meta { color: var(--color-text-muted); font-size: var(--text-sm); }
	.synthetic-loader {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-1) var(--space-3);
		border: 1px dashed var(--color-text-muted);
		border-radius: var(--radius-md);
		background: var(--color-surface-raised);
		cursor: pointer;
		font: inherit;
	}
	.synthetic-loader input[type="file"] { font-size: var(--text-sm); }
</style>
