@props([
    'session'    => null,
    'role'       => 'mentor',   // 'mentor' | 'mentee'
    'assignment' => null,
])

<div class="bg-white/80 backdrop-blur-sm rounded-xl shadow-lg border border-sky-100 overflow-hidden"
     x-data="{ notesOpen: false }">

    <div class="flex items-center gap-3 px-5 pt-5 pb-3 border-b border-sky-50">
        <span class="text-sky-500 text-xl">📅</span>
        <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Upcoming Session</h3>
    </div>

    <div class="px-5 py-4">
        @if($session)
            {{-- Session details --}}
            <div class="space-y-3">
                <div class="flex items-start justify-between gap-2">
                    <div>
                        <p class="font-semibold text-gray-800 text-sm">
                            {{ $session->title ?? ($session->trainingPackage->name ?? 'Session') }}
                        </p>
                        <p class="text-xs text-gray-500 mt-0.5">
                            {{ \Carbon\Carbon::parse($session->start_time ?? $session->session_date)->format('D, M j · g:i A') }}
                        </p>
                    </div>
                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-sky-100 text-sky-700">
                        Upcoming
                    </span>
                </div>

                {{-- Counterpart name --}}
                @if($role === 'mentor' && isset($session->assignment->mentee))
                    <p class="text-xs text-gray-600">
                        <span class="font-medium">Mentee:</span>
                        {{ $session->assignment->mentee->name }}
                    </p>
                @elseif($role === 'mentee' && isset($session->assignment->mentor))
                    <p class="text-xs text-gray-600">
                        <span class="font-medium">Mentor:</span>
                        {{ $session->assignment->mentor->name }}
                    </p>
                @endif

                @if($session->location ?? $session->meeting_link ?? null)
                    <p class="text-xs text-gray-500">
                        📍 {{ $session->location ?? $session->meeting_link }}
                    </p>
                @endif

                {{-- Notes toggle --}}
                <button @click="notesOpen = !notesOpen"
                        class="text-xs text-sky-600 hover:text-sky-800 font-medium transition-colors">
                    <span x-text="notesOpen ? '▲ Hide notes' : '▼ Add notes'"></span>
                </button>

                <div x-show="notesOpen"
                     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-cloak>
                    <textarea rows="3"
                              placeholder="Session notes…"
                              class="w-full mt-1 text-xs border border-gray-200 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-sky-300 resize-none"></textarea>
                </div>
            </div>
        @else
            {{-- Empty state --}}
            <div class="text-center py-6">
                <p class="text-gray-400 text-sm mb-3">No upcoming sessions scheduled.</p>
                @can('create mentorship sessions')
                    <a href="{{ route('mentorship.sessions.create') }}"
                       class="inline-flex items-center gap-1 text-xs font-medium text-sky-600 hover:text-sky-800 transition-colors">
                        + Schedule a session
                    </a>
                @endcan
            </div>
        @endif
    </div>
</div>
