<% currentPage = 'usage' %>

<!-- Page Header - Modern Dashboard Style -->
<div class="usage-page-header mb-4">
    <div class="row align-items-center">
        <div class="col-md-8">
            <h2 class="mb-1 fw-bold"><i class="fas fa-chart-line me-2"></i>Usage & Limits</h2>
            <p class="text-muted mb-0">Track your resource consumption and plan limits</p>
        </div>
        <div class="col-md-4 text-md-end mt-3 mt-md-0">
            <a href="/pricing" class="btn btn-success btn-lg shadow-sm w-100 w-md-auto">
                <i class="fas fa-rocket me-2"></i>Upgrade Plan
            </a>
        </div>
    </div>
</div>

<!-- Current Plan Card -->
<div class="card shadow-sm mb-4 usage-plan-card">
    <div class="card-body p-4">
        <div class="row align-items-center">
            <div class="col-12">
                <div class="d-flex align-items-center gap-3">
                    <div class="usage-plan-icon-modern">
                        <i class="fas fa-crown"></i>
                    </div>
                    <div>
                        <div class="usage-plan-label-modern">CURRENT PLAN</div>
                        <h3 class="usage-plan-name-modern mb-1"><%= plan.name %></h3>
                        <div class="usage-plan-meta">
                            <span class="usage-plan-price-modern">
                                <i class="fas fa-tag me-1"></i>
                                <% if (plan.price === 0) { %>
                                    Free Forever
                                <% } else if (plan.price === 'Custom') { %>
                                    Custom Pricing
                                <% } else { %>
                                    $<%= plan.price.toLocaleString() %>/<%= plan.expiryDays ? plan.expiryDays + ' days' : 'Lifetime' %>
                                <% } %>
                            </span>
                            <span class="usage-plan-divider">•</span>
                            <span class="usage-plan-expiry-modern">
                                <i class="fas fa-calendar-alt me-1"></i>
                                <% if (expiresAt) { %>
                                    Expires <%= new Date(expiresAt).toLocaleDateString() %>
                                    <% if (planDaysLeft !== null && planDaysLeft < 0) { %>
                                        <span class="badge bg-danger ms-1">Expired</span>
                                    <% } else if (planDaysLeft !== null && planDaysLeft <= 7) { %>
                                        <span class="badge bg-warning ms-1"><%= planDaysLeft %> days left</span>
                                    <% } else if (planDaysLeft !== null) { %>
                                        <span class="badge bg-primary ms-1"><%= planDaysLeft %> days left</span>
                                    <% } %>
                                <% } else { %>
                                    Lifetime Access
                                <% } %>
                            </span>
                            <% if (billingCycle.daysLeft !== null) { %>
                                <span class="usage-plan-divider">•</span>
                                <span class="usage-plan-reset-modern">
                                    <i class="fas fa-sync-alt me-1"></i>
                                    Quota resets in <span class="badge bg-info ms-1"><%= billingCycle.daysLeft %> days</span>
                                </span>
                            <% } %>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Usage Statistics Grid -->
