<script lang="ts">
	import * as Card from "$lib/components/ui/card";
	import Column from './Column.svelte';
	import { Input } from "$lib/components/ui/input";
	import { Label } from "$lib/components/ui/label";
	import { Button } from "$lib/components/ui/button";
	import * as Select from "$lib/components/ui/select";
	import { TriangleAlertIcon } from "lucide-svelte";
	import type { PageData } from "./$types";

	export let data: PageData;

	let serverId: number;
	$: console.log(serverId);
	$: selectedServer = serverId ? { label: data.config.environments[serverId].name, value: serverId } : undefined;

	let username: string;

	$: allowJoin = !username || !serverId;
</script>

<Card.Root class="space-y-2 p-4">
	<h1 class="font-semibold text-xl text-center">StarKingdoms</h1>

	<div class="flex flex-row gap-4">

		<Column title="About">
			<p>StarKingdoms is a browser game about floating through space.</p>

			<h2 class="text-center font-semibold">Profile</h2>
			<Button href="/login" class="w-full" variant="outline">Log in</Button>
			<p class="text-sm">Log in to save your progress on the server and sync it across devices.</p>
		</Column>

		<Column title="Join Game">
			<div class="flex w-full max-w-sm flex-col gap-1.5">
				<Label for="username">Username</Label>
				<Input bind:value={username} type="text" id="username" placeholder="StarKingdomsPlayer1214" />
			</div>
			<div class="flex w-full max-w-sm flex-col gap-1.5">
				<Label for="server">Server</Label>
				<Select.Root selected={selectedServer} onSelectedChange={(v) => {console.log(v); v && (serverId = v.value)}}>
					<Select.Trigger>
						<Select.Value placeholder="Select a server" />
					</Select.Trigger>
					<Select.Content>
						{#each data.config.environments as v, k}
							<Select.Item value={k} label={v.name} />
						{/each}
					</Select.Content>
				</Select.Root>
				{#if serverId && data.config.environments[serverId] && !data.config.environments[serverId].isProduction}
					<div class="bg-popover p-2 rounded text-destructive">
						<div class="flex flex-row font-semibold">
							<TriangleAlertIcon class="h-6 w-6 mr-2" />
							Here be dragons!
						</div>
						<p class="text-sm mt-2">You have selected a pre-release server! Expect bugs, and save data may be wiped at any time.</p>
					</div>
				{/if}
			</div>
			{#if allowJoin}
				<Button disabled class="w-full">Launch!</Button>
			{:else}
				<Button href="/play/{serverId}/{username}" class="w-full">Launch!</Button>
			{/if}
		</Column>

		<Column title="Tools & Options">
			<Button class="w-full" variant="secondary" disabled>Options (soon!)</Button>
		</Column>

	</div>
</Card.Root>