<?php include __DIR__ . '/header.php'; ?>

<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800 fw-bold"><?php echo __('admin_dashboard'); ?></h1>
        <div class="d-flex gap-2">
            <a href="/admin/apks/add" class="btn btn-primary shadow-sm rounded-pill px-4 fw-bold">
                <i class="fas fa-plus me-1"></i> Add APK
            </a>
            <a href="/admin/settings" class="btn btn-outline-secondary shadow-sm rounded-pill px-4 fw-bold">
                <i class="fas fa-cog me-1"></i> <?php echo __('settings'); ?>
            </a>
        </div>
    </div>

    <div class="row g-4 mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm rounded-4 h-100 py-2 border-start border-primary border-4 bg-white">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1 small fw-bold">Total APKs</div>
                            <div class="h4 mb-0 font-weight-bold text-gray-800"><?php echo number_format($total_apks); ?></div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-mobile-alt fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm rounded-4 h-100 py-2 border-start border-success border-4 bg-white">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1 small fw-bold">Total Downloads</div>
                            <div class="h4 mb-0 font-weight-bold text-gray-800"><?php echo number_format($total_downloads); ?></div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-download fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm rounded-4 h-100 py-2 border-start border-info border-4 bg-white">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1 small fw-bold">Total Users</div>
                            <div class="h4 mb-0 font-weight-bold text-gray-800"><?php echo number_format($total_users); ?></div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6">
            <div class="card border-0 shadow-sm rounded-4 h-100 py-2 border-start border-warning border-4 bg-white">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1 small fw-bold">Pending Withdrawals</div>
                            <div class="h4 mb-0 font-weight-bold text-gray-800"><?php echo number_format($pending_withdrawals); ?></div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-wallet fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="row mb-4">
        <div class="col-12">
            <div class="card shadow-sm border-0 rounded-4 bg-white">
                <div class="card-header bg-white py-3 border-bottom border-light d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary fw-bold">Referral Downloads (Last 7 Days)</h6>
                </div>
                <div class="card-body">
                    <canvas id="referralChart" style="height: 300px; width: 100%;"></canvas>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('referralChart').getContext('2d');
            const stats = <?php echo json_encode($referral_stats); ?>;
            
            const labels = stats.map(s => s.date);
            const counts = stats.map(s => s.count);

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels.length ? labels : ['No Data'],
                    datasets: [{
                        label: 'Referral Downloads',
                        data: counts.length ? counts : [0],
                        borderColor: '#10B981',
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        fill: true,
                        tension: 0.4,
                        pointRadius: 5,
                        pointBackgroundColor: '#10B981'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(0, 0, 0, 0.05)'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
        });
    </script>
    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 rounded-4 mb-4 bg-white">
                <div class="card-header bg-white py-3 border-bottom border-light">
                    <h6 class="m-0 font-weight-bold text-primary fw-bold">Recent APKs</h6>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead>
                                <tr>
                                    <th class="border-0">Title</th>
                                    <th class="border-0">Version</th>
                                    <th class="border-0">Downloads</th>
                                    <th class="border-0">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php foreach ($recent_apks as $apk): ?>
                                    <tr>
                                        <td>
                                            <div class="fw-bold text-dark"><?php echo htmlspecialchars($apk['title']); ?></div>
                                            <small class="text-muted"><?php echo htmlspecialchars($apk['slug']); ?></small>
                                        </td>
                                        <td>v<?php echo htmlspecialchars($apk['version']); ?></td>
                                        <td><i class="fas fa-download me-1 text-muted"></i> <?php echo number_format($apk['total_downloads']); ?></td>
                                        <td>
                                            <span class="badge rounded-pill bg-<?php echo $apk['status'] === 'published' ? 'success' : 'secondary'; ?> px-3 py-2">
                                                <?php echo ucfirst($apk['status']); ?>
                                            </span>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card shadow-sm border-0 rounded-4 bg-white">
                <div class="card-header bg-white py-3 border-bottom border-light">
                    <h6 class="m-0 font-weight-bold text-primary fw-bold">Quick Navigation</h6>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush rounded-bottom-4">
                        <a href="/admin/apks" class="list-group-item list-group-item-action py-3 px-4 border-0">
                            <i class="fas fa-mobile-alt me-2 text-primary"></i> Manage APKs
                        </a>
                        <a href="/admin/categories" class="list-group-item list-group-item-action py-3 px-4 border-0">
                            <i class="fas fa-tags me-2 text-info"></i> <?php echo __('categories'); ?>
                        </a>
                        <a href="/admin/withdrawals" class="list-group-item list-group-item-action py-3 px-4 border-0">
                            <i class="fas fa-cash-register me-2 text-success"></i> <?php echo __('manage_withdrawals'); ?>
                            <?php if ($pending_withdrawals > 0): ?>
                                <span class="badge bg-danger rounded-pill float-end"><?php echo $pending_withdrawals; ?></span>
                            <?php endif; ?>
                        </a>
                        <a href="/admin/settings" class="list-group-item list-group-item-action py-3 px-4 border-0">
                            <i class="fas fa-cog me-2 text-secondary"></i> <?php echo __('settings'); ?>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php include __DIR__ . '/footer.php'; ?>
