{% extends "base.html" %}

{% block title %}GRC система управления процессами - DataAudit Platform{% endblock %}

{% block content %}
<div class="page-header">
    <h1>GRC система управления процессами</h1>
</div>

<div class="page-content">
    <!-- Stats Dashboard -->
    <div class="workflow-stats" id="workflow-stats">
        <div class="stats-grid">
            <div class="stat-card" id="stat-my-tasks" style="display: none;">
                <div class="stat-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 11l3 3L22 4"></path>
                        <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                    </svg>
                </div>
                <div class="stat-content">
                    <div class="stat-value" id="my-tasks-value">—</div>
                    <div class="stat-label">Мои задачи</div>
                </div>
            </div>
            
            <div class="stat-card" id="stat-group-tasks" style="display: none;">
                <div class="stat-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                        <circle cx="9" cy="7" r="4"></circle>
                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    </svg>
                </div>
                <div class="stat-content">
                    <div class="stat-value" id="group-tasks-value">—</div>
                    <div class="stat-label">Задачи группы</div>
                </div>
            </div>
            
            <div class="stat-card" id="stat-active-processes" style="display: none;">
                <div class="stat-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
                    </svg>
                </div>
                <div class="stat-content">
                    <div class="stat-value" id="active-processes-value">—</div>
                    <div class="stat-label">Активных процессов</div>
                </div>
            </div>
            
            <div class="stat-card" id="stat-completed-today">
                <div class="stat-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"></circle>
                        <polyline points="12 6 12 12 16 14"></polyline>
                    </svg>
                </div>
                <div class="stat-content">
                    <div class="stat-value" id="completed-today-value">—</div>
                    <div class="stat-label">Завершено сегодня</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Apps Section -->
    <div class="workflow-apps">
        <h2 class="section-title">Приложения</h2>
        <div class="home-cards-grid" id="apps-grid">
            <!-- Apps will be loaded dynamically -->
            <div class="loading-placeholder">
                <p>Загрузка приложений...</p>
            </div>
        </div>
    </div>
    
    <!-- Footer Section - Quick Links & System Info -->
    <div class="workflow-footer-section">
        <div class="footer-grid">
            <!-- Quick Links -->
            <div class="footer-card">
                <div class="footer-card-header">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                    </svg>
                    <span>Быстрые ссылки</span>
                </div>
                <div class="footer-card-content">
                    <ul class="quick-links-list">
                        <li><a href="/">Документация</a></li>
                        <li><a href="/">Регламенты GRC</a></li>
                        <li><a href="/">База знаний</a></li>
                        <li><a href="/">Поддержка</a></li>
                    </ul>
                </div>
            </div>
            
            <!-- System Info -->
            <div class="footer-card">
                <div class="footer-card-header">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="12" y1="16" x2="12" y2="12"></line>
                        <line x1="12" y1="8" x2="12.01" y2="8"></line>
                    </svg>
                    <span>Информация о системе</span>
                </div>
                <div class="footer-card-content">
                    <div class="system-info-grid">
                        <div class="info-row">
                            <span class="info-label">Версия платформы</span>
                            <span class="info-value">1.0.0</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">Статус</span>
                            <span class="info-value status-online">
                                <span class="status-dot"></span>
                                Онлайн
                            </span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">Ваша роль</span>
                            <span class="info-value" id="user-role-display">{{ user.role_display if user else '—' }}</span>
                        </div>
                        <div class="info-row">
                            <span class="info-label">Движок</span>
                            <span class="info-value">Camunda 7.21</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Stats Grid */
