<script>
import { preventDefault } from 'svelte/legacy';
import { loading_finish, loading_start } from "lib/Loading";
import { formatDate } from "util/Formatting";
import CopyButton from 'layout/CopyButton.svelte';

let loaded = $state(false)
let rows = $state([])

const load_keys = async () => {
	loading_start()
	try {
		const resp = await fetch(window.api_endpoint+"/user/session")
		if(resp.status >= 400) {
			let json = await resp.json()
			if (json.value === "authentication_failed") {
				window.location = "/login"
				return
			} else {
				throw new Error(json.message)
			}
		}
		rows = await resp.json()
		rows.forEach(row => {
			row.creation_date = new Date(row.creation_time)
			row.last_used_date = new Date(row.last_used_time)
		})
		rows.sort((a, b) => {
			return b.last_used_date - a.last_used_date
		});
	} catch (err) {
		alert(err)
	} finally {
		loading_finish()
		loaded = true
	}
};

const create_key = async () => {
	loading_start()
	try {
		let form = new FormData()
		form.append("app_name", "website keys page")

		const resp = await fetch(
			window.api_endpoint+"/user/session",
			{
				method: "POST",
				body: form,
			}
		);
		if(resp.status >= 400) {
			throw new Error(await resp.text());
		}
	} catch (err) {
		alert("Failed to create new API key! "+err)
	} finally {
		loading_finish()
	}

	load_keys();
}

const logout = async (key) => {
	loading_start()
	try {
		const resp = await fetch(
			window.api_endpoint+"/user/session",
			{
				method: "DELETE",
				headers: {
					"Authorization": "Basic "+btoa(":"+key),
				}
			}
		);
		if(resp.status >= 400) {
			throw new Error(await resp.text());
		}
	} catch (err) {
		alert("Failed to delete key: "+err)
	} finally {
		loading_finish()
	}

	load_keys();
}
</script>

<section>
	{#if !loaded}
		<div class="highlight_yellow">
			<h2>Warning</h2>
			<p>
				API keys are sensitive information. They can be used to gain
				full control over your account. Do not show your API keys to
				someone or something you don't trust!
			</p>
			<button class="button_red" onclick={load_keys}>
				<i class="icon">lock_open</i> Show API keys
			</button>
		</div>
	{:else}
		<div class="toolbar" style="text-align: left;">
			<div class="toolbar_spacer"></div>
			<button onclick={create_key}>
				<i class="icon">add</i> Create new API key
			</button>
		</div>
	{/if}

	<p>
		If you delete the API key that you are currently using you will be
		logged out of your account. Keys are sorted based on how recently they
		were used, so your session usually the top one. API keys expire 30 days
		after the last time they're used. If you think someone is using your
		account without your authorization it's probably a good idea to delete
		all your keys.
	</p>
</section>
<div class="table_scroll">
	<table style="text-align: left;">
		<thead>
			<tr>
				<td>Key</td>
				<td>Created</td>
				<td>Last used ▼</td>
				<td>IP address</td>
				<td></td>
			</tr>
		</thead>
		<tbody>
			{#each rows as row (row.auth_key)}
				<tr style="border-bottom: none;">
					<td>
						<CopyButton text={row.auth_key} small_icon>Copy</CopyButton>
						{row.auth_key}
					</td>
					<td>{formatDate(row.creation_time, true, true, false)}</td>
					<td>{formatDate(row.last_used_time, true, true, false)}</td>
					<td>{row.creation_ip_address}</td>
					<td>
						<button onclick={(e) => {e.preventDefault();logout(row.auth_key)}} class="button button_red round">
							<i class="icon">delete</i>
						</button>
					</td>
				</tr>
				<tr>
					<td colspan="1">
						{#if row.app_name === "website login"}
							<img src="/res/img/nova_32.png" alt="Nova logo" class="app_icon"/>
							Nova website
						{:else if row.app_name === "website keys page"}
							<i class="icon">vpn_key</i>
							Nova keys page
						{:else if row.app_name === "sharex"}
							<img src="/res/img/sharex.png" alt="ShareX logo" class="app_icon"/>
							ShareX
						{:else if row.app_name === "jdownloader"}
							<img src="/res/img/jdownloader.png" alt="JDownloader logo" class="app_icon"/>
							JDownloader
						{:else}
							Unknown app: {row.app_name}
						{/if}
					</td>
					<td colspan="4">User-Agent: {row.user_agent}</td>
				</tr>
			{/each}
		</tbody>
	</table>
	<br/>
</div>

<style>
.toolbar {
	display: flex;
	flex-direction: row;
	width: 100%;
}
.toolbar > * { flex: 0 0 auto; }
.toolbar_spacer { flex: 1 1 auto; }

.app_icon {
	height: 1.6em;
	vertical-align: middle;
}
</style>
