{% extends 'dashboard/layout.html' %}
{% block title %}{{ _('Inbox - Dashboard') }}{% endblock %}
{% set active_page = 'inbox' %}

{% block dashboard_content %}
<div class="mb-5 flex items-center justify-between">
    <div>
        <h1 class="text-xl font-bold text-gray-900 dark:text-white"><i class="fa fa-inbox mr-2 text-pink-500"></i>{{ _('Inbox') }}</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{{ _('Notifications from admin actions, blog updates, and more.') }}</p>
    </div>
    <span class="text-sm text-gray-500 dark:text-gray-400">{{ total }} {{ _('message') }}{{ 's' if total != 1 }}</span>
</div>

<div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
    {% if msgs %}
    <div class="divide-y divide-gray-100 dark:divide-gray-800">
        {% for m in msgs %}
        <div class="px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors cursor-pointer"
             onclick="toggleMsg({{ m.id }})" data-testid="row-inbox-{{ m.id }}">
            <div class="flex items-start gap-3">
                <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5
                    {% if m.event_type in ['blog_published','blog_reviewed'] %}bg-purple-100 dark:bg-purple-900/30
                    {% elif m.event_type == 'payment_received' %}bg-green-100 dark:bg-green-900/30
                    {% elif m.event_type == 'plan_changed' %}bg-blue-100 dark:bg-blue-900/30
                    {% else %}bg-indigo-100 dark:bg-indigo-900/30{% endif %}">
                    <i class="fa
                        {% if m.event_type == 'blog_reviewed' %}fa-check-circle text-blue-600
                        {% elif m.event_type == 'blog_published' %}fa-newspaper text-purple-600
                        {% elif m.event_type == 'payment_received' %}fa-money-bill-wave text-green-600
                        {% elif m.event_type == 'plan_changed' %}fa-credit-card text-blue-600
                        {% elif m.event_type == 'login' %}fa-right-to-bracket text-indigo-600
                        {% elif m.event_type == 'referral_signup' %}fa-user-plus text-orange-500
                        {% elif m.event_type == 'password_changed' %}fa-lock text-red-500
                        {% else %}fa-bell text-indigo-600{% endif %} text-xs"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center justify-between gap-2">
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-200 truncate" data-testid="text-msg-subject-{{ m.id }}">{{ m.subject }}</p>
                        <span class="text-xs text-gray-400 flex-shrink-0">{{ m.created_at[:16] if m.created_at else '' }}</span>
                    </div>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5 capitalize">{{ m.event_type.replace('_',' ') }}</p>
                </div>
            </div>
            <div id="msg-body-{{ m.id }}" class="hidden mt-3 pl-11">
                <div class="text-sm text-gray-700 dark:text-gray-300 prose prose-sm dark:prose-invert max-w-none bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border border-gray-100 dark:border-gray-700">
                    {{ m.body_html | safe }}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% if total_pages > 1 %}
    <div class="px-5 py-4 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between">
        <span class="text-sm text-gray-500">{{ _('Page %(page)s of %(total)s', page=page, total=total_pages) }}</span>
        <div class="flex gap-2">
            {% if page > 1 %}<a href="?page={{ page-1 }}" class="px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-all" data-testid="btn-prev">{{ _('← Prev') }}</a>{% endif %}
            {% if page < total_pages %}<a href="?page={{ page+1 }}" class="px-3 py-1.5 rounded-lg border border-gray-300 dark:border-gray-600 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 transition-all" data-testid="btn-next">{{ _('Next →') }}</a>{% endif %}
        </div>
    </div>
    {% endif %}
    {% else %}
    <div class="py-16 text-center" data-testid="text-no-messages">
        <i class="fa fa-inbox text-4xl text-gray-300 dark:text-gray-600 mb-3"></i>
        <p class="text-gray-500 dark:text-gray-400 text-sm">{{ _('Your inbox is empty.') }}</p>
        <p class="text-gray-400 dark:text-gray-500 text-xs mt-1">{{ _('Admin actions and notifications will appear here.') }}</p>
    </div>
    {% endif %}
</div>

<script>
function toggleMsg(id) {
    var el = document.getElementById('msg-body-' + id);
    if (el) el.classList.toggle('hidden');
}
</script>
{% endblock %}