{% 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>

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

    <!-- Evidence & Recommendation -->
    <div class="grc-section" id="details-section" style="display:none;">
        <div class="detail-grid">
            <div class="detail-block" id="evidence-block"></div>
            <div class="detail-block" id="recommendation-block"></div>
        </div>
    </div>

    <!-- Remediations -->
    <div class="grc-section">
        <div class="section-header">
            <h3>Рекомендации</h3>
            <button class="btn btn-sm btn-primary" id="btn-add-rem" style="display:none;"
                    onclick="openModal('modal-remediation')">
                <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="rem-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-order" style="display:none;"
                        onclick="generateRemOrder()">
                    <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>
        <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>

    <!-- 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>

    <!-- Create Remediation Modal -->
    <div class="modal-overlay" id="modal-remediation" style="display:none;">
        <div class="modal modal-lg">
            <div class="modal-header">
                <h3>Новая рекомендация</h3>
                <button class="modal-close" onclick="closeModal('modal-remediation')">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Название *</label>
                    <input type="text" id="rem-title" class="form-input" placeholder="Что необходимо исправить">
                </div>
                <div class="form-group">
                    <label>Описание</label>
                    <textarea id="rem-desc" rows="3" class="form-input"></textarea>
                </div>
                <div class="form-row">
                    <div class="form-group flex-1">
                        <label>Исполнитель (user ID)</label>
                        <input type="text" id="rem-assignee" class="form-input" placeholder="user.name">
                    </div>
                    <div class="form-group flex-1">
                        <label>Подразделение</label>
                        <select id="rem-unit" class="form-input">
                            <option value="">— Не указано —</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>Крайний срок *</label>
                    <input type="date" id="rem-deadline" class="form-input">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('modal-remediation')">Отмена</button>
                <button class="btn btn-primary" onclick="createRemediation()">Создать</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 findingId = {{ finding_id }};
let findingData = 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) {}
    try {
        const units = await fetch('/api/grc/org-units').then(r=>r.json());
        const sel = document.getElementById('rem-unit');
        units.filter(u => !u.is_audit_unit).forEach(u => {
            sel.innerHTML += `<option value="${u.id}">${escHtml(u.name)}</option>`;
        });
    } catch(e) {}
    await loadFinding();
    await loadComments();
    await loadAttachments();
});

async function loadFinding() {
    try {
        const resp = await fetch(`/api/grc/findings/${findingId}`);
        if (!resp.ok) { document.getElementById('finding-header').innerHTML='<div class="empty-state">Не найдено</div>'; return; }
        findingData = await resp.json();
        document.getElementById('back-link').href = `/workflows/engagements/${findingData.engagement_id}`;
        renderHeader();
        renderDetails();
        renderRemediations();

        if (['admin','manager','auditor'].includes(userRole)) {
            document.getElementById('btn-upload').style.display = '';
            document.getElementById('btn-gen-order').style.display = '';
        }
    } catch(e) { console.error(e); }
}

function renderHeader() {
    const f = findingData;
    const transitions = GRC_TRANSITIONS.finding[f.status] || [];
    const canTransition = ['admin','manager','auditor'].includes(userRole) && transitions.length > 0;
    const canAddRem = ['admin','manager','auditor'].includes(userRole) &&
                      ['confirmed','remediation_issued'].includes(f.status);
    if (canAddRem) document.getElementById('btn-add-rem').style.display = '';

    const sevLabels = {critical:'Критическая',high:'Высокая',medium:'Средняя',low:'Низкая'};
    const sevClasses = {critical:'badge-danger',high:'badge-warning',medium:'badge-info',low:'badge-default'};

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

    document.getElementById('finding-header').innerHTML = `
        <div class="detail-title-row">
            <div>
                <div class="detail-breadcrumb">${escHtml(f.engagement_title || 'Проверка')} / ${f.ref_number || '#'+f.id}</div>
                <h2>${escHtml(f.title)}</h2>
                <div class="detail-meta">
                    <span class="status-badge status-${f.status}">${GRC_LABELS[f.status]||f.status}</span>
                    <span class="badge ${sevClasses[f.severity]||''}">${sevLabels[f.severity]||f.severity}</span>
                    ${f.responsible_unit_name ? `<span>Подразделение: ${escHtml(f.responsible_unit_name)}</span>` : ''}
                    <span>Автор: ${escHtml(f.found_by)}</span>
                </div>
            </div>
            <div class="detail-actions">${transBtns}</div>
        </div>
        ${f.description ? `<p class="detail-desc">${escHtml(f.description)}</p>` : ''}
    `;
    lucide.createIcons();
}

