{% 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="#" class="btn-back" id="back-link">
            <i data-lucide="arrow-left"></i> Назад
        </a>
        <div class="toolbar-actions" id="toolbar-actions"></div>
    </div>

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

    <!-- Members -->
    <div class="grc-section" id="members-section">
        <div class="section-header">
            <h3>Рабочая группа</h3>
            <button class="btn btn-sm btn-outline" id="btn-add-member" style="display:none;"
                    onclick="openModal('modal-member')">
                <i data-lucide="user-plus"></i> Добавить
            </button>
        </div>
        <div class="members-grid" id="members-grid"></div>
    </div>

    <!-- Findings Section -->
    <div class="grc-section">
        <div class="section-header">
            <h3>Замечания</h3>
            <button class="btn btn-sm btn-primary" id="btn-add-finding" style="display:none;"
                    onclick="openModal('modal-finding')">
                <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>
                    </tr>
                </thead>
                <tbody id="findings-tbody">
                    <tr><td colspan="6" class="loading-cell">Загрузка...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Attachments -->
    <div class="grc-section">
        <div class="section-header">
            <h3>Вложения</h3>
            <div style="display:flex; gap:0.5rem;">
                <button class="btn btn-sm btn-outline" id="btn-gen-report" style="display:none;"
                        onclick="generateAuditReport()">
                    <i data-lucide="file-text"></i> Сформировать акт
                </button>
                <label class="btn btn-sm btn-outline" id="btn-upload" style="display:none; cursor:pointer;">
                    <i data-lucide="upload"></i> Загрузить
                    <input type="file" id="file-upload" style="display:none;" onchange="uploadFile(this)">
                </label>
            </div>
        </div>
        <div id="attachments-list">
            <div class="empty-state-sm">Загрузка...</div>
        </div>
    </div>

    <!-- Comments -->
    <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 -->
    <div class="grc-section">
        <div class="section-header"><h3>История изменений</h3></div>
        <div class="activity-feed" id="eng-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" onclick="confirmTransition()">Подтвердить</button>
            </div>
        </div>
    </div>

    <!-- Add Member Modal -->
    <div class="modal-overlay" id="modal-member" style="display:none;">
        <div class="modal">
            <div class="modal-header">
                <h3>Добавить участника</h3>
                <button class="modal-close" onclick="closeModal('modal-member')">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>ID пользователя *</label>
                    <input type="text" id="member-user-id" class="form-input" placeholder="user.name">
                </div>
                <div class="form-group">
                    <label>Роль</label>
                    <select id="member-role" class="form-input">
                        <option value="auditor">Аудитор</option>
                        <option value="lead">Руководитель проверки</option>
                        <option value="reviewer">Рецензент</option>
                        <option value="observer">Наблюдатель</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('modal-member')">Отмена</button>
                <button class="btn btn-primary" onclick="addMember()">Добавить</button>
            </div>
        </div>
    </div>

    <!-- Create Finding Modal -->
    <div class="modal-overlay" id="modal-finding" style="display:none;">
        <div class="modal modal-lg">
            <div class="modal-header">
                <h3>Новое замечание</h3>
                <button class="modal-close" onclick="closeModal('modal-finding')">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Название *</label>
                    <input type="text" id="finding-title" class="form-input" placeholder="Краткое описание нарушения">
                </div>
                <div class="form-group">
                    <label>Описание</label>
                    <textarea id="finding-desc" rows="3" class="form-input"></textarea>
                </div>
                <div class="form-row">
                    <div class="form-group flex-1">
                        <label>Критичность</label>
                        <select id="finding-severity" class="form-input">
                            <option value="low">Низкая</option>
                            <option value="medium" selected>Средняя</option>
                            <option value="high">Высокая</option>
                            <option value="critical">Критическая</option>
                        </select>
                    </div>
                    <div class="form-group flex-1">
                        <label>Ответственное подразделение</label>
                        <select id="finding-unit" class="form-input">
                            <option value="">— Не указано —</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Доказательства</label>
                    <textarea id="finding-evidence" rows="2" class="form-input"></textarea>
                </div>
                <div class="form-group">
                    <label>Рекомендация</label>
                    <textarea id="finding-recommendation" rows="2" class="form-input"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('modal-finding')">Отмена</button>
                <button class="btn btn-primary" onclick="createFinding()">Создать</button>
            </div>
        </div>
    </div>
</div>

<style>
.attach-item { display:flex; align-items:center; gap:0.75rem; padding:0.5rem 0; border-bottom:1px solid #f1f5f9; font-size:0.875rem; }
.attach-item:last-child { border-bottom:none; }
.attach-icon { width:32px; height:32px; border-radius:6px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.attach-icon svg { width:16px; height:16px; color:#64748b; }
.attach-info { flex:1; min-width:0; }
.attach-name { font-weight:500; color:var(--color-text); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attach-meta { font-size:0.75rem; color:#94a3b8; }
.attach-generated { background:#eff6ff; }
.attach-generated .attach-icon { background:#dbeafe; }
.attach-generated .attach-icon svg { color:var(--color-primary); }
.attach-actions { display:flex; gap:4px; flex-shrink:0; }
</style>

<script src="{{ url_for('static', path='/js/grc.js') }}"></script>
<script>
const engId = {{ engagement_id }};
let engData = null;
let userRole = 'viewer';
let pendingTransition = null;

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 finding form
    try {
        const units = await fetch('/api/grc/org-units').then(r => r.json());
        const sel = document.getElementById('finding-unit');
        units.filter(u => !u.is_audit_unit).forEach(u => {
            sel.innerHTML += `<option value="${u.id}">${escHtml(u.name)}</option>`;
        });
    } catch(e) {}

    await loadEngagement();
    await loadComments();
    await loadActivity();
    await loadAttachments();
});

async function loadEngagement() {
    try {
        const resp = await fetch(`/api/grc/engagements/${engId}`);
        if (!resp.ok) { document.getElementById('eng-header').innerHTML = '<div class="empty-state">Проверка не найдена</div>'; return; }
        engData = await resp.json();
        document.getElementById('back-link').href = `/workflows/plans/${engData.plan_id}`;
        renderHeader();
        renderMembers();
        renderFindings();

        // Show upload & generate buttons for authorized roles
        if (['admin','manager','auditor'].includes(userRole)) {
            document.getElementById('btn-upload').style.display = '';
            document.getElementById('btn-gen-report').style.display = '';
        }
    } catch(e) { console.error(e); }
}

function renderHeader() {
    const e = engData;
    const header = document.getElementById('eng-header');
    const transitions = GRC_TRANSITIONS.engagement[e.status] || [];
    const canTransition = ['admin', 'manager', 'auditor'].includes(userRole) && transitions.length > 0;
    const canAddFinding = ['admin', 'manager', 'auditor'].includes(userRole) &&
                          ['fieldwork', 'review', 'in_progress'].includes(e.status);
    const canManageMembers = ['admin', 'manager'].includes(userRole);

    const riskLabels = { critical: 'Критический', high: 'Высокий', medium: 'Средний', low: 'Низкий' };

    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 (canAddFinding) document.getElementById('btn-add-finding').style.display = '';
    if (canManageMembers) document.getElementById('btn-add-member').style.display = '';

    header.innerHTML = `
        <div class="detail-title-row">
            <div>
                <div class="detail-breadcrumb">${escHtml(e.plan_title || 'План')}</div>
                <h2>${escHtml(e.title)}</h2>
                <div class="detail-meta">
                    <span class="status-badge status-${e.status}">${GRC_LABELS[e.status] || e.status}</span>
                    <span class="badge badge-${e.risk_level === 'critical' || e.risk_level === 'high' ? 'danger' : 'info'}">${riskLabels[e.risk_level] || e.risk_level}</span>
                    ${e.audit_unit_name ? `<span>Аудитор: ${escHtml(e.audit_unit_name)}</span>` : ''}
                    ${e.target_unit_name ? `<span>Объект: ${escHtml(e.target_unit_name)}</span>` : ''}
                    ${e.lead_auditor_id ? `<span>Ответственный: ${escHtml(e.lead_auditor_id)}</span>` : ''}
                    ${e.planned_start ? `<span>Сроки: ${e.planned_start} — ${e.planned_end || '...'}</span>` : ''}
                </div>
            </div>
            <div class="detail-actions">${transitionBtns}</div>
        </div>
        ${e.description ? `<p class="detail-desc">${escHtml(e.description)}</p>` : ''}
    `;
    lucide.createIcons();
}

function renderMembers() {
    const grid = document.getElementById('members-grid');
    const members = engData.members || [];
    if (!members.length) {
        grid.innerHTML = '<div class="empty-state-sm">Участники не назначены</div>';
        return;
    }
    const roleLabels = { lead: 'Руководитель', auditor: 'Аудитор', reviewer: 'Рецензент', observer: 'Наблюдатель' };
    grid.innerHTML = members.map(m => `
        <div class="member-chip">
            <i data-lucide="user" class="member-icon"></i>
            <span class="member-name">${escHtml(m.user_id)}</span>
            <span class="member-role">${roleLabels[m.member_role] || m.member_role}</span>
            ${['admin', 'manager'].includes(userRole) ?
                `<button class="member-remove" onclick="removeMember('${m.user_id}')" title="Удалить">&times;</button>` : ''}
        </div>
    `).join('');
    lucide.createIcons();
}

function renderFindings() {
    const tbody = document.getElementById('findings-tbody');
    const findings = engData.findings || [];
    if (!findings.length) {
        tbody.innerHTML = '<tr><td colspan="6" class="loading-cell">Нет замечаний</td></tr>';
        return;
    }
    const sevLabels = { critical: 'Критическая', high: 'Высокая', medium: 'Средняя', low: 'Низкая' };
    const sevClasses = { critical: 'badge-danger', high: 'badge-warning', medium: 'badge-info', low: 'badge-default' };

    tbody.innerHTML = findings.map(f => `
        <tr class="clickable-row" onclick="location.href='/workflows/findings/${f.id}'">
            <td><code>${f.ref_number || '#' + f.id}</code></td>
            <td>${escHtml(f.title)}</td>
            <td><span class="badge ${sevClasses[f.severity] || ''}">${sevLabels[f.severity] || f.severity}</span></td>
            <td><span class="status-badge status-${f.status}">${GRC_LABELS[f.status] || f.status}</span></td>
            <td>${escHtml(f.responsible_unit_name || '—')}</td>
            <td>${escHtml(f.found_by)}</td>
        </tr>
    `).join('');
}

/* ═══ Attachments ═══ */

async function loadAttachments() {
    try {
        const files = await fetch(`/api/grc/attachments/engagement/${engId}`).then(r=>r.json());
        renderAttachments(files);
    } catch(e) {
        document.getElementById('attachments-list').innerHTML = '<div class="empty-state-sm">Ошибка загрузки</div>';
    }
}

function renderAttachments(files) {
    const container = document.getElementById('attachments-list');
    if (!files.length) {
        container.innerHTML = '<div class="empty-state-sm">Нет вложений</div>';
        return;
    }
    const icons = {
        'application/pdf': 'file-text',
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'file-text',
        'image/png': 'image', 'image/jpeg': 'image', 'image/gif': 'image',
    };
    container.innerHTML = files.map(f => {
        const icon = icons[f.mime_type] || 'file';
        const size = f.file_size > 1048576 ? (f.file_size/1048576).toFixed(1)+' МБ' : (f.file_size/1024).toFixed(0)+' КБ';
        const isGenerated = f.category === 'generated';
        return `<div class="attach-item ${isGenerated ? 'attach-generated' : ''}">
            <div class="attach-icon"><i data-lucide="${icon}"></i></div>
            <div class="attach-info">
                <span class="attach-name">${escHtml(f.original_name)}</span>
                <span class="attach-meta">${size} · ${escHtml(f.uploaded_by)} · ${formatDate(f.uploaded_at)}
                    ${isGenerated ? ' · <em>Сгенерирован</em>' : ''}</span>
            </div>
            <div class="attach-actions">
                <a href="/api/grc/attachments/download/${f.id}" download class="btn btn-sm btn-secondary" title="Скачать">
                    <i data-lucide="download" style="width:14px;height:14px;"></i>
                </a>
                ${['admin','manager'].includes(userRole) ? `
                <button class="btn-icon-danger" onclick="deleteAttachment(${f.id})" title="Удалить">
                    <i data-lucide="trash-2" style="width:14px;height:14px;"></i>
                </button>` : ''}
            </div>
        </div>`;
    }).join('');
    lucide.createIcons();
}

async function uploadFile(input) {
    const file = input.files[0];
    if (!file) return;
    const formData = new FormData();
    formData.append('file', file);
    formData.append('category', 'general');
    try {
        const resp = await fetch(`/api/grc/attachments/engagement/${engId}`, {method:'POST', body:formData});
        if (resp.ok) { await loadAttachments(); await loadActivity(); }
        else { const r = await resp.json(); alert(r.detail||'Ошибка загрузки'); }
    } catch(e) { alert('Ошибка сети'); }
    input.value = '';
}

async function deleteAttachment(id) {
    if (!confirm('Удалить вложение?')) return;
    await fetch(`/api/grc/attachments/${id}`, {method:'DELETE'});
    await loadAttachments(); await loadActivity();
}

async function generateAuditReport() {
    const btn = document.getElementById('btn-gen-report');
    btn.disabled = true; btn.textContent = 'Генерация...';
    try {
        const resp = await fetch(`/api/grc/documents/audit-report/${engId}`, {method:'POST'});
        const result = await resp.json();
        if (resp.ok) {
            await loadAttachments(); await loadActivity();
            // Auto-download
            const a=document.createElement('a');a.href=`/api/grc/attachments/download/${result.id}`;a.download='';document.body.appendChild(a);a.click();a.remove();
        } else {
            alert(result.detail || 'Ошибка генерации');
        }
    } catch(e) { alert('Ошибка сети'); }
    btn.disabled = false; btn.innerHTML = '<i data-lucide="file-text"></i> Сформировать акт';
    lucide.createIcons();
}

/* ═══ Transitions ═══ */

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

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

async function addMember() {
    const userId = document.getElementById('member-user-id').value.trim();
    if (!userId) { alert('Укажите ID пользователя'); return; }
    try {
        const resp = await fetch(`/api/grc/engagements/${engId}/members`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ user_id: userId, member_role: document.getElementById('member-role').value })
        });
        if (resp.ok) { closeModal('modal-member'); await loadEngagement(); }
        else { const r = await resp.json(); alert(r.detail || 'Ошибка'); }
    } catch(e) { alert('Ошибка сети'); }
}

async function removeMember(userId) {
    if (!confirm(`Удалить участника ${userId}?`)) return;
    try {
        await fetch(`/api/grc/engagements/${engId}/members/${userId}`, { method: 'DELETE' });
        await loadEngagement();
    } catch(e) {}
}

async function createFinding() {
    const title = document.getElementById('finding-title').value.trim();
    if (!title) { alert('Укажите название'); return; }
    const body = {
        engagement_id: engId,
        title,
        description: document.getElementById('finding-desc').value.trim() || null,
        severity: document.getElementById('finding-severity').value,
        responsible_unit_id: parseInt(document.getElementById('finding-unit').value) || null,
        evidence: document.getElementById('finding-evidence').value.trim() || null,
        recommendation: document.getElementById('finding-recommendation').value.trim() || null,
    };
    try {
        const resp = await fetch('/api/grc/findings', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(body)
        });
        const result = await resp.json();
        if (resp.ok && result.id) {
            closeModal('modal-finding');
            location.href = `/workflows/findings/${result.id}`;
        } else { alert(result.detail || 'Ошибка'); }
    } catch(e) { alert('Ошибка сети'); }
}

async function loadComments() {
    try {
        const comments = await fetch(`/api/grc/comments/engagement/${engId}`).then(r => r.json());
        renderComments(document.getElementById('comments-container'), comments);
    } catch(e) {}
}

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

async function loadActivity() {
    const activities = await fetch(`/api/grc/activity/engagement/${engId}`).then(r => r.json());
    renderActivityLog(document.getElementById('eng-activity'), activities);
}
</script>
{% endblock %}