<script lang="ts">
	import Button from "$lib/components/ui/Button.svelte";
	import Tag from "$lib/components/ui/Tag.svelte";
	import EmptyState from "$lib/components/ui/EmptyState.svelte";
	import SettingsHeader from "../SettingsHeader.svelte";
	import SettingsToolbar from "../SettingsToolbar.svelte";
	import SettingsList from "../SettingsList.svelte";
	import SettingsEntry from "../SettingsEntry.svelte";
	import Plus from "$icon/plus";
	import Trash from "$icon/trash-2";
	import Mail from "$icon/mail";
	import Star from "$icon/star";
	import Check from "$icon/check";

	interface MockEmail {
		id: string;
		address: string;
		verified: boolean;
		primary: boolean;
		added: string;
	}

	// mocked — email management is backed by G4 (see TAN-575)
	let emails = $state<MockEmail[]>([
		{
			id: "1",
			address: "eti+dev3@tangled.org",
			verified: true,
			primary: false,
			added: "Added 5 hours ago"
		},
		{
			id: "2",
			address: "eti+dev@tangled.org",
			verified: true,
			primary: true,
			added: "Added 2 months ago"
		}
	]);

	const setPrimary = (id: string) => {
		emails = emails.map((e) => ({ ...e, primary: e.id === id }));
	};

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

<SettingsHeader
	title="Emails"
	description="Commits authored using emails listed here will be associated with your Tangled profile."
/>

<div class="flex w-full flex-col gap-4">
	<SettingsToolbar>
		{#snippet end()}
			<Button href="/settings/emails/new" icon={Plus}>Add email</Button>
		{/snippet}
	</SettingsToolbar>

	{#if emails.length === 0}
		<EmptyState message="No emails added yet" />
	{:else}
		<SettingsList>
			{#each emails as email (email.id)}
				<SettingsEntry icon={Mail} title={email.address}>
					{#snippet tags()}
						{#if email.verified}
							<Tag color="success" size="sm" icon={Check}>Verified</Tag>
						{/if}
						{#if email.primary}
							<Tag color="info" size="sm" icon={Star}>Primary</Tag>
						{/if}
					{/snippet}
					{#snippet meta()}
						<span class="typography-paragraph-regular text-foreground-muted">{email.added}</span>
					{/snippet}
					{#snippet actions()}
						{#if !email.primary}
							<Button icon={Star} onclick={() => setPrimary(email.id)}>Set as primary</Button>
						{/if}
						<Button variant="danger" icon={Trash} onclick={() => remove(email.id)}>Delete</Button>
					{/snippet}
				</SettingsEntry>
			{/each}
		</SettingsList>
	{/if}
</div>