function renderDetails() {
    const f = findingData;
    if (!f.evidence && !f.recommendation) return;
    document.getElementById('details-section').style.display = '';
    document.getElementById('evidence-block').innerHTML = f.evidence ?
        `<h4>Доказательства</h4><p>${escHtml(f.evidence)}</p>` : '';
    document.getElementById('recommendation-block').innerHTML = f.recommendation ?
        `<h4>Рекомендация</h4><p>${escHtml(f.recommendation)}</p>` : '';
}

function renderRemediations() {
    const tbody = document.getElementById('rem-tbody');
    const rems = findingData.remediations || [];
    if (!rems.length) {
        tbody.innerHTML = '<tr><td colspan="6" class="loading-cell">Нет рекомендаций</td></tr>';
        return;
    }
    tbody.innerHTML = rems.map(r => `
        <tr class="clickable-row ${r.is_overdue ? 'row-overdue' : ''}" onclick="location.href='/workflows/remediations/${r.id}'">
            <td><code>${r.ref_number || '#'+r.id}</code></td>
            <td>${escHtml(r.title)}</td>
            <td>${escHtml(r.assigned_to_user_id || '—')}</td>
            <td>${escHtml(r.assigned_unit_name || '—')}</td>
            <td>${r.deadline}${r.is_overdue ? ' <span class="badge badge-danger">!</span>' : ''}</td>
            <td><span class="status-badge status-${r.status}">${GRC_LABELS[r.status]||r.status}</span></td>
        </tr>
    `).join('');
}

/* ═══ Attachments ═══ */

async function loadAttachments() {
    try {
        const files = await fetch(`/api/grc/attachments/finding/${findingId}`).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', 'evidence');
    try {
        const resp = await fetch(`/api/grc/attachments/finding/${findingId}`, {method:'POST', body:formData});
        if (resp.ok) { await loadAttachments(); }
        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();
}

async function generateRemOrder() {
    const btn = document.getElementById('btn-gen-order');
    btn.disabled = true; btn.textContent = 'Генерация...';
    try {
        const resp = await fetch(`/api/grc/documents/remediation-order/${findingId}`, {method:'POST'});
        const result = await resp.json();
        if (resp.ok) {
            await loadAttachments();
            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(s) {
    pendingTransition = s;
    document.getElementById('transition-desc').textContent =
        `Перевести из «${GRC_LABELS[findingData.status]||findingData.status}» в «${GRC_LABELS[s]||s}»?`;
    document.getElementById('transition-comment').value = '';
    openModal('modal-transition');
}

async function confirmTransition() {
    if (!pendingTransition) return;
    const resp = await fetch(`/api/grc/findings/${findingId}/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 loadFinding(); await loadComments(); }
    else { const r = await resp.json(); alert(r.detail||'Ошибка'); }
}

async function createRemediation() {
    const title = document.getElementById('rem-title').value.trim();
    const deadline = document.getElementById('rem-deadline').value;
    if (!title || !deadline) { alert('Укажите название и срок'); return; }
    const resp = await fetch('/api/grc/remediations', {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({
            finding_id: findingId, title, deadline,
            description: document.getElementById('rem-desc').value.trim()||null,
            assigned_to_user_id: document.getElementById('rem-assignee').value.trim()||null,
            assigned_to_unit_id: parseInt(document.getElementById('rem-unit').value)||null,
        })
    });
    const result = await resp.json();
    if (resp.ok && result.id) { closeModal('modal-remediation'); location.href=`/workflows/remediations/${result.id}`; }
    else alert(result.detail||'Ошибка');
}

async function loadComments() {
    const comments = await fetch(`/api/grc/comments/finding/${findingId}`).then(r=>r.json());
    renderComments(document.getElementById('comments-container'), comments);
}
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:'finding',entity_id:findingId,body})});
    document.getElementById('comment-text').value=''; await loadComments();
}
</script>
{% endblock %}