1<script lang="ts">
 2	import * as AlertDialog from '$lib/components/ui/alert-dialog';
 3	import { AlertTriangle, ArrowRight } from '@lucide/svelte';
 4	import { goto } from '$app/navigation';
 5	import { page } from '$app/state';
 6
 7	interface Props {
 8		open: boolean;
 9		modelName: string;
10		availableModels?: string[];
11		onOpenChange?: (open: boolean) => void;
12	}
13
14	let { open = $bindable(), modelName, availableModels = [], onOpenChange }: Props = $props();
15
16	function handleOpenChange(newOpen: boolean) {
17		open = newOpen;
18		onOpenChange?.(newOpen);
19	}
20
21	function handleSelectModel(model: string) {
22		// Build URL with selected model, preserving other params
23		const url = new URL(page.url);
24		url.searchParams.set('model', model);
25
26		handleOpenChange(false);
27		goto(url.toString());
28	}
29</script>
30
31<AlertDialog.Root {open} onOpenChange={handleOpenChange}>
32	<AlertDialog.Content class="max-w-lg">
33		<AlertDialog.Header>
34			<AlertDialog.Title class="flex items-center gap-2">
35				<AlertTriangle class="h-5 w-5 text-amber-500" />
36				Model Not Available
37			</AlertDialog.Title>
38
39			<AlertDialog.Description>
40				The requested model could not be found. Select an available model to continue.
41			</AlertDialog.Description>
42		</AlertDialog.Header>
43
44		<div class="space-y-3">
45			<div class="rounded-lg border border-amber-500/40 bg-amber-500/10 px-4 py-3 text-sm">
46				<p class="font-medium text-amber-600 dark:text-amber-400">
47					Requested: <code class="rounded bg-amber-500/20 px-1.5 py-0.5">{modelName}</code>
48				</p>
49			</div>
50
51			{#if availableModels.length > 0}
52				<div class="text-sm">
53					<p class="mb-2 font-medium text-muted-foreground">Select an available model:</p>
54					<div class="max-h-48 space-y-1 overflow-y-auto rounded-md border p-1">
55						{#each availableModels as model (model)}
56							<button
57								type="button"
58								class="group flex w-full items-center justify-between gap-2 rounded-sm px-3 py-2 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground"
59								onclick={() => handleSelectModel(model)}
60							>
61								<span class="min-w-0 truncate font-mono text-xs">{model}</span>
62								<ArrowRight
63									class="h-4 w-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
64								/>
65							</button>
66						{/each}
67					</div>
68				</div>
69			{/if}
70		</div>
71
72		<AlertDialog.Footer>
73			<AlertDialog.Action onclick={() => handleOpenChange(false)}>Cancel</AlertDialog.Action>
74		</AlertDialog.Footer>
75	</AlertDialog.Content>
76</AlertDialog.Root>