<script lang="ts">
	import { goto } from "$app/navigation";
	import { resolve } from "$app/paths";
	import Button from "$lib/components/ui/Button.svelte";
	import DrillDown from "$lib/components/settings/DrillDown.svelte";
	import SettingsList from "$lib/components/settings/SettingsList.svelte";
	import FormRow from "$lib/components/settings/FormRow.svelte";
	import FormActions from "$lib/components/settings/FormActions.svelte";
	import Image from "$icon/image";
	import Upload from "$icon/upload";
	import Trash from "$icon/trash-2";
	import X from "$icon/x";

	let input = $state<HTMLInputElement>();
	let file = $state<File | null>(null);

	// mocked — no upload endpoint yet
	const submit = () => goto(resolve("/settings"));
</script>

<DrillDown
	backLabel="Profile"
	backHref="/settings"
	title="Upload or remove avatar"
	description="Upload a new image (PNG or JPEG, max 5MB) or remove your current avatar."
>
	<SettingsList padding="tight">
		<FormRow label="Avatar">
			<div class="flex items-center justify-end gap-4">
				<span class="typography-paragraph-regular text-foreground-muted">
					{file ? file.name : "No file selected."}
				</span>
				<input
					bind:this={input}
					type="file"
					accept="image/png,image/jpeg"
					class="hidden"
					onchange={(e) => (file = e.currentTarget.files?.[0] ?? null)}
				/>
				<Button icon={Image} onclick={() => input?.click()}>Browse…</Button>
			</div>
		</FormRow>
	</SettingsList>

	<FormActions>
		{#snippet start()}
			<Button variant="danger" icon={Trash}>Remove avatar</Button>
		{/snippet}
		<Button href="/settings" icon={X}>Cancel</Button>
		<Button variant="primary" icon={Upload} disabled={!file} onclick={submit}>Upload</Button>
	</FormActions>
</DrillDown>
