{% extends "dashboard/base_dashboard.html" %}

{% block title %}Painel Administração{% endblock %}
{% block panel_title %}Painel de Administração{% endblock %}

{% block panel_content %}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <!-- Usuarios -->
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
        <div class="w-12 h-12 bg-rosa-bg rounded-xl flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-rosa" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
        </div>
        <h3 class="font-poppins font-semibold text-dark text-lg mb-1">Utilizadores</h3>
        <p class="text-gray-400 text-sm">Total registados</p>
        <p class="text-3xl font-bold text-rosa mt-3">{{ total_usuarios }}</p>
    </div>

    <!-- Pacientes -->
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
        <div class="w-12 h-12 bg-dorado/10 rounded-xl flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-dorado" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
        </div>
        <h3 class="font-poppins font-semibold text-dark text-lg mb-1">Pacientes</h3>
        <p class="text-gray-400 text-sm">Total pacientes</p>
        <p class="text-3xl font-bold text-dorado mt-3">{{ total_pacientes }}</p>
    </div>

    <!-- Finanzas -->
    <a href="{% url 'finance:dashboard' %}" class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-shadow block">
        <div class="w-12 h-12 bg-green-50 rounded-xl flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </div>
        <h3 class="font-poppins font-semibold text-dark text-lg mb-1">Finanças</h3>
        <p class="text-gray-400 text-sm">Dashboard financeiro</p>
        <p class="text-sm text-green-600 font-semibold mt-3">Ver finanças →</p>
    </a>

    <!-- Verificados -->
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
        <div class="w-12 h-12 bg-blue-50 rounded-xl flex items-center justify-center mb-4">
            <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
        </div>
        <h3 class="font-poppins font-semibold text-dark text-lg mb-1">Verificados</h3>
        <p class="text-gray-400 text-sm">Emails confirmados</p>
        <p class="text-3xl font-bold text-blue-500 mt-3">{{ total_verificados }}</p>
    </div>
</div>

<!-- Quick Links -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <a href="{% url 'dashboard:analytics' %}" class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-md hover:border-rosa/30 transition block">
        <h3 class="font-poppins font-semibold text-dark text-base mb-3">Dashboard Analytics</h3>
        <p class="text-gray-400 text-sm mb-3">KPIs, gráficos e métricas em tempo real.</p>
        <span class="text-rosa font-semibold text-sm">Ver analytics →</span>
    </a>
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
        <h3 class="font-poppins font-semibold text-dark text-base mb-3">Gestão de Utilizadores</h3>
        <ul class="space-y-2">
            <li><a href="/gestao-interna/" class="text-sm text-rosa hover:underline flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                Admin Django
            </a></li>
        </ul>
    </div>
    <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
        <h3 class="font-poppins font-semibold text-dark text-base mb-3">Relatórios</h3>
        <ul class="space-y-2">
            <li><a href="{% url 'reports:reporte_diario_pdf' %}" class="text-sm text-rosa hover:underline flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                Relatório Diário (PDF)
            </a></li>
            <li><a href="{% url 'reports:reporte_mensual_pdf' %}" class="text-sm text-rosa hover:underline flex items-center gap-2">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                Relatório Mensal (PDF)
            </a></li>
        </ul>
    </div>
</div>
{% endblock %}