{% extends "base.html" %}

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

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

<div class="page-header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;">
    <div>
        <h1 id="dash-title">Дашборд</h1>
        <div id="dash-meta" style="font-size:13px;color:var(--color-text-secondary);margin-top:4px;"></div>
    </div>
    <div style="display:flex;gap:8px;">
        <a href="/analytics/dashboards" class="btn btn-secondary btn-small">
            <i data-lucide="arrow-left" style="width:14px;height:14px;"></i> Назад
        </a>
        <button class="btn btn-secondary btn-small" onclick="openAddChartModal()">
            <i data-lucide="plus" style="width:14px;height:14px;"></i> Добавить график
        </button>
        <button class="btn btn-secondary btn-small" onclick="openEditModal()">
            <i data-lucide="settings" style="width:14px;height:14px;"></i>
        </button>
        <button class="btn btn-primary btn-small" onclick="refreshAll()">
            <i data-lucide="refresh-cw" style="width:14px;height:14px;"></i> Обновить
        </button>
    </div>
</div>

<div class="page-content">
    <div id="dashboard-container">
        <div style="text-align:center;padding:48px;">
            <div class="bi-spinner bi-spinner-lg"></div>
            <p style="margin-top:16px;color:var(--color-text-secondary);">Загрузка дашборда...</p>
        </div>
    </div>
</div>

<!-- Add Chart Modal -->
<div id="add-chart-modal" class="modal" style="display:none;">
    <div class="modal-overlay" onclick="closeAddChartModal()"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h2>Добавить график</h2>
            <button class="modal-close" onclick="closeAddChartModal()">
                <i data-lucide="x" style="width:20px;height:20px;"></i>
            </button>
        </div>
        <div class="modal-body" id="available-charts-list">
            <div class="bi-spinner"></div>
        </div>
    </div>
</div>

<!-- Edit Dashboard Modal -->
<div id="edit-modal" class="modal" style="display:none;">
    <div class="modal-overlay" onclick="closeEditModal()"></div>
    <div class="modal-content modal-small">
        <div class="modal-header">
            <h2>Настройки дашборда</h2>
            <button class="modal-close" onclick="closeEditModal()">
                <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="ed-title">
            </div>
            <div class="bi-form-group">
                <label>Описание</label>
                <textarea id="ed-description" rows="2"></textarea>
            </div>
            <div class="bi-form-group">
                <div class="checkbox-row">
                    <input type="checkbox" id="ed-published"> <label for="ed-published">Опубликовать</label>
                </div>
            </div>
        </div>
        <div class="modal-actions" style="justify-content:space-between;">
            <button class="btn btn-danger btn-small" onclick="delDashboard()">
                <i data-lucide="trash-2" style="width:14px;height:14px;"></i> Удалить
            </button>
            <div style="display:flex;gap:8px;">
                <button class="btn btn-secondary" onclick="closeEditModal()">Отмена</button>
                <button class="btn btn-primary" onclick="saveSettings()">Сохранить</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script src="{{ url_for('static', path='/js/bi.js') }}"></script>
<script>
const dashboardId = {{ dashboard_id }};
let _dash = null;

document.addEventListener('DOMContentLoaded', async function() {
    lucide.createIcons();
    await refreshAll();
});

async function refreshAll() {
    try {
        _dash = await DAP_BI.getDashboard(dashboardId);
        document.getElementById('dash-title').textContent = _dash.title || 'Дашборд';

        const meta = [];
        if (_dash.charts) meta.push(`${_dash.charts.length} графиков`);
        meta.push(_dash.published ? 'Опубликован' : 'Черновик');
        if (_dash.created_by) meta.push(_dash.created_by);
        document.getElementById('dash-meta').textContent = meta.join(' · ');

        // Fill edit form
        document.getElementById('ed-title').value = _dash.title || '';
        document.getElementById('ed-description').value = _dash.description || '';
        document.getElementById('ed-published').checked = _dash.published;

        // Render dashboard
        const container = document.getElementById('dashboard-container');
        await DAP_BI.renderDashboard(container, _dash);
        lucide.createIcons();
    } catch (err) {
        document.getElementById('dashboard-container').innerHTML = `<div class="bi-error-msg">${DAP_BI._esc(err.message)}</div>`;
    }
}

/* Add Chart */
function openAddChartModal() {
    document.getElementById('add-chart-modal').style.display = 'flex';
    loadAvailableCharts();
    lucide.createIcons();
}
function closeAddChartModal() { document.getElementById('add-chart-modal').style.display = 'none'; }

async function loadAvailableCharts() {
    const container = document.getElementById('available-charts-list');
    container.innerHTML = '<div class="bi-spinner"></div>';
    try {
        const charts = await DAP_BI.loadCharts();
        const existingIds = new Set((_dash.charts || []).map(c => c.chart_id || c.id));
        const available = charts.filter(c => !existingIds.has(c.id));

        if (available.length === 0) {
            container.innerHTML = '<div class="bi-empty-state"><p>Нет доступных графиков</p><span>Все графики уже на дашборде или <a href="/analytics/sql">создайте новый</a></span></div>';
            return;
        }

        container.innerHTML = available.map(c => `
            <div class="bi-query-item" onclick="addChart(${c.id})" style="cursor:pointer;">
                <div class="bi-query-item-info">
                    <h4>${DAP_BI._esc(c.title)}</h4>
                    <span><span class="bi-badge ${c.chart_type}">${c.chart_type}</span> · ${DAP_BI._esc(c.datasource_name || '—')}</span>
                </div>
            </div>
        `).join('');
    } catch (err) {
        container.innerHTML = `<div class="bi-error-msg">${DAP_BI._esc(err.message)}</div>`;
    }
}

async function addChart(chartId) {
    try {
        const existing = _dash.charts ? _dash.charts.length : 0;
        const pos_x = (existing % 2) * 6;
        await DAP_BI.addChartToDashboard(dashboardId, chartId, { width: 6, height: 1, pos_x: pos_x, pos_y: 0 });
        closeAddChartModal();
        await refreshAll();
    } catch (err) { alert('Ошибка: ' + err.message); }
}

/* Edit Settings */
function openEditModal() { document.getElementById('edit-modal').style.display = 'flex'; lucide.createIcons(); }
function closeEditModal() { document.getElementById('edit-modal').style.display = 'none'; }

async function saveSettings() {
    try {
        await DAP_BI.saveDashboard({
            id: dashboardId,
            title: document.getElementById('ed-title').value.trim(),
            description: document.getElementById('ed-description').value,
            published: document.getElementById('ed-published').checked,
        });
        closeEditModal();
        await refreshAll();
    } catch (err) { alert('Ошибка: ' + err.message); }
}

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