<script lang="ts">
	import { Folder, MoreVertical, Edit2, Trash2 } from 'lucide-svelte';
	import { DropdownMenu } from 'bits-ui';

	interface FolderData {
		id: string;
		name: string;
		visibility: string;
		created_at: string;
		creator?: {
			first_name: string;
			last_name: string;
		};
	}

	let {
		folder,
		canEdit = false,
		canDelete = false,
		onNavigate,
		onRename,
		onDelete
	}: {
		folder: FolderData;
		canEdit?: boolean;
		canDelete?: boolean;
		onNavigate: (folderId: string) => void;
		onRename?: (folder: FolderData) => void;
		onDelete?: (folder: FolderData) => void;
	} = $props();

	const visibilityColors: Record<string, string> = {
		public: 'text-green-600',
		members: 'text-blue-600',
		board: 'text-purple-600',
		admin: 'text-red-600'
	};

	function handleClick() {
		onNavigate(folder.id);
	}

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

<div
	class="group relative flex items-center gap-3 rounded-xl border border-slate-200/60 bg-white/50 p-4 backdrop-blur-sm transition-all hover:border-monaco-200 hover:bg-white/80 hover:shadow-md cursor-pointer"
	role="button"
	tabindex="0"
	onclick={handleClick}
	onkeydown={handleKeydown}
>
	<!-- Folder Icon -->
	<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-amber-100 text-amber-600">
		<Folder class="h-6 w-6" />
	</div>

	<!-- Folder Info -->
	<div class="flex-1 min-w-0">
		<h3 class="font-medium text-slate-900 truncate">{folder.name}</h3>
		<div class="flex items-center gap-2 text-xs text-slate-500">
			<span class={visibilityColors[folder.visibility] || 'text-slate-500'}>
				{folder.visibility}
			</span>
			{#if folder.creator}
				<span>·</span>
				<span>{folder.creator.first_name} {folder.creator.last_name}</span>
			{/if}
		</div>
	</div>

	<!-- Actions Menu -->
	{#if canEdit || canDelete}
		<div
			class="opacity-0 group-hover:opacity-100 transition-opacity"
			role="presentation"
			onclick={(e) => e.stopPropagation()}
			onkeydown={(e) => e.stopPropagation()}
		>
			<DropdownMenu.Root>
				<DropdownMenu.Trigger
					class="rounded-lg p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-600"
					aria-label="Folder options"
				>
					<MoreVertical class="h-4 w-4" />
				</DropdownMenu.Trigger>
				<DropdownMenu.Portal>
					<DropdownMenu.Content
						align="end"
						class="z-50 min-w-48 rounded-lg border border-slate-200 bg-white p-1 shadow-lg"
					>
						{#if canEdit && onRename}
							<DropdownMenu.Item
								class="flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm text-slate-700 hover:bg-slate-100 focus:bg-slate-100 focus:outline-none"
								onSelect={() => onRename(folder)}
							>
								<Edit2 class="h-4 w-4" />
								Rename
							</DropdownMenu.Item>
						{/if}
						{#if canDelete && onDelete}
							<DropdownMenu.Item
								class="flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm text-red-600 hover:bg-red-50 focus:bg-red-50 focus:outline-none"
								onSelect={() => onDelete(folder)}
							>
								<Trash2 class="h-4 w-4" />
								Delete
							</DropdownMenu.Item>
						{/if}
					</DropdownMenu.Content>
				</DropdownMenu.Portal>
			</DropdownMenu.Root>
		</div>
	{/if}
</div>
