<div class="page-title">
    <i class="bi bi-speedometer2 page-icon"></i>
    <div>
        <h2>My Overview</h2>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="stat-card primary">
            <i class="bi bi-megaphone-fill stat-icon"></i>
            <div class="stat-label">Total Assigned</div>
            <div class="stat-value"><?= number_format($total_assigned_records ?? 0) ?></div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="stat-card success">
            <i class="bi bi-check-circle-fill stat-icon"></i>
            <div class="stat-label">Messages Delivered</div>
            <div class="stat-value"><?= number_format($campaigns_sent_sum ?? 0) ?></div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="stat-card danger">
            <i class="bi bi-x-circle-fill stat-icon"></i>
            <div class="stat-label">Delivery Failed</div>
            <div class="stat-value"><?= number_format($campaigns_failed_sum ?? 0) ?></div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <!-- <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-graph-up"></i> Today's Hourly Activity</h5>
            </div>
            <div class="card-body">
                <canvas id="activityChart" height="80"></canvas>
            </div>
        </div>
    </div> -->
    
    <!-- <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-info-circle"></i> Today's Summary</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Sent Messages:</span>
                        <strong class="text-success"><?= number_format($today_activity->sent ?? 0) ?></strong>
                    </div>
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar bg-success" style="width: <?= $today_activity->total > 0 ? ($today_activity->sent / $today_activity->total) * 100 : 0 ?>%"></div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <div class="d-flex justify-content-between mb-2">
                        <span>Failed Messages:</span>
                        <strong class="text-danger"><?= number_format($today_activity->failed ?? 0) ?></strong>
                    </div>
                    <div class="progress" style="height: 8px;">
                        <div class="progress-bar bg-danger" style="width: <?= $today_activity->total > 0 ? ($today_activity->failed / $today_activity->total) * 100 : 0 ?>%"></div>
                    </div>
                </div>
                
                <hr>
                
                <div class="text-center">
                    <h3><?= number_format($today_activity->total ?? 0) ?></h3>
                    <p class="text-muted mb-0">Total Messages Today</p>
                </div>
            </div>
        </div>
    </div> -->
</div>

<div class="row mt-4">
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-header">
                <div class="panel-title"><i class="bi bi-megaphone-fill"></i> Recent Campaigns</div>
                <div class="panel-actions">
                    <a href="<?= base_url('user/campaigns') ?>" class="view-all-btn">See All</a>
                </div>
            </div>
            <div class="panel-body">
                <div class="panel-inner">
                <?php if (!empty($recent_campaigns)): ?>
                    <div class="row">
                        <?php foreach ($recent_campaigns as $campaign): ?>
                            <div class="col-md-6">
                                <div class="campaign-card">
                                    <div class="card-top">
                                        <div>
                                            <div class="card-title">
                                                <i class="bi bi-megaphone-fill"></i>
                                                <?= htmlspecialchars($campaign->name) ?>
                                            </div>
                                            <div class="type-badge mt-2">
                                                <i class="bi bi-<?= $campaign->type == 'WhatsApp' ? 'whatsapp' : ($campaign->type == 'SMS' ? 'chat-dots' : 'envelope') ?>"></i>
                                                <?= htmlspecialchars($campaign->type) ?>
                                            </div>
                                        </div>
                                        <div>
                                            <?php
                                            $badge_class = [
                                                'active' => 'background: #059669;',
                                                'paused' => 'background: #f59e0b;',
                                                'stopped' => 'background: #ef4444;',
                                                'completed' => 'background: #6b7280;'
                                            ];
                                            $status_style = isset($badge_class[$campaign->status]) ? $badge_class[$campaign->status] : 'background:#64748b;';
                                            ?>
                                            <span class="status-badge" style="<?= $status_style ?> padding:6px 12px; border-radius:10px;"><?= ucfirst($campaign->status) ?></span>
                                        </div>
                                    </div>

                                    <div class="metrics">
                                        <div class="metric">
                                            <div class="label">
                                                <i class="bi bi-check2-square"></i>
                                                Total Assigned
                                            </div>
                                            <div class="value"><?= number_format($campaign->my_assigned ?? 0) ?></div>
                                        </div>
                                        <div class="metric success">
                                            <div class="label">
                                                <i class="bi bi-check-circle-fill"></i>
                                                Successfully Sent
                                            </div>
                                            <div class="value"><?= number_format($campaign->my_sent ?? 0) ?></div>
                                        </div>
                                        <div class="metric danger">
                                            <div class="label">
                                                <i class="bi bi-x-circle-fill"></i>
                                                Send Failed
                                            </div>
                                            <div class="value"><?= number_format($campaign->my_failed ?? 0) ?></div>
                                        </div>
                                        <div class="metric">
                                            <div class="label">
                                                <i class="bi bi-hourglass-split"></i>
                                                Pending
                                            </div>
                                            <div class="value"><?= number_format($campaign->my_remaining ?? 0) ?></div>
                                        </div>
                                    </div>

                                    <div class="progress-wrap">
                                        <div class="progress">
                                            <?php
                                            $assigned = (int)($campaign->my_assigned ?? 0);
                                            $sent = (int)($campaign->my_sent ?? 0);
                                            $percent = $assigned>0 ? min(100, round(($sent/$assigned)*100)) : 0;
                                            ?>
                                            <div class="progress-bar" role="progressbar" style="width:<?= $percent ?>%;"></div>
                                        </div>
                                    </div>

                                    <div class="actions">
                                        <a href="<?= base_url('user/campaign_view/' . $campaign->id) ?>" class="btn-gradient">
                                            <i class="bi bi-eye-fill"></i>
                                            Open Details
                                        </a>
                                        <!-- <a href="<?= base_url('user/campaign_logs/' . $campaign->id) ?>" class="btn-outline">
                                            <i class="bi bi-clock-history"></i>
                                            Activity History
                                        </a> -->
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php else: ?>
                    <p class="text-muted text-center py-4">
                        <i class="bi bi-inbox" style="font-size: 48px; display: block; margin-bottom: 12px; opacity: 0.3;"></i>
                        No campaigns have been assigned to you yet
                    </p>
                <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const chartData = <?= json_encode($hourly_activity) ?>;
    
    // Prepare data for all 24 hours
    const hours = Array.from({length: 24}, (_, i) => i);
    const sentData = new Array(24).fill(0);
    const failedData = new Array(24).fill(0);
    
    chartData.forEach(item => {
        const hour = parseInt(item.hour);
        sentData[hour] = parseInt(item.sent);
        failedData[hour] = parseInt(item.failed);
    });
    
    const labels = hours.map(h => h + ':00');
    
    const ctx = document.getElementById('activityChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Sent',
                data: sentData,
                backgroundColor: 'rgba(40, 167, 69, 0.6)',
                borderColor: 'rgb(40, 167, 69)',
                borderWidth: 1
            }, {
                label: 'Failed',
                data: failedData,
                backgroundColor: 'rgba(220, 53, 69, 0.6)',
                borderColor: 'rgb(220, 53, 69)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
});
</script>
