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

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

{% block page_title %}Reports{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Header -->
    <div class="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">Reports</h1>
            <p class="text-gray-500 dark:text-gray-400">Analytics and visualizations of your M&E data</p>
        </div>
        <button class="btn-primary">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
            </svg>
            Export Report
        </button>
    </div>

    <!-- Charts Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Project Status Chart -->
        <div class="chart-container">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Project Status Distribution</h3>
            {% if projectStatusData.labels|length > 0 %}
            <div class="h-64">
                <canvas
                    data-controller="chart"
                    data-chart-type-value="doughnut"
                    data-chart-data-value="{{ {
                        labels: projectStatusData.labels,
                        datasets: [{
                            data: projectStatusData.data,
                            backgroundColor: ['#22c55e', '#3b82f6', '#f59e0b', '#ef4444']
                        }]
                    }|json_encode }}"
                    data-chart-options-value="{{ {
                        plugins: {legend: {position: 'right'}},
                        cutout: '60%'
                    }|json_encode }}"
                ></canvas>
            </div>
            {% else %}
            <div class="h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
                No project data available
            </div>
            {% endif %}
        </div>

        <!-- Activity Status Chart -->
        <div class="chart-container">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Activity Status Distribution</h3>
            {% if activityStatusData.labels|length > 0 %}
            <div class="h-64">
                <canvas
                    data-controller="chart"
                    data-chart-type-value="bar"
                    data-chart-data-value="{{ {
                        labels: activityStatusData.labels,
                        datasets: [{
                            label: 'Activities',
                            data: activityStatusData.data,
                            backgroundColor: ['#f59e0b', '#3b82f6', '#22c55e', '#ef4444']
                        }]
                    }|json_encode }}"
                    data-chart-options-value="{{ {
                        plugins: {legend: {display: false}},
                        scales: {y: {beginAtZero: true}}
                    }|json_encode }}"
                ></canvas>
            </div>
            {% else %}
            <div class="h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
                No activity data available
            </div>
            {% endif %}
        </div>

        <!-- Indicator Categories Chart -->
        <div class="chart-container">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Indicators by Category</h3>
            {% if indicatorCategoryData.labels|length > 0 %}
            <div class="h-64">
                <canvas
                    data-controller="chart"
                    data-chart-type-value="pie"
                    data-chart-data-value="{{ {
                        labels: indicatorCategoryData.labels,
                        datasets: [{
                            data: indicatorCategoryData.data,
                            backgroundColor: ['#22c55e', '#3b82f6', '#f59e0b', '#8b5cf6', '#ec4899', '#14b8a6']
                        }]
                    }|json_encode }}"
                    data-chart-options-value="{{ {
                        plugins: {legend: {position: 'right'}}
                    }|json_encode }}"
                ></canvas>
            </div>
            {% else %}
            <div class="h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
                No indicator data available
            </div>
            {% endif %}
        </div>

        <!-- Summary Stats -->
        <div class="chart-container">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Quick Summary</h3>
            <div class="space-y-4">
                <div class="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                    <span class="text-gray-600 dark:text-gray-400">Total Projects</span>
                    <span class="font-semibold text-gray-900 dark:text-white">{{ projectStatusData.data|reduce((carry, v) => carry + v, 0) }}</span>
                </div>
                <div class="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                    <span class="text-gray-600 dark:text-gray-400">Total Activities</span>
                    <span class="font-semibold text-gray-900 dark:text-white">{{ activityStatusData.data|reduce((carry, v) => carry + v, 0) }}</span>
                </div>
                <div class="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                    <span class="text-gray-600 dark:text-gray-400">Total Indicators</span>
                    <span class="font-semibold text-gray-900 dark:text-white">{{ indicatorCategoryData.data|reduce((carry, v) => carry + v, 0) }}</span>
                </div>
                <div class="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-700/50">
                    <span class="text-gray-600 dark:text-gray-400">Indicator Categories</span>
                    <span class="font-semibold text-gray-900 dark:text-white">{{ indicatorCategoryData.labels|length }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Export Options -->
    <div class="dashboard-card">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Export Options</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <button class="btn-secondary justify-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                Export as PDF
            </button>
            <button class="btn-secondary justify-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
                </svg>
                Export as CSV
            </button>
            <button class="btn-secondary justify-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                Export as Excel
            </button>
        </div>
    </div>
</div>
{% endblock %}