{% extends "base.html" %}

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

{% block content %}
<div class="page-header">
    <h1>BI Аналитика</h1>
</div>

<div class="page-content">
    <!-- Top Actions -->
    <div class="bi-actions">
        <a href="http://127.0.0.1:8088" target="_blank" class="btn btn-primary">
            <i data-lucide="external-link"></i>
            Открыть DAP BI
        </a>
    </div>

    <!-- My Dashboards Section -->
    <div class="bi-section">
        <div class="bi-section-header">
            <h2>Мои дашборды</h2>
            <button class="btn btn-secondary" onclick="openAddModal()">
                <i data-lucide="plus"></i>
                Добавить
            </button>
        </div>

        <div id="dashboards-grid" class="dashboards-grid">
            <!-- Loaded via JS -->
        </div>

        <div id="empty-state" class="empty-state" style="display: none;">
            <i data-lucide="layout-dashboard"></i>
            <p>Нет добавленных дашбордов</p>
            <span>Нажмите «Добавить» чтобы выбрать дашборды из DAP BI</span>
        </div>
    </div>
</div>

<!-- Add Dashboard Modal -->
<div id="add-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Добавить дашборд</h3>
            <button class="modal-close" onclick="closeAddModal()">
                <i data-lucide="x"></i>
            </button>
        </div>
        <div class="modal-body">
            <p class="modal-hint">Дашборды загружаются из DAP BI. Создайте дашборды в DAP BI, чтобы добавить их сюда.</p>
            <div id="available-dashboards">
                <p class="text-muted">Нет доступных дашбордов</p>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeAddModal()">Закрыть</button>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    // Load user's dashboards on page load
    async function loadMyDashboards() {
        try {
            const response = await fetch('/api/bi/my-dashboards');
            const dashboards = await response.json();
            
            const grid = document.getElementById('dashboards-grid');
            const empty = document.getElementById('empty-state');
            
            if (dashboards.length === 0) {
                grid.style.display = 'none';
                empty.style.display = 'flex';
                return;
            }
            
            grid.style.display = 'grid';
            empty.style.display = 'none';
            
            grid.innerHTML = dashboards.map(d => `
                <div class="dashboard-card">
                    <div class="dashboard-icon">
                        <i data-lucide="bar-chart-2"></i>
                    </div>
                    <h3 class="dashboard-title">${d.dashboard_title}</h3>
                    <div class="dashboard-actions">
                        <a href="http://127.0.0.1:8088/superset/dashboard/${d.dashboard_id}/" 
                           target="_blank" class="btn btn-small btn-primary">
                            Открыть
                        </a>
                        <button class="btn btn-small btn-danger" onclick="removeDashboard(${d.dashboard_id})">
                            Убрать
                        </button>
                    </div>
                </div>
            `).join('');
            
            lucide.createIcons();
        } catch (err) {
            console.error('Error loading dashboards:', err);
        }
    }
    
    async function removeDashboard(dashboardId) {
        try {
            await fetch(`/api/bi/my-dashboards/${dashboardId}`, { method: 'DELETE' });
            loadMyDashboards();
        } catch (err) {
            console.error('Error removing dashboard:', err);
        }
    }
    
    async function loadAvailableDashboards() {
        const container = document.getElementById('available-dashboards');
        container.innerHTML = '<p class="text-muted">Загрузка...</p>';
        
        try {
            const [availableRes, myRes] = await Promise.all([
                fetch('/api/bi/dashboards'),
                fetch('/api/bi/my-dashboards')
            ]);
            
            const available = await availableRes.json();
            const my = await myRes.json();
            const myIds = new Set(my.map(d => d.dashboard_id));
            
            // Filter out already added
            const toShow = available.filter(d => !myIds.has(d.id));
            
            if (toShow.length === 0) {
                container.innerHTML = '<p class="text-muted">Все дашборды уже добавлены или нет доступных дашбордов в DAP BI</p>';
                return;
            }
            
            container.innerHTML = toShow.map(d => `
                <div class="available-dashboard-item">
                    <span class="available-dashboard-title">${d.title}</span>
                    <button class="btn btn-small btn-primary" onclick="addDashboard(${d.id}, '${d.title.replace(/'/g, "\\'")}')">
                        Добавить
                    </button>
                </div>
            `).join('');
            
        } catch (err) {
            console.error('Error loading available dashboards:', err);
            container.innerHTML = '<p class="text-muted">Ошибка загрузки дашбордов</p>';
        }
    }
    
    async function addDashboard(id, title) {
        try {
            const response = await fetch('/api/bi/my-dashboards', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ dashboard_id: id, dashboard_title: title })
            });
            
            if (response.ok) {
                closeAddModal();
                loadMyDashboards();
            } else {
                const data = await response.json();
                alert(data.detail || 'Ошибка добавления');
            }
        } catch (err) {
            console.error('Error adding dashboard:', err);
        }
    }
    
    function openAddModal() {
        document.getElementById('add-modal').style.display = 'flex';
        loadAvailableDashboards();
    }
    
    function closeAddModal() {
        document.getElementById('add-modal').style.display = 'none';
    }
    
    // Close modal on outside click
    document.getElementById('add-modal').addEventListener('click', function(e) {
        if (e.target === this) closeAddModal();
    });
    
    // Load on page ready
    document.addEventListener('DOMContentLoaded', loadMyDashboards);
</script>
{% endblock %}