<script>
	import HeaderBar from '$lib/client/components/HeaderBar.svelte';
	import { resolve } from '$app/paths';
	import { bS, iS } from '$lib/client/styles';
	let { data } = $props();

	const pageTitle = 'Auth Keys | TAM';

	let auth = $state({
		toggle: false,
		pwd: ''
	});

	let authKeys = $state([]);
	let newDesc = $state('');
	let curKey = $state('');
</script>

<svelte:head>
	<title>{pageTitle}</title>
</svelte:head>

<HeaderBar>
	<a href={resolve('/settings')} class={bS.gray}>Back to Settings</a>
	<div>Other Settings:</div>
	<a href={resolve('/settings/prefixes')} class={bS.gray}>Prefixes</a>
</HeaderBar>

<div id="app_container" class="p-1">
	<h1 class="text-xl font-bold">{pageTitle}</h1>
	{#if !auth.toggle}
		<div class="flex flex-row gap-1 items-center py-1">
			<div>Password:</div>
			<input type="password" class={iS.normal} bind:value={auth.pwd} />
			<button
				class={bS.gray}
				onclick={async () => {
					const res = await fetch('/api/auth', {
						headers: { 'TAM-PWD': auth.pwd }
					});
					if (res.ok) {
						auth.toggle = true;
						const resData = await res.json();
						authKeys = [...resData];
						curKey = data.authKey;
					} else {
						auth.pwd = 'Invalid Password!';
						setTimeout(() => (auth.pwd = ''), 3000);
					}
				}}>Login</button
			>
		</div>
	{:else}
		<table class="w-full my-1">
			<thead class="text-left">
				<tr>
					<th>AuthKey</th>
					<th>Description</th>
					<th>Actions</th>
				</tr>
			</thead>
			<tbody>
				{#each authKeys as key (key.auth_key)}
					<tr>
						<td>{'*'.repeat(key.auth_key.length - 4) + key.auth_key.slice(-4)}</td>
						<td>{key.description}</td>
						<td
							><div class="flex flex-row gap-1 items-center">
								{#if curKey == key.auth_key}
									<div>(Cur)</div>
								{:else}
									<button
										class={bS.gray}
										onclick={async () => {
											const res = await fetch('/api/settings', {
												method: 'POST',
												headers: { 'Content-Type': 'application/json' },
												body: JSON.stringify({ remote_key: key.auth_key })
											});
											if (res.ok) {
												curKey = key.auth_key;
											}
										}}>Use</button
									>
								{/if}
								<button
									class={bS.red}
									onclick={async () => {
										const res = await fetch(`/api/auth?key_to_del=${key.auth_key}`, {
											method: 'DELETE',
											headers: { 'TAM-PWD': auth.pwd }
										});
										if (res.ok) {
											setTimeout(() => {
												const newKeys = authKeys.filter((i) => i.auth_key !== key.auth_key);
												authKeys = [...newKeys];
											}, 1);
										}
									}}>Delete</button
								>
							</div></td
						>
					</tr>
				{/each}
				<tr>
					<td>New</td>
					<td><input type="text" class="{iS.normal} w-full" bind:value={newDesc} /></td>
					<td>
						<button
							class={bS.gray}
							onclick={async () => {
								if (newDesc) {
									const res = await fetch('/api/auth', {
										method: 'POST',
										headers: { 'TAM-PWD': auth.pwd, 'Content-Type': 'application/json' },
										body: JSON.stringify({ description: newDesc })
									});
									if (res.ok) {
										newDesc = '';
										const data = await res.json();
										authKeys = [...authKeys, data];
									}
								}
							}}>New Key</button
						>
					</td>
				</tr>
			</tbody>
		</table>
	{/if}
</div>

<style>
	table td,
	table th {
		border: solid black 1px;
		padding: 0.25rem;
	}
</style>
