{% 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"><i data-lucide="layout-dashboard"></i> Дашборды</a>
        <a href="/analytics/datasources" class="bi-tab active"><i data-lucide="database"></i> Источники</a>
    </nav>

    <div class="bi-toolbar">
        <div class="bi-toolbar-left">
            <span id="ds-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="openDsModal()">
                <i data-lucide="plus" style="width:14px;height:14px;"></i> Добавить источник
            </button>
        </div>
    </div>

    <div id="ds-grid" class="bi-cards-grid">
        <div class="bi-empty-state" style="grid-column:1/-1">
            <i data-lucide="database"></i>
            <p>Нет источников данных</p>
            <span>Добавьте первое подключение к базе данных</span>
        </div>
    </div>
</div>

<!-- Add/Edit Datasource Modal -->
<div id="ds-modal" class="modal" style="display:none;">
    <div class="modal-overlay" onclick="closeDsModal()"></div>
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="ds-modal-title">Новый источник</h2>
            <button class="modal-close" onclick="closeDsModal()">
                <i data-lucide="x" style="width:20px;height:20px;"></i>
            </button>
        </div>
        <div class="modal-body">
            <input type="hidden" id="ds-edit-id">
            <div class="bi-form-group">
                <label>Название</label>
                <input type="text" id="ds-name" placeholder="Основная БД">
            </div>
            <div class="bi-form-group">
                <label>Движок</label>
                <select id="ds-engine" onchange="onEngineChange()">
                    <option value="postgresql">PostgreSQL</option>
                    <option value="oracle">Oracle</option>
                    <option value="duckdb">DuckDB</option>
                </select>
            </div>

            <!-- Standard connection fields -->
            <div id="std-fields">
                <div style="display:grid;grid-template-columns:1fr 100px;gap:12px;">
                    <div class="bi-form-group">
                        <label>Хост</label>
                        <input type="text" id="ds-host" placeholder="localhost">
                    </div>
                    <div class="bi-form-group">
                        <label>Порт</label>
                        <input type="number" id="ds-port" placeholder="5432">
                    </div>
                </div>
                <div class="bi-form-group">
                    <label>База данных</label>
                    <input type="text" id="ds-database" placeholder="dap_db">
                </div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
                    <div class="bi-form-group">
                        <label>Пользователь</label>
                        <input type="text" id="ds-user" placeholder="dap_admin">
                    </div>
                    <div class="bi-form-group">
                        <label>Пароль</label>
                        <input type="password" id="ds-password" placeholder="********">
                    </div>
                </div>
            </div>

            <!-- Oracle-specific -->
            <div id="oracle-fields" style="display:none;">
                <div class="bi-form-group">
                    <label>Service Name (необязательно)</label>
                    <input type="text" id="ds-service-name" placeholder="ORCL">
                </div>
            </div>

            <!-- DuckDB-specific -->
            <div id="duckdb-fields" style="display:none;">
                <div class="bi-form-group">
                    <label>Путь к файлу (или :memory:)</label>
                    <input type="text" id="ds-path" placeholder=":memory:">
                </div>
            </div>
        </div>
        <div class="modal-actions">
            <button class="btn btn-secondary" onclick="closeDsModal()">Отмена</button>
            <button class="btn btn-primary" onclick="saveDs()">Сохранить</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();
    await loadList();
});

async function loadList() {
    try {
        const ds = await DAP_BI.loadDatasources();
        document.getElementById('ds-count').textContent = `${ds.length} источников`;
        if (ds.length === 0) return;

        document.getElementById('ds-grid').innerHTML = ds.map(d => `
            <div class="bi-card">
                <div class="bi-card-header">
                    <div class="bi-card-icon"><i data-lucide="database"></i></div>
                    <div class="bi-card-title">
                        <h3>${DAP_BI._esc(d.name)}</h3>
                        <div class="bi-card-meta">
                            <span class="bi-engine-badge ${d.engine}">${d.engine}</span>
                            <span>${DAP_BI._esc(d.host || '')}${d.port ? ':' + d.port : ''}/${DAP_BI._esc(d.database_name || '')}</span>
                        </div>
                    </div>
                </div>
                <div class="bi-card-actions">
                    <button class="btn btn-small btn-secondary" onclick="testDs(${d.id})">Тест</button>
                    <button class="btn btn-small btn-secondary" onclick="editDs(${d.id})">
                        <i data-lucide="pencil" style="width:14px;height:14px;"></i>
                    </button>
                    <button class="btn btn-small btn-danger" onclick="delDs(${d.id})">
                        <i data-lucide="trash-2" style="width:14px;height:14px;"></i>
                    </button>
                </div>
            </div>
        `).join('');
        lucide.createIcons();
    } catch (err) {
        document.getElementById('ds-grid').innerHTML = `<div class="bi-error-msg">${DAP_BI._esc(err.message)}</div>`;
    }
}