.workflow-stats {
    margin-bottom: 48px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

.stat-card {
    background-color: #f8fafc;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
}

.stat-card:hover {
    box-shadow: 0 4px 12px var(--color-shadow-md);
    border-color: var(--color-primary-light);
}

.stat-icon {
    width: 48px;
    height: 48px;
    background-color: #dbeafe;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}

.stat-label {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

/* Apps Section */
.workflow-apps {
    margin-top: 32px;
}

.section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 24px;
}

.loading-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px;
    color: var(--color-text-secondary);
}

/* App Card Icons */
.card-icon svg {
    width: 28px;
    height: 28px;
}

.card-icon.icon-tasks {
    background-color: #dbeafe;
}
.card-icon.icon-tasks svg {
    color: #1e40af;
}

.card-icon.icon-dashboard {
    background-color: #fef3c7;
}
.card-icon.icon-dashboard svg {
    color: #d97706;
}

.card-icon.icon-settings {
    background-color: #f3e8ff;
}
.card-icon.icon-settings svg {
    color: #7c3aed;
}

.home-card:hover .card-icon.icon-tasks {
    background-color: #1e40af;
}
.home-card:hover .card-icon.icon-tasks svg {
    color: #ffffff;
}

.home-card:hover .card-icon.icon-dashboard {
    background-color: #d97706;
}
.home-card:hover .card-icon.icon-dashboard svg {
    color: #ffffff;
}

.home-card:hover .card-icon.icon-settings {
    background-color: #7c3aed;
}
.home-card:hover .card-icon.icon-settings svg {
    color: #ffffff;
}

/* Footer Section */
.workflow-footer-section {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--color-border);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

.footer-card {
    background-color: #f8fafc;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.footer-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    background-color: #f1f5f9;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
}

.footer-card-header svg {
    color: var(--color-primary);
}

.footer-card-content {
    padding: 20px;
}

/* Quick Links */
.quick-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.quick-links-list li {
    margin-bottom: 12px;
}

.quick-links-list li:last-child {
    margin-bottom: 0;
}

.quick-links-list a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

.quick-links-list a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.quick-links-list a::before {
    content: '→';
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* System Info */
.system-info-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.info-label {
    color: var(--color-text-secondary);
}

.info-value {
    color: var(--color-text);
    font-weight: 500;
}

.status-online {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #059669;
}

.status-dot {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    loadStats();
    loadApps();
});

async function loadStats() {
    try {
        const response = await fetch('/api/workflows/stats');
        const data = await response.json();
        
        if (data.error) {
            console.error('Stats error:', data.error);
            return;
        }
        
        // Show/update stats based on role
        const role = data.role;
        
        // My tasks - all except auditor
        if (role !== 'auditor') {
            document.getElementById('stat-my-tasks').style.display = 'flex';
            document.getElementById('my-tasks-value').textContent = data.my_tasks;
            
            document.getElementById('stat-group-tasks').style.display = 'flex';
            document.getElementById('group-tasks-value').textContent = data.group_tasks;
        }
        
        // Active processes - admin, manager, auditor
        if (['admin', 'manager', 'auditor'].includes(role)) {
            document.getElementById('stat-active-processes').style.display = 'flex';
            document.getElementById('active-processes-value').textContent = data.active_processes;
        }
        
        // Completed today - all
        document.getElementById('completed-today-value').textContent = data.completed_today;
        
        // Update role display
        const roleNames = {
            'admin': 'Администратор',
            'manager': 'Руководитель',
            'auditor': 'Аудитор',
            'viewer': 'Пользователь'
        };
        document.getElementById('user-role-display').textContent = roleNames[role] || role;
        
    } catch (error) {
        console.error('Failed to load stats:', error);
    }
}

async function loadApps() {
    const grid = document.getElementById('apps-grid');
    
    try {
        const response = await fetch('/api/workflows/apps');
        const data = await response.json();
        
        if (data.error) {
            grid.innerHTML = '<div class="loading-placeholder"><p>Ошибка загрузки приложений</p></div>';
            return;
        }
        
        if (data.apps.length === 0) {
            grid.innerHTML = '<div class="loading-placeholder"><p>Нет доступных приложений</p></div>';
            return;
        }
        
        const icons = {
            tasks: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9 11l3 3L22 4"></path>
                <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
            </svg>`,
            dashboard: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="3" width="7" height="7"></rect>
                <rect x="14" y="3" width="7" height="7"></rect>
                <rect x="14" y="14" width="7" height="7"></rect>
                <rect x="3" y="14" width="7" height="7"></rect>
            </svg>`,
            settings: `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="3"></circle>
                <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
            </svg>`
        };
        
        grid.innerHTML = data.apps.map(app => `
            <a href="${app.url}" target="_blank" class="home-card">
                <div class="card-icon icon-${app.icon}">
                    ${icons[app.icon] || icons.tasks}
                </div>
                <div class="card-title">${app.name}</div>
                <div class="card-description">${app.description}</div>
            </a>
        `).join('');
        
    } catch (error) {
        console.error('Failed to load apps:', error);
        grid.innerHTML = '<div class="loading-placeholder"><p>Ошибка загрузки приложений</p></div>';
    }
}
</script>
{% endblock %}