<script lang="ts">
	import { PencilRuler, ChevronDown, ChevronRight, Loader2, Info, Check } from '@lucide/svelte';
	import { Checkbox } from '$lib/components/ui/checkbox';
	import * as Collapsible from '$lib/components/ui/collapsible';
	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
	import * as Tooltip from '$lib/components/ui/tooltip';
	import { toolsStore } from '$lib/stores/tools.svelte';
	import { CLI_FLAGS } from '$lib/constants';
	import { mcpStore } from '$lib/stores/mcp.svelte';
	import { useToolsPanel } from '$lib/hooks/use-tools-panel.svelte';

	const toolsPanel = useToolsPanel();
	const hasMcpServersAvailable = $derived(mcpStore.getServersSorted().length > 0);
</script>

<DropdownMenu.Sub onOpenChange={(open) => open && toolsPanel.handleOpen()}>
	<DropdownMenu.SubTrigger class="flex cursor-pointer items-center gap-2">
		<PencilRuler class="h-4 w-4" />

		<span>Tools</span>
	</DropdownMenu.SubTrigger>

	<DropdownMenu.SubContent class="w-72 p-0">
		{#if toolsPanel.totalToolCount === 0}
			{#if toolsStore.loading}
				<div class="px-3 py-4 text-center text-sm text-muted-foreground">
					<Loader2 class="mx-auto mb-1 h-4 w-4 animate-spin" />

					Loading tools...
				</div>
			{:else if toolsStore.isToolsEndpointUnreachable}
				<div class="grid gap-2.5 px-3 py-4 text-sm text-muted-foreground">
					<span class="flex gap-2">
						<Info class="mt-0.5 h-4 w-4 shrink-0" />

						<span>
							Run llama-server with <code>{CLI_FLAGS.TOOLS}</code> flag to enable

							<strong>Built-in Tools</strong>.
						</span>
					</span>

					<span class="flex gap-2">
						<Info class="mt-0.5 h-4 w-4 shrink-0" />

						<span>
							{hasMcpServersAvailable ? 'Enable' : 'Add'} MCP Server(s) to access

							<strong>MCP Tools</strong>.
						</span>
					</span>
				</div>
			{:else if toolsStore.error}
				<div class="px-3 py-4 text-center text-sm text-muted-foreground">Failed to load tools</div>
			{:else if toolsPanel.noToolsInfoMessage}
				<div class="flex gap-2 px-3 py-4 text-sm text-muted-foreground">
					<Info class="mt-0.5 h-4 w-4 shrink-0" />

					<span>{toolsPanel.noToolsInfoMessage}</span>
				</div>
			{:else}
				<div class="px-3 py-4 text-center text-sm text-muted-foreground">No tools available</div>
			{/if}
		{:else}
			<div class="max-h-80 overflow-y-auto p-2 pr-1">
				{#each toolsPanel.activeGroups as group (group.label)}
					{@const isExpanded = toolsPanel.expandedGroups.has(group.label)}
					{@const checked = toolsPanel.isGroupChecked(group)}
					{@const favicon = toolsPanel.getFavicon(group)}

					<Collapsible.Root
						open={isExpanded}
						onOpenChange={() => toolsPanel.toggleGroupExpanded(group.label)}
					>
						<div class="flex items-center gap-1">
							<Collapsible.Trigger
								class="flex min-w-0 flex-1 items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-muted/50"
							>
								{#if isExpanded}
									<ChevronDown class="h-3.5 w-3.5 shrink-0" />
								{:else}
									<ChevronRight class="h-3.5 w-3.5 shrink-0" />
								{/if}

								<span class="inline-flex min-w-0 items-center gap-1.5 font-medium">
									{#if favicon}
										<img
											src={favicon}
											alt=""
											class="h-4 w-4 shrink-0 rounded-sm"
											onerror={(e) => {
												(e.currentTarget as HTMLImageElement).style.display = 'none';
											}}
										/>
									{/if}

									<span class="truncate">{group.label}</span>
								</span>

								<span class="ml-auto shrink-0 text-xs text-muted-foreground">
									{toolsPanel.getEnabledToolCount(group)}/{group.tools.length}
								</span>
							</Collapsible.Trigger>

							<Tooltip.Root>
								<Tooltip.Trigger>
									{#snippet child({ props })}
										<Checkbox
											{...props}
											{checked}
											onCheckedChange={() => toolsPanel.toggleGroupByLabel(group.label)}
											class="mr-2 h-4 w-4 shrink-0"
										/>
									{/snippet}
								</Tooltip.Trigger>

								<Tooltip.Content side="right">
									<p>
										{checked ? 'Disable' : 'Enable'}
										{group.tools.length} tool{group.tools.length !== 1 ? 's' : ''}
									</p>
								</Tooltip.Content>
							</Tooltip.Root>
						</div>

						<Collapsible.Content>
							<div class="ml-4 flex flex-col gap-0.5 border-l border-border/50 pl-2">
								{#each group.tools as entry (entry.key)}
									{@const enabled = toolsStore.isToolEnabled(entry.key)}
									<button
										type="button"
										class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm transition-colors hover:bg-muted/50"
										onclick={() => toolsStore.toggleTool(entry.key)}
									>
										<span
											data-slot="checkbox"
											data-state={enabled ? 'checked' : 'unchecked'}
											class="flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
										>
											{#if enabled}
												<Check class="size-3.5" />
											{/if}
										</span>

										<span class="min-w-0 flex-1 truncate font-mono text-[12px]">
											{entry.definition.function.name}
										</span>
									</button>
								{/each}
							</div>
						</Collapsible.Content>
					</Collapsible.Root>
				{/each}
			</div>
		{/if}
	</DropdownMenu.SubContent>
</DropdownMenu.Sub>
