@props([
    'assignments' => collect(),
    'mentorName'  => '',
])

<div class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden">
    <div class="flex items-center gap-3 px-5 pt-5 pb-3 border-b border-gray-100">
        <span class="text-purple-500 text-xl">🌳</span>
        <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Impact Map</h3>
        @if($assignments->isNotEmpty())
            <span class="ml-auto inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-700">
                {{ $assignments->where('status', 'active')->count() }} active
            </span>
        @endif
    </div>

    <div class="px-5 py-6">
        {{-- Root: Mentor node --}}
        <div class="flex flex-col items-center">
            <div class="px-5 py-2.5 bg-gradient-to-r from-purple-600 to-violet-700 text-white rounded-xl font-semibold text-sm shadow-md">
                <i class="fas fa-chalkboard-teacher mr-2"></i>{{ $mentorName }} (You)
            </div>

            @if($assignments->isNotEmpty())
                {{-- Vertical connector from root --}}
                <div class="w-0.5 h-6 bg-purple-300"></div>

                {{-- Horizontal spread line --}}
                @if($assignments->count() > 1)
                    <div class="relative w-full flex justify-center">
                        <div class="absolute top-0 left-1/4 right-1/4 h-0.5 bg-purple-200"
                             style="left: calc({{ 100 / ($assignments->count() * 2) }}%); right: calc({{ 100 / ($assignments->count() * 2) }}%)"></div>
                    </div>
                @endif

                {{-- Mentee nodes --}}
                <div class="flex flex-wrap justify-center gap-4 mt-0 w-full">
                    @foreach($assignments as $assignment)
                        <div x-data="{ open: false }"
                             class="flex flex-col items-center"
                             style="min-width: 180px; max-width: 220px;">

                            {{-- Vertical connector to mentee --}}
                            <div class="w-0.5 h-4 bg-purple-200"></div>

                            {{-- Mentee card --}}
                            <div @click="open = !open"
                                 class="cursor-pointer w-full border rounded-xl p-4 transition-all duration-200 hover:shadow-md
                                     {{ $assignment->status === 'active'
                                         ? 'border-purple-200 bg-purple-50/50 hover:bg-purple-50'
                                         : 'border-yellow-200 bg-yellow-50/50 hover:bg-yellow-50' }}"
                                 x-data
                                 @mouseenter="$el.style.transform='scale(1.03)'; $el.style.transition='transform 300ms cubic-bezier(0.34,1.56,0.64,1)'"
                                 @mouseleave="$el.style.transform='scale(1)'">

                                {{-- Avatar + name --}}
                                <div class="flex items-center gap-2 mb-3">
                                    <div class="w-9 h-9 bg-purple-100 rounded-full flex items-center justify-center
                                                text-purple-700 font-bold text-xs flex-shrink-0">
                                        {{ strtoupper(substr($assignment->mentee->name ?? '??', 0, 2)) }}
                                    </div>
                                    <div class="min-w-0">
                                        <p class="text-sm font-semibold text-gray-800 leading-tight truncate">
                                            {{ $assignment->mentee->name ?? 'Unknown' }}
                                        </p>
                                        <p class="text-xs text-gray-400 truncate">
                                            {{ $assignment->programme->title ?? 'No Programme' }}
                                        </p>
                                    </div>
                                </div>

                                {{-- Progress bar --}}
                                <div class="mb-2">
                                    <div class="flex justify-between text-xs text-gray-400 mb-1">
                                        <span>Progress</span>
                                        <span class="font-medium text-purple-600">{{ $assignment->progress }}%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-1.5">
                                        <div class="bg-purple-500 h-1.5 rounded-full transition-all duration-500"
                                             style="width: {{ $assignment->progress }}%"></div>
                                    </div>
                                </div>

                                {{-- Session count --}}
                                <p class="text-xs text-gray-400 mb-2">
                                    <i class="fas fa-calendar-check mr-1 text-purple-400"></i>
                                    {{ $assignment->sessions_completed }}/{{ $assignment->sessions_total ?? '?' }} sessions
                                </p>

                                {{-- Status badge --}}
                                <div class="flex items-center justify-between">
                                    <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium
                                        {{ $assignment->status === 'active'
                                            ? 'bg-green-100 text-green-700'
                                            : 'bg-yellow-100 text-yellow-700' }}">
                                        {{ $assignment->status_label }}
                                    </span>
                                    <i class="fas text-gray-300 text-xs transition-transform duration-200"
                                       :class="open ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
                                </div>
                            </div>

                            {{-- Expandable detail panel --}}
                            <div x-show="open"
                                 x-transition:enter="transition ease-out duration-200"
                                 x-transition:enter-start="opacity-0 -translate-y-1"
                                 x-transition:enter-end="opacity-100 translate-y-0"
                                 x-transition:leave="transition ease-in duration-150"
                                 x-transition:leave-start="opacity-100 translate-y-0"
                                 x-transition:leave-end="opacity-0 -translate-y-1"
                                 x-cloak
                                 class="w-full mt-1 bg-gray-50 rounded-lg border border-gray-200 p-3 text-xs text-gray-600">
                                @if($assignment->goals)
                                    <p class="font-medium text-gray-700 mb-1">Goals:</p>
                                    <p class="text-gray-500 mb-2">{{ Str::limit($assignment->goals, 120) }}</p>
                                @endif
                                @if($assignment->start_date)
                                    <p class="text-gray-400 mb-2">
                                        <i class="fas fa-calendar mr-1"></i>
                                        Started {{ $assignment->start_date->format('M j, Y') }}
                                    </p>
                                @endif
                                <a href="{{ route('mentorship.assignments.show', $assignment) }}"
                                   class="inline-flex items-center gap-1 text-purple-600 hover:text-purple-800 font-medium transition-colors">
                                    View full assignment <i class="fas fa-arrow-right text-xs"></i>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>

            @else
                {{-- Empty state --}}
                <div class="text-center py-8 mt-4">
                    <div class="w-14 h-14 bg-purple-50 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-user-graduate text-purple-300 text-xl"></i>
                    </div>
                    <p class="text-gray-500 text-sm font-medium">No active mentees assigned yet.</p>
                    <p class="text-gray-400 text-xs mt-1 mb-4">Browse available programmes to get matched with mentees.</p>
                    @can('view mentorship programmes')
                        <a href="{{ route('mentorship.programmes.index') }}"
                           class="inline-flex items-center gap-1 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm transition-colors">
                            <i class="fas fa-search mr-1"></i>Browse Programmes
                        </a>
                    @endcan
                </div>
            @endif
        </div>
    </div>
</div>
