{% extends "base.html" %}

{% block title %}Проверки - DataAudit Platform{% endblock %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', path='/css/grc.css') }}">

<div class="page-content">
    <div class="grc-toolbar">
        <a href="/workflows" class="btn-back">
            <i data-lucide="arrow-left"></i> GRC Процессы
        </a>
    </div>

    <div class="grc-filters">
        <div class="filter-group">
            <label>Статус</label>
            <select id="filter-status" onchange="renderTable()">
                <option value="">Все</option>
                <option value="planned">Запланирована</option>
                <option value="in_progress">В работе</option>
                <option value="fieldwork">Полевая работа</option>
                <option value="review">Проверка</option>
                <option value="findings_issued">Замечания выданы</option>
                <option value="remediation">Исправление</option>
                <option value="closed">Закрыта</option>
            </select>
        </div>
        <div class="filter-group">
            <label>Уровень риска</label>
            <select id="filter-risk" onchange="renderTable()">
                <option value="">Все</option>
                <option value="critical">Критический</option>
                <option value="high">Высокий</option>
                <option value="medium">Средний</option>
                <option value="low">Низкий</option>
            </select>
        </div>
    </div>

    <div class="grc-table-wrap">
        <table class="grc-table">
            <thead>
                <tr>
                    <th>Название</th>
                    <th>План</th>
                    <th>Статус</th>
                    <th>Объект проверки</th>
                    <th>Ответственный</th>
                    <th>Сроки</th>
                    <th>Риск</th>
                    <th>Замечаний</th>
                </tr>
            </thead>
            <tbody id="table-tbody">
                <tr><td colspan="8" class="loading-cell">Загрузка...</td></tr>
            </tbody>
        </table>
    </div>
</div>

<script src="{{ url_for('static', path='/js/grc.js') }}"></script>
<script>
let allItems = [];

document.addEventListener('DOMContentLoaded', async function() {
    try {
        allItems = await fetch('/api/grc/engagements').then(r => r.json());
        renderTable();
    } catch(e) {
        document.getElementById('table-tbody').innerHTML = '<tr><td colspan="8" class="loading-cell">Ошибка загрузки</td></tr>';
    }
});

function renderTable() {
    const tbody = document.getElementById('table-tbody');
    const fStatus = document.getElementById('filter-status').value;
    const fRisk = document.getElementById('filter-risk').value;

    let items = allItems;
    if (fStatus) items = items.filter(i => i.status === fStatus);
    if (fRisk) items = items.filter(i => i.risk_level === fRisk);

    if (!items.length) {
        tbody.innerHTML = '<tr><td colspan="8" class="loading-cell">Нет проверок</td></tr>';
        return;
    }
    const riskLabels = { critical: 'Критический', high: 'Высокий', medium: 'Средний', low: 'Низкий' };
    const riskClasses = { critical: 'badge-danger', high: 'badge-warning', medium: 'badge-info', low: 'badge-default' };

    tbody.innerHTML = items.map(e => {
        const dates = e.planned_start && e.planned_end ? `${e.planned_start} — ${e.planned_end}` : '—';
        return `<tr class="clickable-row" onclick="location.href='/workflows/engagements/${e.id}'">
            <td>${escHtml(e.title)}</td>
            <td>${escHtml(e.plan_title || '—')}</td>
            <td><span class="status-badge status-${e.status}">${GRC_LABELS[e.status] || e.status}</span></td>
            <td>${escHtml(e.target_unit_name || '—')}</td>
            <td>${escHtml(e.lead_auditor_id || '—')}</td>
            <td>${dates}</td>
            <td><span class="badge ${riskClasses[e.risk_level] || ''}">${riskLabels[e.risk_level] || ''}</span></td>
            <td>${e.finding_count || 0}</td>
        </tr>`;
    }).join('');
}
</script>
{% endblock %}