<!--
Active & past games panel for the lobby `games` section. Lists every
game where the caller is a member, regardless of lifecycle status.
Statuses that have no navigable in-game view (draft / enrollment_open /
starting / cancelled / start_failed) render as disabled cards.

The shell hides this submenu item entirely when the player has no games,
so the empty-state text below is reached only in the narrow window
where the shell mounts before the lobby-data fan-out resolves.
-->
<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 });
	}
</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-active-past-section">
		<h2>{i18n.t("lobby.section.my_games")}</h2>
		{#if lobbyData.loading}
			<p role="status">{i18n.t("lobby.list_loading")}</p>
		{:else if lobbyData.myGames.length === 0}
			<p data-testid="lobby-games-active-past-empty">
				{i18n.t("lobby.games.active_past.empty")}
			</p>
		{:else}
			<ul class="card-list">
				{#each lobbyData.myGames as game (game.gameId)}
					<li>
						<button
							class="card"
							onclick={() => gotoGame(game.gameId)}
							disabled={!isPlayableStatus(game.status)}
							data-testid="lobby-my-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 0 var(--space-3);
	}
	.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>
