{% extends "base.html" %}

{% block title %}Public Reporting Dashboard | NAIMS Namibia{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctx = document.getElementById('activityChart').getContext('2d');
        const labels = [{% for item in activity_stats %}'{{ item.label }}',{% endfor %}];
        const values = [{% for item in activity_stats %}{{ item.value }},{% endfor %}];
        
        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Agricultural Activity Distribution',
                    data: values,
                    backgroundColor: [
                        '#003580', '#009543', '#FFD100', '#6c757d', '#dc3545'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                    }
                }
            }
        });
    });
</script>
{% endblock %}

{% block content %}
<header class="hero-section text-center">
    <div class="container">
        <h1 class="display-4 fw-bold mb-3 text-white">National Agricultural Reporting Dashboard</h1>
        <p class="lead mb-4 text-white">Public access to real-time agricultural statistics and performance indicators for the Republic of Namibia.</p>
        <div class="d-flex justify-content-center gap-3">
            {% if user.is_authenticated %}
                <a href="{% url 'farmer_register' %}" class="btn btn-warning btn-lg px-4 fw-bold shadow">Register New Farmer</a>
                <a href="{% url 'farmer_list' %}" class="btn btn-outline-light btn-lg px-4">View National Registry</a>
            {% else %}
                <a href="{% url 'export_report' %}" class="btn btn-warning btn-lg px-4 fw-bold shadow">Export National Report (CSV)</a>
                <a href="{% url 'login' %}" class="btn btn-outline-light btn-lg px-4">Login (Authorized Personnel)</a>
            {% endif %}
        </div>
    </div>
</header>

<section class="container my-5 pt-4">
    <div class="row g-4 text-center">
        <!-- Stats Cards -->
        <div class="col-md-3">
            <div class="card h-100 py-3 shadow-sm" style="border-left: 5px solid var(--naims-blue);">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase mb-2">Total Farmers</h6>
                    <h2 class="fw-bold mb-0 text-primary">{{ total_farmers }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100 py-3 shadow-sm" style="border-left: 5px solid var(--naims-green);">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase mb-2">Active Holdings</h6>
                    <h2 class="fw-bold mb-0 text-success">{{ total_holdings }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100 py-3 shadow-sm" style="border-left: 5px solid var(--naims-yellow);">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase mb-2">National Regions</h6>
                    <h2 class="fw-bold mb-0">14</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100 py-3 shadow-sm" style="border-left: 5px solid #6c757d;">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase mb-2">System Status</h6>
                    <h2 class="fw-bold mb-0 text-muted">ONLINE</h2>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-5">
        <!-- Activity Chart -->
        <div class="col-lg-5 mb-4 mb-lg-0">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white py-3 border-0">
                    <h5 class="fw-bold mb-0">Activity Distribution</h5>
                </div>
                <div class="card-body d-flex align-items-center justify-content-center">
                    <div style="max-width: 350px; width: 100%;">
                        <canvas id="activityChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <!-- Region Distribution Table -->
        <div class="col-lg-7">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center">
                    <h5 class="fw-bold mb-0">Farmer Distribution by Region</h5>
                    {% if user.is_authenticated %}
                        <a href="{% url 'farmer_list' %}" class="btn btn-sm btn-outline-primary">Registry View</a>
                    {% endif %}
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>Region</th>
                                    <th>Registered Farmers</th>
                                    <th>Status</th>
                                    <th>Progress</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for stat in region_stats %}
                                <tr>
                                    <td class="fw-bold">{{ stat.name }}</td>
                                    <td>{{ stat.count }}</td>
                                    <td><span class="badge bg-success-subtle text-success">Verified</span></td>
                                    <td style="width: 30%">
                                        {% with stat.count|default:0 as cnt %}
                                        <div class="progress" style="height: 8px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: {% if total_farmers > 0 %}{{ cnt|add:0|floatformat:0 }}{% else %}0{% endif %}%;"></div>
                                        </div>
                                        {% endwith %}
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="4" class="text-center py-4 text-muted">No data available yet.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3">
                        <a href="{% url 'export_report' %}" class="btn btn-outline-success w-100 fw-bold">Download Full Regional Performance Report (CSV)</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}