<!--
Private games panel for the lobby `games` section. Filters
`lobby.my.games.list` down to games where the caller is the owner and
the visibility is `private`. The right-hand corner of the panel hosts
the "create new game" button that opens `lobby-create`.

This subpage is gated by paid-tier visibility (the shell hides the
sidebar entry on free-tier; the backend also rejects
`lobby.game.create` with `403 forbidden` for free callers). The
`VITE_GALAXY_DEV_AFFORDANCES` flag is the DEV bypass — the shell
keeps the entry visible so the owner can exercise both paths from a
single test account.
-->
<script lang="ts">
	import { onMount } from "svelte";
	import { appScreen, activeView } from "$lib/app-nav.svelte";
	import { account } from "$lib/account-store.svelte";
	import { i18n } from "$lib/i18n/index.svelte";
	import { lobbyData } from "$lib/lobby-data.svelte";
	import LobbyShell from "./lobby-shell.svelte";

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

	function isPlayableStatus(status: string): boolean {
		return status === "running" || status === "paused" || status === "finished";
	}

	function gotoGame(gameId: string): void {
		activeView.reset();
		appScreen.go("game", { gameId });
	}

	function gotoCreate(): void {
		appScreen.go("lobby-create");
	}

	let privateGames = $derived.by(() => {
		const me = account.current?.userId ?? "";
		return lobbyData.myGames.filter(
			(g) => g.ownerUserId === me && g.gameType === "private",
		);
	});
</script>

<LobbyShell>
	{#if lobbyData.configError !== null}
		<p role="alert" data-testid="account-error">{lobbyData.configError}</p>
	{:else if lobbyData.error !== null}
		<p role="alert" data-testid="lobby-error">{lobbyData.error}</p>
	{/if}

	<section data-testid="lobby-games-private-section">
		<header class="section-header">
			<h2>{i18n.t("lobby.section.private_games")}</h2>
			<button
				type="button"
				class="create-button"
				onclick={gotoCreate}
				data-testid="lobby-create-button"
			>
				{i18n.t("lobby.create_button")}
			</button>
		</header>
		{#if lobbyData.loading}
			<p role="status">{i18n.t("lobby.list_loading")}</p>
		{:else if privateGames.length === 0}
			<p data-testid="lobby-games-private-empty">
				{i18n.t("lobby.games.private_games.empty")}
			</p>
		{:else}
			<ul class="card-list">
				{#each privateGames as game (game.gameId)}
					<li>
						<button
							class="card"
							onclick={() => gotoGame(game.gameId)}
							disabled={!isPlayableStatus(game.status)}
							data-testid="lobby-private-game-card"
						>
							<strong>{game.gameName}</strong>
							<span class="meta">{game.status}</span>
							<span class="meta">{game.minPlayers}–{game.maxPlayers} players</span>
						</button>
					</li>
				{/each}
			</ul>
		{/if}
	</section>
</LobbyShell>

<style>
	section { margin-bottom: var(--space-6); }
	section h2 { font-size: var(--text-lg); margin: 0; }
	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		margin-bottom: var(--space-3);
	}
	.create-button {
		font: inherit;
		font-size: var(--text-sm);
		padding: var(--space-1) var(--space-3);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		background: var(--color-surface-raised);
		cursor: pointer;
	}
	.create-button:hover { background: var(--color-surface-hover); }
	.card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
	.card {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		padding: var(--space-3);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		background: var(--color-surface-raised);
		text-align: left;
		font: inherit;
		cursor: pointer;
		width: 100%;
	}
	button.card:disabled {
		cursor: not-allowed;
		color: var(--color-text-faint);
		background: var(--color-surface);
	}
	.meta { color: var(--color-text-muted); font-size: var(--text-sm); }
</style>
