package components

import (
	"time"

	"github.com/starfederation/datastar-go/datastar"
)

templ BackToLobby() {
	<a class="link text-sm opacity-70" href="/">&larr; Back</a>
}

templ StealthTitle(class string) {
	<span class={ class }>
		<span style="color:#4a2a3a">&#9679;</span>
		<span style="color:#2a4545">&#9679;</span>
		<span style="color:#4a2a3a">&#9679;</span>
		<span style="color:#2a4545">&#9679;</span>
	</span>
}

templ NicknamePrompt(returnPath string) {
	<main class="max-w-sm mx-auto mt-8 text-center" data-signals="{nickname: ''}">
		<h1 class="text-3xl font-bold">Join Game</h1>
		<p class="mb-4">Enter your nickname to join the game.</p>
		<form>
			<fieldset class="fieldset">
				<label class="label" for="nickname">Your Nickname</label>
				<input
					class="input input-bordered w-full"
					id="nickname"
					type="text"
					placeholder="Enter your nickname"
					data-bind="nickname"
					data-on:keydown={ "evt.key === 'Enter' && " + datastar.PostSSE("%s", returnPath) }
					required
					autofocus
				/>
			</fieldset>
			<button
				class="btn btn-primary w-full"
				type="button"
				data-on:click={ datastar.PostSSE("%s", returnPath) }
			>
				Join
			</button>
		</form>
	</main>
}

// LiveClock shows the current server time, updated with each SSE patch.
// If the clock stops updating, users know the connection is stale.
templ LiveClock() {
	<div class="fixed top-2 right-2 flex items-center gap-1 text-xs opacity-50 font-mono">
		<div class="status status-xs status-success"></div>
		{ time.Now().Format("15:04:05") }
	</div>
}

templ GameJoinPrompt(loginURL string, registerURL string, gamePath string) {
	<main class="max-w-sm mx-auto mt-8 text-center">
		<h1 class="text-3xl font-bold">Join Game</h1>
		<p class="mb-4">Log in to track your game history, or continue as a guest.</p>
		<div class="flex flex-col gap-2 my-4">
			<a class="btn btn-primary w-full" href={ templ.SafeURL(loginURL) }>Login</a>
			<a class="btn btn-secondary w-full" href={ templ.SafeURL(gamePath + "?guest=1") }>Continue as Guest</a>
		</div>
		<p class="text-sm opacity-60">
			Don't have an account?
			<a class="link" href={ templ.SafeURL(registerURL) }>Register</a>
		</p>
	</main>
}