<script lang="ts">
	let {
		value = $bindable(''),
		onselect
	}: {
		value?: string;
		onselect?: (path: string) => void;
	} = $props();

	interface Entry {
		name: string;
		path: string;
		isGitRepo: boolean;
	}

	let browsePath = $state('');
	let entries = $state<Entry[]>([]);
	let parent = $state<string | null>(null);
	let browseError = $state<string | null>(null);
	let loading = $state(false);
	let open = $state(false);

	async function browse(targetPath: string) {
		loading = true;
		browseError = null;
		try {
			const res = await fetch(`/api/v1/fs/browse?path=${encodeURIComponent(targetPath)}`);
			const data = await res.json();
			browsePath = data.path;
			entries = data.entries ?? [];
			parent = data.parent;
			browseError = data.error ?? null;
		} finally {
			loading = false;
		}
	}

	function openPicker() {
		open = true;
		browse(value || '~');
	}

	function selectEntry(entry: Entry) {
		value = entry.path;
		onselect?.(entry.path);
		open = false;
	}

	function selectCurrent() {
		value = browsePath;
		onselect?.(browsePath);
		open = false;
	}

	function handleKeydown(e: KeyboardEvent) {
		if (e.key === 'Escape') open = false;
	}

	function handleBackdropClick(e: MouseEvent) {
		if (e.target === e.currentTarget) open = false;
	}
</script>

<svelte:window onkeydown={handleKeydown} />

<div class="relative">
	<div class="flex gap-2">
		<input
			type="text"
			bind:value
			placeholder="/home/user/projects/my-sdk"
			class="flex-1 rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
		/>
		<button
			type="button"
			onclick={openPicker}
			class="flex items-center gap-1.5 rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
			title="Browse folders"
		>
			<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
				<path
					d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
				/>
			</svg>
			Browse
		</button>
	</div>
</div>

{#if open}
	<!-- svelte-ignore a11y_click_events_have_key_events -->
	<div
		role="presentation"
		class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 p-4"
		onclick={handleBackdropClick}
	>
		<div class="flex w-full max-w-lg flex-col rounded-xl bg-white shadow-xl" style="max-height: 70vh">
			<!-- Header -->
			<div class="flex items-center justify-between border-b border-gray-200 px-4 py-3">
				<h3 class="text-sm font-semibold text-gray-900">Select Folder</h3>
				<button
					onclick={() => (open = false)}
					class="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
					aria-label="Close"
				>
					<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
						<path
							d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
						/>
					</svg>
				</button>
			</div>

			<!-- Current path breadcrumb -->
			<div class="flex items-center gap-2 border-b border-gray-100 bg-gray-50 px-4 py-2">
				{#if parent}
					<button
						onclick={() => browse(parent!)}
						class="rounded p-1 text-gray-500 hover:bg-gray-200 hover:text-gray-700"
						title="Go up"
						aria-label="Go to parent directory"
					>
						<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
							<path
								fill-rule="evenodd"
								d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z"
								clip-rule="evenodd"
							/>
						</svg>
					</button>
				{/if}
				<span class="flex-1 truncate font-mono text-xs text-gray-600" title={browsePath}>
					{browsePath}
				</span>
				{#if loading}
					<svg
						class="h-4 w-4 animate-spin text-gray-400"
						fill="none"
						viewBox="0 0 24 24"
					>
						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
						></circle>
						<path
							class="opacity-75"
							fill="currentColor"
							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
						></path>
					</svg>
				{/if}
			</div>

			<!-- Directory listing -->
			<div class="flex-1 overflow-y-auto">
				{#if browseError}
					<div class="px-4 py-8 text-center text-sm text-red-600">{browseError}</div>
				{:else if entries.length === 0 && !loading}
					<div class="px-4 py-8 text-center text-sm text-gray-500">No subdirectories found</div>
				{:else}
					<ul class="py-1">
						{#each entries as entry (entry.path)}
							<li>
								<button
									class="flex w-full items-center gap-3 px-4 py-2 text-left text-sm hover:bg-blue-50"
									onclick={() => browse(entry.path)}
									ondblclick={() => selectEntry(entry)}
									title="Click to navigate, double-click to select"
								>
									<svg
										class="h-4 w-4 shrink-0 {entry.isGitRepo ? 'text-orange-400' : 'text-yellow-400'}"
										viewBox="0 0 20 20"
										fill="currentColor"
									>
										<path
											d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
										/>
									</svg>
									<span class="flex-1 truncate text-gray-800">{entry.name}</span>
									{#if entry.isGitRepo}
										<span class="shrink-0 rounded bg-orange-100 px-1.5 py-0.5 text-xs text-orange-700">
											git
										</span>
									{/if}
								</button>
							</li>
						{/each}
					</ul>
				{/if}
			</div>

			<!-- Footer -->
			<div class="flex items-center justify-between border-t border-gray-200 px-4 py-3">
				<span class="truncate font-mono text-xs text-gray-500">{browsePath}</span>
				<div class="flex shrink-0 gap-2">
					<button
						onclick={() => (open = false)}
						class="rounded-lg border border-gray-200 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50"
					>
						Cancel
					</button>
					<button
						onclick={selectCurrent}
						class="rounded-lg bg-blue-600 px-3 py-1.5 text-sm text-white hover:bg-blue-700"
					>
						Select This Folder
					</button>
				</div>
			</div>
		</div>
	</div>
{/if}