<div class="row g-3 mb-4">
    <!-- Messages -->
    <div class="col-6 col-lg-4">
        <div class="card stats-card border-0 shadow-sm h-100">
            <div class="card-body p-3 p-lg-4">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div>
                        <div class="stats-label text-muted mb-1">Messages</div>
                        <div class="stats-value fw-bold text-primary">
                            <%= usage.messages.used.toLocaleString() %>
                            <% if (usage.messages.limit !== -1) { %>
                                <small class="text-muted" style="font-size: 1rem;">/ <%= usage.messages.limit.toLocaleString() %></small>
                            <% } else { %>
                                <small class="text-success" style="font-size: 1rem;">/ ∞</small>
                            <% } %>
                        </div>
                    </div>
                    <div class="stats-icon-bg bg-primary-subtle text-primary rounded-3 p-2">
                        <i class="fas fa-envelope fa-lg"></i>
                    </div>
                </div>
                <% if (usage.messages.limit !== -1) { %>
                    <div class="progress mb-2" style="height: 6px;">
                        <div class="progress-bar bg-primary" data-width="<%= usage.messages.percentage %>"></div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted"><%= usage.messages.remaining.toLocaleString() %> left</small>
                        <small class="fw-bold text-primary"><%= usage.messages.percentage %>%</small>
                    </div>
                <% } else { %>
                    <div class="badge bg-success-subtle text-success">
                        <i class="fas fa-infinity me-1"></i>Unlimited
                    </div>
                <% } %>
            </div>
        </div>
    </div>

    <!-- Sessions -->
    <div class="col-6 col-lg-4">
        <div class="card stats-card border-0 shadow-sm h-100">
            <div class="card-body p-3 p-lg-4">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div>
                        <div class="stats-label text-muted mb-1">WhatsApp Sessions</div>
                        <div class="stats-value fw-bold text-success">
                            <%= usage.sessions.used %>
                            <% if (usage.sessions.limit !== -1) { %>
                                <small class="text-muted" style="font-size: 1rem;">/ <%= usage.sessions.limit %></small>
                            <% } else { %>
                                <small class="text-success" style="font-size: 1rem;">/ ∞</small>
                            <% } %>
                        </div>
                    </div>
                    <div class="stats-icon-bg bg-success-subtle text-success rounded-3 p-2">
                        <i class="fab fa-whatsapp fa-lg"></i>
                    </div>
                </div>
                <% if (usage.sessions.limit !== -1) { %>
                    <div class="progress mb-2" style="height: 6px;">
                        <div class="progress-bar bg-success" data-width="<%= usage.sessions.percentage %>"></div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted"><%= usage.sessions.remaining %> left</small>
                        <small class="fw-bold text-success"><%= usage.sessions.percentage %>%</small>
                    </div>
                <% } else { %>
                    <div class="badge bg-success-subtle text-success">
                        <i class="fas fa-infinity me-1"></i>Unlimited
                    </div>
                <% } %>
            </div>
        </div>
    </div>

    <!-- Contacts -->
    <div class="col-6 col-lg-4">
        <div class="card stats-card border-0 shadow-sm h-100">
            <div class="card-body p-3 p-lg-4">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div>
                        <div class="stats-label text-muted mb-1">Contacts</div>
                        <div class="stats-value fw-bold text-info">
                            <%= usage.contacts.used.toLocaleString() %>
                            <% if (usage.contacts.limit !== -1) { %>
                                <small class="text-muted" style="font-size: 1rem;">/ <%= usage.contacts.limit.toLocaleString() %></small>
                            <% } else { %>
                                <small class="text-success" style="font-size: 1rem;">/ ∞</small>
                            <% } %>
                        </div>
                    </div>
                    <div class="stats-icon-bg bg-info-subtle text-info rounded-3 p-2">
                        <i class="fas fa-address-book fa-lg"></i>
                    </div>
                </div>
                <% if (usage.contacts.limit !== -1) { %>
                    <div class="progress mb-2" style="height: 6px;">
                        <div class="progress-bar bg-info" data-width="<%= usage.contacts.percentage %>"></div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted"><%= usage.contacts.remaining.toLocaleString() %> left</small>
                        <small class="fw-bold text-info"><%= usage.contacts.percentage %>%</small>
                    </div>
                <% } else { %>
                    <div class="badge bg-success-subtle text-success">
                        <i class="fas fa-infinity me-1"></i>Unlimited
                    </div>
                <% } %>
            </div>
        </div>
    </div>

    <!-- Templates -->
    <div class="col-6 col-lg-4">
        <div class="card stats-card border-0 shadow-sm h-100">
            <div class="card-body p-3 p-lg-4">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div>
                        <div class="stats-label text-muted mb-1">Templates</div>
                        <div class="stats-value fw-bold text-warning">
                            <%= usage.templates.used %>
                            <% if (usage.templates.limit !== -1) { %>
                                <small class="text-muted" style="font-size: 1rem;">/ <%= usage.templates.limit %></small>
                            <% } else { %>
                                <small class="text-success" style="font-size: 1rem;">/ ∞</small>
                            <% } %>
                        </div>
                    </div>
                    <div class="stats-icon-bg bg-warning-subtle text-warning rounded-3 p-2">
                        <i class="fas fa-file-alt fa-lg"></i>
                    </div>
                </div>
                <% if (usage.templates.limit !== -1) { %>
                    <div class="progress mb-2" style="height: 6px;">
                        <div class="progress-bar bg-warning" data-width="<%= usage.templates.percentage %>"></div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted"><%= usage.templates.remaining %> left</small>
                        <small class="fw-bold text-warning"><%= usage.templates.percentage %>%</small>
                    </div>
                <% } else { %>
                    <div class="badge bg-success-subtle text-success">
                        <i class="fas fa-infinity me-1"></i>Unlimited
                    </div>
                <% } %>
            </div>
        </div>
    </div>

    <!-- Number Checks -->
    <div class="col-6 col-lg-4">
        <div class="card stats-card border-0 shadow-sm h-100">
            <div class="card-body p-3 p-lg-4">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div>
                        <div class="stats-label text-muted mb-1">Number Checks</div>
                        <div class="stats-value fw-bold text-danger">
                            <%= usage.numberCheckers.used.toLocaleString() %>
                            <% if (usage.numberCheckers.limit !== -1) { %>
                                <small class="text-muted" style="font-size: 1rem;">/ <%= usage.numberCheckers.limit.toLocaleString() %></small>
                            <% } else { %>
                                <small class="text-success" style="font-size: 1rem;">/ ∞</small>
                            <% } %>
                        </div>
                    </div>
                    <div class="stats-icon-bg bg-danger-subtle text-danger rounded-3 p-2">
                        <i class="fas fa-check-circle fa-lg"></i>
                    </div>
                </div>
                <% if (usage.numberCheckers.limit !== -1) { %>
                    <div class="progress mb-2" style="height: 6px;">
                        <div class="progress-bar bg-danger" data-width="<%= usage.numberCheckers.percentage %>"></div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <small class="text-muted"><%= usage.numberCheckers.remaining.toLocaleString() %> left</small>
                        <small class="fw-bold text-danger"><%= usage.numberCheckers.percentage %>%</small>
                    </div>
                <% } else { %>
                    <div class="badge bg-success-subtle text-success">
                        <i class="fas fa-infinity me-1"></i>Unlimited
                    </div>
                <% } %>
            </div>
        </div>
    </div>
