{% 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/plans" class="btn-back">
            <i data-lucide="arrow-left"></i> Планы аудита
        </a>
        <div class="toolbar-actions" id="toolbar-actions"></div>
    </div>

    <!-- Plan Header -->
    <div class="detail-header" id="plan-header">
        <div class="stats-loading">Загрузка...</div>
    </div>

    <!-- Engagements Section -->
    <div class="grc-section">
        <div class="section-header">
            <h3>Проверки</h3>
            <button class="btn btn-sm btn-primary" id="btn-add-engagement" style="display:none;"
                    onclick="openModal('modal-engagement')">
                <i data-lucide="plus"></i> Добавить проверку
            </button>
        </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="eng-tbody">
                    <tr><td colspan="8" class="loading-cell">Загрузка...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Comments Section -->
    <div class="grc-section">
        <div class="section-header">
            <h3>Комментарии</h3>
        </div>
        <div id="comments-container">
            <div class="stats-loading">Загрузка...</div>
        </div>
        <div class="comment-form">
            <textarea id="comment-text" rows="2" class="form-input" placeholder="Написать комментарий..."></textarea>
            <button class="btn btn-sm btn-primary" onclick="addComment()">Отправить</button>
        </div>
    </div>

    <!-- Activity Log -->
    <div class="grc-section">
        <div class="section-header">
            <h3>История изменений</h3>
        </div>
        <div class="activity-feed" id="plan-activity"></div>
    </div>

    <!-- Status Transition Modal -->
    <div class="modal-overlay" id="modal-transition" style="display:none;">
        <div class="modal">
            <div class="modal-header">
                <h3>Изменение статуса</h3>
                <button class="modal-close" onclick="closeModal('modal-transition')">&times;</button>
            </div>
            <div class="modal-body">
                <p id="transition-desc"></p>
                <div class="form-group">
                    <label>Комментарий (необязательно)</label>
                    <textarea id="transition-comment" rows="2" class="form-input"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('modal-transition')">Отмена</button>
                <button class="btn btn-primary" id="btn-confirm-transition" onclick="confirmTransition()">Подтвердить</button>
            </div>
        </div>
    </div>

    <!-- Create Engagement Modal -->
    <div class="modal-overlay" id="modal-engagement" style="display:none;">
        <div class="modal modal-lg">
            <div class="modal-header">
                <h3>Новая проверка</h3>
                <button class="modal-close" onclick="closeModal('modal-engagement')">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-row">
                    <div class="form-group flex-1">
                        <label>Название *</label>
                        <input type="text" id="eng-title" class="form-input" placeholder="Проверка ...">
                    </div>
                    <div class="form-group">
                        <label>Тип</label>
                        <select id="eng-type" class="form-input">
                            <option value="planned">Плановая</option>
                            <option value="unplanned">Внеплановая</option>
                            <option value="follow_up">Повторная</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Описание</label>
                    <textarea id="eng-description" rows="2" class="form-input"></textarea>
                </div>
                <div class="form-row">
                    <div class="form-group flex-1">
                        <label>Аудиторское подразделение</label>
                        <select id="eng-audit-unit" class="form-input">
                            <option value="">— Не указано —</option>
                        </select>
                    </div>
                    <div class="form-group flex-1">
                        <label>Проверяемое подразделение</label>
                        <select id="eng-target-unit" class="form-input">
                            <option value="">— Не указано —</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group flex-1">
                        <label>Ответственный аудитор</label>
                        <input type="text" id="eng-lead" class="form-input" placeholder="user_id">
                    </div>
                    <div class="form-group">
                        <label>Уровень риска</label>
                        <select id="eng-risk" class="form-input">
                            <option value="low">Низкий</option>
                            <option value="medium" selected>Средний</option>
                            <option value="high">Высокий</option>
                            <option value="critical">Критический</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group flex-1">
                        <label>Плановое начало</label>
                        <input type="date" id="eng-start" class="form-input">
                    </div>
                    <div class="form-group flex-1">
                        <label>Плановое окончание</label>
                        <input type="date" id="eng-end" class="form-input">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('modal-engagement')">Отмена</button>
                <button class="btn btn-primary" onclick="createEngagement()">Создать</button>
            </div>
        </div>
    </div>
</div>

<script src="{{ url_for('static', path='/js/grc.js') }}"></script>
<script>
const planId = {{ plan_id }};
let planData = null;
let userRole = 'viewer';
let pendingTransition = null;
let orgUnits = [];

document.addEventListener('DOMContentLoaded', async function() {
    try {
        const me = await fetch('/api/me').then(r => r.json());
        userRole = me.role;
    } catch(e) {}

    // Load org units for engagement form
    try {
        orgUnits = await fetch('/api/grc/org-units').then(r => r.json());
        populateOrgSelects();
    } catch(e) {}

    await loadPlan();
    await loadComments();
    await loadActivity();
});

function populateOrgSelects() {
    const auditSel = document.getElementById('eng-audit-unit');
    const targetSel = document.getElementById('eng-target-unit');
    orgUnits.forEach(u => {
        const opt = `<option value="${u.id}">${escHtml(u.name)}${u.code ? ' (' + u.code + ')' : ''}</option>`;
        if (u.is_audit_unit) auditSel.innerHTML += opt;
        targetSel.innerHTML += opt;
    });
}

async function loadPlan() {
    try {
        const resp = await fetch(`/api/grc/plans/${planId}`);
        if (!resp.ok) { document.getElementById('plan-header').innerHTML = '<div class="empty-state">План не найден</div>'; return; }
        planData = await resp.json();
        renderPlanHeader();
        renderEngagements();
    } catch(e) {
        console.error(e);
    }
}

function renderPlanHeader() {
    const p = planData;
    const header = document.getElementById('plan-header');
    const statusLabel = GRC_LABELS[p.status] || p.status;

    // Determine available transitions
    const transitions = GRC_TRANSITIONS.plan[p.status] || [];
    const canTransition = ['admin', 'manager'].includes(userRole) && transitions.length > 0;
    const canEdit = ['admin', 'manager'].includes(userRole) && ['draft', 'under_review'].includes(p.status);
    const canAddEng = ['admin', 'manager'].includes(userRole) && !['completed', 'archived'].includes(p.status);

    let transitionBtns = '';
    if (canTransition) {
        transitionBtns = transitions.map(t =>
            `<button class="btn btn-sm btn-outline" onclick="startTransition('${t}')">${GRC_LABELS[t] || t}</button>`
        ).join('');
    }

    if (canAddEng) {
        document.getElementById('btn-add-engagement').style.display = '';
    }

    header.innerHTML = `
        <div class="detail-title-row">
            <div>
                <h2>${escHtml(p.title)}</h2>
                <div class="detail-meta">
                    <span class="status-badge status-${p.status}">${statusLabel}</span>
                    <span>Год: <strong>${p.year}</strong></span>
                    <span>Автор: ${escHtml(p.created_by)}</span>
                    ${p.approved_by ? `<span>Утвердил: ${escHtml(p.approved_by)}</span>` : ''}
                </div>
            </div>
            <div class="detail-actions">
                ${transitionBtns}
            </div>
        </div>
        ${p.description ? `<p class="detail-desc">${escHtml(p.description)}</p>` : ''}
    `;
    lucide.createIcons();
}

function renderEngagements() {
    const tbody = document.getElementById('eng-tbody');
    const engs = planData.engagements || [];
    if (!engs.length) {
        tbody.innerHTML = '<tr><td colspan="8" class="loading-cell">Нет проверок в плане</td></tr>';
        return;
    }
    const typeLabels = { planned: 'Плановая', unplanned: 'Внеплановая', follow_up: 'Повторная' };
    const riskClasses = { critical: 'badge-danger', high: 'badge-warning', medium: 'badge-info', low: 'badge-default' };
    const riskLabels = { critical: 'Критический', high: 'Высокий', medium: 'Средний', low: 'Низкий' };

    tbody.innerHTML = engs.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>${typeLabels[e.engagement_type] || e.engagement_type}</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] || e.risk_level}</span></td>
                <td>${e.finding_count || 0}</td>
            </tr>`;
    }).join('');
}

function startTransition(newStatus) {
    pendingTransition = newStatus;
    const currentLabel = GRC_LABELS[planData.status] || planData.status;
    const targetLabel = GRC_LABELS[newStatus] || newStatus;
    document.getElementById('transition-desc').textContent =
        `Перевести план из «${currentLabel}» в «${targetLabel}»?`;
    document.getElementById('transition-comment').value = '';
    openModal('modal-transition');
}

async function confirmTransition() {
    if (!pendingTransition) return;
    try {
        const resp = await fetch(`/api/grc/plans/${planId}/transition`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                new_status: pendingTransition,
                comment: document.getElementById('transition-comment').value.trim() || null
            })
        });
        const result = await resp.json();
        if (resp.ok) {
            closeModal('modal-transition');
            await loadPlan();
            await loadComments();
            await loadActivity();
        } else {
            alert(result.detail || 'Ошибка');
        }
    } catch(e) { alert('Ошибка сети'); }
}

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

    const body = {
        plan_id: planId,
        title: title,
        description: document.getElementById('eng-description').value.trim() || null,
        engagement_type: document.getElementById('eng-type').value,
        audit_unit_id: parseInt(document.getElementById('eng-audit-unit').value) || null,
        target_unit_id: parseInt(document.getElementById('eng-target-unit').value) || null,
        lead_auditor_id: document.getElementById('eng-lead').value.trim() || null,
        risk_level: document.getElementById('eng-risk').value,
        planned_start: document.getElementById('eng-start').value || null,
        planned_end: document.getElementById('eng-end').value || null,
    };

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

async function loadComments() {
    try {
        const resp = await fetch(`/api/grc/comments/plan/${planId}`);
        const comments = await resp.json();
        renderComments(document.getElementById('comments-container'), comments);
    } catch(e) {}
}

async function addComment() {
    const body = document.getElementById('comment-text').value.trim();
    if (!body) return;
    try {
        await fetch('/api/grc/comments', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ entity_type: 'plan', entity_id: planId, body })
        });
        document.getElementById('comment-text').value = '';
        await loadComments();
    } catch(e) {}
}

async function loadActivity() {
    try {
        const resp = await fetch(`/api/grc/activity/plan/${planId}`);
        const activities = await resp.json();
        renderActivityLog(document.getElementById('plan-activity'), activities);
    } catch(e) {}
}
</script>
{% endblock %}