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

    <!-- Coverage Bar -->
    <div class="coverage-bar" id="coverage-bar" style="display:none;"></div>

    <!-- Matrix -->
    <div class="grc-section">
        <div class="section-header">
            <h3>Матрица покрытия</h3>
        </div>
        <div class="matrix-table-wrap">
            <table class="matrix-table" id="matrix-table">
                <thead id="matrix-thead"></thead>
                <tbody id="matrix-tbody">
                    <tr><td colspan="5" class="loading-cell">Загрузка...</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- ═══ Transition Modal ═══ -->
<div class="modal-overlay" id="modal-transition" style="display:none;" onclick="if(event.target===this)closeModal('modal-transition')">
    <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>
        <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>

<!-- ═══ Generate Annual Plan Modal ═══ -->
<div class="modal-overlay" id="modal-generate" style="display:none;" onclick="if(event.target===this)closeModal('modal-generate')">
    <div class="modal">
        <div class="modal-header">
            <h3>Сформировать годовой план</h3>
            <button class="modal-close" onclick="closeModal('modal-generate')">&times;</button>
        </div>
        <div class="modal-body">
            <p>Выберите год, для которого нужно сформировать годовой план аудита из стратегического плана.</p>
            <p>Для каждого назначенного объекта будет создана проверка (engagement) с соответствующими сроками.</p>
            <div class="form-group" style="margin-top:1rem;">
                <label>Год</label>
                <select class="form-input" id="generate-year"></select>
            </div>
            <div id="generate-preview" style="margin-top:0.75rem;font-size:0.8125rem;color:var(--color-text-secondary);"></div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal('modal-generate')">Отмена</button>
            <button class="btn btn-generate" onclick="confirmGenerate()">
                <i data-lucide="calendar-plus"></i> Сформировать
            </button>
        </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;

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

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

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

function renderHeader() {
    const p = planData;
    const header = document.getElementById('plan-header');
    const transitions = (GRC_TRANSITIONS.strategic_plan || {})[p.status] || [];
    const canTransition = ['admin', 'manager'].includes(userRole) && transitions.length > 0;
    const canEdit = ['admin', 'manager'].includes(userRole);

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

    if (canEdit && ['approved', 'active'].includes(p.status)) {
        actionBtns += `
            <button class="btn btn-sm btn-generate" onclick="openGenerateModal()">
                <i data-lucide="calendar-plus"></i> Сформировать годовой план
            </button>
        `;
    }

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

    header.innerHTML = `
        <div class="detail-title-row">
            <div>
                <div class="detail-breadcrumb">Стратегический план</div>
                <h2>${escHtml(p.title)}</h2>
                <div class="detail-meta">
                    <span class="status-badge status-${p.status}">${GRC_LABELS[p.status] || p.status}</span>
                    <span class="period-badge">${p.period_start}–${p.period_end}</span>
                    ${p.approved_by ? `<span>Утверждён: ${escHtml(p.approved_by)} · ${p.approved_at_str || ''}</span>` : ''}
                    <span>Автор: ${escHtml(p.created_by || '')}</span>
                </div>
            </div>
        </div>
        ${p.description ? `<p class="detail-desc">${escHtml(p.description)}</p>` : ''}
    `;

    lucide.createIcons();
}

function renderCoverage() {
    const c = planData.coverage;
    const bar = document.getElementById('coverage-bar');
    bar.style.display = '';

    bar.innerHTML = `
        <div class="coverage-header">
            <span class="coverage-title">Покрытие аудиторской вселенной</span>
            <span class="coverage-pct">${c.covered} из ${c.total} (${c.pct}%)</span>
        </div>
        <div class="coverage-track">
            <div class="coverage-fill" style="width:${c.pct}%"></div>
        </div>
        <div class="coverage-detail">
            ${Object.entries(planData.year_stats).map(([year, s]) =>
                `<span>${year}: ${s.count} объектов</span>`
            ).join('')}
        </div>
    `;
}

