{% 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"></div>
    </div>

    <!-- Filters -->
    <div class="grc-filters">
        <div class="filter-group">
            <label>Год</label>
            <select id="filter-year" onchange="loadPlans()">
                <option value="">Все</option>
            </select>
        </div>
        <div class="filter-group">
            <label>Статус</label>
            <select id="filter-status" onchange="loadPlans()">
                <option value="">Все</option>
                <option value="draft">Черновик</option>
                <option value="under_review">На рассмотрении</option>
                <option value="approved">Утверждён</option>
                <option value="active">Активен</option>
                <option value="completed">Завершён</option>
                <option value="archived">Архив</option>
            </select>
        </div>
    </div>

    <!-- Plans Table -->
    <div class="grc-table-wrap">
        <table class="grc-table">
            <thead>
                <tr>
                    <th>Год</th>
                    <th>Название</th>
                    <th>Статус</th>
                    <th>Проверок</th>
                    <th>Автор</th>
                    <th>Обновлён</th>
                </tr>
            </thead>
            <tbody id="plans-tbody">
                <tr><td colspan="6" class="loading-cell">Загрузка...</td></tr>
            </tbody>
        </table>
    </div>

    <!-- Create Plan Modal -->
    <div class="modal-overlay" id="modal-create" style="display:none;">
        <div class="modal">
            <div class="modal-header">
                <h3>Новый план аудита</h3>
                <button class="modal-close" onclick="closeModal('modal-create')">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Год</label>
                    <input type="number" id="plan-year" value="2026" min="2020" max="2035" class="form-input">
                </div>
                <div class="form-group">
                    <label>Название</label>
                    <input type="text" id="plan-title" placeholder="Годовой план аудита 2026" class="form-input">
                </div>
                <div class="form-group">
                    <label>Описание</label>
                    <textarea id="plan-description" rows="3" class="form-input" placeholder="Описание плана..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('modal-create')">Отмена</button>
                <button class="btn btn-primary" onclick="createPlan()">Создать</button>
            </div>
        </div>
    </div>
</div>

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

document.addEventListener('DOMContentLoaded', async function() {
    // Check user role for actions
    try {
        const me = await fetch('/api/me').then(r => r.json());
        userRole = me.role;
        if (['admin', 'manager'].includes(userRole)) {
            document.getElementById('toolbar-actions').innerHTML = `
                <button class="btn btn-primary" onclick="openModal('modal-create')">
                    <i data-lucide="plus"></i> Новый план
                </button>`;
            lucide.createIcons();
        }
    } catch(e) {}

    // Populate year filter
    const yearSel = document.getElementById('filter-year');
    const currentYear = new Date().getFullYear();
    for (let y = currentYear + 1; y >= currentYear - 5; y--) {
        yearSel.innerHTML += `<option value="${y}">${y}</option>`;
    }

    await loadPlans();
});

async function loadPlans() {
    try {
        const resp = await fetch('/api/grc/plans');
        allPlans = await resp.json();
        renderPlans();
    } catch(e) {
        console.error(e);
        document.getElementById('plans-tbody').innerHTML =
            '<tr><td colspan="6" class="loading-cell">Ошибка загрузки</td></tr>';
    }
}

function renderPlans() {
    const tbody = document.getElementById('plans-tbody');
    const filterYear = document.getElementById('filter-year').value;
    const filterStatus = document.getElementById('filter-status').value;

    let plans = allPlans;
    if (filterYear) plans = plans.filter(p => p.year == filterYear);
    if (filterStatus) plans = plans.filter(p => p.status === filterStatus);

    if (!plans.length) {
        tbody.innerHTML = '<tr><td colspan="6" class="loading-cell">Нет планов</td></tr>';
        return;
    }

    tbody.innerHTML = plans.map(p => `
        <tr class="clickable-row" onclick="location.href='/workflows/plans/${p.id}'">
            <td><strong>${p.year}</strong></td>
            <td>${escHtml(p.title)}</td>
            <td><span class="status-badge status-${p.status}">${GRC_LABELS[p.status] || p.status}</span></td>
            <td>${p.engagement_count || 0}</td>
            <td>${escHtml(p.created_by)}</td>
            <td>${formatDate(p.updated_at)}</td>
        </tr>
    `).join('');
}

async function createPlan() {
    const year = parseInt(document.getElementById('plan-year').value);
    const title = document.getElementById('plan-title').value.trim();
    const description = document.getElementById('plan-description').value.trim();

    if (!title) { alert('Укажите название плана'); return; }

    try {
        const resp = await fetch('/api/grc/plans', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ year, title, description: description || null })
        });
        const result = await resp.json();
        if (resp.ok && result.id) {
            closeModal('modal-create');
            location.href = `/workflows/plans/${result.id}`;
        } else {
            alert(result.detail || 'Ошибка создания');
        }
    } catch(e) {
        alert('Ошибка сети');
    }
}
</script>
{% endblock %}