@extends('admin.layouts.app')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')

@section('content')
<!-- Stats Grid -->
<div class="stats-grid">
    <div class="stat-card">
        <div class="value">{{ number_format($stats['total_users']) }}</div>
        <div class="label">Total Users</div>
    </div>
    <div class="stat-card">
        <div class="value">{{ number_format($stats['total_courses']) }}</div>
        <div class="label">Total Courses</div>
    </div>
    <div class="stat-card">
        <div class="value">{{ number_format($stats['total_enrollments']) }}</div>
        <div class="label">Enrollments</div>
    </div>
    <div class="stat-card">
        <div class="value">{{ number_format($stats['games_played_today']) }}</div>
        <div class="label">Games Today</div>
    </div>
</div>

<!-- Content Grid -->
<div class="grid-responsive-2">
    <!-- Recent Users -->
    <div class="card">
        <div class="card-header">
            <h3>Recent Users</h3>
            <a href="{{ route('admin.users.index') }}" class="btn btn-primary btn-sm">View All</a>
        </div>
        <div class="card-body" style="padding: 0;">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Joined</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recentUsers as $user)
                    <tr>
                        <td>
                            <div style="display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap;">
                                <span>{{ $user->name }}</span>
                                @if($user->is_admin)
                                    <span style="color: var(--danger); text-transform: uppercase; font-weight: 600; font-size: 0.7rem; letter-spacing: 1px;">Admin</span>
                                @endif
                            </div>
                        </td>
                        <td>{{ $user->email }}</td>
                        <td style="white-space: nowrap;">{{ $user->created_at->diffForHumans() }}</td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="3" style="text-align: center; color: var(--text-muted);">No users yet</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Popular Courses -->
    <div class="card">
        <div class="card-header">
            <h3>Popular Courses</h3>
            <a href="{{ route('admin.courses.index') }}" class="btn btn-primary btn-sm">View All</a>
        </div>
        <div class="card-body" style="padding: 0;">
            <table>
                <thead>
                    <tr>
                        <th>Course</th>
                        <th>Enrollments</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($popularCourses as $course)
                    <tr>
                        <td>{{ $course->title }}</td>
                        <td><span style="color: var(--primary); font-weight: 600;">{{ $course->enrolled_users_count }}</span></td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="2" style="text-align: center; color: var(--text-muted);">No courses yet</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Game Stats -->
<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header">
        <h3>Game Statistics</h3>
    </div>
    <div class="card-body" style="padding: 0;">
        <table>
            <thead>
                <tr>
                    <th>Game</th>
                    <th>Total Plays</th>
                    <th>Total Score</th>
                </tr>
            </thead>
            <tbody>
                @forelse($gameStats as $game)
                <tr>
                    <td style="text-transform: capitalize;">{{ str_replace('-', ' ', $game->game_type) }}</td>
                    <td><span style="color: var(--primary); font-weight: 600;">{{ number_format($game->plays) }}</span></td>
                    <td>{{ number_format($game->total_score) }} pts</td>
                </tr>
                @empty
                <tr>
                    <td colspan="3" style="text-align: center; color: var(--text-muted);">No games played yet</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Welcome Modal -->
