<?php $this->load->view('superadmin/layouts/header'); ?>

<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h3 class="mb-1">Reports & Analytics</h3>
        <p class="text-muted mb-0">View statistics and performance metrics across all portals</p>
    </div>
    <div class="btn-group">
        <button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
            <i class="bi bi-calendar3 me-2"></i>Time Period
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item <?= ($period ?? 'week') == 'today' ? 'active' : '' ?>" href="<?= base_url('superadmin/reports?period=today') ?>">Today</a></li>
            <li><a class="dropdown-item <?= ($period ?? 'week') == 'week' ? 'active' : '' ?>" href="<?= base_url('superadmin/reports?period=week') ?>">Last 7 Days</a></li>
            <li><a class="dropdown-item <?= ($period ?? '') == 'month' ? 'active' : '' ?>" href="<?= base_url('superadmin/reports?period=month') ?>">Last 30 Days</a></li>
            <li><a class="dropdown-item <?= ($period ?? '') == 'year' ? 'active' : '' ?>" href="<?= base_url('superadmin/reports?period=year') ?>">This Year</a></li>
        </ul>
    </div>
</div>

<!-- Overview Stats -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="stat-label mb-1">Total Messages Sent</p>
                    <h2 class="stat-value mb-0"><?= number_format($stats['total_sent'] ?? 0) ?></h2>
                </div>
                <div class="stat-icon bg-gradient-success">
                    <i class="bi bi-send-fill"></i>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="stat-label mb-1">Messages Pending</p>
                    <h2 class="stat-value mb-0"><?= number_format($stats['total_pending'] ?? 0) ?></h2>
                </div>
                <div class="stat-icon bg-gradient-warning">
                    <i class="bi bi-clock-fill"></i>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="stat-label mb-1">Failed Messages</p>
                    <h2 class="stat-value mb-0"><?= number_format($stats['total_failed'] ?? 0) ?></h2>
                </div>
                <div class="stat-icon bg-gradient-danger">
                    <i class="bi bi-x-circle-fill"></i>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <p class="stat-label mb-1">Success Rate</p>
                    <h2 class="stat-value mb-0"><?= number_format($stats['success_rate'] ?? 0, 1) ?>%</h2>
                </div>
                <div class="stat-icon bg-gradient-info">
                    <i class="bi bi-graph-up"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="row mb-4">
    <div class="col-lg-8">
        <div class="table-card h-100">
            <div class="card-header">
                <h5><i class="bi bi-graph-up me-2"></i>Message Volume Trend</h5>
            </div>
            <div class="card-body">
                <canvas id="messageChart" height="100"></canvas>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="table-card h-100">
            <div class="card-header">
                <h5><i class="bi bi-pie-chart me-2"></i>Messages by Portal</h5>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center">
                <canvas id="portalChart" height="200"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- Portal Comparison -->
<div class="row mb-4">
    <div class="col-12">
        <div class="table-card">
            <div class="card-header">
                <h5><i class="bi bi-bar-chart me-2"></i>Portal Comparison</h5>
            </div>
            <div class="card-body">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Portal</th>
                            <th>Total Messages</th>
                            <th>Sent</th>
                            <th>Pending</th>
                            <th>Failed</th>
                            <th>Success Rate</th>
                            <th>Progress</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if(!empty($portal_stats)): ?>
                        <?php foreach($portal_stats as $portal): ?>
                        <?php 
                        $total = ($portal['sent'] ?? 0) + ($portal['pending'] ?? 0) + ($portal['failed'] ?? 0);
                        $successRate = $total > 0 ? round((($portal['sent'] ?? 0) / $total) * 100, 1) : 0;
                        ?>
                        <tr>
                            <td><strong><?= htmlspecialchars($portal['portal_name'] ?? $portal['portal_code']) ?></strong></td>
                            <td><?= number_format($total) ?></td>
                            <td><span class="badge bg-success"><?= number_format($portal['sent'] ?? 0) ?></span></td>
                            <td><span class="badge bg-warning text-dark"><?= number_format($portal['pending'] ?? 0) ?></span></td>
                            <td><span class="badge bg-danger"><?= number_format($portal['failed'] ?? 0) ?></span></td>
                            <td><strong><?= $successRate ?>%</strong></td>
                            <td style="width: 200px;">
                                <div class="progress" style="height: 10px;">
                                    <div class="progress-bar bg-success" style="width: <?= $successRate ?>%"></div>
                                    <?php if($total > 0): ?>
                                    <div class="progress-bar bg-danger" style="width: <?= round((($portal['failed'] ?? 0) / $total) * 100, 1) ?>%"></div>
                                    <?php endif; ?>
                                </div>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                        <?php else: ?>
                        <tr>
                            <td colspan="7" class="text-center py-4 text-muted">
                                No portal statistics available
                            </td>
                        </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
// Message Volume Chart
const messageCtx = document.getElementById('messageChart').getContext('2d');
new Chart(messageCtx, {
    type: 'line',
    data: {
        labels: <?= json_encode($chart_data['labels'] ?? ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']) ?>,
        datasets: [{
            label: 'Sent',
            data: <?= json_encode($chart_data['sent'] ?? [0, 0, 0, 0, 0, 0, 0]) ?>,
            borderColor: '#00bf63',
            backgroundColor: 'rgba(0, 191, 99, 0.1)',
            fill: true,
            tension: 0.4
        }, {
            label: 'Failed',
            data: <?= json_encode($chart_data['failed'] ?? [0, 0, 0, 0, 0, 0, 0]) ?>,
            borderColor: '#dc3545',
            backgroundColor: 'rgba(220, 53, 69, 0.1)',
            fill: true,
            tension: 0.4
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top'
            }
        },
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

// Portal Distribution Chart
const portalCtx = document.getElementById('portalChart').getContext('2d');
new Chart(portalCtx, {
    type: 'doughnut',
    data: {
        labels: <?= json_encode($portal_chart['labels'] ?? ['Auriga', 'Trump', 'Ascensiontech']) ?>,
        datasets: [{
            data: <?= json_encode($portal_chart['data'] ?? [33, 33, 34]) ?>,
            backgroundColor: ['#1a1a2e', '#e94560', '#0f3460'],
            borderWidth: 0
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'bottom'
            }
        }
    }
});
</script>

<?php $this->load->view('superadmin/layouts/footer'); ?>
