<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 SettingsBlock from "$lib/components/settings/SettingsBlock.svelte";
	import SettingsList from "$lib/components/settings/SettingsList.svelte";
	import SettingsRow from "$lib/components/settings/SettingsRow.svelte";
	import UserRoundPlus from "$icon/user-round-plus";
	import UserRoundMinus from "$icon/user-round-minus";

	let { data } = $props();

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

	// mocked — collaborator management is not wired up yet
	let collaborators = $state([
		{
			handle: untrack(() => data.repo.ownerHandle),
			did: untrack(() => data.repo.ownerDid),
			role: "Owner",
			owner: true
		},
		{ handle: "user2.tld", did: undefined, role: "Collaborator", owner: false }
	]);

	const remove = (handle: string) => {
		collaborators = collaborators.filter((c) => c.handle !== handle);
	};
</script>

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

<SettingsBlock
	title="Collaborators"
	description={[
		"Any user added as a collaborator will be able to push commits and tags to this repository,",
		"upload releases, and workflows."
	]}
	separator
>
	{#snippet action()}
		<Button icon={UserRoundPlus} href={path(`${base}/access/new`)}>Add collaborator</Button>
	{/snippet}

	<SettingsList>
		{#each collaborators as person (person.handle)}
			<SettingsRow stack>
				{#snippet label()}
					<span class="flex min-w-0 items-center gap-2">
						<Avatar did={person.did} handle={person.handle} size="size-5" />
						<span class="typography-paragraph-regular text-foreground-default">
							{person.handle}
						</span>
						<span class="typography-paragraph-regular text-foreground-muted">{person.role}</span>
					</span>
				{/snippet}
				{#if !person.owner}
					<Button icon={UserRoundMinus} onclick={() => remove(person.handle)}>
						Remove collaborator
					</Button>
				{/if}
			</SettingsRow>
		{/each}
	</SettingsList>
</SettingsBlock>
