<script lang="ts">
	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="text-sm text-foreground-subtle mb-1">
			Repositories contain a project's files and version history. All repositories are publicly
			accessible.
		</p>
	</div>

	<div class="bg-background-default drop-shadow-sm rounded p-6">
		<form>
			<div class="flex gap-4 relative border-l border-border-default pl-6">
				<div class="absolute -left-3 -top-0">
					<div class="size-6 bg-background-inset rounded-full flex items-center justify-center text-sm font-medium mt-1 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="text-sm text-foreground-subtle mb-4">Basic repository information.</div>

					<div class="space-y-2">
						<div>
							<label class="block text-sm font-bold text-foreground-default mb-1">
								Repository name
							</label>
							<div class="flex flex-col md:flex-row md:items-center gap-2 md:gap-0 w-full">
								<div class="shrink-0 hidden md:flex items-center px-2 py-2 gap-1 text-sm text-foreground-muted md:border md:border-r-0 md:border-border-default md:rounded-l 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 md:rounded-r md:rounded-l-none py-2 rounded border border-border-default bg-background-default text-sm text-foreground-default placeholder:text-foreground-placeholder focus:outline-none focus:ring-1 focus:ring-border-strong px-2"
								/>
							</div>
							<p class="text-sm text-foreground-subtle mt-1">
								Choose a unique, descriptive name for your repository. Use letters, numbers, and
								hyphens.
							</p>
						</div>

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

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

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

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

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