@php
    $agent = $node['agent'];
    $children = $node['children'];
    $hasChildren = count($children) > 0;
@endphp

<div class="genealogy-item mb-3 {{ $depth > 0 ? 'genealogy-node' : '' }}">
    <div class="inline-flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600 hover:border-indigo-400 dark:hover:border-indigo-500 transition-colors">
        <!-- Avatar -->
        <div class="w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center flex-shrink-0">
            <span class="text-sm font-bold text-indigo-600 dark:text-indigo-400">
                {{ strtoupper(substr($agent->name, 0, 2)) }}
            </span>
        </div>

        <!-- Info -->
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2">
                <a href="{{ route('agents.show', $agent) }}" class="text-sm font-semibold text-gray-900 dark:text-white hover:text-indigo-600 dark:hover:text-indigo-400 truncate">
                    {{ $agent->name }}
                </a>
                <span class="px-1.5 py-0.5 text-xs rounded {{ $agent->status === 'active' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' }}">
                    {{ ucfirst($agent->status) }}
                </span>
            </div>
            <div class="flex items-center gap-2 mt-0.5">
                <span class="text-xs font-mono text-indigo-600 dark:text-indigo-400" title="Matrix ID">{{ $agent->coupon_code }}</span>
                <span class="text-xs text-gray-500 dark:text-gray-400">&bull;</span>
                <span class="text-xs text-gray-500 dark:text-gray-400">{{ $agent->performanceTier->name ?? 'Basic' }}</span>
                @if($hasChildren)
                    <span class="text-xs text-gray-500 dark:text-gray-400">&bull;</span>
                    <span class="text-xs text-purple-600 dark:text-purple-400">{{ count($children) }} downline(s)</span>
                @endif
            </div>
        </div>

        <!-- Actions -->
        <div class="flex items-center gap-1">
            <!-- Edit Upline Button -->
            <button type="button"
                    onclick="openEditModal({{ $agent->id }}, '{{ addslashes($agent->name) }}', '{{ $agent->upline_id }}')"
                    class="p-1.5 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 rounded hover:bg-white dark:hover:bg-gray-600"
                    title="Change Upline">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
                </svg>
            </button>

            <!-- View as Agent -->
            <form action="{{ route('agents.impersonate', $agent) }}" method="POST" class="inline">
                @csrf
                <button type="submit"
                        class="p-1.5 text-purple-500 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 rounded hover:bg-white dark:hover:bg-gray-600"
                        title="View as Agent">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                </button>
            </form>

            <!-- Edit Agent -->
            <a href="{{ route('agents.edit', $agent) }}"
               class="p-1.5 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 rounded hover:bg-white dark:hover:bg-gray-600"
               title="Edit Agent">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                </svg>
            </a>
        </div>
    </div>

    <!-- Children -->
    @if($hasChildren)
        <div class="mt-2">
            @foreach($children as $child)
                @include('agents.partials.genealogy-node', ['node' => $child, 'depth' => $depth + 1])
            @endforeach
        </div>
    @endif
</div>