{% extends "base.html" %}

{% block title %}BI Аналитика - DataAudit Platform{% endblock %}

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



<div class="page-content">

    <!-- BI Tabs -->
    <nav class="bi-tabs">
        <a href="/analytics" class="bi-tab active">
            <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">
            <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>

    <!-- Stats Row -->
    <div class="bi-stats-row" id="stats-row">
        <div class="bi-stat-card">
            <div class="bi-stat-icon blue"><i data-lucide="bar-chart-2"></i></div>
            <div>
                <div class="bi-stat-value" id="stat-charts">—</div>
                <div class="bi-stat-label">Графиков</div>
            </div>
        </div>
        <div class="bi-stat-card">
            <div class="bi-stat-icon green"><i data-lucide="layout-dashboard"></i></div>
            <div>
                <div class="bi-stat-value" id="stat-dashboards">—</div>
                <div class="bi-stat-label">Дашбордов</div>
            </div>
        </div>
        <div class="bi-stat-card">
            <div class="bi-stat-icon purple"><i data-lucide="terminal"></i></div>
            <div>
                <div class="bi-stat-value" id="stat-queries">—</div>
                <div class="bi-stat-label">Запросов</div>
            </div>
        </div>
        <div class="bi-stat-card">
            <div class="bi-stat-icon amber"><i data-lucide="database"></i></div>
            <div>
                <div class="bi-stat-value" id="stat-datasources">—</div>
                <div class="bi-stat-label">Источников</div>
            </div>
        </div>
    </div>

    <!-- Recent Charts -->
    <div class="bi-section">
        <div class="bi-section-header">
            <h2>Последние графики</h2>
            <a href="/analytics/charts" class="btn btn-secondary btn-small">Все графики</a>
        </div>
        <div id="recent-charts" class="bi-cards-grid">
            <div class="bi-empty-state" style="grid-column:1/-1">
                <i data-lucide="bar-chart-2"></i>
                <p>Нет графиков</p>
                <span>Создайте первый график в <a href="/analytics/sql">SQL Лаборатории</a></span>
            </div>
        </div>
    </div>

    <!-- Recent Dashboards -->
    <div class="bi-section">
        <div class="bi-section-header">
            <h2>Последние дашборды</h2>
            <a href="/analytics/dashboards" class="btn btn-secondary btn-small">Все дашборды</a>
        </div>
        <div id="recent-dashboards" class="bi-cards-grid">
            <div class="bi-empty-state" style="grid-column:1/-1">
                <i data-lucide="layout-dashboard"></i>
                <p>Нет дашбордов</p>
                <span>Создайте дашборд на <a href="/analytics/dashboards">соответствующей странице</a></span>
            </div>
        </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 [charts, dashboards, queries, datasources] = await Promise.all([
            DAP_BI.loadCharts().catch(() => []),
            DAP_BI.loadDashboards().catch(() => []),
            DAP_BI.loadQueries().catch(() => []),
            DAP_BI.loadDatasources().catch(() => []),
        ]);

        document.getElementById('stat-charts').textContent = charts.length;
        document.getElementById('stat-dashboards').textContent = dashboards.length;
        document.getElementById('stat-queries').textContent = queries.length;
        document.getElementById('stat-datasources').textContent = datasources.length;

        // Render recent charts (top 3)
        if (charts.length > 0) {
            const container = document.getElementById('recent-charts');
            container.innerHTML = charts.slice(0, 3).map(c => `
                <div class="bi-card">
                    <div class="bi-card-header">
                        <div class="bi-card-icon"><i data-lucide="bar-chart-2"></i></div>
                        <div class="bi-card-title">
                            <h3>${DAP_BI._esc(c.title)}</h3>
                            <div class="bi-card-meta">
                                <span class="bi-badge ${c.chart_type}">${c.chart_type}</span>
                                <span>${DAP_BI.formatDate(c.updated_at)}</span>
                            </div>
                        </div>
                    </div>
                    <div class="bi-card-actions">
                        <a href="/analytics/charts/${c.id}/edit" class="btn btn-small btn-secondary">Открыть</a>
                        <a href="/analytics/sql" class="btn btn-small btn-primary">SQL</a>
                    </div>
                </div>
            `).join('');
            lucide.createIcons();
        }

        // Render recent dashboards (top 3)
        if (dashboards.length > 0) {
            const container = document.getElementById('recent-dashboards');
            container.innerHTML = dashboards.slice(0, 3).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>${DAP_BI.formatDate(d.updated_at)}</span>
                            </div>
                        </div>
                    </div>
                    <div class="bi-card-actions">
                        <a href="/analytics/dashboards/${d.id}" class="btn btn-small btn-primary">Открыть</a>
                    </div>
                </div>
            `).join('');
            lucide.createIcons();
        }
    } catch (err) {
        console.error('BI overview load error:', err);
    }
});
</script>
{% endblock %}