<script lang="ts">
	import { getAuth } from "$lib/auth.svelte";
	import { createBobbinClient } from "$lib/api/client";
	import { resolveMiniDoc } from "$lib/api/identity";
	import Avatar from "$lib/components/ui/Avatar.svelte";
	import Button from "$lib/components/ui/Button.svelte";
	import Input from "$lib/components/ui/Input.svelte";
	import Select from "$lib/components/ui/Select.svelte";
	import Toggle from "$lib/components/ui/Toggle.svelte";
	import SettingsSection from "../SettingsSection.svelte";
	import SettingsRow from "../SettingsRow.svelte";
	import SettingsSaveBar from "../SettingsSaveBar.svelte";
	import CodeChip from "../CodeChip.svelte";
	import ThemePicker from "../ThemePicker.svelte";
	import { createLoad } from "$lib/action.svelte";
	import Pencil from "$icon/pencil";
	import Key from "$icon/key";
	import Pause from "$icon/pause";
	import Trash from "$icon/trash-2";

	const auth = getAuth();
	const user = $derived(auth.currentUser);

	const pds = createLoad(async () => {
		const did = user?.did;
		const serviceUrl = auth.bobbinUrl;
		if (!did) return null;
		const ctx = createBobbinClient({ serviceUrl });
		return (await resolveMiniDoc(ctx, did)).pds ?? null;
	});

	// everything below is mocked — nothing is persisted yet
	const EMPTY = {
		bio: "",
		pronouns: "",
		location: "",
		bluesky: true,
		links: ["", "", ""],
		stats: ["", ""],
		hideMine: false,
		hideOthers: false,
		theme: "light" as "auto" | "light" | "dark"
	};

	let form = $state(structuredClone(EMPTY));

	// Figma keeps Save disabled until something actually changed, and only then
	// reveals Reset and the "Unsaved changes" note
	const dirty = $derived(JSON.stringify(form) !== JSON.stringify(EMPTY));
	const reset = () => (form = structuredClone(EMPTY));

	const STATS = ["Repositories", "Followers", "Stars", "Pull requests", "Issues"];
</script>

<div class="flex min-h-9 w-full items-center justify-between gap-4">
	<h1 class="typography-heading-2 text-foreground-default">Profile</h1>
	<SettingsSaveBar {dirty} onreset={reset} />
</div>

<div class="flex w-full flex-col gap-10">
	<SettingsSection>
		<div class="flex w-full flex-col items-center gap-2 pb-4">
			<Avatar did={user?.did} handle={user?.handle} size="full" class="size-39.5" />
			<Button icon={Pencil} href="/settings/profile/avatar">Edit</Button>
		</div>
		<SettingsRow title="Bio" stack>
			<Input bind:value={form.bio} placeholder="Write a bio" class="w-full sm:w-80" />
		</SettingsRow>
		<SettingsRow title="Pronouns" stack>
			<Input bind:value={form.pronouns} placeholder="they/them" class="w-full sm:w-80" />
		</SettingsRow>
		<SettingsRow title="Location" stack>
			<Input bind:value={form.location} placeholder="Anywhere" class="w-full sm:w-80" />
		</SettingsRow>
		<SettingsRow title="Link to Bluesky account">
			<Toggle bind:checked={form.bluesky} aria-label="Link to Bluesky account" />
		</SettingsRow>
		<SettingsRow title="Social links" align="start" stack>
			<div class="flex w-full flex-col gap-2 sm:w-80">
				{#each form.links.keys() as i (i)}
					<Input bind:value={form.links[i]} placeholder="Social link" />
				{/each}
			</div>
		</SettingsRow>
		<SettingsRow title="Vanity stats" align="start" stack>
			<div class="flex w-full flex-col gap-2 sm:w-80">
				{#each form.stats.keys() as i (i)}
					<Select
						bind:value={form.stats[i]}
						options={STATS.map((stat) => ({ value: stat }))}
						placeholder="Choose stat"
						label="Vanity stat {i + 1}"
					/>
				{/each}
			</div>
		</SettingsRow>
	</SettingsSection>

	<SettingsSection title="Account">
		<SettingsRow title="Handle">
			<CodeChip>{user?.handle ?? "…"}</CodeChip>
			<Button variant="ghost" href="/settings/profile/handle">Change</Button>
		</SettingsRow>
		<!-- a DID is too long to sit beside its label on a phone; a PDS hostname is not -->
		<SettingsRow title="Decentralized Identifier (DID)" stack>
			<CodeChip class="w-full break-all sm:w-auto">{user?.did ?? "…"}</CodeChip>
		</SettingsRow>
		<SettingsRow title="Personal Data Server (PDS)">
			<CodeChip class="break-all">{pds.data ?? "…"}</CodeChip>
		</SettingsRow>
	</SettingsSection>

	<SettingsSection title="Interface">
		<SettingsRow title="Theme" align="start" stack>
			<ThemePicker bind:value={form.theme} />
		</SettingsRow>
	</SettingsSection>

	<SettingsSection title="Punchcard">
		<SettingsRow title="Hide mine">
			<Toggle bind:checked={form.hideMine} aria-label="Hide mine" />
		</SettingsRow>
		<SettingsRow title="Hide other from me">
			<Toggle bind:checked={form.hideOthers} aria-label="Hide other from me" />
		</SettingsRow>
	</SettingsSection>

	<hr class="w-full border-0 border-t border-border-default" />

	<SettingsSection title="Danger zone">
		<SettingsRow title="Password">
			<Button icon={Key} href="/settings/profile/password">Change password</Button>
		</SettingsRow>
		<SettingsRow title="Deactivate">
			<Button variant="warning" icon={Pause} href="/settings/profile/deactivate">
				Deactivate account
			</Button>
		</SettingsRow>
		<SettingsRow title="Delete">
			<Button variant="danger" icon={Trash} href="/settings/profile/delete">Delete account</Button>
		</SettingsRow>
	</SettingsSection>
</div>

<div class="flex w-full justify-end">
	<SettingsSaveBar {dirty} onreset={reset} />
</div>
