{% 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 active"><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>

    <div class="bi-toolbar">
        <div class="bi-toolbar-left">
            <span id="charts-count" style="font-size:14px;color:var(--color-text-secondary);"></span>
        </div>
        <div class="bi-toolbar-right">
            <a href="/analytics/sql" class="btn btn-primary btn-small">
                <i data-lucide="plus" style="width:14px;height:14px;"></i> Новый график
            </a>
        </div>
    </div>

    <div id="charts-grid" 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>
{% endblock %}

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

        document.getElementById('charts-grid').innerHTML = charts.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._esc(c.datasource_name || '—')}</span>
                            <span>${DAP_BI.formatDate(c.updated_at)}</span>
                        </div>
                    </div>
                </div>
                ${c.description ? `<div class="bi-card-description">${DAP_BI._esc(c.description)}</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>
                    <button class="btn btn-small btn-danger" onclick="delChart(${c.id})">
                        <i data-lucide="trash-2" style="width:14px;height:14px;"></i>
                    </button>
                </div>
            </div>
        `).join('');
        lucide.createIcons();
    } catch (err) {
        document.getElementById('charts-grid').innerHTML = `<div class="bi-error-msg">${DAP_BI._esc(err.message)}</div>`;
    }
});

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