@php
    $hasChildren = $agent->downlines_count > 0;
    $statusClass = $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';

    $programColors = [
        'legacy' => 'bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200',
        'progressive' => 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
        'performance' => 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
    ];
    $programType = $agent->commissionProgram?->type ?? 'none';
    $programClass = $programColors[$programType] ?? 'bg-gray-100 text-gray-800';
@endphp

<div class="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 transition-colors">
    {{-- Expand/Collapse Button --}}
    @if($hasChildren)
        <button onclick="toggleChildren({{ $agent->id }}, this)" class="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded">
            <svg class="w-4 h-4 text-gray-500 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
        </button>
    @else
        <div class="w-6"></div>
    @endif

    {{-- 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 flex-wrap">
            <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 {{ $statusClass }}">
                {{ ucfirst($agent->status) }}
            </span>
            @if($programType !== 'none')
                <span class="px-1.5 py-0.5 text-xs rounded {{ $programClass }}">
                    {{ ucfirst($programType) }}
                </span>
            @endif
        </div>
        <div class="flex items-center gap-2 mt-0.5 flex-wrap">
            <span class="text-xs font-mono text-indigo-600 dark:text-indigo-400" title="Matrix ID">{{ $agent->coupon_code }}</span>
            @if($hasChildren)
                <span class="text-xs text-purple-600 dark:text-purple-400">{{ $agent->downlines_count }} 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 Container (loaded via AJAX) --}}
<div id="children-{{ $agent->id }}" class="genealogy-children hidden" data-loaded="false"></div>