{% extends "admin/layout.html" %}
{% block title %}Dashboard – Admin{% endblock %}
{% block body %}
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-admin-dashboard">{% trans %}Admin Dashboard{% endtrans %}</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{% trans %}Platform overview and key metrics{% endtrans %}</p>
    </div>
    <a href="{{ full_url('/admin/users') }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-gray-300 dark:border-gray-600 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
        <i class="fa fa-users text-indigo-500"></i> {% trans %}Manage Users{% endtrans %}
    </a>
</div>

<!-- Stat cards -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5" data-testid="stat-total-users">
        <div class="flex items-center justify-between mb-3">
            <div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-widest">{% trans %}Total Users{% endtrans %}</div>
            <div class="w-8 h-8 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center">
                <i class="fa fa-users text-indigo-600 dark:text-indigo-400 text-sm"></i>
            </div>
        </div>
        <div class="text-3xl font-bold text-gray-900 dark:text-white">{{ total_users }}</div>
        <div class="mt-1 text-xs text-gray-400">
            <span class="text-green-600 dark:text-green-400 font-semibold">{{ paid_users }}</span> {% trans %}paid{% endtrans %} &middot;
            <span class="text-gray-500">{{ free_users }}</span> {% trans %}free{% endtrans %}
        </div>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5" data-testid="stat-new-signups">
        <div class="flex items-center justify-between mb-3">
            <div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-widest">{% trans %}New Signups{% endtrans %}</div>
            <div class="w-8 h-8 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
                <i class="fa fa-user-plus text-emerald-600 dark:text-emerald-400 text-sm"></i>
            </div>
        </div>
        <div class="text-3xl font-bold text-gray-900 dark:text-white">{{ new_7d }}</div>
        <div class="mt-1 text-xs text-gray-400">
            <span class="text-emerald-600 dark:text-emerald-400 font-semibold">+{{ new_today }}</span> {% trans %}today{% endtrans %} &middot;
            {{ new_30d }} {% trans %}last 30 days{% endtrans %}
        </div>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5" data-testid="stat-conversions">
        <div class="flex items-center justify-between mb-3">
            <div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-widest">{% trans %}Conversions{% endtrans %}</div>
            <div class="w-8 h-8 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                <i class="fa fa-file-circle-check text-blue-600 dark:text-blue-400 text-sm"></i>
            </div>
        </div>
        <div class="text-3xl font-bold text-gray-900 dark:text-white">{{ conversions_7d }}</div>
        <div class="mt-1 text-xs text-gray-400">
            <span class="text-blue-600 dark:text-blue-400 font-semibold">{{ conversions_today }}</span> {% trans %}today{% endtrans %} &middot;
            {{ total_conversions }} {% trans %}total{% endtrans %}
        </div>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5" data-testid="stat-revenue">
        <div class="flex items-center justify-between mb-3">
            <div class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-widest">{% trans %}Revenue{% endtrans %}</div>
            <div class="w-8 h-8 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
                <i class="fa fa-dollar-sign text-purple-600 dark:text-purple-400 text-sm"></i>
            </div>
        </div>
        <div class="text-3xl font-bold text-gray-900 dark:text-white">${{ '%.0f'|format(total_revenue) }}</div>
        <div class="mt-1 text-xs text-gray-400">
            <span class="text-purple-600 dark:text-purple-400 font-semibold">${{ '%.0f'|format(revenue_30d) }}</span> {% trans %}last 30 days{% endtrans %}
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
    <!-- Signups chart -->
    <div class="lg:col-span-1 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5">
        <div class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-widest mb-4">{% trans %}New Signups — Last 30 Days{% endtrans %}</div>
        {% if signup_chart %}
        {% set max_s = signup_chart|max %}
        <div class="flex items-end gap-1 h-16">
            {% for v in signup_chart %}
            <div class="flex-1 rounded-t-sm bg-indigo-400 dark:bg-indigo-600 transition-all hover:bg-indigo-500"
                 style="height: {{ ((v / (max_s if max_s > 0 else 1)) * 100)|int }}%; min-height: 2px;"
                 title="{{ v }} signup{{ 's' if v != 1 else '' }}"></div>
            {% endfor %}
        </div>
        <div class="flex justify-between mt-1 text-[9px] text-gray-400">
            <span>{% trans %}30d ago{% endtrans %}</span><span>{% trans %}Today{% endtrans %}</span>
        </div>
        {% else %}
        <div class="text-xs text-gray-400 text-center py-6">{% trans %}No data{% endtrans %}</div>
        {% endif %}
    </div>

    <!-- Conversions chart -->
    <div class="lg:col-span-1 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5">
        <div class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-widest mb-4">{% trans %}Conversions — Last 30 Days{% endtrans %}</div>
        {% if conversion_chart %}
        {% set max_c = conversion_chart|max %}
        <div class="flex items-end gap-1 h-16">
            {% for v in conversion_chart %}
            <div class="flex-1 rounded-t-sm bg-blue-400 dark:bg-blue-600 transition-all hover:bg-blue-500"
                 style="height: {{ ((v / (max_c if max_c > 0 else 1)) * 100)|int }}%; min-height: 2px;"
                 title="{{ v }} conversion{{ 's' if v != 1 else '' }}"></div>
            {% endfor %}
        </div>
        <div class="flex justify-between mt-1 text-[9px] text-gray-400">
            <span>{% trans %}30d ago{% endtrans %}</span><span>{% trans %}Today{% endtrans %}</span>
        </div>
        {% else %}
        <div class="text-xs text-gray-400 text-center py-6">{% trans %}No data{% endtrans %}</div>
        {% endif %}
    </div>

    <!-- Top output formats -->
    <div class="lg:col-span-1 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5">
        <div class="text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-widest mb-4">{% trans %}Top Output Formats{% endtrans %}</div>
        {% if top_formats %}
        {% set max_f = top_formats[0].cnt if top_formats else 1 %}
        <div class="space-y-2" data-testid="chart-top-formats">
            {% for fmt in top_formats %}
            <div>
                <div class="flex items-center justify-between text-xs mb-0.5">
                    <span class="font-semibold text-gray-700 dark:text-gray-300 uppercase">{{ fmt.output_format or '–' }}</span>
                    <span class="text-gray-400">{{ fmt.cnt }}</span>
                </div>
                <div class="w-full bg-gray-100 dark:bg-gray-800 rounded-full h-1.5">
                    <div class="bg-emerald-500 h-1.5 rounded-full" style="width: {{ ((fmt.cnt / (max_f if max_f > 0 else 1)) * 100)|int }}%"></div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-xs text-gray-400 text-center py-6">{% trans %}No conversion data{% endtrans %}</div>
        {% endif %}
    </div>
