@extends('admin.layout')

@section('title', 'Admin Overview')

@section('content')
<div class="space-y-8">
    <!-- Header Greeting Banner -->
    <div class="rounded-3xl bg-gradient-to-r from-rose-950/70 via-slate-900 to-indigo-950/70 border border-rose-500/20 p-8 shadow-2xl relative overflow-hidden">
        <div class="relative z-10 max-w-2xl">
            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-rose-500/10 border border-rose-500/30 text-xs font-semibold text-rose-300 mb-3">
                <span class="h-2 w-2 rounded-full bg-rose-400 animate-ping"></span>
                Super Admin Control Center
            </span>
            <h1 class="font-heading text-3xl font-bold text-white mb-2">
                Platform Intelligence & Metrics
            </h1>
            <p class="text-slate-300 text-sm leading-relaxed">
                Monitor live WebRTC calling activity, user registrations, and system health in real-time.
            </p>
        </div>
    </div>

    <!-- Stats Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Total Users -->
        <div class="rounded-2xl bg-slate-900/80 border border-slate-800 p-6 shadow-xl">
            <div class="flex items-center justify-between mb-3">
                <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Total Users</span>
                <span class="text-2xl p-2 rounded-xl bg-indigo-500/10 border border-indigo-500/20">👥</span>
            </div>
            <div class="font-heading text-3xl font-bold text-white mb-1">{{ $totalUsers }}</div>
            <div class="text-xs text-indigo-400 font-medium">{{ $totalAdmins }} Super Admin{{ $totalAdmins > 1 ? 's' : '' }}</div>
        </div>

        <!-- Total Calls -->
        <div class="rounded-2xl bg-slate-900/80 border border-slate-800 p-6 shadow-xl">
            <div class="flex items-center justify-between mb-3">
                <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Total Calls</span>
                <span class="text-2xl p-2 rounded-xl bg-cyan-500/10 border border-cyan-500/20">📞</span>
            </div>
            <div class="font-heading text-3xl font-bold text-white mb-1">{{ $totalCalls }}</div>
            <div class="text-xs text-cyan-400 font-medium">{{ $completedCalls }} Completed Sessions</div>
        </div>

        <!-- Total Voice Time -->
        <div class="rounded-2xl bg-slate-900/80 border border-slate-800 p-6 shadow-xl">
            <div class="flex items-center justify-between mb-3">
                <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Total Voice Time</span>
                <span class="text-2xl p-2 rounded-xl bg-emerald-500/10 border border-emerald-500/20">🎙️</span>
            </div>
            <div class="font-heading text-3xl font-bold text-white mb-1">
                @if($totalDurationSeconds >= 3600)
                    {{ floor($totalDurationSeconds / 3600) }}h {{ floor(($totalDurationSeconds % 3600) / 60) }}m
                @elseif($totalDurationSeconds >= 60)
                    {{ floor($totalDurationSeconds / 60) }}m {{ $totalDurationSeconds % 60 }}s
                @else
                    {{ $totalDurationSeconds }}s
                @endif
            </div>
            <div class="text-xs text-emerald-400 font-medium">Native Opus 48kHz HD Audio</div>
        </div>

        <!-- System Memory -->
        <div class="rounded-2xl bg-slate-900/80 border border-slate-800 p-6 shadow-xl">
            <div class="flex items-center justify-between mb-3">
                <span class="text-xs font-semibold text-slate-400 uppercase tracking-wider">PHP Memory Usage</span>
                <span class="text-2xl p-2 rounded-xl bg-purple-500/10 border border-purple-500/20">⚡</span>
            </div>
            <div class="font-heading text-3xl font-bold text-white mb-1">{{ $systemInfo['memory_usage'] }}</div>
            <div class="text-xs text-purple-400 font-medium">PHP {{ $systemInfo['php_version'] }} ({{ $systemInfo['db_driver'] }})</div>
        </div>
    </div>

    <!-- Quick Action / Maintenance Bar -->
    <div class="rounded-2xl bg-slate-900/60 border border-slate-800 p-5 flex flex-wrap items-center justify-between gap-4">
        <div class="flex items-center gap-3">
            <span class="text-xl">🛠️</span>
            <div>
                <h2 class="text-sm font-semibold text-white">Quick Maintenance Operations</h2>
                <p class="text-xs text-slate-400">Purge application caches or reset signaling presence state instantly.</p>
            </div>
        </div>
        <div class="flex items-center gap-3">
            <form action="{{ route('admin.system.clearCache') }}" method="POST" class="inline">
                @csrf
                <button type="submit" class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 text-xs font-semibold transition active:scale-95 flex items-center gap-1.5">
                    <span>🧹</span> Clear App Cache
                </button>
            </form>
            <form action="{{ route('admin.system.clearRoomPresence') }}" method="POST" class="inline">
                @csrf
                <button type="submit" class="px-4 py-2 rounded-xl bg-rose-600/20 hover:bg-rose-600/30 text-rose-300 border border-rose-500/30 text-xs font-semibold transition active:scale-95 flex items-center gap-1.5">
                    <span>⚡</span> Reset Room Presence
                </button>
            </form>
        </div>
    </div>

    <!-- Two Column Recent Activity -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Recent Users -->
        <div class="rounded-2xl bg-slate-900/80 border border-slate-800 p-6 shadow-xl space-y-4">
            <div class="flex items-center justify-between pb-3 border-b border-slate-800">
                <div class="flex items-center gap-2">
                    <span class="text-xl">👥</span>
                    <h2 class="font-heading font-semibold text-base text-white">Recent Users</h2>
                </div>
                <a href="{{ route('admin.users') }}" class="text-xs text-indigo-400 hover:text-indigo-300 font-medium">View All &rarr;</a>
            </div>

            <div class="divide-y divide-slate-800/80">
                @forelse($recentUsers as $user)
                    <div class="py-3 flex items-center justify-between text-xs">
                        <div class="flex items-center gap-3 min-w-0">
                            <div class="h-9 w-9 rounded-xl bg-gradient-to-tr from-indigo-600 to-purple-600 flex items-center justify-center font-bold text-white flex-shrink-0">
                                {{ strtoupper(substr($user->name, 0, 2)) }}
                            </div>
                            <div class="truncate">
                                <p class="font-semibold text-slate-200 truncate">{{ $user->name }}</p>
                                <p class="text-slate-400 text-[11px] truncate">{{ $user->email }}</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-2 flex-shrink-0">
                            @if($user->is_admin)
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20">Admin</span>
                            @else
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-medium bg-slate-800 text-slate-400">User</span>
                            @endif
                            <span class="text-[11px] text-slate-500">{{ $user->created_at->diffForHumans() }}</span>
                        </div>
                    </div>
                @empty
                    <p class="text-xs text-slate-500 py-4 text-center">No users registered yet.</p>
                @endforelse
            </div>
        </div>

        <!-- Recent Calls -->
        <div class="rounded-2xl bg-slate-900/80 border border-slate-800 p-6 shadow-xl space-y-4">
            <div class="flex items-center justify-between pb-3 border-b border-slate-800">
                <div class="flex items-center gap-2">
                    <span class="text-xl">📞</span>
                    <h2 class="font-heading font-semibold text-base text-white">Recent Call Sessions</h2>
                </div>
                <a href="{{ route('admin.calls') }}" class="text-xs text-indigo-400 hover:text-indigo-300 font-medium">View All &rarr;</a>
            </div>

            <div class="divide-y divide-slate-800/80">
                @forelse($recentCalls as $call)
                    <div class="py-3 flex items-center justify-between text-xs">
                        <div class="flex items-center gap-3">
                            <span class="p-2 rounded-xl bg-slate-800 text-slate-300 text-sm">
                                🎙️
                            </span>
                            <div>
                                <p class="font-semibold text-slate-200">
                                    {{ $call->caller->name ?? 'Guest/Deleted' }}
                                    <span class="text-slate-500 font-normal">in</span>
                                    <span class="text-indigo-400 font-mono">{{ $call->channel_name }}</span>
                                </p>
                                <p class="text-slate-400 text-[11px]">
                                    {{ $call->created_at->diffForHumans() }} • Duration: {{ $call->duration_seconds }}s
                                </p>
                            </div>
                        </div>
                        <span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase {{ $call->status === 'completed' ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' : 'bg-amber-500/10 text-amber-400 border border-amber-500/20' }}">
                            {{ $call->status }}
                        </span>
                    </div>
                @empty
                    <p class="text-xs text-slate-500 py-4 text-center">No call sessions recorded yet.</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection