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

<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0"><?= __('reports') ?></h2>
    <div>
        <a href="?page=reports&action=export_payments" class="btn btn-primary rounded-pill px-4 shadow-sm"><i class="fas fa-file-csv me-1"></i> <?= __('export_payments_csv') ?></a>
    </div>
</div>

<div class="row g-4 mb-4">
    <!-- Revenue Report Card -->
    <div class="col-md-6 col-lg-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 p-3">
            <div class="d-flex align-items-center">
                <div class="flex-shrink-0 bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                    <i class="fas fa-chart-line fs-5"></i>
                </div>
                <div class="flex-grow-1 ms-3">
                    <h6 class="text-secondary mb-1"><?= __('financial_report') ?></h6>
                    <h5 class="fw-bold mb-0"><?= __('monthly_revenue') ?></h5>
                </div>
            </div>
            <div class="mt-3">
                <a href="?page=reports&action=export_payments" class="btn btn-light w-100 btn-sm text-primary fw-bold"><?= __('download_csv') ?></a>
            </div>
        </div>
    </div>

    <!-- User Growth Report Card -->
    <div class="col-md-6 col-lg-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 p-3">
            <div class="d-flex align-items-center">
                <div class="flex-shrink-0 bg-success bg-opacity-10 text-success rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                    <i class="fas fa-users fs-5"></i>
                </div>
                <div class="flex-grow-1 ms-3">
                    <h6 class="text-secondary mb-1"><?= __('user_report') ?></h6>
                    <h5 class="fw-bold mb-0"><?= __('customer_growth') ?></h5>
                </div>
            </div>
            <div class="mt-3">
                <a href="?page=reports&action=export_registrations&type=customers" class="btn btn-light w-100 btn-sm text-success fw-bold"><?= __('download_csv') ?></a>
            </div>
        </div>
    </div>

    <!-- Vendor Activity Report Card -->
    <div class="col-md-6 col-lg-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 p-3">
            <div class="d-flex align-items-center">
                <div class="flex-shrink-0 bg-info bg-opacity-10 text-info rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                    <i class="fas fa-building fs-5"></i>
                </div>
                <div class="flex-grow-1 ms-3">
                    <h6 class="text-secondary mb-1"><?= __('vendor_report') ?></h6>
                    <h5 class="fw-bold mb-0"><?= __('agency_activity') ?></h5>
                </div>
            </div>
            <div class="mt-3">
                <a href="?page=reports&action=export_registrations&type=vendors" class="btn btn-light w-100 btn-sm text-info fw-bold"><?= __('download_csv') ?></a>
            </div>
        </div>
    </div>

    <!-- Subscriptions Report Card -->
    <div class="col-md-6 col-lg-3">
        <div class="card border-0 shadow-sm rounded-4 h-100 p-3">
            <div class="d-flex align-items-center">
                <div class="flex-shrink-0 bg-warning bg-opacity-10 text-warning rounded-circle d-flex align-items-center justify-content-center" style="width: 48px; height: 48px;">
                    <i class="fas fa-crown fs-5"></i>
                </div>
                <div class="flex-grow-1 ms-3">
                    <h6 class="text-secondary mb-1"><?= __('sales_report') ?></h6>
                    <h5 class="fw-bold mb-0"><?= __('subscriptions') ?></h5>
                </div>
            </div>
            <div class="mt-3">
                <a href="?page=reports&action=export_payments" class="btn btn-light w-100 btn-sm text-warning fw-bold"><?= __('download_csv') ?></a>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-header bg-white border-0 p-4">
                <h5 class="fw-bold mb-0"><?= __('monthly_revenue_aed') ?></h5>
            </div>
            <div class="card-body p-4 pt-0">
                <canvas id="revenueChart" style="max-height: 300px;"></canvas>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-header bg-white border-0 p-4">
                <h5 class="fw-bold mb-0"><?= __('registration_split') ?></h5>
            </div>
            <div class="card-body p-4 pt-0 d-flex flex-column justify-content-center">
                <canvas id="growthChart" style="max-height: 300px;"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Maid Analytics -->
<div class="row g-4 mb-4">
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-header bg-white border-0 p-4 pb-0 d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0"><?= __('top_maids_by_views') ?></h5>
                <i class="fas fa-eye text-primary bg-primary bg-opacity-10 p-2 rounded-circle"></i>
            </div>
            <div class="card-body p-0 mt-3">
                <div class="table-responsive">
                    <table class="table table-borderless table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="ps-4"><?= __('full_name') ?></th>
                                <th><?= __('vendor') ?></th>
                                <th class="text-end pe-4"><?= __('view') ?></th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if (empty($topViewedMaids)): ?>
                                <tr>
                                    <td colspan="3" class="text-center py-4 text-muted">No data available</td>
                                </tr>
                            <?php else: ?>
                                <?php foreach ($topViewedMaids as $maid): ?>
                                    <tr>
                                        <td class="ps-4 fw-bold">
                                            <a href="?page=maids&action=view&id=<?= $maid['id'] ?>" class="text-dark text-decoration-none">
                                                <?= htmlspecialchars($maid['full_name']) ?>
                                            </a>
                                        </td>
                                        <td class="text-secondary small"><?= htmlspecialchars($maid['agency_name'] ?? 'N/A') ?></td>
                                        <td class="text-end pe-4">
                                            <span class="badge bg-primary rounded-pill px-3"><?= number_format($maid['views']) ?></span>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-header bg-white border-0 p-4 pb-0 d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0">Top Maids by Interview Requests</h5>
                <i class="fas fa-video text-success bg-success bg-opacity-10 p-2 rounded-circle"></i>
            </div>
            <div class="card-body p-0 mt-3">
                <div class="table-responsive">
                    <table class="table table-borderless table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="ps-4">Maid Name</th>
                                <th>Agency</th>
                                <th class="text-end pe-4">Requests</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if (empty($topRequestedMaids)): ?>
                                <tr>
                                    <td colspan="3" class="text-center py-4 text-muted">No data available</td>
                                </tr>
                            <?php else: ?>
                                <?php foreach ($topRequestedMaids as $maid): ?>
                                    <tr>
                                        <td class="ps-4 fw-bold">
                                            <a href="?page=maids&action=view&id=<?= $maid['id'] ?>" class="text-dark text-decoration-none">
                                                <?= htmlspecialchars($maid['full_name']) ?>
                                            </a>
                                        </td>
                                        <td class="text-secondary small"><?= htmlspecialchars($maid['agency_name'] ?? 'N/A') ?></td>
                                        <td class="text-end pe-4">
                                            <span class="badge bg-success rounded-pill px-3"><?= number_format($maid['request_count']) ?></span>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Customer Analytics -->
<div class="row g-4 mb-4">
    <!-- Engagement Metrics -->
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-header bg-white border-0 p-4 pb-0">
                <h5 class="fw-bold mb-0">Customer Engagement</h5>
            </div>
            <div class="card-body p-4 mt-1">
                <div class="d-flex flex-column gap-3">
                    <div class="d-flex justify-content-between align-items-center p-3 rounded-3" style="background-color: var(--bg-main);">
                        <div>
                            <div class="small-meta text-uppercase fw-bold text-muted">Avg. Interviews</div>
                            <h4 class="fw-bold mb-0 text-primary mt-1"><?= $engagementMetrics['avg_interviews'] ?></h4>
                        </div>
                        <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                            <i class="fas fa-video"></i>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center p-3 rounded-3" style="background-color: var(--bg-main);">
                        <div>
                            <div class="small-meta text-uppercase fw-bold text-muted">Avg. Quotations</div>
                            <h4 class="fw-bold mb-0 text-success mt-1"><?= $engagementMetrics['avg_quotes'] ?></h4>
                        </div>
                        <div class="bg-success bg-opacity-10 text-success rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                            <i class="fas fa-file-invoice-dollar"></i>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center p-3 rounded-3" style="background-color: var(--bg-main);">
                        <div>
                            <div class="small-meta text-uppercase fw-bold text-muted">Avg. Favorites</div>
                            <h4 class="fw-bold mb-0 text-warning mt-1"><?= $engagementMetrics['avg_favorites'] ?></h4>
                        </div>
                        <div class="bg-warning bg-opacity-10 text-warning rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                            <i class="fas fa-heart"></i>
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center p-3 rounded-3" style="background-color: var(--bg-main);">
                        <div>
                            <div class="small-meta text-uppercase fw-bold text-muted">Conversion Rate</div>
                            <h4 class="fw-bold mb-0 text-info mt-1"><?= $engagementMetrics['conversion_rate'] ?>%</h4>
                        </div>
                        <div class="bg-info bg-opacity-10 text-info rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                            <i class="fas fa-percentage"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Most Active Customers -->
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-4 h-100">
            <div class="card-header bg-white border-0 p-4 pb-0 d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0">Most Active Customers</h5>
                <i class="fas fa-user-check text-primary bg-primary bg-opacity-10 p-2 rounded-circle"></i>
            </div>
            <div class="card-body p-0 mt-3">
                <div class="table-responsive">
                    <table class="table table-borderless table-hover align-middle mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th class="ps-4">Rank & Name</th>
                                <th>Email</th>
                                <th class="text-center">Interviews</th>
                                <th class="text-center">Quotes</th>
                                <th class="text-center">Contracts</th>
                                <th class="text-end pe-4">Total Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if (empty($activeCustomers)): ?>
                                <tr>
                                    <td colspan="6" class="text-center py-4 text-muted">No customer activity logs available</td>
                                </tr>
                            <?php else: ?>
                                <?php $rank = 1; foreach ($activeCustomers as $cust): ?>
                                    <tr>
                                        <td class="ps-4 fw-bold">
                                            <div class="d-flex align-items-center gap-2">
                                                <span class="text-muted" style="min-width: 20px;">#<?= $rank++ ?></span>
                                                <div style="width: 32px; height: 32px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold;">
                                                    <?= strtoupper(substr($cust['full_name'], 0, 1)) ?>
                                                </div>
                                                <a href="?page=customers&action=view&id=<?= $cust['id'] ?>" class="text-dark text-decoration-none">
                                                    <?= htmlspecialchars($cust['full_name']) ?>
                                                </a>
                                            </div>
                                        </td>
                                        <td class="text-secondary small"><?= htmlspecialchars($cust['email']) ?></td>
                                        <td class="text-center">
                                            <span class="badge bg-light text-primary rounded-pill px-2 py-1"><?= $cust['interview_count'] ?></span>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-light text-success rounded-pill px-2 py-1"><?= $cust['quote_count'] ?></span>
                                        </td>
                                        <td class="text-center">
                                            <span class="badge bg-light text-info rounded-pill px-2 py-1"><?= $cust['contract_count'] ?></span>
                                        </td>
                                        <td class="text-end pe-4">
                                            <span class="badge bg-primary rounded-pill px-3"><?= number_format($cust['total_actions']) ?></span>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Revenue Chart
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    new Chart(revenueCtx, {
        type: 'line',
        data: {
            labels: <?= json_encode($monthsTimeline) ?>,
            datasets: [{
                label: 'Revenue',
                data: <?= json_encode(array_values($chartRevenue)) ?>,
                borderColor: '#2F6BFF',
                backgroundColor: 'rgba(47, 107, 255, 0.1)',
                fill: true,
                tension: 0.4,
                pointRadius: 4,
                pointBackgroundColor: '#2F6BFF'
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: {
                y: { beginAtZero: true, grid: { borderDash: [5, 5] } },
                x: { grid: { display: false } }
            }
        }
    });

    // Growth Chart (Registration Split)
    const growthCtx = document.getElementById('growthChart').getContext('2d');
    new Chart(growthCtx, {
        type: 'doughnut',
        data: {
            labels: ['Customers', 'Vendors'],
            datasets: [{
                data: [
                    <?= $chartCustomersCount ?>,
                    <?= $chartVendorsCount ?>
                ],
                backgroundColor: ['#2F6BFF', '#16A34A'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } }
            },
            cutout: '70%'
        }
    });
});
</script>

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