{% extends "base.html" %}

{% block title %}GRC Процессы - DataAudit Platform{% endblock %}

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

<div class="page-content">
    <div class="page-description">
        <p>Управление аудиторскими процессами, контроль выполнения проверок и рекомендаций.</p>
    </div>

    <!-- Stats Cards -->
    <div class="grc-stats" id="grc-stats">
        <div class="stats-loading">Загрузка...</div>
    </div>

    <!-- Quick Actions -->
    <div class="grc-section">
        <div class="section-header">
            <h3>Навигация</h3>
        </div>
        <div class="quick-nav-grid">
            <a href="/workflows/universe" class="quick-nav-card" id="nav-universe" style="display:none;">
                <div class="qn-icon"><i data-lucide="globe"></i></div>
                <div class="qn-content">
                    <span class="qn-title">Объекты аудита</span>
                    <span class="qn-desc">Реестр и оценка рисков</span>
                </div>
                <i data-lucide="chevron-right" class="qn-arrow"></i>
            </a>
            <a href="/workflows/strategic-plans" class="quick-nav-card" id="nav-strategic" style="display:none;">
                <div class="qn-icon"><i data-lucide="calendar-range"></i></div>
                <div class="qn-content">
                    <span class="qn-title">Стратегия ДВА</span>
                    <span class="qn-desc">Покрытие на 3 года</span>
                </div>
                <i data-lucide="chevron-right" class="qn-arrow"></i>
            </a>
            <a href="/workflows/plans" class="quick-nav-card">
                <div class="qn-icon"><i data-lucide="clipboard-list"></i></div>
                <div class="qn-content">
                    <span class="qn-title">Планы аудита</span>
                    <span class="qn-desc">Годовые планы проверок</span>
                </div>
                <i data-lucide="chevron-right" class="qn-arrow"></i>
            </a>
            <a href="/workflows/engagements" class="quick-nav-card">
                <div class="qn-icon"><i data-lucide="search"></i></div>
                <div class="qn-content">
                    <span class="qn-title">Проверки</span>
                    <span class="qn-desc">Аудиторские проверки</span>
                </div>
                <i data-lucide="chevron-right" class="qn-arrow"></i>
            </a>
            <a href="/workflows/remediations" class="quick-nav-card">
                <div class="qn-icon"><i data-lucide="alert-triangle"></i></div>
                <div class="qn-content">
                    <span class="qn-title">Рекомендации</span>
                    <span class="qn-desc">Контроль исправлений</span>
                </div>
                <i data-lucide="chevron-right" class="qn-arrow"></i>
            </a>
            <a href="/workflows/notifications" class="quick-nav-card">
                <div class="qn-icon"><i data-lucide="bell"></i></div>
                <div class="qn-content">
                    <span class="qn-title">Уведомления</span>
                    <span class="qn-desc" id="notif-badge-nav">Центр уведомлений</span>
                </div>
                <i data-lucide="chevron-right" class="qn-arrow"></i>
            </a>
            <a href="/workflows/settings" class="quick-nav-card" id="nav-settings" style="display:none;">
                <div class="qn-icon"><i data-lucide="settings"></i></div>
                <div class="qn-content">
                    <span class="qn-title">Настройки GRC</span>
                    <span class="qn-desc">Модерация</span>
                </div>
                <i data-lucide="chevron-right" class="qn-arrow"></i>
            </a>
        </div>
    </div>

    <!-- Overdue Remediations (managers/admins) -->
    <div class="grc-section" id="overdue-section" style="display:none;">
        <div class="section-header">
            <h3>Просроченные Рекомендации</h3>
            <a href="/workflows/remediations?overdue=1" class="section-link">Все просроченные</a>
        </div>
        <div class="grc-table-wrap">
            <table class="grc-table" id="overdue-table">
                <thead>
                    <tr>
                        <th>Номер</th>
                        <th>Рекомендация</th>
                        <th>Исполнитель</th>
                        <th>Срок</th>
                        <th>Просрочка</th>
                    </tr>
                </thead>
                <tbody id="overdue-tbody"></tbody>
            </table>
        </div>
    </div>

    <!-- My Tasks (for business dept users) -->
    <div class="grc-section" id="my-tasks-section" style="display:none;">
        <div class="section-header">
            <h3>Мои задачи</h3>
            <a href="/workflows/remediations?my=1" class="section-link">Все задачи</a>
        </div>
        <div class="grc-table-wrap">
            <table class="grc-table" id="my-tasks-table">
                <thead>
                    <tr>
                        <th>Номер</th>
                        <th>Рекомендация</th>
                        <th>Срок</th>
                        <th>Статус</th>
                    </tr>
                </thead>
                <tbody id="my-tasks-tbody"></tbody>
            </table>
        </div>
    </div>

    <!-- Recent Activity -->
    <div class="grc-section" id="activity-section">
        <div class="section-header">
            <h3>Последние действия</h3>
        </div>
        <div class="activity-feed" id="activity-feed">
            <div class="stats-loading">Загрузка...</div>
        </div>
    </div>
