<script lang="ts">
	import type { ExplorerFolder } from '$lib/api';
	import { fmtDate } from '$lib/format';
	import Icon from './Icon.svelte';
	import FolderNode from './FolderNode.svelte';

	let {
		folders,
		projects,
		parentId,
		slug,
		onCreateFolder,
		onCreateProject,
	}: {
		folders: ExplorerFolder[];
		projects: {
			id: string;
			name: string;
			folderId: string | null;
			createdAt: string;
			binding: { chatId: string } | null;
		}[];
		parentId: string | null;
		slug: string;
		onCreateFolder?: (parentId: string) => void;
		onCreateProject?: (folderId: string) => void;
	} = $props();

	let childFolders = $derived(folders.filter((f) => f.parentId === parentId));
	let childProjects = $derived(projects.filter((p) => p.folderId === parentId));
</script>

<div class="space-y-0.5">
	{#each childProjects as p (p.id)}
		<a
			href={`/admin/projects/${p.id}`}
			class="flex items-center gap-2.5 px-3 py-2.5 text-sm transition hover:bg-surface-100"
		>
			<span class="flex h-7 w-7 items-center justify-center border border-primary-200 bg-primary-50 text-primary-700">
				<Icon name="file" class="h-4 w-4" />
			</span>
			<span class="min-w-0 flex-1 truncate font-medium text-surface-900">{p.name}</span>
			{#if p.binding}
				<span class="saas-badge-success">已绑定</span>
			{/if}
			<span class="hidden text-xs text-surface-600 sm:inline">{fmtDate(p.createdAt)}</span>
		</a>
	{/each}

	{#each childFolders as f (f.id)}
		<FolderNode folder={f} {folders} {projects} {slug} {onCreateFolder} {onCreateProject} />
	{/each}
</div>
