@extends('admin.layouts.app')

@section('title', 'Reports')
@section('page-title', 'Reports & Analytics')

@section('content')
<!-- Overview Stats -->
<div class="stats-grid" style="margin-bottom: 2rem;">
    <div class="stat-card">
        <div class="value">{{ number_format($overallStats['total_users']) }}</div>
        <div class="label">Total Users</div>
    </div>
    <div class="stat-card">
        <div class="value">{{ number_format($overallStats['total_courses']) }}</div>
        <div class="label">Total Courses</div>
    </div>
    <div class="stat-card">
        <div class="value">{{ number_format($overallStats['total_lessons']) }}</div>
        <div class="label">Total Lessons</div>
    </div>
    <div class="stat-card">
        <div class="value">{{ number_format($overallStats['total_games']) }}</div>
        <div class="label">Games Played</div>
    </div>
</div>

<!-- Export Buttons -->
<div class="card" style="margin-bottom: 1.5rem;">
    <div class="card-header">
        <h3>Export Reports</h3>
    </div>
    <div class="card-body">
        <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
            <a href="{{ route('admin.reports.export.users') }}" class="btn btn-primary">
                Users CSV
            </a>
            <a href="{{ route('admin.reports.export.enrollments') }}" class="btn btn-primary">
                Enrollments CSV
            </a>
            <a href="{{ route('admin.reports.export.games') }}" class="btn btn-primary">
                Game Scores CSV
            </a>
            <a href="{{ route('admin.reports.export.leaderboard') }}" class="btn btn-primary">
                Leaderboard CSV
            </a>
            <a href="{{ route('admin.reports.print') }}" target="_blank" class="btn btn-danger btn-download-report"
               onclick="this.href = this.href.split('?')[0] + '?theme=' + (document.documentElement.getAttribute('data-theme') || 'evil')">
                Download PDF
            </a>
        </div>
    </div>
</div>

<!-- Content Grid -->
<div class="reports-grid-2">
    <!-- User Registrations (Last 7 Days) -->
    <div class="card">
        <div class="card-header">
            <h3>User Registrations (Last 7 Days)</h3>
            <button type="button" class="btn btn-sm btn-primary" onclick="document.getElementById('userRegModal').style.display='flex'">View All</button>
        </div>
        <div class="card-body" style="padding: 0;">
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>New Users</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($userRegistrations->take(5) as $reg)
                    <tr>
                        <td>{{ \Carbon\Carbon::parse($reg->date)->format('d M Y') }}</td>
                        <td><span style="color: var(--primary); font-weight: 600;">+{{ $reg->count }}</span></td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="2" style="text-align: center; color: var(--text-muted);">No data available</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Course Enrollments -->
    <div class="card">
        <div class="card-header">
            <h3>Course Enrollments</h3>
            @if($courseEnrollments->count() > 5)
            <button type="button" class="btn btn-sm btn-primary" onclick="document.getElementById('enrollModal').style.display='flex'">View All</button>
            @endif
        </div>
        <div class="card-body" style="padding: 0;">
            <table>
                <thead>
                    <tr>
                        <th>Course</th>
                        <th>Enrollments</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($courseEnrollments->take(5) as $course)
                    <tr>
                        <td>{{ Str::limit($course->title, 25) }}</td>
                        <td><span style="color: var(--primary); font-weight: 600;">{{ $course->count }}</span></td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="2" style="text-align: center; color: var(--text-muted);">No enrollments yet</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Game Activity -->
