{% 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">
            <button class="btn btn-primary" id="btn-create" style="display:none;" onclick="openModal('modal-create')">
                <i data-lucide="plus"></i> Новый стратегический план
            </button>
        </div>
    </div>

    <div class="page-description">
        <p>Стратегические планы аудита обеспечивают полное покрытие аудиторской вселенной в рамках 3-летнего цикла с приоритизацией по уровню риска.</p>
    </div>

    <!-- Table -->
    <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="plans-tbody">
                <tr><td colspan="7" class="loading-cell">Загрузка...</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- ═══ Create Strategic Plan Modal ═══ -->
<div class="modal-overlay" id="modal-create" style="display:none;" onclick="if(event.target===this)closeModal('modal-create')">
    <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="text" class="form-input" id="sp-title" placeholder="Стратегический план аудита 2026–2028">
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Начало (год)</label>
                    <input type="number" class="form-input" id="sp-start" value="2026" min="2020" max="2040">
                </div>
                <div class="form-group">
                    <label>Окончание (год)</label>
                    <input type="number" class="form-input" id="sp-end" value="2028" min="2020" max="2040">
                </div>
            </div>
            <div class="form-group">
                <label>Описание</label>
                <textarea class="form-input" id="sp-description" rows="3" 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>

<script src="{{ url_for('static', path='/js/grc.js') }}"></script>
<script>
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-create').style.display = '';
        }
    } catch(e) {}

    await loadPlans();
    lucide.createIcons();
});

async function loadPlans() {
    try {
        const resp = await fetch('/api/grc/strategic-plans');
        const plans = await resp.json();
        renderTable(plans);
    } catch(e) {
        console.error('Load error:', e);
    }
}

function renderTable(plans) {
    const tbody = document.getElementById('plans-tbody');
    if (!plans.length) {
        tbody.innerHTML = '<tr><td colspan="7" class="empty-state">Стратегические планы не найдены</td></tr>';
        return;
    }

    tbody.innerHTML = plans.map(p => {
        const coveragePct = p.coverage_pct || 0;
        return `
        <tr class="clickable-row" onclick="window.location='/workflows/strategic-plans/${p.id}'">
            <td><span class="period-badge">${p.period_start}–${p.period_end}</span></td>
            <td><strong>${escHtml(p.title)}</strong></td>
            <td><span class="status-badge status-${p.status}">${GRC_LABELS[p.status] || p.status}</span></td>
            <td>
                <div class="score-bar">
                    <div class="score-bar-track">
                        <div class="score-bar-fill fill-${coveragePct >= 80 ? 'low' : coveragePct >= 50 ? 'medium' : 'high'}"
                             style="width:${coveragePct}%"></div>
                    </div>
                    <span class="score-value">${coveragePct}%</span>
                </div>
            </td>
            <td>${p.item_count || 0}</td>
            <td>${escHtml(p.created_by || '')}</td>
            <td>${p.created_at_str || ''}</td>
        </tr>`;
    }).join('');
}

async function createPlan() {
    const title = document.getElementById('sp-title').value.trim();
    if (!title) { alert('Укажите название'); return; }

    const body = {
        title: title,
        period_start: parseInt(document.getElementById('sp-start').value),
        period_end: parseInt(document.getElementById('sp-end').value),
        description: document.getElementById('sp-description').value.trim(),
    };

    if (body.period_end <= body.period_start) {
        alert('Конечный год должен быть больше начального');
        return;
    }

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