<script lang="ts">
	import type { VaultFile } from '$lib/utils/markdown';
	import FileTreeItem from './FileTreeItem.svelte';

	interface Props {
		file: VaultFile;
		selectedPath: string | null;
		depth?: number;
		onSelect: (file: VaultFile) => void;
	}

	let { file, selectedPath, depth = 0, onSelect }: Props = $props();

	let expanded = $state(false);

	const isFolder = $derived(file.type === 'folder');
	const isSelected = $derived(selectedPath === file.path);

	function handleClick() {
		if (isFolder) {
			expanded = !expanded;
		} else {
			onSelect(file);
		}
	}

	function handleKeydown(e: KeyboardEvent) {
		if (e.key === 'Enter' || e.key === ' ') {
			e.preventDefault();
			handleClick();
		}
	}
</script>

<div class="file-tree-item">
	<button
		class="item-row"
		class:selected={isSelected}
		class:folder={isFolder}
		style="padding-left: {depth * 12 + 8 + (isFolder ? 0 : 18)}px"
		onclick={handleClick}
		onkeydown={handleKeydown}
		aria-expanded={isFolder ? expanded : undefined}
	>
		{#if isFolder}
			<svg class="chevron" class:expanded width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
				<path d="M4.5 2L8.5 6L4.5 10" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
			</svg>
		{/if}
		<span class="name">{file.name}</span>
	</button>

	{#if isFolder && expanded && file.children}
		<div class="children">
			{#each file.children as child (child.path)}
				<FileTreeItem file={child} {selectedPath} depth={depth + 1} {onSelect} />
			{/each}
		</div>
	{/if}
</div>

<style>
	.file-tree-item {
		width: 100%;
	}

	.item-row {
		display: flex;
		align-items: center;
		gap: 6px;
		width: 100%;
		padding: 4px 8px;
		border: none;
		background: transparent;
		color: var(--color-text-secondary);
		font-size: 13px;
		text-align: left;
		cursor: pointer;
		border-radius: 4px;
		transition: all 0.15s;
	}

	.item-row:hover {
		background: rgba(255, 255, 255, 0.05);
		color: var(--color-text-primary);
	}

	.item-row.selected {
		background: var(--color-obsidian-accent);
		color: white;
	}

	.chevron {
		flex-shrink: 0;
		opacity: 0.5;
		transition: transform 0.15s;
	}

	.chevron.expanded {
		transform: rotate(90deg);
	}

	.name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.children {
		width: 100%;
	}
</style>
