@extends('layouts.admin')

@section('title', 'داشبورد مدیریت')

@section('content')
    <!-- Statistics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <x-admin.stat-card title="کل کاربران" value="{{ $usersCount }}" color="blue" icon="👥" />
        <x-admin.stat-card title="کل پوشه‌ها" value="{{ $foldersCount }}" color="purple" icon="📁" />
        <x-admin.stat-card title="کل فایل‌ها" value="{{ $filesCount }}" color="green" icon="📂" />
    </div>

    <!-- 3 Doughnut Charts Side-by-Side -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        
        <!-- Chart 1: Bot Content -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex flex-col justify-between">
            <div>
                <h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                    📂 محتوای ربات (تعداد فایل‌ها)
                </h3>
                <div class="relative" style="height: 200px;">
                    <canvas id="adminBotContentChart"></canvas>
                </div>
            </div>
            <div class="border-t border-gray-50 pt-4 mt-4 flex flex-wrap gap-2 justify-center" id="legendBotContent">
                <!-- Legends will be generated dynamically or manually -->
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-gray-50 border border-gray-100 text-xs text-gray-600 font-bold">
                    <span class="w-2.5 h-2.5 rounded-full" style="background-color: #3b82f6;"></span> ویدیو ({{ $videoCount }})
                </span>
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-gray-50 border border-gray-100 text-xs text-gray-600 font-bold">
                    <span class="w-2.5 h-2.5 rounded-full" style="background-color: #10b981;"></span> تصویر ({{ $photoCount }})
                </span>
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-gray-50 border border-gray-100 text-xs text-gray-600 font-bold">
                    <span class="w-2.5 h-2.5 rounded-full" style="background-color: #f59e0b;"></span> سند ({{ $documentCount }})
                </span>
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-gray-50 border border-gray-100 text-xs text-gray-600 font-bold">
                    <span class="w-2.5 h-2.5 rounded-full" style="background-color: #8b5cf6;"></span> صوت ({{ $audioCount }})
                </span>
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-gray-50 border border-gray-100 text-xs text-gray-600 font-bold">
                    <span class="w-2.5 h-2.5 rounded-full" style="background-color: #ec4899;"></span> ویس ({{ $voiceCount }})
                </span>
            </div>
        </div>

        <!-- Chart 2: Users Activity -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex flex-col justify-between">
            <div>
                <h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                    👥 وضعیت کاربران ربات
                </h3>
                <div class="relative" style="height: 200px;">
                    <canvas id="adminUserActivityChart"></canvas>
                </div>
            </div>
            <div class="border-t border-gray-50 pt-4 mt-4 flex flex-wrap gap-2 justify-center" id="legendUserActivity">
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-gray-50 border border-gray-100 text-xs text-gray-600 font-bold">
                    <span class="w-2.5 h-2.5 rounded-full" style="background-color: #10b981;"></span> فعال ({{ $totalActive }})
                </span>
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-gray-50 border border-gray-100 text-xs text-gray-600 font-bold">
                    <span class="w-2.5 h-2.5 rounded-full" style="background-color: #ef4444;"></span> مسدود/بن ({{ $totalBlocked }})
                </span>
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-gray-50 border border-gray-100 text-xs text-gray-600 font-bold">
                    <span class="w-2.5 h-2.5 rounded-full" style="background-color: #3b82f6;"></span> عضویت امروز ({{ $joinedToday }})
                </span>
                <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-gray-50 border border-gray-100 text-xs text-gray-600 font-bold">
                    <span class="w-2.5 h-2.5 rounded-full" style="background-color: #06b6d4;"></span> آنلاین ({{ $onlineUsers }})
                </span>
            </div>
        </div>

        <!-- Chart 3: Top Folders & Links -->
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 flex flex-col justify-between">
            <div>
                <h3 class="font-bold text-gray-800 mb-4 flex items-center gap-2">
                    🔗 پوشه‌های برتر (Top Folders)
                </h3>
                <div class="relative" style="height: 200px;">
                    <canvas id="adminTopFoldersChart"></canvas>
                </div>
            </div>
            <div class="border-t border-gray-50 pt-4 mt-4 flex flex-wrap gap-2 justify-center" id="legendTopFolders">
                @php
                    $colors = ['#ff6384', '#36a2eb', '#cc65fe', '#ffce56', '#4bc0c0'];
                @endphp
                @forelse($topFolders as $index => $folder)
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-gray-50 border border-gray-100 text-xs text-gray-600 font-bold">
                        <span class="w-2.5 h-2.5 rounded-full" style="background-color: {{ $colors[$index % 5] }};"></span> {{ mb_strimwidth($folder->folder_name, 0, 12, '..') }} ({{ $folder->files_count }})
                    </span>
                @empty
                    <span class="text-xs text-gray-400">بدون داده</span>
                @endforelse
            </div>
        </div>

    </div>

    <!-- Main Content Tables Grid -->
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-8">
        
        <!-- Table: Recent Users -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="p-5 border-b border-gray-100 bg-gray-50 flex justify-between items-center">
                <h3 class="font-bold text-gray-800 flex items-center gap-2">
                    <span>👥</span> آخرین کاربران ثبت نام شده
                </h3>
                <a href="{{ route('admin.users.index') }}" class="text-xs text-blue-600 hover:text-blue-800 font-bold hover:underline">مشاهده همه &larr;</a>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-right border-collapse">
                    <thead class="bg-gray-100 text-gray-600 text-xs font-bold border-b">
                        <tr>
                            <th class="p-3">کاربر</th>
                            <th class="p-3 text-center">عضو کانال؟</th>
                            <th class="p-3 text-center">زبان / کشور</th>
                            <th class="p-3 text-center">اشتراک</th>
                            <th class="p-3">ارسال پیام خصوصی سریع</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 text-sm">
                        @foreach($recentUsers as $user)
                        <tr class="hover:bg-gray-50">
                            <!-- User profile -->
                            <td class="p-3">
                                <div class="flex items-center gap-3">
                                    <div class="w-12 h-12 rounded-full overflow-hidden bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-lg relative border border-gray-200">
                                        @if($user->chat_id)
                                            <img src="{{ route('profile.photo', $user->chat_id) }}" 
                                                 alt="{{ $user->first_name }}" 
                                                 class="w-full h-full object-cover absolute inset-0 z-10" 
                                                 onerror="this.remove();">
                                        @endif
                                        {{ mb_substr($user->first_name ?? 'U', 0, 1) }}
                                    </div>
                                    <div>
                                        <div class="font-bold text-gray-800 text-xs">{{ $user->first_name }} {{ $user->last_name }}</div>
                                        @if($user->username)
                                            <a href="https://t.me/{{ $user->username }}" target="_blank" class="text-[10px] text-blue-500 hover:underline dir-ltr block">
                                                {{ '@'.$user->username }}
                                            </a>
                                        @else
                                            <span class="text-[10px] text-gray-400 font-mono">{{ $user->chat_id }}</span>
                                        @endif
                                    </div>
                                </div>
                            </td>

                            <!-- Channel Membership -->
                            <td class="p-3 text-center">
                                @if($user->isJoinedChannels())
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-green-50 text-green-700 border border-green-200">
                                        Joined ✅
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-red-50 text-red-700 border border-red-200">
                                        Not Joined ❌
                                    </span>
                                @endif
                            </td>

                            <!-- Language and Country -->
                            <td class="p-3 text-center">
                                <div class="text-xs text-gray-700 font-semibold">{{ strtoupper($user->language ?? 'FA') }}</div>
                                <div class="text-[10px] text-gray-400 font-mono">{{ $user->country ?? 'IR' }}</div>
                            </td>

                            <!-- Subscription status -->
                            <td class="p-3 text-center">
                                @if($user->hasActiveSubscription())
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-800">فعال</span>
                                @else
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-gray-100 text-gray-500">ندارد</span>
                                @endif
                            </td>

                            <!-- Private Message Quick Box -->
                            <td class="p-3">
                                <form action="{{ route('admin.users.sendMessage', $user->id) }}" method="POST" class="flex gap-1 items-center">
                                    @csrf
                                    <input type="text" name="message" required placeholder="پیام..." class="px-2 py-1 text-xs border border-gray-200 rounded focus:outline-none focus:border-blue-500 w-32">
                                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded text-xs transition font-bold">
                                        ارسال
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Table: Last Blocked Users -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="p-5 border-b border-gray-100 bg-gray-50 flex justify-between items-center">
                <h3 class="font-bold text-gray-800 flex items-center gap-2">
                    <span class="text-red-500">🚫</span> آخرین کاربران مسدود / بن شده
                </h3>
                <a href="{{ route('admin.users.index', ['filter' => 'blocked']) }}" class="text-xs text-blue-600 hover:text-blue-800 font-bold hover:underline">مشاهده همه &larr;</a>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-right border-collapse">
                    <thead class="bg-gray-100 text-gray-600 text-xs font-bold border-b">
                        <tr>
                            <th class="p-3">کاربر</th>
                            <th class="p-3 text-center">عضو کانال؟</th>
                            <th class="p-3 text-center">زبان / کشور</th>
                            <th class="p-3 text-center">اشتراک</th>
                            <th class="p-3">تاریخ عضویت / آخرین فعالیت</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 text-sm">
                        @foreach($blockedUsers as $user)
                        <tr class="hover:bg-gray-50">
                            <!-- User profile -->
                            <td class="p-3">
                                <div class="flex items-center gap-3">
                                    <div class="w-12 h-12 rounded-full overflow-hidden bg-blue-100 flex items-center justify-center text-blue-600 font-bold text-lg relative border border-gray-200">
                                        @if($user->chat_id)
                                            <img src="{{ route('profile.photo', $user->chat_id) }}" 
                                                 alt="{{ $user->first_name }}" 
                                                 class="w-full h-full object-cover absolute inset-0 z-10" 
                                                 onerror="this.remove();">
                                        @endif
                                        {{ mb_substr($user->first_name ?? 'U', 0, 1) }}
                                    </div>
                                    <div>
                                        <div class="font-bold text-gray-800 text-xs">{{ $user->first_name }} {{ $user->last_name }}</div>
                                        @if($user->username)
                                            <a href="https://t.me/{{ $user->username }}" target="_blank" class="text-[10px] text-blue-500 hover:underline dir-ltr block">
                                                {{ '@'.$user->username }}
                                            </a>
                                        @else
                                            <span class="text-[10px] text-gray-400 font-mono">{{ $user->chat_id }}</span>
                                        @endif
                                    </div>
                                </div>
                            </td>

                            <!-- Channel Membership -->
                            <td class="p-3 text-center">
                                @if($user->isJoinedChannels())
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-green-50 text-green-700 border border-green-200">
                                        Joined ✅
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-red-50 text-red-700 border border-red-200">
                                        Not Joined ❌
                                    </span>
                                @endif
                            </td>

                            <!-- Language and Country -->
                            <td class="p-3 text-center">
                                <div class="text-xs text-gray-700 font-semibold">{{ strtoupper($user->language ?? 'FA') }}</div>
                                <div class="text-[10px] text-gray-400 font-mono">{{ $user->country ?? 'IR' }}</div>
                            </td>

                            <!-- Subscription status -->
                            <td class="p-3 text-center">
                                @if($user->hasActiveSubscription())
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-800">فعال</span>
                                @else
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-gray-100 text-gray-500">ندارد</span>
                                @endif
                            </td>

                            <!-- Join / Last Activity date -->
                            <td class="p-3 text-xs text-gray-500 font-mono" dir="ltr">
                                <div>عضویت: {{ $user->join_date ? $user->join_date->format('Y-m-d H:i') : '-' }}</div>
                                <div class="mt-0.5 text-[10px] text-red-500">آخرین فعالیت: {{ $user->last_activity ? $user->last_activity->format('Y-m-d H:i') : '-' }}</div>
                            </td>
                        </tr>
                        @endforeach
                        @if($blockedUsers->isEmpty())
                        <tr>
                            <td colspan="5" class="text-center p-8 text-gray-400 text-xs">هیچ کاربر مسدود یا بن شده‌ای یافت نشد.</td>
                        </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <!-- Chart.js Libraries and Rendering -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Chart 1: Bot Content (Doughnut)
            const contentCtx = document.getElementById('adminBotContentChart').getContext('2d');
            new Chart(contentCtx, {
                type: 'doughnut',
                data: {
                    labels: ['ویدیوها', 'تصاویر', 'اسناد', 'فایل‌های صوتی', 'ویس‌ها'],
                    datasets: [{
                        data: [{{ $videoCount }}, {{ $photoCount }}, {{ $documentCount }}, {{ $audioCount }}, {{ $voiceCount }}],
                        backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899'],
                        borderWidth: 2,
                        borderColor: '#ffffff',
                        cutout: '70%'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    }
                }
            });

            // Chart 2: Users Activity (Doughnut)
            const activityCtx = document.getElementById('adminUserActivityChart').getContext('2d');
            new Chart(activityCtx, {
                type: 'doughnut',
                data: {
                    labels: ['کاربران فعال', 'کاربران مسدود', 'عضویت امروز', 'کاربران آنلاین'],
                    datasets: [{
                        data: [{{ $totalActive }}, {{ $totalBlocked }}, {{ $joinedToday }}, {{ $onlineUsers }}],
                        backgroundColor: ['#10b981', '#ef4444', '#3b82f6', '#06b6d4'],
                        borderWidth: 2,
                        borderColor: '#ffffff',
                        cutout: '70%'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    }
                }
            });

            // Chart 3: Top Folders (Doughnut)
            const foldersCtx = document.getElementById('adminTopFoldersChart').getContext('2d');
            new Chart(foldersCtx, {
                type: 'doughnut',
                data: {
                    labels: [
                        @foreach($topFolders as $folder)
                            '{{ $folder->folder_name }}',
                        @endforeach
                    ],
                    datasets: [{
                        data: [
                            @foreach($topFolders as $folder)
                                {{ $folder->files_count }},
                            @endforeach
                        ],
                        backgroundColor: ['#ff6384', '#36a2eb', '#cc65fe', '#ffce56', '#4bc0c0'],
                        borderWidth: 2,
                        borderColor: '#ffffff',
                        cutout: '70%'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false }
                    }
                }
            });
        });
    </script>
@endsection