</div>

<script src="{{ url_for('static', path='/js/grc.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', async function() {
    await loadDashboard();
    try {
        const me = await fetch('/api/me').then(r => r.json());
        if (me.role === 'admin') document.getElementById('nav-settings').style.display = '';
        if (['admin', 'manager'].includes(me.role)) {
            document.getElementById('nav-universe').style.display = '';
            document.getElementById('nav-strategic').style.display = '';
}
    } catch(e) {}

    lucide.createIcons();
});

async function loadDashboard() {
    try {
        const resp = await fetch('/api/grc/dashboard');
        const data = await resp.json();
        renderDashboard(data);
    } catch(e) {
        console.error('Dashboard load error:', e);
    }
}

function renderDashboard(data) {
    const stats = data.stats;
    const role = data.role;
    const container = document.getElementById('grc-stats');

    let cards = '';

    if (role === 'admin' || role === 'manager') {
        cards = `
            <div class="stat-card">
                <div class="stat-value">${stats.plans_active || 0}</div>
                <div class="stat-label">Активных планов</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">${stats.engagements_active || 0}</div>
                <div class="stat-label">Проверок в работе</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">${stats.findings_open || 0}</div>
                <div class="stat-label">Открытых замечаний</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">${stats.remediations_active || 0}</div>
                <div class="stat-label">Активных рекомендаций</div>
            </div>
            <div class="stat-card ${(stats.remediations_overdue || 0) > 0 ? 'stat-danger' : ''}">
                <div class="stat-value">${stats.remediations_overdue || 0}</div>
                <div class="stat-label">Просроченных</div>
            </div>
            <div class="stat-card ${(stats.unread_notifications || 0) > 0 ? 'stat-warning' : ''}">
                <div class="stat-value">${stats.unread_notifications || 0}</div>
                <div class="stat-label">Уведомлений</div>
            </div>`;

        // Load overdue tasks
        loadOverdueTasks();

    } else if (role === 'auditor') {
        cards = `
            <div class="stat-card">
                <div class="stat-value">${stats.my_engagements || 0}</div>
                <div class="stat-label">Моих проверок</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">${stats.my_findings || 0}</div>
                <div class="stat-label">Моих замечаний</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">${stats.pending_verification || 0}</div>
                <div class="stat-label">Ожидают проверки</div>
            </div>
            <div class="stat-card ${(stats.unread_notifications || 0) > 0 ? 'stat-warning' : ''}">
                <div class="stat-value">${stats.unread_notifications || 0}</div>
                <div class="stat-label">Уведомлений</div>
            </div>`;
    } else {
        cards = `
            <div class="stat-card">
                <div class="stat-value">${stats.my_tasks || 0}</div>
                <div class="stat-label">Моих задач</div>
            </div>
            <div class="stat-card ${(stats.my_overdue || 0) > 0 ? 'stat-danger' : ''}">
                <div class="stat-value">${stats.my_overdue || 0}</div>
                <div class="stat-label">Просроченных</div>
            </div>
            <div class="stat-card ${(stats.unread_notifications || 0) > 0 ? 'stat-warning' : ''}">
                <div class="stat-value">${stats.unread_notifications || 0}</div>
                <div class="stat-label">Уведомлений</div>
            </div>`;

        // Load personal tasks
        loadMyTasks();
    }

    container.innerHTML = cards;

    // Render activity feed
    renderActivityFeed(stats.recent_activity || []);
}

