@extends('admin.layout')

@section('title', 'Admin Dashboard')
@section('page_title', 'Dashboard')

@section('content')
<!-- Stats Cards -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="stats-card">
            <div class="stats-card-icon">
                <i class="bi bi-people"></i>
            </div>
            <div class="stats-card-value">{{ $stats['total_users'] }}</div>
            <div class="stats-card-label">Total Users</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card">
            <div class="stats-card-icon">
                <i class="bi bi-play-circle"></i>
            </div>
            <div class="stats-card-value">{{ $stats['total_videos'] }}</div>
            <div class="stats-card-label">Total Videos</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card">
            <div class="stats-card-icon">
                <i class="bi bi-eye"></i>
            </div>
            <div class="stats-card-value">{{ number_format($stats['total_views']) }}</div>
            <div class="stats-card-label">Total Views</div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stats-card">
            <div class="stats-card-icon">
                <i class="bi bi-hand-thumbs-up"></i>
            </div>
            <div class="stats-card-value">{{ number_format($stats['total_likes']) }}</div>
            <div class="stats-card-label">Total Likes</div>
        </div>
    </div>
</div>

<!-- Recent Users & Videos -->
<div class="row">
    <!-- Recent Users -->
    <div class="col-lg-6">
        <div class="admin-card">
            <div class="admin-card-header">
                <h5 class="admin-card-title">Recent Users</h5>
                <a href="{{ route('admin.users') }}" class="btn btn-outline-light btn-sm">View All</a>
            </div>
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>Role</th>
                        <th>Joined</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recentUsers as $user)
                    <tr>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <img src="{{ $user->avatar_url }}" alt="{{ $user->name }}" class="user-avatar">
                                <div>
                                    <div>{{ $user->name }}</div>
                                    <small class="text-secondary">{{ $user->email }}</small>
                                </div>
                            </div>
                        </td>
                        <td>
                            @if($user->role === 'super_admin')
                                <span class="badge-role badge-super-admin">Super Admin</span>
                            @elseif($user->role === 'admin')
                                <span class="badge-role badge-admin">Admin</span>
                            @else
                                <span class="badge-role badge-user">User</span>
                            @endif
                        </td>
                        <td>{{ $user->created_at->diffForHumans() }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="3" class="text-center text-secondary">No users found</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Recent Videos -->
    <div class="col-lg-6">
        <div class="admin-card">
            <div class="admin-card-header">
                <h5 class="admin-card-title">Recent Videos</h5>
                <a href="{{ route('admin.videos') }}" class="btn btn-outline-light btn-sm">View All</a>
            </div>
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Video</th>
                        <th>Status</th>
                        <th>Uploaded</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recentVideos as $video)
                    <tr>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                @if($video->thumbnail)
                                    <img src="{{ asset('storage/thumbnails/' . $video->thumbnail) }}" alt="{{ $video->title }}" style="width: 60px; height: 40px; object-fit: cover; border-radius: 4px;">
                                @else
                                    <div style="width: 60px; height: 40px; background: #333; border-radius: 4px; display: flex; align-items: center; justify-content: center;">
                                        <i class="bi bi-play-circle text-secondary"></i>
                                    </div>
                                @endif
                                <div>
                                    <div style="max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ $video->title }}</div>
                                    <small class="text-secondary">by {{ $video->user->name }}</small>
                                </div>
                            </div>
                        </td>
                        <td>
                            @switch($video->status)
                                @case('ready')
                                    <span class="badge-status badge-ready">Ready</span>
                                    @break
                                @case('processing')
                                    <span class="badge-status badge-processing">Processing</span>
                                    @break
                                @case('pending')
                                    <span class="badge-status badge-pending">Pending</span>
                                    @break
                                @case('failed')
                                    <span class="badge-status badge-failed">Failed</span>
                                    @break
                            @endswitch
                        </td>
                        <td>{{ $video->created_at->diffForHumans() }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="3" class="text-center text-secondary">No videos found</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Videos by Status & Visibility -->
<div class="row">
    <!-- Videos by Status -->
    <div class="col-lg-6">
        <div class="admin-card">
            <div class="admin-card-header">
                <h5 class="admin-card-title">Videos by Status</h5>
            </div>
            <div class="d-flex gap-3 flex-wrap">
                <div class="text-center">
                    <div class="h3 text-success">{{ $videosByStatus['ready'] ?? 0 }}</div>
                    <small class="text-secondary">Ready</small>
                </div>
                <div class="text-center">
                    <div class="h3 text-primary">{{ $videosByStatus['processing'] ?? 0 }}</div>
                    <small class="text-secondary">Processing</small>
                </div>
                <div class="text-center">
                    <div class="h3 text-warning">{{ $videosByStatus['pending'] ?? 0 }}</div>
                    <small class="text-secondary">Pending</small>
                </div>
                <div class="text-center">
                    <div class="h3 text-danger">{{ $videosByStatus['failed'] ?? 0 }}</div>
                    <small class="text-secondary">Failed</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Videos by Visibility -->
    <div class="col-lg-6">
        <div class="admin-card">
            <div class="admin-card-header">
                <h5 class="admin-card-title">Videos by Visibility</h5>
            </div>
            <div class="d-flex gap-3 flex-wrap">
                <div class="text-center">
                    <div class="h3 text-success">{{ $videosByVisibility['public'] ?? 0 }}</div>
                    <small class="text-secondary">Public</small>
                </div>
                <div class="text-center">
                    <div class="h3 text-warning">{{ $videosByVisibility['unlisted'] ?? 0 }}</div>
                    <small class="text-secondary">Unlisted</small>
                </div>
                <div class="text-center">
                    <div class="h3 text-secondary">{{ $videosByVisibility['private'] ?? 0 }}</div>
                    <small class="text-secondary">Private</small>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection