{% 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" class="btn-back"><i data-lucide="arrow-left"></i> GRC Процессы</a>
        <div class="toolbar-actions">
            <button class="btn btn-sm btn-outline" onclick="markAllRead()">
                <i data-lucide="check-check"></i> Прочитать все
            </button>
        </div>
    </div>

    <div class="grc-filters">
        <div class="filter-group">
            <label>
                <input type="checkbox" id="filter-unread" checked onchange="loadNotifications()"> Только непрочитанные
            </label>
        </div>
    </div>

    <div class="notifications-list" id="notifications-list">
        <div class="stats-loading">Загрузка...</div>
    </div>
</div>

<script src="{{ url_for('static', path='/js/grc.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', loadNotifications);

async function loadNotifications() {
    const unreadOnly = document.getElementById('filter-unread').checked;
    try {
        const resp = await fetch(`/api/grc/notifications?unread_only=${unreadOnly}&limit=100`);
        const notifications = await resp.json();
        renderNotifications(notifications);
    } catch(e) {
        document.getElementById('notifications-list').innerHTML = '<div class="empty-state">Ошибка загрузки</div>';
    }
}

function renderNotifications(notifications) {
    const container = document.getElementById('notifications-list');
    if (!notifications.length) {
        container.innerHTML = '<div class="empty-state">Нет уведомлений</div>';
        return;
    }

    const typeIcons = {
        task_assigned: 'clipboard', reassignment: 'user-check',
        deadline_7d: 'clock', deadline_1d: 'alert-circle',
        deadline_today: 'alert-triangle', overdue: 'alert-octagon',
    };
    const typeClasses = {
        overdue: 'notif-danger', deadline_today: 'notif-danger',
        deadline_1d: 'notif-warning', deadline_7d: 'notif-info',
        task_assigned: 'notif-info', reassignment: 'notif-info',
    };

    container.innerHTML = notifications.map(n => {
        const icon = typeIcons[n.notif_type] || 'bell';
        const cls = typeClasses[n.notif_type] || '';
        const time = new Date(n.created_at).toLocaleString('ru-RU');
        const entityLink = n.entity_type && n.entity_id ?
            `/workflows/${n.entity_type === 'remediation' ? 'remediations' : n.entity_type + 's'}/${n.entity_id}` : null;

        return `
            <div class="notification-item ${n.is_read ? 'notif-read' : 'notif-unread'} ${cls}"
                 onclick="handleNotifClick(${n.id}, ${entityLink ? `'${entityLink}'` : 'null'})">
                <div class="notif-icon"><i data-lucide="${icon}"></i></div>
                <div class="notif-body">
                    <div class="notif-title">${escHtml(n.title)}</div>
                    ${n.message ? `<div class="notif-message">${escHtml(n.message)}</div>` : ''}
                    <div class="notif-time">${time}</div>
                </div>
                ${!n.is_read ? '<div class="notif-dot"></div>' : ''}
            </div>`;
    }).join('');
    lucide.createIcons();
}

async function handleNotifClick(id, link) {
    await fetch(`/api/grc/notifications/${id}/read`, {method:'POST'});
    if (link) location.href = link;
    else await loadNotifications();
}

async function markAllRead() {
    await fetch('/api/grc/notifications/read-all', {method:'POST'});
    await loadNotifications();
}
</script>
{% endblock %}