{% extends "layout/app.twig" %}
{% block page_title_block %}{{ __(page_title_key) }}{% endblock %}

{% block content %}
    {# O Título H1 é gerenciado pelo topbar, mas você pode adicionar um subtítulo ou saudação aqui #}
    <div class="mb-8">
        <h2 class="text-2xl font-semibold text-gray-600">{{ __('dashboard.welcome_back', {'name': session.user_name}) }}</h2>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-lg shadow-lg p-6 flex items-center">
            <div class="bg-blue-100 p-3 rounded-full mr-4"><i class="fas fa-balance-scale text-blue-600 text-xl"></i></div>
            <div>
                <h3 class="text-gray-500 text-sm font-medium">{{ __('stats.active_processes') }}</h3>
                <p class="font-bold text-2xl text-gray-800">{{ stats.active_processes | default(0) }}</p>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-lg p-6 flex items-center">
            <div class="bg-green-100 p-3 rounded-full mr-4"><i class="fas fa-users text-green-600 text-xl"></i></div>
            <div>
                <h3 class="text-gray-500 text-sm font-medium">{{ __('stats.total_clients') }}</h3>
                <p class="font-bold text-2xl text-gray-800">{{ stats.total_clients | default(0) }}</p>
            </div>
        </div>
         <div class="bg-white rounded-lg shadow-lg p-6 flex items-center">
            <div class="bg-yellow-100 p-3 rounded-full mr-4"><i class="fas fa-file-alt text-yellow-600 text-xl"></i></div>
            <div>
                <h3 class="text-gray-500 text-sm font-medium">{{ __('stats.total_documents') }}</h3>
                <p class="font-bold text-2xl text-gray-800">{{ stats.total_documents | default(0) }}</p>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-lg p-6 flex items-center">
            <div class="bg-purple-100 p-3 rounded-full mr-4"><i class="fas fa-calendar-check text-purple-600 text-xl"></i></div>
            <div>
                <h3 class="text-gray-500 text-sm font-medium">{{ __('stats.upcoming_hearings') }}</h3>
                <p class="font-bold text-2xl text-gray-800">{{ stats.upcoming_hearings | default(0) }}</p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-5 gap-6 mb-8">
        <div class="lg:col-span-3 bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('charts.monthly_activity') }}</h3>
            <div class="h-64"><canvas id="activityChart"></canvas></div>
        </div>
        <div class="lg:col-span-2 bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">{{ __('charts.processes_by_status') }}</h3>
            <div class="h-64"><canvas id="processesChart"></canvas></div>
        </div>
    </div>

    {% if custom_links is defined and custom_links is not empty %}
    <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-gray-800">{{ __('dashboard.quick_links') }}</h3>
            <a href="{{ BASE_URL }}{{ routeParser.urlFor('admin.links.index') }}" class="text-sm text-blue-600 hover:text-blue-800 hover:underline">{{ __('link.manage_links') }}</a>
        </div>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
            {% for link in custom_links %}
                <a href="{{ link.url | escape('html_attr') }}" target="_blank"
                   class="block text-center text-white rounded-lg p-4 transition-all duration-300 transform hover:-translate-y-1 shadow-md hover:shadow-xl"
                   style="background-color: {{ link.background_color | escape('css') }}; color: {{ link.text_color | escape('css') }};"
                   onmouseover="this.style.backgroundColor='{{ link.hover_color | escape('css') }}';"
                   onmouseout="this.style.backgroundColor='{{ link.background_color | escape('css') }}';">
                    <div class="font-bold text-base">{{ link.title }}</div>
                    {% if link.subtitle %}
                        <div class="text-xs opacity-90 mt-1">{{ link.subtitle }}</div>
                    {% endif %}
                </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}
    
    {# Adicionar outras seções aqui, como "Processos Recentes" ou "Tarefas do Dia" #}
{% endblock %}

{% block javascripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Processes chart (adaptar dados)
        const processesCtx = document.getElementById('processesChart')?.getContext('2d');
        if (processesCtx) {
            new Chart(processesCtx, {
                type: 'doughnut',
                data: {
                    labels: ['{{ __('status.in_progress') }}', '{{ __('status.suspended') }}', '{{ __('status.finished') }}', '{{ __('status.archived') }}', '{{ __('status.on_appeal') | default("Em Recurso") }}'],
                    datasets: [{
                        label: 'Processos',
                        data: [
                            {{ stats.processes_by_status.em_andamento | default(0) }}, 
                            {{ stats.processes_by_status.suspenso | default(0) }}, 
                            {{ stats.processes_by_status.finalizado | default(0) }}, 
                            {{ stats.processes_by_status.arquivado | default(0) }}, 
                            {{ stats.processes_by_status.em_recurso | default(0) }}
                        ],
                        backgroundColor: ['#10B981', '#F59E0B', '#6B7280', '#EF4444', '#8B5CF6'],
                        hoverOffset: 4
                    }]
                },
                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'right' } } }
            });
        }
        // Activity chart (dados de exemplo)
        const activityCtx = document.getElementById('activityChart')?.getContext('2d');
        if (activityCtx) {
            new Chart(activityCtx, {
                type: 'line',
                data: {
                    labels: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho'],
                    datasets: [{
                        label: 'Novos Processos',
                        data: [5, 9, 7, 8, 5, 6, 4],
                        borderColor: '#3B82F6',
                        tension: 0.1
                    }, {
                        label: 'Compromissos',
                        data: [12, 19, 15, 17, 12, 13, 10],
                        borderColor: '#8B5CF6',
                        tension: 0.1
                    }]
                },
                options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } }
            });
        }
    });
</script>
{% endblock %}