</div>

<!-- Quick Actions -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
    <a href="{{ full_url('/admin/users') }}" class="flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 hover:border-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-all text-center group">
        <i class="fa fa-users text-xl text-gray-400 group-hover:text-indigo-500 transition-colors"></i>
        <span class="text-xs font-semibold text-gray-600 dark:text-gray-400 group-hover:text-indigo-600 dark:group-hover:text-indigo-400">{% trans %}Users{% endtrans %}</span>
    </a>
    <a href="{{ full_url('/admin/users/new') }}" class="flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 hover:border-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-900/20 transition-all text-center group">
        <i class="fa fa-user-plus text-xl text-gray-400 group-hover:text-emerald-500 transition-colors"></i>
        <span class="text-xs font-semibold text-gray-600 dark:text-gray-400 group-hover:text-emerald-600 dark:group-hover:text-emerald-400">{% trans %}New User{% endtrans %}</span>
    </a>
    <a href="{{ full_url('/admin/plans') }}" class="flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 hover:border-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-all text-center group">
        <i class="fa fa-layer-group text-xl text-gray-400 group-hover:text-purple-500 transition-colors"></i>
        <span class="text-xs font-semibold text-gray-600 dark:text-gray-400 group-hover:text-purple-600 dark:group-hover:text-purple-400">{% trans %}Plans{% endtrans %}</span>
    </a>
    <a href="{{ full_url('/admin/blogs') }}" class="flex flex-col items-center gap-2 p-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 hover:border-orange-400 hover:bg-orange-50 dark:hover:bg-orange-900/20 transition-all text-center group">
        <i class="fa fa-blog text-xl text-gray-400 group-hover:text-orange-500 transition-colors"></i>
        <span class="text-xs font-semibold text-gray-600 dark:text-gray-400 group-hover:text-orange-600 dark:group-hover:text-orange-400">{% trans %}Blogs{% endtrans %}</span>
    </a>
</div>

<!-- Recent Signups -->
<div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
        <h2 class="text-sm font-bold text-gray-500 dark:text-gray-400 uppercase tracking-widest">{% trans %}Recent Signups{% endtrans %}</h2>
        <a href="{{ full_url('/admin/users') }}" class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline">{% trans %}View all{% endtrans %}</a>
    </div>
    {% if recent_users %}
    <div class="overflow-x-auto">
        <table class="w-full text-sm" data-testid="table-recent-users">
            <thead>
                <tr class="bg-gray-50 dark:bg-gray-800/50 border-b border-gray-100 dark:border-gray-800">
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}User{% endtrans %}</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Plan{% endtrans %}</th>
                    <th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Joined{% endtrans %}</th>
                    <th class="px-6 py-3 text-right text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Action{% endtrans %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for u in recent_users %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                    <td class="px-6 py-3">
                        <div class="font-semibold text-gray-900 dark:text-white">{{ u.username }}</div>
                        <div class="text-xs text-gray-400">{{ u.email }}</div>
                    </td>
                    <td class="px-6 py-3 text-gray-600 dark:text-gray-400">{{ u.plan_name or '–' }}</td>
                    <td class="px-6 py-3 text-gray-500 dark:text-gray-400 text-xs">{{ u.created_at[:10] if u.created_at else '–' }}</td>
                    <td class="px-6 py-3 text-right">
                        <a href="{{ full_url('/admin/users/' ~ u.id) }}" class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline">{% trans %}View{% endtrans %}</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="px-6 py-8 text-center text-sm text-gray-400">{% trans %}No users yet.{% endtrans %}</div>
    {% endif %}
</div>
{% endblock %}