function renderMatrix() {
    const p = planData;
    const years = [];
    for (let y = p.period_start; y <= p.period_end; y++) years.push(y);

    // Build assignment lookup: { objectId: { year: itemData } }
    const assignments = {};
    for (const item of p.items) {
        if (!assignments[item.audit_object_id]) assignments[item.audit_object_id] = {};
        assignments[item.audit_object_id][item.planned_year] = item;
    }

    const canEdit = ['admin', 'manager'].includes(userRole) &&
                    ['draft', 'under_review'].includes(p.status);

    // Thead
    const thead = document.getElementById('matrix-thead');
    thead.innerHTML = `
        <tr>
            <th style="text-align:left">Объект аудита</th>
            <th>Отдел</th>
            <th>Риск</th>
            ${years.map(y => {
                const count = (p.year_stats[y] || {}).count || 0;
                return `<th>${y}<br><span class="year-col-stats">${count} объектов</span></th>`;
            }).join('')}
        </tr>
    `;

    // Tbody — group by division
    const tbody = document.getElementById('matrix-tbody');
    const objects = p.all_objects || [];

    if (!objects.length) {
        tbody.innerHTML = `<tr><td colspan="${3 + years.length}" class="empty-state">
            Нет объектов в аудиторской вселенной. <a href="/workflows/universe">Создайте объекты</a>.
        </td></tr>`;
        return;
    }

    // Group objects by division
    const divOrder = ['ОСА', 'ОАКБ', 'ОАРБ', 'ОАИБ', 'ОВЦБ', ''];
    const byDiv = {};
    for (const obj of objects) {
        const div = obj.audit_division || '';
        if (!byDiv[div]) byDiv[div] = [];
        byDiv[div].push(obj);
    }

    let html = '';
    for (const div of divOrder) {
        const group = byDiv[div];
        if (!group || !group.length) continue;

        const divLabel = DIVISION_LABELS[div] || div || 'Без отдела';
        html += `<tr class="matrix-division-header"><td colspan="${3 + years.length}">${divLabel} (${group.length})</td></tr>`;

        for (const obj of group) {
            const objAssign = assignments[obj.id] || {};
            const composite = parseFloat(obj.composite_score) || 0;

            const yearCells = years.map(y => {
                const assigned = !!objAssign[y];
                if (canEdit) {
                    return `
                        <td class="matrix-year-cell">
                            <button class="matrix-toggle ${assigned ? 'assigned' : ''}"
                                    onclick="toggleAssignment(${obj.id}, ${y})"
                                    title="${assigned ? 'Убрать из плана' : 'Добавить в план'}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                     fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                                    <polyline points="20 6 9 17 4 12"></polyline>
                                </svg>
                            </button>
                        </td>
                    `;
                } else {
                    return `
                        <td class="matrix-year-cell">
                            ${assigned ?
                                `<span class="risk-badge risk-${objAssign[y].priority || obj.risk_level}" style="font-size:0.6875rem">
                                    ✓ ${objAssign[y].quarter || ''}
                                </span>` :
                                '<span style="color:#cbd5e1">—</span>'
                            }
                        </td>
                    `;
                }
            }).join('');

            html += `
                <tr class="matrix-row-${obj.risk_level}">
                    <td>
                        <div class="matrix-object-cell">
                            <div>
                                <div class="matrix-object-name" title="${escHtml(obj.name)}">
                                    ${escHtml(obj.name)}
                                    ${obj.regulatory_required ? ' <span class="cbr-badge">ЦБ</span>' : ''}
                                </div>
                                <div class="matrix-object-score">
                                    ${renderCategoryBadge(obj.category)}
                                    ${renderFrequency(obj.audit_frequency)}
                                </div>
                            </div>
                        </div>
                    </td>
                    <td style="text-align:center">${renderDivisionBadge(obj.audit_division)}</td>
                    <td style="text-align:center">
                        ${renderRiskBadge(obj.risk_level)}
                        <div style="font-size:0.6875rem;color:#94a3b8;margin-top:2px">${composite.toFixed(2)}</div>
                    </td>
                    ${yearCells}
                </tr>
            `;
        }
    }

    tbody.innerHTML = html;
}

// ── Toggle Matrix Cell ────────────────────────────

async function toggleAssignment(objectId, year) {
    try {
        const resp = await fetch(`/api/grc/strategic-plans/${planId}/items`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ audit_object_id: objectId, planned_year: year })
        });
        if (resp.ok) {
            await loadPlan();
        } else {
            const r = await resp.json();
            alert(r.detail || 'Ошибка');
        }
    } catch(e) { alert('Ошибка сети'); }
}

// ── Status Transition ─────────────────────────────

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

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

// ── Generate Annual Plan ──────────────────────────

function openGenerateModal() {
    const sel = document.getElementById('generate-year');
    sel.innerHTML = '';
    for (let y = planData.period_start; y <= planData.period_end; y++) {
        const count = (planData.year_stats[y] || {}).count || 0;
        sel.innerHTML += `<option value="${y}">${y} (${count} объектов)</option>`;
    }
    sel.onchange = updateGeneratePreview;
    updateGeneratePreview();
    openModal('modal-generate');
    lucide.createIcons();
}

function updateGeneratePreview() {
    const year = parseInt(document.getElementById('generate-year').value);
    const stats = planData.year_stats[year] || { count: 0 };
    const preview = document.getElementById('generate-preview');
    if (stats.count === 0) {
        preview.innerHTML = '⚠️ На этот год нет назначенных объектов. Сначала назначьте объекты в матрице.';
    } else {
        preview.innerHTML = `Будет создан годовой план «Годовой план аудита ${year}» с ${stats.count} проверками.`;
    }
}

async function confirmGenerate() {
    const year = parseInt(document.getElementById('generate-year').value);
    const stats = planData.year_stats[year] || { count: 0 };
    if (stats.count === 0) {
        alert('На этот год нет назначенных объектов');
        return;
    }

    try {
        const resp = await fetch(`/api/grc/strategic-plans/${planId}/generate-annual`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ year: year })
        });
        if (resp.ok) {
            const result = await resp.json();
            closeModal('modal-generate');
            alert(`Годовой план создан!\nПроверок: ${result.engagements_created}\nID плана: ${result.annual_plan_id}`);
            window.location = `/workflows/plans/${result.annual_plan_id}`;
        } else {
            const r = await resp.json();
            alert(r.detail || 'Ошибка генерации');
        }
    } catch(e) { alert('Ошибка сети'); }
}
</script>
{% endblock %}