@props([
    'folder',
    'editingId' => null,
    'depth' => 0,
])

<div wire:key="folder-node-{{ $folder->id }}">
    <div
        draggable="true"
        x-data="{ over: false }"
        x-on:dragstart.stop="$event.dataTransfer.setData('text/plain', '{{ $folder->id }}'); $event.dataTransfer.effectAllowed = 'move'"
        x-on:dragover.prevent.stop="over = true"
        x-on:dragleave.stop="over = false"
        x-on:drop.prevent.stop="over = false; $wire.moveFolder($event.dataTransfer.getData('text/plain'), '{{ $folder->id }}')"
        :class="over ? 'bg-brand-50 ring-2 ring-brand-400 dark:bg-brand-500/10' : 'hover:bg-slate-50 dark:hover:bg-slate-800/50'"
        class="group flex items-center gap-2 rounded-lg px-2 py-1.5 transition"
        style="margin-left: {{ $depth * 1.25 }}rem">

        @if ($editingId === $folder->id)
            <form wire:submit="saveEdit" class="flex flex-1 items-center gap-2">
                <input type="text" wire:model="editingName" class="input py-1.5" autofocus>
                <button type="submit" class="btn-primary shrink-0 px-3 py-1.5 text-xs">OK</button>
                <button type="button" wire:click="$set('editingId', null)" class="btn-ghost shrink-0 px-2 py-1.5 text-xs">Annuler</button>
            </form>
        @else
            {{-- Poignée + icône --}}
            <svg class="h-4 w-4 shrink-0 cursor-grab text-slate-300 group-hover:text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" /></svg>
            <svg class="h-5 w-5 shrink-0 text-brand-500" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" /></svg>

            <a href="{{ route('folders.show', $folder) }}" wire:navigate class="flex-1 truncate text-sm font-medium text-slate-800 hover:text-brand-600 dark:text-slate-200" title="Ouvrir le dossier">{{ $folder->name }}</a>
            <span class="shrink-0 text-xs text-slate-400" title="Documents">{{ $folder->documents_count }}</span>

            {{-- Actions (visibles au survol) --}}
            <div class="flex shrink-0 items-center gap-0.5 opacity-0 transition group-hover:opacity-100">
                <button wire:click="prepareChild({{ $folder->id }})" class="btn-ghost p-1.5" title="Ajouter un sous-dossier">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
                </button>
                <button wire:click="startEdit({{ $folder->id }})" class="btn-ghost p-1.5" title="Renommer">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z" /></svg>
                </button>
                <button wire:click="delete({{ $folder->id }})" wire:confirm="Supprimer « {{ $folder->name }} » et ses sous-dossiers ? Les documents seront conservés." class="btn-ghost p-1.5 text-rose-600" title="Supprimer">
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
                </button>
            </div>
        @endif
    </div>

    {{-- Sous-dossiers (récursif) --}}
    @foreach ($folder->childrenRecursive as $child)
        <x-folder-tree-node :folder="$child" :editing-id="$editingId" :depth="$depth + 1" />
    @endforeach
</div>