@extends('layouts.admin')

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

@section('admin')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    {{-- Admin Navigation --}}
    @include('admin._nav', ['current' => 'admin.dashboard'])

    {{-- Header --}}
    <h1 class="text-3xl font-bold mb-8 bg-gradient-to-r from-red-400 to-yellow-400 bg-clip-text text-transparent">
        Admin Dashboard
    </h1>

    {{-- Stats Cards --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
        {{-- Total Videos --}}
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 hover:border-red-500/50 transition-colors">
            <div class="flex items-center gap-4">
                <div class="bg-red-600/20 p-3 rounded-lg">
                    <svg class="w-8 h-8 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-gray-400 text-sm font-medium">Total Videos</p>
                    <p class="text-3xl font-bold text-white">{{ number_format($videoCount) }}</p>
                </div>
            </div>
        </div>

        {{-- Total Users --}}
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 hover:border-yellow-500/50 transition-colors">
            <div class="flex items-center gap-4">
                <div class="bg-yellow-600/20 p-3 rounded-lg">
                    <svg class="w-8 h-8 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                </div>
                <div>
                    <p class="text-gray-400 text-sm font-medium">Total Users</p>
                    <p class="text-3xl font-bold text-white">{{ number_format($userCount) }}</p>
                </div>
            </div>
        </div>

        {{-- Total Playlists --}}
        <div class="bg-gray-900 border border-gray-800 rounded-xl p-6 hover:border-red-500/50 transition-colors">
            <div class="flex items-center gap-4">
                <div class="bg-red-600/20 p-3 rounded-lg">
                    <svg class="w-8 h-8 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 6h16M4 10h16M4 14h10m-10 4h6"/>
                    </svg>
                </div>
                <div>
                    <p class="text-gray-400 text-sm font-medium">Total Playlists</p>
                    <p class="text-3xl font-bold text-white">{{ number_format($playlistCount) }}</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Quick Actions --}}
    <h2 class="text-xl font-semibold text-white mb-4">Quick Actions</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        {{-- Sync YouTube Videos --}}
        <form method="POST" action="{{ route('admin.videos.sync') }}">
            @csrf
            <button type="submit"
                    class="w-full flex items-center gap-3 bg-gradient-to-r from-red-600 to-red-700 hover:from-red-500 hover:to-red-600 text-white px-6 py-4 rounded-xl font-medium transition-all shadow-lg shadow-red-900/30 hover:shadow-red-900/50">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                Sync YouTube Videos
            </button>
        </form>

        {{-- Manage Videos --}}
        <a href="{{ route('admin.videos') }}"
           class="flex items-center gap-3 bg-gray-900 border border-gray-800 hover:border-red-500/50 text-white px-6 py-4 rounded-xl font-medium transition-colors">
            <svg class="w-6 h-6 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
            </svg>
            Manage Videos
        </a>

        {{-- Manage Users --}}
        <a href="{{ route('admin.users') }}"
           class="flex items-center gap-3 bg-gray-900 border border-gray-800 hover:border-yellow-500/50 text-white px-6 py-4 rounded-xl font-medium transition-colors">
            <svg class="w-6 h-6 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                      d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/>
            </svg>
            Manage Users
        </a>
    </div>
</div>
@endsection