@extends('layouts.admin')

@section('header')
    Engagement
@endsection

@section('content')
    <div class="space-y-6">
        <!-- Visual Key -->
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            <!-- All -->
            <a href="{{ route('engagement.index', ['filter' => 'all']) }}" class="block no-underline transform transition hover:scale-105 duration-200">
                <div class="bg-white overflow-hidden shadow-sm rounded-lg border-l-4 border-indigo-500 {{ $filter === 'all' ? 'ring-2 ring-indigo-500' : '' }}">
                    <div class="p-4">
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider">All Members</div>
                        <div class="text-xs text-gray-500 mb-2">Total</div>
                        <div class="flex items-baseline gap-2">
                            <span class="text-3xl font-bold text-gray-900">{{ $stats->all_members }}</span>
                        </div>
                    </div>
                </div>
            </a>

            <!-- Active -->
            <a href="{{ route('engagement.index', ['filter' => 'active']) }}" class="block no-underline transform transition hover:scale-105 duration-200">
                <div class="bg-white overflow-hidden shadow-sm rounded-lg border-l-4 border-green-500 {{ $filter === 'active' ? 'ring-2 ring-green-500' : '' }}">
                    <div class="p-4">
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Active</div>
                        <div class="text-xs text-gray-500 mb-2">last 2 wks</div>
                        <div class="flex items-baseline gap-2">
                            <span class="text-3xl font-bold text-gray-900">{{ $stats->active }}</span>
                        </div>
                    </div>
                </div>
            </a>

            <!-- Slipping -->
            <a href="{{ route('engagement.index', ['filter' => 'slipping']) }}" class="block no-underline transform transition hover:scale-105 duration-200">
                <div class="bg-white overflow-hidden shadow-sm rounded-lg border-l-4 border-yellow-400 {{ $filter === 'slipping' ? 'ring-2 ring-yellow-400' : '' }}">
                    <div class="p-4">
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Slipping</div>
                        <div class="text-xs text-gray-500 mb-2">2-4 wks</div>
                        <div class="flex items-baseline gap-2">
                            <span class="text-3xl font-bold text-gray-900">{{ $stats->slipping }}</span>
                        </div>
                    </div>
                </div>
            </a>

            <!-- Fading -->
            <a href="{{ route('engagement.index', ['filter' => 'fading']) }}" class="block no-underline transform transition hover:scale-105 duration-200">
                <div class="bg-white overflow-hidden shadow-sm rounded-lg border-l-4 border-orange-500 {{ $filter === 'fading' ? 'ring-2 ring-orange-500' : '' }}">
                    <div class="p-4">
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Fading</div>
                        <div class="text-xs text-gray-500 mb-2">4-8 wks</div>
                        <div class="flex items-baseline gap-2">
                            <span class="text-3xl font-bold text-gray-900">{{ $stats->fading }}</span>
                        </div>
                    </div>
                </div>
            </a>

            <!-- At-risk -->
            <a href="{{ route('engagement.index', ['filter' => 'at_risk']) }}" class="block no-underline transform transition hover:scale-105 duration-200">
                <div class="bg-white overflow-hidden shadow-sm rounded-lg border-l-4 border-red-600 {{ $filter === 'at_risk' ? 'ring-2 ring-red-600' : '' }}">
                    <div class="p-4">
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider">At-risk</div>
                        <div class="text-xs text-gray-500 mb-2">> 8 wks</div>
                        <div class="flex items-baseline gap-2">
                            <span class="text-3xl font-bold text-gray-900">{{ $stats->at_risk }}</span>
                        </div>
                    </div>
                </div>
            </a>

             <!-- No Activity -->
             <a href="{{ route('engagement.index', ['filter' => 'no_activity']) }}" class="block no-underline transform transition hover:scale-105 duration-200">
                <div class="bg-white overflow-hidden shadow-sm rounded-lg border-l-4 border-gray-800 {{ $filter === 'no_activity' ? 'ring-2 ring-gray-800' : '' }}">
                    <div class="p-4">
                        <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider">No Activity</div>
                        <div class="text-xs text-gray-500 mb-2">No data</div>
                        <div class="flex items-baseline gap-2">
                            <span class="text-3xl font-bold text-gray-900">{{ $stats->no_activity }}</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rank</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Graded</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last session</th>
                            <th scope="col" class="relative px-6 py-3">
                                <span class="sr-only">Actions</span>
                            </th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        @foreach($users as $user)
                            <tr class="hover:bg-gray-50">
                                <!-- Name -->
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center">
                                        <div class="flex-shrink-0 h-12 w-12 mr-3">
                                            @if($user->photo_url_thumbnail)
                                                <img class="h-12 w-12 rounded-md object-cover" src="{{ $user->photo_url_thumbnail }}" alt="{{ $user->name }}">
                                            @else
                                                <div class="h-12 w-12 rounded-md bg-gray-100 flex items-center justify-center">
                                                    <svg class="h-6 w-6 text-gray-300" fill="currentColor" viewBox="0 0 24 24">
                                                        <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
                                                    </svg>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="ml-4">
                                            <div class="text-sm font-medium text-gray-900">
                                                <a href="{{ route('members.show', $user) }}" class="hover:text-indigo-600 hover:underline">
                                                    {{ $user->name }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </td>

                                <!-- Rank -->
                                <td class="px-6 py-4 whitespace-nowrap">
                                    @if($user->rank)
                                        <div class="flex items-center gap-2">
                                            <div class="w-8 h-8 rounded border-2 border-gray-300 flex-shrink-0" 
                                                 style="@if($user->rank->css)background:{{ $user->rank->css }}@else background-color: {{ $user->rank->color ?? '#cccccc' }};@endif"
                                                 title="{{ $user->rank->name }}">
                                            </div>
                                            <span class="text-sm text-gray-900">{{ $user->rank->name }}</span>
                                        </div>
                                    @else
                                        <span class="text-sm text-gray-500 italic">No Rank</span>
                                    @endif
                                </td>

                                <!-- Last Graded -->
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                    @php
                                        $lastGrading = $user->gradings->sortByDesc('graded_at')->first();
                                    @endphp
                                    @if($lastGrading)
                                        {{ $lastGrading->graded_at->format('jS M Y') }}
                                    @else
                                        <span class="text-gray-400 italic">Never</span>
                                    @endif
                                </td>

                                <!-- Last Session -->
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                    @if($user->last_session_attended_at)
                                        @php
                                            $days = $user->last_session_attended_at->diffInDays(now());
                                            
                                            // Determine formatting
                                            if ($user->last_session_attended_at->isToday()) {
                                                $formattedDate = 'Today';
                                            } elseif ($user->last_session_attended_at->isYesterday()) {
                                                $formattedDate = 'Yesterday';
                                            } else {
                                                // If less than 7 days, show only days (hide hours) -> "5 days ago"
                                                // If more than 7 days, show weeks and days -> "2 weeks 3 days ago"
                                                $parts = $days < 7 ? 1 : 2;
                                                $formattedDate = $user->last_session_attended_at->diffForHumans(null, \Carbon\CarbonInterface::DIFF_RELATIVE_TO_NOW, false, $parts);
                                            }

                                            // Determine Color
                                            // Active: <= 14 days (Green)
                                            // Slipping: 15-28 days (Yellow)
                                            // Fading: 29-56 days (Orange)
                                            // At-Risk: > 56 days (Red)
                                            
                                            if ($days <= 14) {
                                                $colorClass = 'text-green-600';
                                            } elseif ($days <= 28) {
                                                $colorClass = 'text-yellow-600';
                                            } elseif ($days <= 56) {
                                                $colorClass = 'text-orange-600';
                                            } else {
                                                $colorClass = 'text-red-600';
                                            }
                                        @endphp
                                        <span class="{{ $colorClass }}">
                                            {{ $formattedDate }}
                                        </span>
                                    @else
                                        <span class="text-gray-800 font-bold">No activity</span>
                                    @endif
                                </td>

                                <!-- Actions -->
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    @if(!$user->last_session_attended_at || $user->last_session_attended_at->diffInDays(now()) >= 60)
                                        <a href="{{ route('members.edit', $user) }}#account-management" class="inline-flex items-center px-3 py-1 border border-transparent text-xs font-bold rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 uppercase tracking-wide">
                                            Archive Member
                                        </a>
                                    @else
                                        <a href="{{ route('members.show', $user) }}" class="text-indigo-600 hover:text-indigo-900">View</a>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-4 p-4 border-t border-gray-200">
                {{ $users->links() }}
            </div>
        </div>
    </div>
@endsection