{% 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/remediations" class="btn-back"><i data-lucide="arrow-left"></i> Рекомендации</a>
        <div class="toolbar-actions" id="toolbar-actions"></div>
    </div>

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

    <!-- Deadline info -->
    <div class="grc-section" id="deadline-section" style="display:none;">
        <div class="deadline-banner" id="deadline-banner"></div>
    </div>

    <!-- Evidence submission -->
    <div class="grc-section" id="evidence-section" style="display:none;">
        <div class="section-header"><h3>Подтверждение выполнения</h3></div>
        <div class="form-group">
            <label>Опишите выполненные действия и приложите доказательства</label>
            <textarea id="evidence-text" rows="4" class="form-input" placeholder="Что было сделано..."></textarea>
        </div>
        <button class="btn btn-primary" onclick="submitEvidence()">Отправить на проверку</button>
    </div>

    <!-- Existing evidence -->
    <div class="grc-section" id="submitted-evidence-section" style="display:none;">
        <div class="section-header"><h3>Доказательства выполнения</h3></div>
        <div class="detail-block" id="submitted-evidence-block"></div>
    </div>

    <!-- Attachments -->
    <div class="grc-section">
        <div class="section-header">
            <h3>Вложения</h3>
            <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 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>

    <!-- Activity -->
    <div class="grc-section">
        <div class="section-header"><h3>История</h3></div>
        <div class="activity-feed" id="rem-activity"></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>

    <!-- Reassign Modal -->
    <div class="modal-overlay" id="modal-reassign" style="display:none;">
        <div class="modal">
            <div class="modal-header">
                <h3>Переназначить</h3>
                <button class="modal-close" onclick="closeModal('modal-reassign')">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Новый исполнитель (user ID)</label>
                    <input type="text" id="reassign-user" class="form-input">
                </div>
                <div class="form-group">
                    <label>Причина</label>
                    <input type="text" id="reassign-reason" class="form-input" value="Смена ответственного">
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" onclick="closeModal('modal-reassign')">Отмена</button>
                <button class="btn btn-primary" onclick="doReassign()">Переназначить</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 remId = {{ remediation_id }};
let remData = null;
let userRole = 'viewer';
let currentUserId = '';
let pendingTransition = null;

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

async function loadRemediation() {
    try {
        const resp = await fetch(`/api/grc/remediations/${remId}`);
        if (!resp.ok) { document.getElementById('rem-header').innerHTML='<div class="empty-state">Не найдено</div>'; return; }
        remData = await resp.json();
        renderHeader();
        renderDeadline();
        renderEvidence();

        // Show upload button for assignee, auditor, admin, manager
        const isAssignee = remData.assigned_to_user_id === currentUserId;
        if (isAssignee || ['admin','manager','auditor'].includes(userRole)) {
            document.getElementById('btn-upload').style.display = '';
        }
    } catch(e) { console.error(e); }
}

function renderHeader() {
    const r = remData;
    const isAssignee = r.assigned_to_user_id === currentUserId;
    const isManager = ['admin','manager'].includes(userRole);
    const isAuditor = ['admin','manager','auditor'].includes(userRole);
    const transitions = GRC_TRANSITIONS.remediation[r.status] || [];

    let allowedTransitions = [];
    transitions.forEach(t => {
        if ((t === 'in_progress' || t === 'submitted') && (isAssignee || isManager)) allowedTransitions.push(t);
        else if (t === 'verified' && isAuditor) allowedTransitions.push(t);
        else if (t === 'closed' && isManager) allowedTransitions.push(t);
    });

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

    if (isManager) {
        actionBtns += `<button class="btn btn-sm btn-outline" onclick="openModal('modal-reassign')">Переназначить</button>`;
    }

    const toolbar = document.getElementById('toolbar-actions');
    toolbar.innerHTML = actionBtns;

    document.getElementById('rem-header').innerHTML = `
        <div class="detail-title-row">
            <div>
                <div class="detail-breadcrumb">
                    ${escHtml(r.engagement_title||'Проверка')} /
                    ${escHtml(r.finding_ref||'Замечание')} /
                    ${r.ref_number||'#'+r.id}
                </div>
                <h2>${escHtml(r.title)}</h2>
                <div class="detail-meta">
                    <span class="status-badge status-${r.status}">${GRC_LABELS[r.status]||r.status}</span>
                    ${r.is_overdue ? '<span class="badge badge-danger">Просрочено</span>' : ''}
                    ${r.finding_severity ? `<span class="badge badge-${r.finding_severity==='critical'||r.finding_severity==='high'?'danger':'info'}">Критичность: ${r.finding_severity}</span>` : ''}
                    <span>Исполнитель: <strong>${escHtml(r.assigned_to_user_id||'не назначен')}</strong></span>
                    ${r.assigned_unit_name ? `<span>Подразделение: ${escHtml(r.assigned_unit_name)}</span>` : ''}
                    <span>Срок: <strong>${r.deadline}</strong></span>
                </div>
            </div>
        </div>
        ${r.description ? `<p class="detail-desc">${escHtml(r.description)}</p>` : ''}
    `;
    lucide.createIcons();
}

function renderDeadline() {
    const r = remData;
    if (['closed','cancelled','verified'].includes(r.status)) return;
    const today = new Date(); today.setHours(0,0,0,0);
    const deadline = new Date(r.deadline); deadline.setHours(0,0,0,0);
    const days = Math.ceil((deadline - today) / 86400000);

    let cls, msg;
    if (days < 0) { cls = 'deadline-overdue'; msg = `Просрочено на ${Math.abs(days)} дн.`; }
    else if (days === 0) { cls = 'deadline-today'; msg = 'Срок истекает сегодня!'; }
    else if (days <= 7) { cls = 'deadline-soon'; msg = `Осталось ${days} дн.`; }
    else return;

    document.getElementById('deadline-section').style.display = '';
    document.getElementById('deadline-banner').className = `deadline-banner ${cls}`;
    document.getElementById('deadline-banner').innerHTML =
        `<i data-lucide="clock"></i> <strong>${msg}</strong> — Крайний срок: ${r.deadline}`;
    lucide.createIcons();
}

function renderEvidence() {
    const r = remData;
    const isAssignee = r.assigned_to_user_id === currentUserId;

    if (isAssignee && r.status === 'in_progress') {
        document.getElementById('evidence-section').style.display = '';
    }

    if (r.submitted_evidence) {
        document.getElementById('submitted-evidence-section').style.display = '';
        document.getElementById('submitted-evidence-block').innerHTML = `
            <p>${escHtml(r.submitted_evidence)}</p>
            ${r.submitted_at ? `<small>Отправлено: ${formatDate(r.submitted_at)}</small>` : ''}
            ${r.verified_by ? `<br><small>Проверил: ${escHtml(r.verified_by)} (${formatDate(r.verified_at)})</small>` : ''}
        `;
    }
}

/* ═══ Attachments ═══ */

async function loadAttachments() {
    try {
        const files = await fetch(`/api/grc/attachments/remediation/${remId}`).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) || f.uploaded_by === currentUserId ? `
                <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/remediation/${remId}`, {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();
}

/* ═══ Evidence & Transitions ═══ */

async function submitEvidence() {
    const text = document.getElementById('evidence-text').value.trim();
    if (!text) { alert('Опишите выполненные действия'); return; }

    await fetch(`/api/grc/remediations/${remId}`, {
        method:'PUT', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({submitted_evidence: text})
    });
    await fetch(`/api/grc/remediations/${remId}/transition`, {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({new_status:'submitted', comment:'Доказательства выполнения приложены'})
    });
    await loadRemediation(); await loadActivity();
}

function startTransition(s) {
    pendingTransition = s;
    document.getElementById('transition-desc').textContent =
        `Перевести из «${GRC_LABELS[remData.status]||remData.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/remediations/${remId}/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 loadRemediation(); await loadComments(); await loadActivity(); }
    else { const r = await resp.json(); alert(r.detail||'Ошибка'); }
}

async function doReassign() {
    const userId = document.getElementById('reassign-user').value.trim();
    if (!userId) { alert('Укажите пользователя'); return; }
    const resp = await fetch(`/api/grc/remediations/${remId}/reassign`, {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({new_user_id: userId, reason: document.getElementById('reassign-reason').value.trim()})
    });
    if (resp.ok) { closeModal('modal-reassign'); await loadRemediation(); await loadActivity(); }
    else { const r = await resp.json(); alert(r.detail||'Ошибка'); }
}

async function loadComments() {
    const comments = await fetch(`/api/grc/comments/remediation/${remId}`).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:'remediation', entity_id:remId, body})});
    document.getElementById('comment-text').value=''; await loadComments();
}
async function loadActivity() {
    const activities = await fetch(`/api/grc/activity/remediation/${remId}`).then(r=>r.json());
    renderActivityLog(document.getElementById('rem-activity'), activities);
}
</script>
{% endblock %}