{% 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 class="toolbar-actions" id="toolbar-actions">
            <button class="btn btn-sm btn-outline" id="btn-escalation" style="display:none;"
                    onclick="runEscalation()">
                <i data-lucide="bell-ring"></i> Проверить сроки
            </button>
        </div>
    </div>

    <div class="grc-filters">
        <div class="filter-group">
            <label>Статус</label>
            <select id="filter-status" onchange="renderTable()">
                <option value="">Все</option>
                <option value="assigned">Назначено</option>
                <option value="in_progress">В работе</option>
                <option value="submitted">На проверке</option>
                <option value="verified">Проверено</option>
                <option value="closed">Закрыто</option>
            </select>
        </div>
        <div class="filter-group">
            <label>
                <input type="checkbox" id="filter-overdue" onchange="renderTable()"> Только просроченные
            </label>
        </div>
        <div class="filter-group">
            <label>
                <input type="checkbox" id="filter-my" onchange="loadData()"> Мои задачи
            </label>
        </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>
                </tr>
            </thead>
            <tbody id="table-tbody">
                <tr><td colspan="7" class="loading-cell">Загрузка...</td></tr>
            </tbody>
        </table>
    </div>

    <!-- Bulk Reassign Modal -->
    <div class="modal-overlay" id="modal-bulk-reassign" style="display:none;">
        <div class="modal">
            <div class="modal-header">
                <h3>Массовое переназначение</h3>
                <button class="modal-close" onclick="closeModal('modal-bulk-reassign')">&times;</button>
            </div>
            <div class="modal-body">
                <p>Перенос всех активных рекомендаций с одного пользователя на другого (например при увольнении).</p>
                <div class="form-group">
                    <label>От кого (user ID)</label>
                    <input type="text" id="bulk-from" class="form-input" placeholder="old.user">
                </div>
                <div class="form-group">
                    <label>Кому (user ID)</label>
                    <input type="text" id="bulk-to" class="form-input" placeholder="new.user">
                </div>
                <div class="form-group">
                    <label>Причина</label>
                    <input type="text" id="bulk-reason" class="form-input" value="Смена ответственного">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('modal-bulk-reassign')">Отмена</button>
                <button class="btn btn-primary" onclick="bulkReassign()">Переназначить</button>
            </div>
        </div>
    </div>
</div>

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

document.addEventListener('DOMContentLoaded', async function() {
    try {
        const me = await fetch('/api/me').then(r => r.json());
        userRole = me.role;
        if (['admin','manager'].includes(userRole)) {
            document.getElementById('btn-escalation').style.display = '';
            document.getElementById('toolbar-actions').innerHTML += `
                <button class="btn btn-sm btn-outline" onclick="openModal('modal-bulk-reassign')">
                    <i data-lucide="users"></i> Переназначение
                </button>`;
            lucide.createIcons();
        }
    } catch(e) {}

    // Check URL params
    const params = new URLSearchParams(location.search);
    if (params.get('overdue') === '1') document.getElementById('filter-overdue').checked = true;
    if (params.get('my') === '1') document.getElementById('filter-my').checked = true;

    await loadData();
});

async function loadData() {
    const myTasks = document.getElementById('filter-my').checked;
    let url = '/api/grc/remediations?';
    if (myTasks) url += 'my_tasks=true&';
    try {
        allItems = await fetch(url).then(r => r.json());
        renderTable();
    } catch(e) {
        document.getElementById('table-tbody').innerHTML = '<tr><td colspan="7" class="loading-cell">Ошибка</td></tr>';
    }
}

function renderTable() {
    const tbody = document.getElementById('table-tbody');
    const fStatus = document.getElementById('filter-status').value;
    const fOverdue = document.getElementById('filter-overdue').checked;

    let items = allItems;
    if (fStatus) items = items.filter(i => i.status === fStatus);
    if (fOverdue) items = items.filter(i => i.is_overdue);

    if (!items.length) {
        tbody.innerHTML = '<tr><td colspan="7" class="loading-cell">Нет рекомендаций</td></tr>';
        return;
    }
    tbody.innerHTML = items.map(r => `
        <tr class="clickable-row ${r.is_overdue ? 'row-overdue' : ''}" onclick="location.href='/workflows/remediations/${r.id}'">
            <td><code>${r.ref_number || '#'+r.id}</code></td>
            <td>${escHtml(r.title)}</td>
            <td>${escHtml(r.finding_ref || '—')}</td>
            <td>${escHtml(r.assigned_to_user_id || '—')}</td>
            <td>${escHtml(r.assigned_unit_name || '—')}</td>
            <td>${r.deadline}${r.is_overdue ? ' <span class="badge badge-danger">!</span>' : ''}</td>
            <td><span class="status-badge status-${r.status}">${GRC_LABELS[r.status]||r.status}</span></td>
        </tr>
    `).join('');
}

async function runEscalation() {
    if (!confirm('Запустить проверку сроков и отправку уведомлений?')) return;
    try {
        const resp = await fetch('/api/grc/escalation/check', {method:'POST'});
        const result = await resp.json();
        alert(`Проверено задач: ${result.tasks_checked}\nСоздано уведомлений: ${result.notifications_created}`);
    } catch(e) { alert('Ошибка'); }
}

async function bulkReassign() {
    const from = document.getElementById('bulk-from').value.trim();
    const to = document.getElementById('bulk-to').value.trim();
    const reason = document.getElementById('bulk-reason').value.trim();
    if (!from || !to) { alert('Заполните оба поля'); return; }
    try {
        const resp = await fetch('/api/grc/remediations/bulk-reassign', {
            method:'POST', headers:{'Content-Type':'application/json'},
            body: JSON.stringify({old_user_id:from, new_user_id:to, reason})
        });
        const result = await resp.json();
        alert(`Переназначено: ${result.reassigned_count} рекомендаций`);
        closeModal('modal-bulk-reassign');
        await loadData();
    } catch(e) { alert('Ошибка'); }
}
</script>
{% endblock %}