{% extends "base.html" %}

{% block content %}
<div class="mb-5">
    <h2 class="fw-bold">Welcome back, {{ user }}!</h2>
    <p class="text-muted">Here's what's happening with your WhatsApp Gateway today.</p>
</div>

<div class="row">
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="stats-card shadow-sm" style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);">
            <div class="mb-1 opacity-75">Total Messages</div>
            <h2 class="fw-bold mb-0">{{ log_count }}</h2>
            <i class="bi bi-chat-left-dots icon-bg"></i>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="stats-card shadow-sm {% if is_connected %}bg-success{% else %}bg-danger{% endif %}" 
             style="background: {% if is_connected %}linear-gradient(135deg, #10b981 0%, #059669 100%){% else %}linear-gradient(135deg, #ef4444 0%, #dc2626 100%){% endif %};">
            <div class="mb-1 opacity-75">Connection Status</div>
            <h2 class="fw-bold mb-0">{% if is_connected %}ONLINE{% else %}OFFLINE{% endif %}</h2>
            <i class="bi bi-broadcast icon-bg"></i>
        </div>
    </div>
    <div class="col-lg-4 col-md-12 mb-4">
        <div class="stats-card shadow-sm" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
            <div class="mb-1 opacity-75">Active Sessions</div>
            <h2 class="fw-bold mb-0">1 Device</h2>
            <i class="bi bi-phone icon-bg"></i>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-lg-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3 border-bottom-0 d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0"><i class="bi bi-key me-2 text-primary"></i>API Credentials</h5>
                <form method="post" action="/generate_apikey" class="m-0">
                    <button type="submit" class="btn btn-sm btn-outline-warning rounded-pill px-3" onclick="return confirm('Regenerate API Key? This will break existing integrations.')">
                        <i class="bi bi-arrow-clockwise"></i> Regenerate
                    </button>
                </form>
            </div>
            <div class="card-body">
                <div class="p-3 bg-light rounded-4 border border-dashed">
                    <div class="row align-items-center">
                        <div class="col">
                            <code class="fs-5 text-dark" id="apiKeyDisplay">{{ api_key }}</code>
                        </div>
                        <div class="col-auto">
                            <button class="btn btn-primary btn-sm rounded-pill" onclick="copyApiKey('{{ api_key }}')">
                                <i class="bi bi-clipboard me-1"></i> Copy Key
                            </button>
                        </div>
                    </div>
                </div>
                <div class="mt-3 d-flex align-items-center text-muted small">
                    <i class="bi bi-info-circle me-2"></i>
                    <span>Authentication: Include <code>x-api-key</code> in your request headers.</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card border-0 shadow-sm mt-4">
    <div class="card-header bg-white py-3 border-bottom-0">
        <h5 class="fw-bold mb-0"><i class="bi bi-clock-history me-2 text-primary"></i>Recent Activities</h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4">Timestamp</th>
                        <th>Target / Sender</th>
                        <th>Message Preview</th>
                        <th class="text-end pe-4">Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for log in recent_logs %}
                    <tr>
                        <td class="ps-4 small text-muted">{{ log.timestamp }}</td>
                        <td>
                            <div class="fw-semibold">{{ log.sender_id }}</div>
                        </td>
                        <td>
                            <div class="text-truncate" style="max-width: 300px;">{{ log.message_text }}</div>
                        </td>
                        <td class="text-end pe-4">
                            <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3">SENT</span>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4" class="text-center py-5 text-muted">
                            <i class="bi bi-inbox fs-2 d-block mb-2"></i>
                            No activity logs found.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-footer bg-white border-top-0 py-3 text-center">
        <a href="/logs" class="text-decoration-none fw-bold small">View All Logs <i class="bi bi-arrow-right"></i></a>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function copyApiKey(key) {
    navigator.clipboard.writeText(key);
    const btn = event.currentTarget;
    const originalHtml = btn.innerHTML;
    btn.innerHTML = '<i class="bi bi-check2"></i> Copied!';
    btn.classList.replace('btn-primary', 'btn-success');
    setTimeout(() => {
        btn.innerHTML = originalHtml;
        btn.classList.replace('btn-success', 'btn-primary');
    }, 2000);
}
</script>
{% endblock %}