{% extends 'layout.html.twig' %}

{% block title %}Dashboard - Honeyguide M&E{% endblock %}

{% block page_title %}Dashboard{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Stats Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <!-- Active Projects -->
        <div class="stat-card">
            <div class="flex items-center justify-between">
                <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                    </svg>
                </div>
            </div>
            <div class="mt-4">
                <p class="stat-value">{{ stats.activeProjects }}</p>
                <p class="stat-label">Active Projects</p>
            </div>
        </div>

        <!-- Total Indicators -->
        <div class="stat-card">
            <div class="flex items-center justify-between">
                <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                    </svg>
                </div>
            </div>
            <div class="mt-4">
                <p class="stat-value">{{ stats.totalIndicators }}</p>
                <p class="stat-label">Indicators Tracked</p>
            </div>
        </div>

        <!-- Completed Activities -->
        <div class="stat-card">
            <div class="flex items-center justify-between">
                <div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-900/30 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                    </svg>
                </div>
            </div>
            <div class="mt-4">
                <p class="stat-value">{{ stats.completedActivities }}/{{ stats.totalActivities }}</p>
                <p class="stat-label">Activities Completed</p>
            </div>
        </div>

        <!-- Total Area -->
        <div class="stat-card">
            <div class="flex items-center justify-between">
                <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center">
                    <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>
            <div class="mt-4">
                <p class="stat-value">{{ stats.totalAreaHectares|number_format(0) }}</p>
                <p class="stat-label">Hectares Protected</p>
            </div>
        </div>
    </div>

    <!-- Secondary Stats -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Total Budget -->
        <div class="dashboard-card flex items-center gap-4">
            <div class="w-10 h-10 bg-emerald-100 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-400" 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"></path>
                </svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-900 dark:text-white">${{ stats.totalBudget|number_format(0) }}</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Total Budget</p>
            </div>
        </div>

        <!-- Total Participants -->
        <div class="dashboard-card flex items-center gap-4">
            <div class="w-10 h-10 bg-sky-100 dark:bg-sky-900/30 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-sky-600 dark:text-sky-400" 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"></path>
                </svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ stats.totalParticipants|number_format(0) }}</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Total Participants</p>
            </div>
        </div>

        <!-- Overdue Activities -->
        <div class="dashboard-card flex items-center gap-4">
            <div class="w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center">
                <svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <div>
                <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ stats.overdueActivities }}</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Overdue Activities</p>
            </div>
        </div>
    </div>

    <!-- Recent and Upcoming Activities -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Upcoming Activities -->
        <div class="dashboard-card">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Upcoming Activities</h3>
                <a href="{{ path('app_activities') }}" class="text-sm text-primary-600 dark:text-primary-400 hover:underline">View all</a>
            </div>
            {% if upcomingActivities|length > 0 %}
            <div class="space-y-3">
                {% for activity in upcomingActivities|slice(0, 5) %}
                <div class="flex items-center gap-4 p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                    <div class="flex-shrink-0 w-10 h-10 bg-yellow-100 dark:bg-yellow-900/30 rounded-lg flex items-center justify-center">
                        <span class="text-xs font-medium text-yellow-700 dark:text-yellow-400">{{ activity.plannedDate|date('d') }}</span>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-gray-900 dark:text-white truncate">{{ activity.name }}</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">{{ activity.plannedDate|date('M d, Y') }} - {{ activity.project.name }}</p>
                    </div>
                    <span class="badge badge-warning">{{ activity.status }}</span>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-gray-500 dark:text-gray-400 text-center py-8">No upcoming activities</p>
            {% endif %}
        </div>

        <!-- Overdue Activities -->
        <div class="dashboard-card">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Overdue Activities</h3>
                <span class="badge badge-danger">{{ overdueActivities|length }} overdue</span>
            </div>
            {% if overdueActivities|length > 0 %}
            <div class="space-y-3">
                {% for activity in overdueActivities|slice(0, 5) %}
                <div class="flex items-center gap-4 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
                    <div class="flex-shrink-0 w-10 h-10 bg-red-100 dark:bg-red-900/30 rounded-lg flex items-center justify-center">
                        <svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-gray-900 dark:text-white truncate">{{ activity.name }}</p>
                        <p class="text-xs text-red-600 dark:text-red-400">Was due {{ activity.plannedDate|date('M d, Y') }}</p>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="flex flex-col items-center justify-center py-8 text-center">
                <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mb-3">
                    <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <p class="text-gray-500 dark:text-gray-400">No overdue activities</p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Recently Completed -->
    <div class="dashboard-card">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Recently Completed Activities</h3>
        </div>
        {% if recentActivities|length > 0 %}
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Activity</th>
                        <th>Project</th>
                        <th>Completed</th>
                        <th>Participants</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for activity in recentActivities %}
                    <tr>
                        <td class="font-medium">{{ activity.name }}</td>
                        <td>{{ activity.project.name }}</td>
                        <td>{{ activity.completedDate|date('M d, Y') }}</td>
                        <td>{{ activity.participantCount ?? '-' }}</td>
                        <td><span class="badge badge-success">Completed</span></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p class="text-gray-500 dark:text-gray-400 text-center py-8">No completed activities yet</p>
        {% endif %}
    </div>
</div>
{% endblock %}