1<script lang="ts">
 2	import { Button } from '$lib/components/ui/button';
 3	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 4	import { settingsStore } from '$lib/stores/settings.svelte';
 5	import { RotateCcw } from '@lucide/svelte';
 6
 7	interface Props {
 8		onReset?: () => void;
 9		onSave?: () => void;
10	}
11
12	let { onReset, onSave }: Props = $props();
13
14	let showResetDialog = $state(false);
15
16	function handleResetClick() {
17		showResetDialog = true;
18	}
19
20	function handleConfirmReset() {
21		settingsStore.forceSyncWithServerDefaults();
22		onReset?.();
23
24		showResetDialog = false;
25	}
26
27	function handleSave() {
28		onSave?.();
29	}
30</script>
31
32<div class="flex justify-between border-t border-border/30 p-6">
33	<div class="flex gap-2">
34		<Button variant="outline" onclick={handleResetClick}>
35			<RotateCcw class="h-3 w-3" />
36
37			Reset to default
38		</Button>
39	</div>
40
41	<Button onclick={handleSave}>Save settings</Button>
42</div>
43
44<AlertDialog.Root bind:open={showResetDialog}>
45	<AlertDialog.Content>
46		<AlertDialog.Header>
47			<AlertDialog.Title>Reset Settings to Default</AlertDialog.Title>
48			<AlertDialog.Description>
49				Are you sure you want to reset all settings to their default values? This will reset all
50				parameters to the values provided by the server's /props endpoint and remove all your custom
51				configurations.
52			</AlertDialog.Description>
53		</AlertDialog.Header>
54		<AlertDialog.Footer>
55			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
56			<AlertDialog.Action onclick={handleConfirmReset}>Reset to Default</AlertDialog.Action>
57		</AlertDialog.Footer>
58	</AlertDialog.Content>
59</AlertDialog.Root>