{% 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() {
        // Activity Distribution Chart
        const activityCtx = document.getElementById('activityChart').getContext('2d');
        const activityLabels = [{% for item in activity_stats %}'{{ item.label }}',{% endfor %}];
        const activityValues = [{% for item in activity_stats %}{{ item.value }},{% endfor %}];
        
        new Chart(activityCtx, {
            type: 'doughnut',
            data: {
                labels: activityLabels,
                datasets: [{
                    label: 'Agricultural Activity',
                    data: activityValues,
                    backgroundColor: ['#003580', '#009543', '#FFD100', '#6c757d', '#dc3545'],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { position: 'bottom' } }
            }
        });

        // Crop Distribution Chart
        const cropCtx = document.getElementById('cropChart').getContext('2d');
        const cropLabels = [{% for item in crop_distribution %}'{{ item.crop_type }}',{% endfor %}];
        const cropValues = [{% for item in crop_distribution %}{{ item.total_area }},{% endfor %}];

        new Chart(cropCtx, {
            type: 'bar',
            data: {
                labels: cropLabels,
                datasets: [{
                    label: 'Total Area (Hectares)',
                    data: cropValues,
                    backgroundColor: '#009543',
                }]
            },
            options: {
                responsive: true,
                indexAxis: 'y',
                scales: { x: { beginAtZero: true } }
            }
        });

        // Livestock Distribution Chart
        const livestockCtx = document.getElementById('livestockChart').getContext('2d');
        const livestockLabels = [{% for item in livestock_distribution %}'{{ item.animal_type }}',{% endfor %}];
        const livestockValues = [{% for item in livestock_distribution %}{{ item.total_count }},{% endfor %}];

        new Chart(livestockCtx, {
            type: 'pie',
            data: {
                labels: livestockLabels,
                datasets: [{
                    data: livestockValues,
                    backgroundColor: ['#dc3545', '#fd7e14', '#ffc107', '#28a745', '#20c997', '#17a2b8', '#007bff', '#6610f2', '#e83e8c', '#6c757d'],
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { position: 'right' } }
            }
        });

        // Land Tenure Chart
        const landCtx = document.getElementById('landChart').getContext('2d');
        const landLabels = [{% for item in land_tenure_distribution %}'{{ item.ownership_type }}',{% endfor %}];
        const landValues = [{% for item in land_tenure_distribution %}{{ item.total_area }},{% endfor %}];

        new Chart(landCtx, {
            type: 'polarArea',
            data: {
                labels: landLabels,
                datasets: [{
                    data: landValues,
                    backgroundColor: ['rgba(0, 53, 128, 0.7)', 'rgba(0, 149, 67, 0.7)', 'rgba(255, 209, 0, 0.7)'],
                }]
            },
            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">
    <!-- Main KPIs -->
    <div class="row g-4 text-center">
        <div class="col-md-3">
            <div class="card h-100 py-3 shadow-sm border-0 border-start border-primary border-5">
                <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 border-0 border-start border-success border-5">
                <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 border-0 border-start border-warning border-5">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase mb-2">Total Parcels</h6>
                    <h2 class="fw-bold mb-0">{{ land_stats.total_parcels|default:0 }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100 py-3 shadow-sm border-0 border-start border-secondary border-5">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase mb-2">Total Crop Area</h6>
                    <h2 class="fw-bold mb-0 text-dark">{{ crop_stats.total_area|default:0|floatformat:0 }} <small class="h6">Ha</small></h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row 1: Activity & Regions -->
    <div class="row mt-5">
        <div class="col-lg-5 mb-4">
            <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: 300px; width: 100%;">
                        <canvas id="activityChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-7 mb-4">
            <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>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Region</th>
                                    <th>Count</th>
                                    <th>Progress</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for stat in region_stats|slice:":5" %}
                                <tr>
                                    <td class="fw-bold">{{ stat.name }}</td>
                                    <td>{{ stat.count }}</td>
                                    <td style="width: 50%">
                                        <div class="progress" style="height: 6px;">
                                            <div class="progress-bar bg-primary" role="progressbar" style="width: {{ stat.count }}%;"></div>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row 2: Crops & Livestock -->
    <div class="row mt-4">
        <div class="col-lg-7 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white py-3 border-0">
                    <h5 class="fw-bold mb-0">Crop Distribution (by Area)</h5>
                </div>
                <div class="card-body">
                    <canvas id="cropChart" style="max-height: 300px;"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-5 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white py-3 border-0">
                    <h5 class="fw-bold mb-0">Livestock Breakdown</h5>
                </div>
                <div class="card-body">
                    <canvas id="livestockChart" style="max-height: 300px;"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Charts Row 3: Land Tenure -->
    <div class="row mt-4">
        <div class="col-lg-4 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white py-3 border-0">
                    <h5 class="fw-bold mb-0">Land Tenure (Ha)</h5>
                </div>
                <div class="card-body d-flex justify-content-center">
                    <div style="max-width: 250px; width: 100%;">
                        <canvas id="landChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8 mb-4">
            <div class="card shadow-sm h-100 bg-primary text-white overflow-hidden">
                <div class="card-body p-5">
                    <div class="row align-items-center">
                        <div class="col-md-7">
                            <h3 class="fw-bold mb-3">Download Comprehensive Data</h3>
                            <p class="mb-4 opacity-75">Access the full national agricultural dataset including detailed livestock counts, crop yields, and land registry records in CSV format.</p>
                            <a href="{% url 'export_report' %}" class="btn btn-light btn-lg fw-bold px-4">Download National Report</a>
                        </div>
                        <div class="col-md-5 d-none d-md-block text-center">
                            <i class="bi bi-file-earmark-spreadsheet" style="font-size: 5rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}