async function loadOverdueTasks() {
    try {
        const resp = await fetch('/api/grc/remediations?overdue_only=true');
        const tasks = await resp.json();
        if (tasks.length > 0) {
            document.getElementById('overdue-section').style.display = '';
            const tbody = document.getElementById('overdue-tbody');
            tbody.innerHTML = tasks.slice(0, 10).map(t => {
                const days = Math.ceil((new Date() - new Date(t.deadline)) / 86400000);
                return `<tr class="row-overdue" onclick="location.href='/workflows/remediations/${t.id}'">
                    <td><code>${t.ref_number || '#' + t.id}</code></td>
                    <td>${escHtml(t.title)}</td>
                    <td>${escHtml(t.assigned_to_user_id || '—')}</td>
                    <td>${t.deadline}</td>
                    <td><span class="badge badge-danger">${days} дн.</span></td>
                </tr>`;
            }).join('');
        }
    } catch(e) { console.error(e); }
}

async function loadMyTasks() {
    try {
        const resp = await fetch('/api/grc/remediations?my_tasks=true');
        const tasks = await resp.json();
        if (tasks.length > 0) {
            document.getElementById('my-tasks-section').style.display = '';
            const tbody = document.getElementById('my-tasks-tbody');
            tbody.innerHTML = tasks.slice(0, 10).map(t => `
                <tr class="${t.is_overdue ? 'row-overdue' : ''}" onclick="location.href='/workflows/remediations/${t.id}'">
                    <td><code>${t.ref_number || '#' + t.id}</code></td>
                    <td>${escHtml(t.title)}</td>
                    <td>${t.deadline}${t.is_overdue ? ' <span class="badge badge-danger">Просрочено</span>' : ''}</td>
                    <td><span class="status-badge status-${t.status}">${GRC_LABELS[t.status] || t.status}</span></td>
                </tr>
            `).join('');
        }
    } catch(e) { console.error(e); }
}

function renderActivityFeed(activities) {
    const feed = document.getElementById('activity-feed');
    if (!activities.length) {
        feed.innerHTML = '<div class="empty-state">Нет действий</div>';
        return;
    }
    const icons = {
        created: 'plus-circle', updated: 'edit', deleted: 'trash-2',
        status_changed: 'arrow-right-circle', commented: 'message-circle',
        member_added: 'user-plus', member_removed: 'user-minus',
        reassigned: 'user-check',
    };
    feed.innerHTML = activities.map(a => {
        const icon = icons[a.action] || 'activity';
        const time = new Date(a.created_at).toLocaleString('ru-RU');
        return `<div class="activity-item">
            <i data-lucide="${icon}" class="activity-icon"></i>
            <div class="activity-body">
                <span class="activity-actor">${escHtml(a.actor_name || a.actor_id)}</span>
                <span class="activity-action">${actionLabel(a.action)}</span>
                <span class="activity-entity">${a.entity_type} #${a.entity_id}</span>
                ${a.old_value && a.new_value ? `<span class="activity-transition">${GRC_LABELS[a.old_value] || a.old_value} → ${GRC_LABELS[a.new_value] || a.new_value}</span>` : ''}
            </div>
            <span class="activity-time">${time}</span>
        </div>`;
    }).join('');
    lucide.createIcons();
}

function actionLabel(action) {
    const map = {
        created: 'создал', updated: 'обновил', deleted: 'удалил',
        status_changed: 'изменил статус', commented: 'прокомментировал',
        member_added: 'добавил участника', member_removed: 'удалил участника',
        reassigned: 'переназначил',
    };
    return map[action] || action;
}
</script>
{% endblock %}