@props([
    'milestones'         => [],
    'sessions_completed' => 0,
    'assignment_status'  => '',
])

<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-sky-500 text-xl">🏆</span>
        <h3 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Milestone Timeline</h3>
        @if($assignment_status)
            <span class="ml-auto inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                {{ $assignment_status === 'active' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600' }}">
                {{ ucfirst(str_replace('_', ' ', $assignment_status)) }}
            </span>
        @endif
    </div>

    <div class="px-5 py-4">
        @if(empty($milestones))
            {{-- Empty state --}}
            <div class="text-center py-8">
                <div class="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fas fa-flag text-gray-400 text-xl"></i>
                </div>
                <p class="text-gray-500 text-sm">No milestones defined for this assignment yet.</p>
                <p class="text-gray-400 text-xs mt-1">Your mentor will set milestones once the programme begins.</p>
            </div>
        @else
            {{-- Overall progress bar --}}
            @php
                $total    = count($milestones);
                $unlocked = collect($milestones)->filter(function($m) use ($sessions_completed) {
                    $target = $m['target_sessions'] ?? $m['target_date'] ?? 0;
                    if (is_numeric($target)) {
                        return $sessions_completed >= (int) $target;
                    }
                    return now()->gte(\Carbon\Carbon::parse($target));
                })->count();
                $pct = $total > 0 ? round(($unlocked / $total) * 100) : 0;
            @endphp

            <div class="mb-5">
                <div class="flex justify-between text-xs text-gray-500 mb-1">
                    <span>{{ $unlocked }} of {{ $total }} milestones reached</span>
                    <span class="font-semibold text-sky-600">{{ $pct }}%</span>
                </div>
                <div class="w-full bg-gray-100 rounded-full h-2">
                    <div class="bg-sky-500 h-2 rounded-full transition-all duration-700"
                         style="width: {{ $pct }}%"></div>
                </div>
            </div>

            {{-- Timeline items --}}
            <div class="relative">
                {{-- Vertical connector line --}}
                <div class="absolute left-5 top-0 bottom-0 w-0.5 bg-gray-200" aria-hidden="true"></div>

                <div class="space-y-4">
                    @foreach($milestones as $index => $milestone)
                        @php
                            $target   = $milestone['target_sessions'] ?? $milestone['target_date'] ?? 0;
                            $unlocked = is_numeric($target)
                                ? $sessions_completed >= (int) $target
                                : now()->gte(\Carbon\Carbon::parse($target));
                            $icon     = $milestone['icon'] ?? '⭐';
                            $title    = $milestone['title'] ?? 'Milestone ' . ($index + 1);
                            $desc     = $milestone['description'] ?? '';
                            $panelId  = 'milestone-panel-' . $index;
                        @endphp

                        <div x-data="{ open: false }" class="relative pl-12">
                            {{-- Timeline dot --}}
                            <div class="absolute left-0 top-1 w-10 h-10 rounded-full flex items-center justify-center z-10
                                {{ $unlocked
                                    ? 'bg-sky-100 border-2 border-sky-400 text-sky-600'
                                    : 'bg-gray-100 border-2 border-gray-300 text-gray-400' }}
                                transition-all duration-300">
                                @if($unlocked)
                                    <span class="text-base leading-none">{{ $icon }}</span>
                                @else
                                    <i class="fas fa-lock text-sm"></i>
                                @endif
                            </div>

                            {{-- Milestone card --}}
                            <div class="bg-gray-50 rounded-lg border
                                {{ $unlocked ? 'border-sky-200' : 'border-gray-200' }}
                                transition-all duration-200 hover:shadow-sm">

                                {{-- Card header (always visible) --}}
                                <button @click="open = !open"
                                        class="w-full flex items-center justify-between px-4 py-3 text-left focus:outline-none">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-semibold
                                            {{ $unlocked ? 'text-sky-700' : 'text-gray-500' }}">
                                            {{ $title }}
                                        </span>
                                        @if($unlocked)
                                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-sky-100 text-sky-700">
                                                ✓ Unlocked
                                            </span>
                                        @else
                                            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-500">
                                                🔒 Locked
                                            </span>
                                        @endif
                                    </div>
                                    <div class="flex items-center gap-2 text-xs text-gray-400">
                                        @if(is_numeric($target))
                                            <span>{{ $target }} sessions</span>
                                        @else
                                            <span>{{ \Carbon\Carbon::parse($target)->format('M j, Y') }}</span>
                                        @endif
                                        <i class="fas text-gray-400 transition-transform duration-200"
                                           :class="open ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
                                    </div>
                                </button>

                                {{-- 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="px-4 pb-4 border-t border-gray-200">
                                    @if($desc)
                                        <p class="text-sm text-gray-600 mt-3">{{ $desc }}</p>
                                    @endif

                                    @if(!$unlocked && is_numeric($target))
                                        <p class="text-xs text-gray-400 mt-2">
                                            <i class="fas fa-info-circle mr-1"></i>
                                            Complete {{ max(0, (int)$target - $sessions_completed) }} more session(s) to unlock this milestone.
                                        </p>
                                    @endif

                                    @if($unlocked)
                                        <p class="text-xs text-sky-600 mt-2 font-medium">
                                            <i class="fas fa-check-circle mr-1"></i>
                                            Milestone achieved!
                                        </p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</div>
