<script lang="ts">
	import type { Component } from "svelte";
	import type { SvelteHTMLElements } from "svelte/elements";
	import Button from "$lib/components/ui/Button.svelte";
	import Toggle from "$lib/components/ui/Toggle.svelte";
	import SettingsHeader from "../SettingsHeader.svelte";
	import SettingsList from "../SettingsList.svelte";
	import Save from "$icon/save";
	import Star from "$icon/star";
	import CircleDot from "$icon/circle-dot";
	import MessageSquare from "$icon/message-square";
	import CircleSlash from "$icon/circle-slash";
	import GitPullRequest from "$icon/git-pull-request";
	import GitMerge from "$icon/git-merge";
	import UserRound from "$icon/user-round";
	import AtSign from "$icon/at-sign";
	import Mail from "$icon/mail";

	interface Pref {
		id: string;
		icon: Component<SvelteHTMLElements["svg"]>;
		label: string;
		description: string;
		enabled: boolean;
	}

	// mocked — notification preferences are backed by G2 (see TAN-575)
	let prefs = $state<Pref[]>([
		{
			id: "starred",
			icon: Star,
			label: "Repository starred",
			description: "When someone stars your repository.",
			enabled: true
		},
		{
			id: "new-issues",
			icon: CircleDot,
			label: "New issues",
			description: "When someone creates an issue on your repository.",
			enabled: true
		},
		{
			id: "issue-comments",
			icon: MessageSquare,
			label: "Issue comments",
			description: "When someone comments on an issue you're involved with.",
			enabled: true
		},
		{
			id: "issue-closed",
			icon: CircleSlash,
			label: "Issue closed",
			description: "When an issue on your repository is closed.",
			enabled: true
		},
		{
			id: "new-pulls",
			icon: GitPullRequest,
			label: "New pull requests",
			description: "When someone creates a pull request on your repository.",
			enabled: true
		},
		{
			id: "pull-comments",
			icon: MessageSquare,
			label: "Pull request comments",
			description: "When someone comments on a pull request you're involved with.",
			enabled: true
		},
		{
			id: "pull-merged",
			icon: GitMerge,
			label: "Pull request merged",
			description: "When your pull request is merged.",
			enabled: true
		},
		{
			id: "followers",
			icon: UserRound,
			label: "New followers",
			description: "When someone follows you.",
			enabled: true
		},
		{
			id: "mentions",
			icon: AtSign,
			label: "Mentions",
			description: "When someone mentions you.",
			enabled: true
		},
		{
			id: "email",
			icon: Mail,
			label: "Email notifications",
			description: "Receive digest emails for issue and pull request activity.",
			enabled: true
		}
	]);

	// Figma shows Save disabled on load — it only lights up once something changed
	const initial = prefs.map((p) => p.enabled);
	const dirty = $derived(prefs.some((p, i) => p.enabled !== initial[i]));
</script>

<SettingsHeader
	title="Notifications"
	description="Choose which notifications you want to receive when activity happens on your repositories and profile."
>
	{#snippet action()}
		<Button variant="primary" icon={Save} disabled={!dirty}>Save</Button>
	{/snippet}
</SettingsHeader>

<SettingsList>
	{#each prefs as pref (pref.id)}
		{@const Glyph = pref.icon}
		<div class="flex w-full items-center justify-between gap-4">
			<div class="flex min-w-0 flex-col gap-1">
				<span class="flex items-center gap-2">
					<Glyph class="size-3.5 shrink-0 text-foreground-default" aria-hidden="true" />
					<span class="typography-paragraph-regular text-foreground-default">{pref.label}</span>
				</span>
				<span class="typography-paragraph-regular text-foreground-muted">{pref.description}</span>
			</div>
			<Toggle bind:checked={pref.enabled} aria-label={pref.label} />
		</div>
	{/each}
</SettingsList>
