{% extends "base.html" %}

{% block title %}Дашборды - DataAudit Platform{% endblock %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', path='/css/bi.css') }}">



<div class="page-content">
    <nav class="bi-tabs">
        <a href="/analytics" class="bi-tab"><i data-lucide="home"></i> Обзор</a>
        <a href="/analytics/sql" class="bi-tab"><i data-lucide="terminal"></i> SQL Лаборатория</a>
        <a href="/analytics/charts" class="bi-tab"><i data-lucide="bar-chart-2"></i> Графики</a>
        <a href="/analytics/dashboards" class="bi-tab active"><i data-lucide="layout-dashboard"></i> Дашборды</a>
        {% if user and user.role.value in ('admin', 'manager') %}
        <a href="/analytics/datasources" class="bi-tab"><i data-lucide="database"></i> Источники</a>
        {% endif %}
    </nav>

    <div class="bi-toolbar">
        <div class="bi-toolbar-left">
            <span id="dash-count" style="font-size:14px;color:var(--color-text-secondary);"></span>
        </div>
        <div class="bi-toolbar-right">
            <button class="btn btn-primary btn-small" onclick="openCreateModal()">
                <i data-lucide="plus" style="width:14px;height:14px;"></i> Новый дашборд
            </button>
        </div>
    </div>

    <div id="dashboards-grid" class="bi-cards-grid">
        <div class="bi-empty-state" style="grid-column:1/-1">
            <i data-lucide="layout-dashboard"></i>
            <p>Нет дашбордов</p>
            <span>Создайте первый дашборд</span>
        </div>
    </div>
</div>

<!-- Create Dashboard Modal -->
<div id="create-modal" class="modal" style="display:none;">
    <div class="modal-overlay" onclick="closeCreateModal()"></div>
    <div class="modal-content modal-small">
        <div class="modal-header">
            <h2>Новый дашборд</h2>
            <button class="modal-close" onclick="closeCreateModal()">
                <i data-lucide="x" style="width:20px;height:20px;"></i>
            </button>
        </div>
        <div class="modal-body">
            <div class="bi-form-group">
                <label>Название</label>
                <input type="text" id="cd-title" placeholder="Мой дашборд">
            </div>
            <div class="bi-form-group">
                <label>Описание</label>
                <textarea id="cd-description" rows="2"></textarea>
            </div>
            <div class="bi-form-group">
                <div class="checkbox-row">
                    <input type="checkbox" id="cd-published"> <label for="cd-published">Опубликовать</label>
                </div>
            </div>
        </div>
        <div class="modal-actions">
            <button class="btn btn-secondary" onclick="closeCreateModal()">Отмена</button>
            <button class="btn btn-primary" onclick="createDashboard()">Создать</button>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', path='/js/bi.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', async function() {
    lucide.createIcons();
    try {
        const dashboards = await DAP_BI.loadDashboards();
        document.getElementById('dash-count').textContent = `${dashboards.length} дашбордов`;
        if (dashboards.length === 0) return;

        document.getElementById('dashboards-grid').innerHTML = dashboards.map(d => `
            <div class="bi-card">
                <div class="bi-card-header">
                    <div class="bi-card-icon"><i data-lucide="layout-dashboard"></i></div>
                    <div class="bi-card-title">
                        <h3>${DAP_BI._esc(d.title)}</h3>
                        <div class="bi-card-meta">
                            ${d.published ? '<span class="bi-badge published">Опубликован</span>' : '<span class="bi-badge draft">Черновик</span>'}
                            <span>${d.chart_count || 0} графиков</span>
                            <span>${DAP_BI.formatDate(d.updated_at)}</span>
                        </div>
                    </div>
                </div>
                ${d.description ? `<div class="bi-card-description">${DAP_BI._esc(d.description)}</div>` : ''}
                <div class="bi-card-actions">
                    <a href="/analytics/dashboards/${d.id}" class="btn btn-small btn-primary">Открыть</a>
                    <button class="btn btn-small btn-danger" onclick="delDash(${d.id})">
                        <i data-lucide="trash-2" style="width:14px;height:14px;"></i>
                    </button>
                </div>
            </div>
        `).join('');
        lucide.createIcons();
    } catch (err) {
        document.getElementById('dashboards-grid').innerHTML = `<div class="bi-error-msg">${DAP_BI._esc(err.message)}</div>`;
    }
});

function openCreateModal() { document.getElementById('create-modal').style.display = 'flex'; lucide.createIcons(); }
function closeCreateModal() { document.getElementById('create-modal').style.display = 'none'; }

async function createDashboard() {
    const title = document.getElementById('cd-title').value.trim();
    if (!title) { alert('Введите название'); return; }
    try {
        const d = await DAP_BI.saveDashboard({
            title: title,
            description: document.getElementById('cd-description').value,
            published: document.getElementById('cd-published').checked,
        });
        window.location.href = `/analytics/dashboards/${d.id}`;
    } catch (err) { alert('Ошибка: ' + err.message); }
}

async function delDash(id) {
    if (!confirm('Удалить дашборд?')) return;
    try { await DAP_BI.deleteDashboard(id); location.reload(); }
    catch (err) { alert('Ошибка: ' + err.message); }
}
</script>
{% endblock %}