@if(session('just_logged_in'))
<div id="welcomeModal" class="modal-overlay active" style="z-index: 9999;">
    <div class="modal-dialog welcome-dialog" style="border: 2px solid var(--primary); box-shadow: 0 0 50px var(--primary-glow), inset 0 0 20px rgba(0, 255, 65, 0.1); animation: modalPulse 2s ease-in-out infinite;">
        <div id="welcome-icon" style="font-size: 4rem; margin-bottom: 1rem; animation: skullBob 1.5s ease-in-out infinite;">💀</div>
        <h2 id="welcome-title" style="font-family: var(--font-title); color: var(--primary); font-size: 1.8rem; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 3px; text-shadow: 0 0 20px var(--primary);">Welcome Back, EVIL {{ strtoupper(Auth::user()->name) }}</h2>
        <p id="welcome-text" style="color: var(--text); line-height: 1.8; margin-bottom: 0.5rem;">The system bows to your command.</p>
        <p id="welcome-subtext" style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.5rem;">All data awaits your manipulation...</p>
        <div style="border-top: 1px solid var(--border); padding-top: 1.5rem; margin-top: 1rem;">
            <p id="welcome-status" style="color: var(--danger); font-family: var(--font-main); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px;">[ ACCESS GRANTED ]</p>
            
            @if(isset($newMessagesCount) && $newMessagesCount > 0)
            <p style="color: var(--danger); font-weight: bold; margin-top: 1rem; animation: pulse 2s infinite;">
                ⚠️ WARNING: You have {{ $newMessagesCount }} new messages requiring your attention.
            </p>
            @endif
        </div>
        <button onclick="closeWelcomeModal()" id="welcome-btn" class="btn btn-primary" style="margin-top: 1.5rem; padding: 12px 40px;">
            Begin Evil Operations
        </button>
    </div>
</div>

<style>
@keyframes modalPulse {
    0%, 100% { box-shadow: 0 0 50px var(--primary-glow), inset 0 0 20px rgba(0, 255, 65, 0.1); }
    50% { box-shadow: 0 0 80px var(--primary-glow), inset 0 0 30px rgba(0, 255, 65, 0.15); }
}
@keyframes skullBob {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

/* Angel Theme Welcome Modal Overrides */
[data-theme="angel"] .welcome-dialog {
    background: #ffffff !important;
    border: 2px solid #7dd3fc !important;
    box-shadow: 0 0 50px rgba(14, 165, 233, 0.3), inset 0 0 20px rgba(224, 242, 254, 0.5) !important;
}
[data-theme="angel"] #welcome-title {
    color: #0284c7 !important;
    text-shadow: none !important;
}
[data-theme="angel"] #welcome-text {
    color: #334155 !important;
}
[data-theme="angel"] #welcome-subtext {
    color: #64748b !important;
}
[data-theme="angel"] #welcome-status {
    color: #0284c7 !important;
    background: #e0f2fe;
    padding: 5px 10px;
    border-radius: 999px;
    display: inline-block;
}
[data-theme="angel"] #welcome-btn {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
    color: #0284c7 !important;
    border: 1px solid #7dd3fc !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2) !important;
}
[data-theme="angel"] #welcome-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.3) !important;
}
</style>

<script>
function closeWelcomeModal() {
    document.getElementById('welcomeModal').style.display = 'none';
}

// Auto close after 10 seconds
setTimeout(function() {
    const modal = document.getElementById('welcomeModal');
    if (modal) modal.style.display = 'none';
}, 10000);

// Initialize Theme for Welcome Modal
document.addEventListener('DOMContentLoaded', function() {
    const theme = localStorage.getItem('admin-theme') || 'evil';
    const dialog = document.querySelector('.welcome-dialog');
    const icon = document.getElementById('welcome-icon');
    const title = document.getElementById('welcome-title');
    const text = document.getElementById('welcome-text');
    const subtext = document.getElementById('welcome-subtext');
    const status = document.getElementById('welcome-status');
    const btn = document.getElementById('welcome-btn');
    const userName = "{{ strtoupper(Auth::user()->name) }}";

    if (theme === 'angel') {
        if(icon) icon.innerText = '👼'; // Revert to Baby Angel
        if(title) title.innerText = `WELCOME BACK, ANGEL ${userName}`;
        if(text) text.innerText = 'The heavens welcome your presence.';
        if(subtext) subtext.innerText = 'All souls await your guidance...';
        if(status) status.innerText = '[ HEAVENLY ACCESS GRANTED ]';
        if(btn) btn.innerText = 'Begin Heavenly Tasks';
    } 
    // Evil is default, already set in HTML
});
</script>
@endif
@endsection