<div class="card" style="margin-bottom: 1.5rem;">
    <div class="card-header">
        <h3>Game Activity by Type</h3>
    </div>
    <div class="card-body" style="padding: 0;">
        <table>
            <thead>
                <tr>
                    <th>Game</th>
                    <th>Total Plays</th>
                    <th>Total Score</th>
                    <th>Avg Score</th>
                </tr>
            </thead>
            <tbody>
                @forelse($gameActivity 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>
                    <td>{{ number_format($game->avg_score, 1) }} pts</td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" style="text-align: center; color: var(--text-muted);">No games played yet</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Top Performers -->
<div class="card" style="margin-bottom: 1.5rem;">
    <div class="card-header">
        <h3>Top Performers (Game Leaderboard)</h3>
    </div>
    <div class="card-body" style="padding: 0;">
        <table>
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>Player</th>
                    <th>Games Played</th>
                    <th>Total Score</th>
                </tr>
            </thead>
            <tbody>
                @forelse($topPerformers as $index => $player)
                <tr>
                    <td>#{{ $index + 1 }}</td>
                    <td style="display: flex; align-items: center; gap: 10px;">
                        @if($player->profile_picture)
                            <img src="{{ asset('uploads/profiles/' . $player->profile_picture) }}" alt="" 
                                style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;">
                        @else
                            <div style="width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); display: flex; align-items: center; justify-content: center; color: black; font-weight: 600; font-size: 0.8rem;">
                                {{ strtoupper(substr($player->name, 0, 1)) }}
                            </div>
                        @endif
                        {{ $player->name }}
                    </td>
                    <td><span style="color: var(--primary); font-weight: 600;">{{ $player->games_played }}</span></td>
                    <td><span style="color: var(--primary); font-weight: 600;">{{ number_format($player->total_score) }} pts</span></td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" style="text-align: center; color: var(--text-muted);">No players yet</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Lesson Progress Stats -->
<div class="card">
    <div class="card-header">
        <h3>Lesson Progress Overview</h3>
    </div>
    <div class="card-body">
        <div class="reports-grid-4">
            <div style="padding: 1rem; background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border);">
                <div style="font-size: 2rem; font-weight: 800; color: var(--primary); font-family: var(--font-title);">
                    {{ $lessonStats['total_lessons'] }}
                </div>
                <div style="color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-size: 0.75rem;">
                    Total Lessons
                </div>
            </div>
            <div style="padding: 1rem; background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border);">
                <div style="font-size: 2rem; font-weight: 800; color: var(--success); font-family: var(--font-title);">
                    {{ $lessonStats['completed_lessons'] }}
                </div>
                <div style="color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-size: 0.75rem;">
                    Completed
                </div>
            </div>
            <div style="padding: 1rem; background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border);">
                <div style="font-size: 2rem; font-weight: 800; color: var(--primary); font-family: var(--font-title);">
                    {{ $lessonStats['in_progress'] }}
                </div>
                <div style="color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-size: 0.75rem;">
                    In Progress
                </div>
            </div>
            <div style="padding: 1rem; background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border);">
                <div style="font-size: 2rem; font-weight: 800; color: #f59e0b; font-family: var(--font-title);">
                    {{ $lessonStats['quizzes_completed'] }}
                </div>
                <div style="color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; font-size: 0.75rem;">
                    Quizzes Completed
                </div>
            </div>
        </div>
    </div>
</div>

<!-- User Registrations Modal -->
<div id="userRegModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); justify-content: center; align-items: center; z-index: 9999;">
    <div style="background: var(--bg-card); border: 2px solid var(--primary); border-radius: 8px; padding: 2rem; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 0 50px var(--primary-glow);">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem;">
            <h3 style="color: var(--primary); font-family: var(--font-title); text-transform: uppercase; letter-spacing: 2px;">All User Registrations</h3>
            <button onclick="document.getElementById('userRegModal').style.display='none'" class="btn btn-sm btn-danger">Close</button>
        </div>
        <table style="width: 100%;">
            <thead>
                <tr>
                    <th style="text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--border);">Date</th>
                    <th style="text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--border);">New Users</th>
                </tr>
            </thead>
            <tbody>
                @foreach($userRegistrations as $reg)
                <tr>
                    <td style="padding: 0.75rem; border-bottom: 1px solid var(--border);">{{ \Carbon\Carbon::parse($reg->date)->format('d M Y') }}</td>
                    <td style="padding: 0.75rem; border-bottom: 1px solid var(--border);"><span style="color: var(--primary); font-weight: 600;">+{{ $reg->count }}</span></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Course Enrollments Modal -->
<div id="enrollModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); justify-content: center; align-items: center; z-index: 9999;">
    <div style="background: var(--bg-card); border: 2px solid var(--primary); border-radius: 8px; padding: 2rem; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 0 50px var(--primary-glow);">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem;">
            <h3 style="color: var(--primary); font-family: var(--font-title); text-transform: uppercase; letter-spacing: 2px;">All Course Enrollments</h3>
            <button onclick="document.getElementById('enrollModal').style.display='none'" class="btn btn-sm btn-danger">Close</button>
        </div>
        <table style="width: 100%;">
            <thead>
                <tr>
                    <th style="text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--border);">Course</th>
                    <th style="text-align: left; padding: 0.75rem; border-bottom: 1px solid var(--border);">Enrollments</th>
                </tr>
            </thead>
            <tbody>
                @foreach($courseEnrollments as $course)
                <tr>
                    <td style="padding: 0.75rem; border-bottom: 1px solid var(--border);">{{ $course->title }}</td>
                    <td style="padding: 0.75rem; border-bottom: 1px solid var(--border);"><span style="color: var(--primary); font-weight: 600;">{{ $course->count }}</span></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection