<script lang="ts">
	import { resolve } from "$app/paths";
	import { getAuth } from "$lib/auth.svelte";
	import Avatar from "$lib/components/ui/Avatar.svelte";
	import Button from "$lib/components/ui/Button.svelte";
	import Radio from "$lib/components/ui/Radio.svelte";
	import BookPlus from "$icon/book-plus";

	const auth = getAuth();
	const user = $derived(auth.currentUser);

	let repoName = $state("");
	let description = $state("");
	let defaultBranch = $state("main");
	let selectedKnot = $state("knot1.tangled.sh");

	const knots = ["knot1.tangled.sh"];
</script>

<svelte:head>
	<title>New repository &middot; Tangled</title>
</svelte:head>

<div class="mx-auto w-full max-w-2xl px-4 py-12">
	<div class="px-6 py-2">
		<h1 class="text-xl font-bold text-foreground-default">Create a new repository</h1>
		<p class="mb-1 text-sm text-foreground-subtle">
			Repositories contain a project's files and version history. All repositories are publicly
			accessible.
		</p>
	</div>

	<div class="rounded border border-border-default bg-background-default bg-background-default p-6">
		<form>
			<div class="relative flex gap-4 border-l border-border-default pl-6">
				<div class="absolute -top-0 -left-3">
					<div
						class="mt-1 flex size-6 items-center justify-center rounded-full bg-background-inset text-sm font-medium text-foreground-muted"
					>
						1
					</div>
				</div>

				<div class="flex-1 pb-12">
					<h2 class="text-lg font-medium text-foreground-default">General</h2>
					<div class="mb-4 text-sm text-foreground-subtle">Basic repository information.</div>

					<div class="space-y-2">
						<div>
							<label class="mb-1 block text-sm font-bold text-foreground-default">
								Repository name
							</label>
							<div class="flex w-full flex-col gap-2 md:flex-row md:items-center md:gap-0">
								<div
									class="hidden shrink-0 items-center gap-1 px-2 py-2 text-sm text-foreground-muted md:flex md:rounded-l md:border md:border-r-0 md:border-border-default md:bg-background-inset"
								>
									<Avatar src={user?.avatar} handle={user?.handle} size="size-5" />
									<span>{user?.handle ?? "…"}</span>
								</div>
								<input
									id="name"
									name="name"
									type="text"
									placeholder="repository-name"
									bind:value={repoName}
									required
									class="flex-1 rounded border border-border-default bg-background-default px-2 py-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none md:rounded-l-none md:rounded-r"
								/>
							</div>
							<p class="mt-1 text-sm text-foreground-subtle">
								Choose a unique, descriptive name for your repository. Use letters, numbers, and
								hyphens.
							</p>
						</div>

						<div>
							<label for="description" class="mb-1 block text-sm font-bold text-foreground-default">
								Description
							</label>
							<input
								id="description"
								name="description"
								type="text"
								placeholder="A brief description of your project..."
								maxlength={140}
								bind:value={description}
								class="w-full rounded border border-border-default bg-background-default px-2 py-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
							/>
							<p class="mt-1 text-sm text-foreground-subtle">
								Optional. A short description to help others understand what your project does (max
								140 characters).
							</p>
						</div>
					</div>
				</div>
			</div>

			<div class="relative flex gap-4 border-l border-border-default pl-6">
				<div class="absolute -top-0 -left-3">
					<div
						class="mt-1 flex size-6 items-center justify-center rounded-full bg-background-inset text-sm font-medium text-foreground-muted"
					>
						2
					</div>
				</div>

				<div class="flex-1">
					<h2 class="text-lg font-medium text-foreground-default">Configuration</h2>
					<div class="mb-4 text-sm text-foreground-subtle">Repository settings and hosting.</div>

					<div class="space-y-2">
						<div>
							<label for="branch" class="mb-1 block text-sm font-bold text-foreground-default">
								Default branch
							</label>
							<input
								id="branch"
								name="branch"
								type="text"
								bind:value={defaultBranch}
								required
								class="w-full rounded border border-border-default bg-background-default px-2 py-2 text-sm text-foreground-default placeholder:text-foreground-placeholder focus:ring-1 focus:ring-border-strong focus:outline-none"
							/>
							<p class="mt-1 text-sm text-foreground-subtle">
								The primary branch where development happens. Common choices are "main" or "master".
							</p>
						</div>

						<div>
							<label class="mb-1 block text-sm font-bold text-foreground-default">
								Select a knot
							</label>
							<div class="w-full space-y-2">
								{#each knots as knot (knot)}
									<Radio value={knot} bind:group={selectedKnot} name="domain">
										{knot}
									</Radio>
								{/each}
							</div>
							<p class="mt-1 text-sm text-foreground-subtle">
								A knot hosts repository data and handles Git operations. You can also
								<a href={resolve("/settings/knots" as "/")} class="underline"
									>register your own knot</a
								>.
							</p>
						</div>
					</div>
				</div>
			</div>

			<div class="mt-8 flex justify-end">
				<Button variant="primary" type="submit" icon={BookPlus}>Create repository (TODO)</Button>
			</div>
		</form>
	</div>
</div>
