{% extends "base.html" %}
{% block title %}Reports - {{ config.APP_NAME }}{% endblock %}
{% block content %}
<h1>Reports</h1>
<p>One combined view covering all your tasks - classification, department, priority, and recurring-habit streaks.</p>

<h2 style="font-size:1.1rem; margin-top:28px;">Task Classification</h2>
<div class="table-responsive">
<table class="data-table" style="max-width:400px;">
    <thead><tr><th>Category</th><th>Count</th></tr></thead>
    <tbody>
        {% for label, count in classification.items() %}
        <tr><td>{{ label }}</td><td>{{ count }}</td></tr>
        {% endfor %}
    </tbody>
</table>
</div>
<canvas id="classificationChart" style="max-width:420px; margin-top:16px;"></canvas>

<h2 style="font-size:1.1rem; margin-top:32px;">By Department</h2>
<canvas id="departmentChart" style="max-width:500px;"></canvas>

<h2 style="font-size:1.1rem; margin-top:32px;">By Priority</h2>
<canvas id="priorityChart" style="max-width:500px;"></canvas>

{% if streaks %}
<h2 style="font-size:1.1rem; margin-top:32px;">Recurring Task Streaks</h2>
<div class="table-responsive">
<table class="data-table" style="max-width:500px;">
    <thead><tr><th>Habit</th><th>Repeats</th><th>Streak</th></tr></thead>
    <tbody>
        {% for s in streaks %}
        <tr><td>{{ s.name }}</td><td>{{ s.rec_type }}</td><td>🔥 {{ s.streak }}</td></tr>
        {% endfor %}
    </tbody>
</table>
</div>
{% endif %}

{% endblock %}

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('classificationChart'), {
    type: 'pie',
    data: {
        labels: {{ classification.keys() | list | tojson }},
        datasets: [{ data: {{ classification.values() | list | tojson }},
            backgroundColor: ['#2ecc71', '#e67e22', '#e74c3c', '#3498db', '#95a5a6'] }]
    },
    options: { plugins: { legend: { position: 'bottom' } } }
});

new Chart(document.getElementById('departmentChart'), {
    type: 'bar',
    data: {
        labels: {{ departments.keys() | list | tojson }},
        datasets: [{ label: 'Tasks', data: {{ departments.values() | list | tojson }}, backgroundColor: '#2d78e0' }]
    },
    options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { precision: 0 } } } }
});

new Chart(document.getElementById('priorityChart'), {
    type: 'bar',
    data: {
        labels: {{ priorities.keys() | list | tojson }},
        datasets: [{ label: 'Tasks', data: {{ priorities.values() | list | tojson }}, backgroundColor: '#e67e22' }]
    },
    options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { precision: 0 } } } }
});
</script>
{% endblock %}