<script lang="ts">
	import { untrack } from "svelte";
	import { resolve } from "$app/paths";
	import Avatar from "$lib/components/ui/Avatar.svelte";
	import Button from "$lib/components/ui/Button.svelte";
	import Toggle from "$lib/components/ui/Toggle.svelte";
	import SettingsEmpty from "$lib/components/settings/SettingsEmpty.svelte";
	import SettingsBlock from "$lib/components/settings/SettingsBlock.svelte";
	import SettingsList from "$lib/components/settings/SettingsList.svelte";
	import CodeChip from "$lib/components/settings/CodeChip.svelte";
	import Plus from "$icon/plus";
	import Eye from "$icon/eye";
	import Pencil from "$icon/pencil";
	import Trash from "$icon/trash-2";
	import Inbox from "$icon/inbox";

	let { data } = $props();

	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/settings`);
	const path = (p: string) => resolve(p as "/");

	// mocked — webhooks are not wired up yet
	let hooks = $state([
		{
			id: "1",
			url: "https://hooks.user.tld/tg/repository-cs-hk",
			events: "push, pull_request:created, pull_request:closed",
			added: "Added 2 mins ago by",
			by: untrack(() => data.repo.ownerHandle),
			enabled: true
		},
		{
			id: "2",
			url: "https://hooks.user.tld/tg/repository",
			events: "push, pull_request:created, pull_request:closed",
			added: "Added 5 hours ago by",
			by: untrack(() => data.repo.ownerHandle),
			enabled: false
		}
	]);

	const remove = (id: string) => {
		hooks = hooks.filter((h) => h.id !== id);
	};
</script>

<div class="flex min-h-8 w-full items-center gap-4">
	<h1 class="typography-heading-2 text-foreground-default">Hooks</h1>
</div>

<SettingsBlock
	description={[
		"Webhooks allow external services to be notified when certain events happen.",
		"When the specified events happen, we'll send a POST request to each of the URLs you provide."
	]}
>
	{#snippet action()}
		<Button icon={Plus} href={path(`${base}/hooks/new`)}>New webhook</Button>
	{/snippet}

	{#if hooks.length === 0}
		<SettingsEmpty message="No webhooks yet" />
	{:else}
		<SettingsList>
			{#each hooks as hook (hook.id)}
				<!-- the toggle rides the top-right corner while the actions sit under it,
				     so this row is a two-column block rather than a SettingsRow. On a
				     phone the two columns stack and the actions spread across the width. -->
				<div class="flex w-full flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
					<div class="flex min-w-0 flex-col gap-1">
						<CodeChip class="w-fit break-all">{hook.url}</CodeChip>
						<span
							class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
						>
							<Eye class="size-3.5 shrink-0" aria-hidden="true" />
							{hook.events}
						</span>
						<span
							class="flex items-center gap-1.5 typography-paragraph-regular text-foreground-muted"
						>
							{hook.added}
							<Avatar handle={hook.by} size="small" />
							{hook.by}
						</span>
					</div>
					<div class="flex flex-col items-end gap-4 sm:shrink-0">
						<Toggle bind:checked={hook.enabled} aria-label="Enable {hook.url}" />
						<div class="flex w-full items-center justify-between gap-2 sm:w-auto sm:justify-end">
							<Button icon={Inbox}>Deliveries</Button>
							<Button icon={Pencil}>Edit</Button>
							<Button variant="danger" icon={Trash} onclick={() => remove(hook.id)}>Delete</Button>
						</div>
					</div>
				</div>
			{/each}
		</SettingsList>
	{/if}
</SettingsBlock>
