{% extends 'base.html' %}
{% load static %}

{% block title %}Дашборд рисков{% endblock %}

{% block content %}
<div class="px-4 py-6">
    <h1 class="text-2xl font-bold mb-6">Мониторинг академических рисков</h1>

    <!-- Форма выбора периода -->
    <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
        <form method="get" class="flex flex-wrap gap-4 items-end">
            <div>
                <label class="form-label">Дата с:</label>
                <input type="date" name="date_from" value="{{ date_from }}" class="form-input">
            </div>
            <div>
                <label class="form-label">Дата по:</label>
                <input type="date" name="date_to" value="{{ date_to }}" class="form-input">
            </div>
            <div>
                <button type="submit" class="btn-primary">Применить фильтр</button>
                <a href="{% url 'dashboard' %}" class="ml-2 text-gray-500 text-sm">Сбросить</a>
            </div>
        </form>
    </div>

    <!-- Статистика по рискам -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-green-100 rounded-xl p-4 text-center">
            <div class="text-3xl font-bold text-green-600">{{ stats.low }}</div>
            <div class="text-green-800">Низкий риск</div>
            <div class="text-sm text-green-600">{{ stats.low_percent }}%</div>
        </div>
        <div class="bg-yellow-100 rounded-xl p-4 text-center">
            <div class="text-3xl font-bold text-yellow-600">{{ stats.medium }}</div>
            <div class="text-yellow-800">Средний риск</div>
            <div class="text-sm text-yellow-600">{{ stats.medium_percent }}%</div>
        </div>
        <div class="bg-orange-100 rounded-xl p-4 text-center">
            <div class="text-3xl font-bold text-orange-600">{{ stats.high }}</div>
            <div class="text-orange-800">Высокий риск</div>
            <div class="text-sm text-orange-600">{{ stats.high_percent }}%</div>
        </div>
        <div class="bg-red-100 rounded-xl p-4 text-center">
            <div class="text-3xl font-bold text-red-600">{{ stats.critical }}</div>
            <div class="text-red-800">Критический риск</div>
            <div class="text-sm text-red-600">{{ stats.critical_percent }}%</div>
        </div>
    </div>

    <!-- График распределения -->
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="font-semibold text-gray-700">Распределение уровней риска</h2>
            <span class="text-sm text-gray-500">Всего студентов: {{ stats.total }}</span>
        </div>
        {% if stats.total > 0 %}
            <div class="h-72">
                <canvas id="riskDistributionChart"></canvas>
            </div>
        {% else %}
            <div class="h-40 flex items-center justify-center text-gray-500 bg-gray-50 rounded-lg">
                За выбранный период данные отсутствуют
            </div>
        {% endif %}
    </div>

    <!-- Студенты в зоне риска -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b bg-gray-50">
            <h2 class="font-semibold text-gray-700">Студенты в зоне риска (высокий и критический)</h2>
            <p class="text-sm text-gray-500">Период: с {{ date_from_display|date:"d.m.Y" }} по {{ date_to_display|date:"d.m.Y" }}</p>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="px-4 py-3 text-left">Студент</th>
                        <th class="px-4 py-3 text-left">Группа</th>
                        <th class="px-4 py-3 text-left">Уровень риска</th>
                        <th class="px-4 py-3 text-left">Основные факторы</th>
                        <th class="px-4 py-3 text-left">Рекомендация</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in high_risk_students %}
                    <tr class="border-b hover:bg-gray-50">
                        <td class="px-4 py-3">{{ item.student.last_name }} {{ item.student.first_name }}</td>
                        <td class="px-4 py-3">{{ item.student.group.name }}</td>
                        <td class="px-4 py-3">
                            <span class="px-2 py-1 rounded text-white text-sm
                                {% if item.risk.risk_level == 'high' %}bg-orange-500
                                {% else %}bg-red-500{% endif %}">
                                {{ item.risk.get_risk_level_display }}
                                ({{ item.risk.risk_score }}%)
                            </span>
                        </td>
                        <td class="px-4 py-3 text-sm">{{ item.risk.top_factors|truncatechars:60 }}</td>
                        <td class="px-4 py-3 text-sm">{{ item.risk.recommended_action|truncatechars:60 }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="px-4 py-8 text-center text-gray-500">
                            Нет студентов в зоне риска за выбранный период
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    .form-input {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 8px;
    }
    .btn-primary {
        background-color: #4395AB;
        color: white;
        padding: 8px 16px;
        border-radius: 8px;
        text-decoration: none;
        display: inline-block;
    }
    .btn-primary:hover {
        background-color: #2d6b7c;
    }
</style>

{% if stats.total > 0 %}
<script>
    const riskChartCtx = document.getElementById('riskDistributionChart');
    if (riskChartCtx) {
        new Chart(riskChartCtx, {
            type: 'bar',
            data: {
                labels: ['Низкий', 'Средний', 'Высокий', 'Критический'],
                datasets: [{
                    label: 'Количество студентов',
                    data: [{{ stats.low }}, {{ stats.medium }}, {{ stats.high }}, {{ stats.critical }}],
                    backgroundColor: ['#22c55e', '#eab308', '#f97316', '#ef4444'],
                    borderRadius: 8
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            precision: 0
                        }
                    }
                }
            }
        });
    }
</script>
{% endif %}
{% endblock %}