@extends('layouts.panel')

@section('title', app(\App\Services\TitleService::class)->generate())
@section('meta_description', 'آمار و گزارش فعالیت کاربران در سیستم')

@push('styles')
<style>
    /* Custom scrollbar for user activity */
    .user-activity-scroll::-webkit-scrollbar {
        width: 6px;
    }
    .user-activity-scroll::-webkit-scrollbar-track {
        background: rgba(30, 41, 59, 0.2);
        border-radius: 3px;
    }
    .user-activity-scroll::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.3);
        border-radius: 3px;
    }
    .user-activity-scroll::-webkit-scrollbar-thumb:hover {
        background: rgba(148, 163, 184, 0.5);
    }
</style>
@endpush

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-slate-200">فعالیت کاربران</h1>
            <p class="text-sm text-slate-400 mt-1">آمار و گزارش فعالیت کاربران در ۳۰ روز گذشته</p>
        </div>
        <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-slate-800/50 border border-slate-700/50">
            <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
            <span class="text-xs text-slate-400">{{ count($userActivityStats ?? []) }} کاربر فعال</span>
        </div>
    </div>

    <!-- User Activity Statistics -->
    @if(isset($userActivityStats) && count($userActivityStats) > 0)
    <div class="glass rounded-2xl p-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-slate-200">آمار فعالیت کاربران</h2>
            <span class="text-xs text-slate-400">۳۰ روز گذشته</span>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
            @foreach($userActivityStats as $index => $stat)
            @php
                $isPurchase = $stat['is_purchase_specialist'];
                $isSales = $stat['is_sales_specialist'];
                $roleColor = $isPurchase ? '59,130,246' : ($isSales ? '16,185,129' : '99,102,241');
                $roleLabel = $isPurchase ? 'خرید' : ($isSales ? 'فروش' : '');
            @endphp
            <div class="relative bg-gradient-to-br from-slate-800/80 via-slate-800/60 to-slate-900/80 rounded-lg p-3 border border-slate-700/50 hover:shadow-lg transition-all duration-300 group" style="border-color: rgba(148, 163, 184, 0.3);" onmouseover="this.style.borderColor='rgba({{ $roleColor }}, 0.4)'; this.style.boxShadow='0 10px 15px -3px rgba({{ $roleColor }}, 0.1), 0 4px 6px -2px rgba({{ $roleColor }}, 0.05)';" onmouseout="this.style.borderColor='rgba(148, 163, 184, 0.3)'; this.style.boxShadow='';">
                <!-- Activity Badge (Top Left) -->
                <div class="absolute top-3 left-3 px-2.5 py-1 rounded-md text-xs font-bold shadow-sm" style="background: linear-gradient(135deg, rgba({{ $roleColor }}, 0.25), rgba({{ $isPurchase ? '37,99,235' : ($isSales ? '5,150,105' : '79,70,229') }}, 0.25)); color: rgb({{ $isPurchase ? '191,219,254' : ($isSales ? '167,243,208' : '196,181,253') }}); border: 1px solid rgba({{ $roleColor }}, 0.3);">
                    {{ $stat['total_activities'] }} فعالیت
                </div>
                
                <!-- User Info (Top Center) -->
                <div class="text-center mt-8 mb-2">
                    <div class="flex items-center justify-center gap-1.5 mb-1">
                        <h3 class="text-sm font-semibold text-slate-100">
                            {{ $stat['user']->name ?? $stat['user']->full_name ?? 'نامشخص' }}
                        </h3>
                        @if($index < 3)
                        <span class="px-1.5 py-0.5 text-[10px] font-bold rounded-md shadow-sm" style="background: linear-gradient(135deg, rgba(234, 179, 8, 0.3), rgba(217, 119, 6, 0.3)); color: rgb(253, 224, 71); border: 1px solid rgba(234, 179, 8, 0.4);">
                            TOP {{ $index + 1 }}
                        </span>
                        @endif
                    </div>
                    <p class="text-xs text-slate-400 mb-2">{{ $stat['user']->email ?? '' }}</p>
                    
                    <!-- Role Badge -->
                    @if($roleLabel)
                    <span class="inline-block px-2.5 py-1 text-xs font-medium rounded-md shadow-sm" style="background: linear-gradient(135deg, rgba({{ $roleColor }}, 0.2), rgba({{ $isPurchase ? '37,99,235' : ($isSales ? '5,150,105' : '79,70,229') }}, 0.2)); color: rgb({{ $isPurchase ? '191,219,254' : ($isSales ? '167,243,208' : '196,181,253') }}); border: 1px solid rgba({{ $roleColor }}, 0.3);">
                        {{ $roleLabel }}
                    </span>
                    @endif
                </div>
                
                <!-- Activity Labels -->
                @if(count($stat['activities']) > 0)
                <div class="flex flex-wrap gap-1.5 justify-center mt-3 mb-2">
                    @foreach($stat['activities'] as $activity)
                    <span class="px-2.5 py-1 text-xs rounded-md font-medium bg-slate-700/40 text-slate-200 border border-slate-600/30 shadow-sm">
                        {{ $activity['count'] }} {{ $activity['label'] }}
                    </span>
                    @endforeach
                </div>
                @endif
                
                <!-- Last Activity -->
                @if($stat['last_activity'])
                <div class="text-center mt-2 pt-2 border-t border-slate-700/40">
                    <span class="text-xs text-slate-400">آخرین فعالیت: {{ \Carbon\Carbon::parse($stat['last_activity'])->diffForHumans() }}</span>
                </div>
                @endif
            </div>
            @endforeach
        </div>
    </div>
    @else
    <div class="glass rounded-2xl p-12 text-center">
        <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-slate-800/50 flex items-center justify-center">
            <span class="text-3xl">📊</span>
        </div>
        <h3 class="text-lg font-medium text-slate-300 mb-2">هیچ فعالیتی ثبت نشده است</h3>
        <p class="text-sm text-slate-400">وقتی کاربران فعالیتی انجام دهند، اینجا نمایش داده می‌شود</p>
    </div>
    @endif
</div>
@endsection