function onEngineChange() {
    const engine = document.getElementById('ds-engine').value;
    document.getElementById('std-fields').style.display = engine === 'duckdb' ? 'none' : 'block';
    document.getElementById('oracle-fields').style.display = engine === 'oracle' ? 'block' : 'none';
    document.getElementById('duckdb-fields').style.display = engine === 'duckdb' ? 'block' : 'none';

    // Default ports
    if (engine === 'postgresql') document.getElementById('ds-port').placeholder = '5432';
    if (engine === 'oracle') document.getElementById('ds-port').placeholder = '1521';
}

function openDsModal(ds) {
    document.getElementById('ds-modal-title').textContent = ds ? 'Редактировать источник' : 'Новый источник';
    document.getElementById('ds-edit-id').value = ds ? ds.id : '';
    document.getElementById('ds-name').value = ds ? ds.name : '';
    document.getElementById('ds-engine').value = ds ? ds.engine : 'postgresql';
    document.getElementById('ds-host').value = ds ? ds.host || '' : '';
    document.getElementById('ds-port').value = ds ? ds.port || '' : '';
    document.getElementById('ds-database').value = ds ? ds.database_name || '' : '';
    document.getElementById('ds-user').value = ds ? ds.username || '' : '';
    document.getElementById('ds-password').value = '';
    document.getElementById('ds-service-name').value = ds?.extra_params?.service_name || '';
    document.getElementById('ds-path').value = ds?.extra_params?.path || '';
    onEngineChange();
    document.getElementById('ds-modal').style.display = 'flex';
    lucide.createIcons();
}

function closeDsModal() { document.getElementById('ds-modal').style.display = 'none'; }

async function saveDs() {
    const engine = document.getElementById('ds-engine').value;
    const data = {
        name: document.getElementById('ds-name').value.trim(),
        engine: engine,
    };

    if (!data.name) { alert('Введите название'); return; }

    const editId = document.getElementById('ds-edit-id').value;
    if (editId) data.id = parseInt(editId);

    if (engine !== 'duckdb') {
        data.host = document.getElementById('ds-host').value.trim();
        data.port = parseInt(document.getElementById('ds-port').value) || (engine === 'oracle' ? 1521 : 5432);
        data.database_name = document.getElementById('ds-database').value.trim();
        data.username = document.getElementById('ds-user').value.trim();
        const pwd = document.getElementById('ds-password').value;
        if (pwd) data.password = pwd;
    }

    if (engine === 'oracle') {
        const sn = document.getElementById('ds-service-name').value.trim();
        if (sn) data.extra_params = { service_name: sn };
    }
    if (engine === 'duckdb') {
        data.extra_params = { path: document.getElementById('ds-path').value.trim() || ':memory:' };
    }

    try {
        await DAP_BI.saveDatasource(data);
        closeDsModal();
        await loadList();
    } catch (err) { alert('Ошибка: ' + err.message); }
}

function editDs(id) {
    const ds = DAP_BI.datasources.find(d => d.id === id);
    if (ds) openDsModal(ds);
}

async function testDs(id) {
    try {
        const r = await DAP_BI.testDatasource(id);
        alert(r.success ? 'Подключение успешно!' : 'Ошибка: ' + (r.message || 'Неизвестная ошибка'));
    } catch (err) { alert('Ошибка: ' + err.message); }
}

async function delDs(id) {
    if (!confirm('Удалить источник данных?')) return;
    try { await DAP_BI.deleteDatasource(id); await loadList(); }
    catch (err) { alert('Ошибка: ' + err.message); }
}
</script>
{% endblock %}