package webui

import (
	"github.com/pogo-vcs/pogo/db"
	"github.com/pogo-vcs/pogo/server/webui/components"
	"strconv"
)

templ Settings() {
	if !IsLoggedIn(ctx) {
		@layout("Unauthorized") {
			@components.Header(nil)
			@components.Main() {
				<h1 class="text-2xl font-bold mb-4">Unauthorized</h1>
				<p>You must be logged in to access repository settings.</p>
			}
		}
	} else {
		if repoIdStr, ok := GetParam(ctx, "id"); ok {
			if repoId, err := strconv.ParseInt(repoIdStr, 10, 32); err == nil {
				if repo, err := db.Q.GetRepository(ctx, int32(repoId)); err == nil {
					{{ user := GetUser(ctx) }}
					{{ hasAccess := false }}
					if user != nil {
						if accessCheck, err := db.Q.CheckUserRepositoryAccess(ctx, repo.ID, user.ID); err == nil {
							{{ hasAccess = accessCheck }}
						}
					}
					if !hasAccess {
						@layout("Unauthorized") {
							@components.Header(user)
							@components.Main() {
								<h1 class="text-2xl font-bold mb-4">Unauthorized</h1>
								<p>You do not have access to manage this repository.</p>
							}
						}
					} else {
						@layout(repo.Name + " - Settings") {
							@components.Header(user) {
								<a
									href={ templ.URL("/repository/" + strconv.Itoa(int(repo.ID))) }
									class="rounded-md px-2 py-1 bg-ctp-surface0 hover:bg-ctp-surface1 active:bg-ctp-surface2 active:text-ctp-text"
								>
									Back to Repository
								</a>
							}
							@components.Main() {
								<h1 class="text-2xl font-bold mb-6">Repository Settings</h1>
								<section class="mb-8 p-4 bg-ctp-mantle rounded-lg">
									<h2 class="text-xl font-semibold mb-4">Repository Name</h2>
									<form method="POST" action={ templ.URL("/api/repository/" + strconv.Itoa(int(repo.ID)) + "/rename") } class="space-y-4">
										<div>
											<label for="name" class="block text-sm font-medium mb-2">Repository Name</label>
											<input
												type="text"
												id="name"
												name="name"
												value={ repo.Name }
												required
												class="w-full px-3 py-2 bg-ctp-surface0 rounded-md border border-ctp-surface1 focus:outline-none focus:ring-2 focus:ring-ctp-blue focus:border-transparent"
											/>
										</div>
										<button
											type="submit"
											class="cursor-pointer px-4 py-2 bg-ctp-blue text-ctp-base font-medium rounded-md hover:bg-ctp-sapphire focus:outline-none focus:ring-2 focus:ring-ctp-blue focus:ring-offset-2 focus:ring-offset-ctp-base"
										>
											Rename Repository
										</button>
									</form>
								</section>
								<section class="mb-8 p-4 bg-ctp-mantle rounded-lg">
									<h2 class="text-xl font-semibold mb-4">Visibility Settings</h2>
									<div class="space-y-4">
										<div>
											<p class="text-sm text-ctp-subtext0 mb-2">
												Current visibility: 
												<span class="font-semibold">
													if repo.Public {
														Public
													} else {
														Private
													}
												</span>
											</p>
											<p class="text-sm text-ctp-subtext1 mb-4">
												if repo.Public {
													Public repositories can be accessed by anyone. Making it private will restrict access to users you explicitly grant access to.
												} else {
													Private repositories can only be accessed by users you explicitly grant access to. Making it public will allow anyone to access it.
												}
											</p>
										</div>
										<button
											type="button"
											onclick={ confirmVisibilityChange(repo.Public, int(repo.ID)) }
											if repo.Public {
												class="cursor-pointer px-4 py-2 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-ctp-base bg-ctp-yellow text-ctp-base hover:bg-ctp-peach focus:ring-ctp-yellow"
											} else {
												class="cursor-pointer px-4 py-2 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-ctp-base bg-ctp-green text-ctp-base hover:bg-ctp-teal focus:ring-ctp-green"
											}
										>
											if repo.Public {
												Make Private
											} else {
												Make Public
											}
										</button>
									</div>
								</section>
								<section class="mb-8 p-4 bg-ctp-mantle rounded-lg">
									<h2 class="text-xl font-semibold mb-4">User Access</h2>
									<div class="mb-6">
										<h3 class="text-lg font-medium mb-3">Current Users with Access</h3>
										if users, err := db.Q.GetRepositoryUsers(ctx, repo.ID); err == nil {
											if len(users) > 0 {
												<ul class="space-y-2">
													for _, u := range users {
														<li class="flex justify-between items-center p-3 bg-ctp-surface0 rounded-md">
															<span class="font-medium">{ u.Username }</span>
															if user != nil && u.ID != user.ID {
																<form method="POST" action={ templ.URL("/api/repository/" + strconv.Itoa(int(repo.ID)) + "/revoke") } class="inline">
																	<input type="hidden" name="username" value={ u.Username }/>
																	<button
																		type="submit"
																		class="cursor-pointer px-3 py-1 bg-ctp-red text-ctp-base text-sm font-medium rounded-md hover:bg-ctp-maroon focus:outline-none focus:ring-2 focus:ring-ctp-red focus:ring-offset-2 focus:ring-offset-ctp-base"
																	>
																		Revoke Access
																	</button>
																</form>
															} else {
																<span class="text-sm text-ctp-subtext0">(You)</span>
															}
														</li>
													}
												</ul>
											} else {
												<p class="text-ctp-subtext0">No users have access to this repository.</p>
											}
										} else {
											<p class="text-ctp-red">Failed to load users.</p>
										}
									</div>
									<div>
										<h3 class="text-lg font-medium mb-3">Grant Access to User</h3>
										<form method="POST" action={ templ.URL("/api/repository/" + strconv.Itoa(int(repo.ID)) + "/grant") } class="space-y-4">
											<div>
												<label for="username" class="block text-sm font-medium mb-2">Username</label>
												<input
													type="text"
													id="username"
													name="username"
													required
													placeholder="Enter username"
													class="w-full px-3 py-2 bg-ctp-surface0 rounded-md border border-ctp-surface1 focus:outline-none focus:ring-2 focus:ring-ctp-blue focus:border-transparent"
												/>
											</div>
											<button
												type="submit"
												class="cursor-pointer px-4 py-2 bg-ctp-green text-ctp-base font-medium rounded-md hover:bg-ctp-teal focus:outline-none focus:ring-2 focus:ring-ctp-green focus:ring-offset-2 focus:ring-offset-ctp-base"
											>
												Grant Access
											</button>
										</form>
									</div>
								</section>
								<section class="mb-8 p-4 bg-ctp-mantle rounded-lg">
									<h2 class="text-xl font-semibold mb-4">Secrets</h2>
									<p class="text-sm text-ctp-subtext1 mb-4">
										Secrets can be used in CI pipeline configurations using the <code class="bg-ctp-surface0 px-1 rounded">{ "{{ secret \"KEY\" }}" }</code> template function.
										They are useful for storing sensitive data like API tokens and credentials.
									</p>
									<div class="mb-6">
										<h3 class="text-lg font-medium mb-3">Current Secrets</h3>
										if secrets, err := db.Q.GetAllSecrets(ctx, repo.ID); err == nil {
											if len(secrets) > 0 {
												<ul class="space-y-2">
													for _, s := range secrets {
														<li class="flex items-center gap-4 p-3 bg-ctp-surface0 rounded-md">
															<span class="font-medium flex-1">{ s.Key }</span>
															<button
																type="button"
																onclick={ toggleSecretVisibility(s.Key) }
																class="cursor-pointer px-3 py-1 bg-ctp-blue text-ctp-base text-sm font-medium rounded-md hover:bg-ctp-sapphire focus:outline-none focus:ring-2 focus:ring-ctp-blue focus:ring-offset-2 focus:ring-offset-ctp-base"
															>
																Show
															</button>
															<div id={ "secret-value-" + s.Key } class="hidden flex-1 font-mono text-sm bg-ctp-surface1 p-2 rounded">
																{ s.Value }
															</div>
															<form method="POST" action={ templ.URL("/api/repository/" + strconv.Itoa(int(repo.ID)) + "/secrets/delete") } class="inline">
																<input type="hidden" name="key" value={ s.Key }/>
																<button
																	type="submit"
																	class="cursor-pointer px-3 py-1 bg-ctp-red text-ctp-base text-sm font-medium rounded-md hover:bg-ctp-maroon focus:outline-none focus:ring-2 focus:ring-ctp-red focus:ring-offset-2 focus:ring-offset-ctp-base"
																>
																	Delete
																</button>
															</form>
														</li>
													}
												</ul>
											} else {
												<p class="text-ctp-subtext0">No secrets configured.</p>
											}
										} else {
											<p class="text-ctp-red">Failed to load secrets.</p>
										}
									</div>
									<div>
										<h3 class="text-lg font-medium mb-3">Add or Update Secret</h3>
										<form method="POST" action={ templ.URL("/api/repository/" + strconv.Itoa(int(repo.ID)) + "/secrets/set") } class="space-y-4">
											<div>
												<label for="secret-key" class="block text-sm font-medium mb-2">Key</label>
												<input
													type="text"
													id="secret-key"
													name="key"
													required
													placeholder="DEPLOY_TOKEN"
													class="w-full px-3 py-2 bg-ctp-surface0 rounded-md border border-ctp-surface1 focus:outline-none focus:ring-2 focus:ring-ctp-blue focus:border-transparent"
												/>
											</div>
											<div>
												<label for="secret-value" class="block text-sm font-medium mb-2">Value</label>
												<input
													type="password"
													id="secret-value"
													name="value"
													required
													placeholder="Enter secret value"
													class="w-full px-3 py-2 bg-ctp-surface0 rounded-md border border-ctp-surface1 focus:outline-none focus:ring-2 focus:ring-ctp-blue focus:border-transparent"
												/>
											</div>
											<button
												type="submit"
												class="cursor-pointer px-4 py-2 bg-ctp-green text-ctp-base font-medium rounded-md hover:bg-ctp-teal focus:outline-none focus:ring-2 focus:ring-ctp-green focus:ring-offset-2 focus:ring-offset-ctp-base"
											>
												Save Secret
											</button>
										</form>
									</div>
								</section>
							}
						}
					}
				} else {
					@layout("Repository Not Found") {
						@components.Header(GetUser(ctx))
						@components.Main() {
							<h1 class="text-2xl font-bold mb-4">Repository Not Found</h1>
							<p>The repository you are looking for does not exist.</p>
						}
					}
				}
			} else {
				@layout("Invalid Repository ID") {
					@components.Header(GetUser(ctx))
					@components.Main() {
						<h1 class="text-2xl font-bold mb-4">Invalid Repository ID</h1>
						<p>The repository ID is invalid.</p>
					}
				}
			}
		} else {
			@layout("Missing Repository ID") {
				@components.Header(GetUser(ctx))
				@components.Main() {
					<h1 class="text-2xl font-bold mb-4">Missing Repository ID</h1>
					<p>No repository ID was provided.</p>
				}
			}
		}
	}
}

script confirmVisibilityChange(isPublic bool, repoId int) {
	const action = isPublic ? "private" : "public";
	const actionText = isPublic ? "make this repository private" : "make this repository public";
	const warning = isPublic 
		? "This will restrict access to only users you have explicitly granted access to."
		: "This will allow anyone to access this repository, including cloning and viewing its contents.";
	
	if (confirm(`Are you sure you want to ${actionText}?\n\n${warning}`)) {
		const form = document.createElement('form');
		form.method = 'POST';
		form.action = `/api/repository/${repoId}/visibility`;
		
		const input = document.createElement('input');
		input.type = 'hidden';
		input.name = 'public';
		input.value = isPublic ? 'false' : 'true';
		
		form.appendChild(input);
		document.body.appendChild(form);
		form.submit();
	}
}

script toggleSecretVisibility(key string) {
	const valueEl = document.getElementById('secret-value-' + key);
	const btn = event.target;
	
	if (valueEl.classList.contains('hidden')) {
		valueEl.classList.remove('hidden');
		btn.textContent = 'Hide';
	} else {
		valueEl.classList.add('hidden');
		btn.textContent = 'Show';
	}
}