</div>

<!-- Features Section -->
<div class="card shadow-sm">
    <div class="card-header bg-white">
        <h5 class="mb-0">
            <i class="fas fa-star me-2 text-warning"></i>Available Features
        </h5>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-4">
                <div class="feature-card <%= features.aiAssistant ? 'feature-enabled' : 'feature-disabled' %>">
                    <div class="feature-icon">
                        <i class="fas fa-robot"></i>
                    </div>
                    <div class="feature-info">
                        <h6 class="feature-name">AI Assistant</h6>
                        <span class="feature-status">
                            <% if (features.aiAssistant) { %>
                                <i class="fas fa-check-circle text-success"></i> Enabled
                            <% } else { %>
                                <i class="fas fa-times-circle text-danger"></i> Not Available
                            <% } %>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card <%= features.autoReply ? 'feature-enabled' : 'feature-disabled' %>">
                    <div class="feature-icon">
                        <i class="fas fa-reply-all"></i>
                    </div>
                    <div class="feature-info">
                        <h6 class="feature-name">Auto Reply</h6>
                        <span class="feature-status">
                            <% if (features.autoReply) { %>
                                <i class="fas fa-check-circle text-success"></i> Enabled
                            <% } else { %>
                                <i class="fas fa-times-circle text-danger"></i> Not Available
                            <% } %>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card <%= features.apiAccess ? 'feature-enabled' : 'feature-disabled' %>">
                    <div class="feature-icon">
                        <i class="fas fa-code"></i>
                    </div>
                    <div class="feature-info">
                        <h6 class="feature-name">API Access</h6>
                        <span class="feature-status">
                            <% if (features.apiAccess) { %>
                                <i class="fas fa-check-circle text-success"></i> Enabled
                            <% } else { %>
                                <i class="fas fa-times-circle text-danger"></i> Not Available
                            <% } %>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Animate progress bars with stagger effect
    const progressBars = document.querySelectorAll('.progress-bar[data-width]');
    
    progressBars.forEach((bar, index) => {
        const width = parseFloat(bar.getAttribute('data-width'));
        
        setTimeout(() => {
            bar.style.width = width + '%';
        }, 100 + (index * 100));
    });
});
</script>
