{% 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;">
    <h1>Редактирование графика</h1>
    <div style="display:flex;gap:8px;">
        <a href="/analytics/charts" class="btn btn-secondary btn-small">
            <i data-lucide="arrow-left" style="width:14px;height:14px;"></i> Назад
        </a>
        <button class="btn btn-primary btn-small" onclick="saveChanges()">
            <i data-lucide="save" style="width:14px;height:14px;"></i> Сохранить
        </button>
    </div>
</div>

<div class="page-content">
    <div class="chart-builder">

        <!-- Preview -->
        <div>
            <div class="chart-preview-panel">
                <div class="chart-preview-header">
                    <h3 id="preview-title">График</h3>
                    <button class="btn btn-secondary btn-small" onclick="refreshChart()">
                        <i data-lucide="refresh-cw" style="width:14px;height:14px;"></i> Обновить
                    </button>
                </div>
                <div class="chart-preview-body">
                    <div id="chart-container" class="echarts-container"></div>
                </div>
            </div>

            <!-- SQL Preview -->
            <div style="margin-top:16px;">
                <div style="font-size:12px;font-weight:600;color:var(--color-text-secondary);margin-bottom:6px;text-transform:uppercase;">
                    SQL-запрос
                </div>
                <textarea id="chart-sql" class="sql-textarea" readonly
                    style="min-height:80px;border:1px solid var(--color-border);border-radius:var(--border-radius);background:#f8fafc;"></textarea>
                <a href="/analytics/sql" class="btn btn-secondary btn-small" style="margin-top:8px;">
                    <i data-lucide="terminal" style="width:14px;height:14px;"></i> В SQL Лабораторию
                </a>
            </div>
        </div>

        <!-- Config Sidebar -->
        <div class="chart-config-panel">
            <div class="chart-config-header">Настройки</div>
            <div class="chart-config-body">

                <!-- ── Basic ── -->
                <div class="chart-config-section">
                    <div class="cfg-section-toggle" onclick="toggleSection(this)">
                        <h4>Основное</h4>
                        <i data-lucide="chevron-down" style="width:14px;height:14px;"></i>
                    </div>
                    <div class="cfg-section-content">
                        <div class="bi-form-group">
                            <label>Название</label>
                            <input type="text" id="cfg-title">
                        </div>
                        <div class="bi-form-group">
                            <label>Описание</label>
                            <textarea id="cfg-description" rows="2"></textarea>
                        </div>
                        <div class="bi-form-group">
                            <label>Источник</label>
                            <select id="cfg-datasource" disabled><option>—</option></select>
                        </div>
                        <div class="bi-form-group">
                            <div class="checkbox-row">
                                <input type="checkbox" id="cfg-public"> <label for="cfg-public">Публичный</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ── Chart Type ── -->
                <div class="chart-config-section">
                    <div class="cfg-section-toggle" onclick="toggleSection(this)">
                        <h4>Тип графика</h4>
                        <i data-lucide="chevron-down" style="width:14px;height:14px;"></i>
                    </div>
                    <div class="cfg-section-content">
                        <div class="chart-type-grid" id="type-grid">
                            <button class="chart-type-btn" data-type="bar" onclick="setChartType(this,'bar')">
                                <i data-lucide="bar-chart-2"></i> Bar
                            </button>
                            <button class="chart-type-btn" data-type="line" onclick="setChartType(this,'line')">
                                <i data-lucide="trending-up"></i> Line
                            </button>
                            <button class="chart-type-btn" data-type="pie" onclick="setChartType(this,'pie')">
                                <i data-lucide="pie-chart"></i> Pie
                            </button>
                            <button class="chart-type-btn" data-type="area" onclick="setChartType(this,'area')">
                                <i data-lucide="mountain"></i> Area
                            </button>
                            <button class="chart-type-btn" data-type="scatter" onclick="setChartType(this,'scatter')">
                                <i data-lucide="circle-dot"></i> Scatter
                            </button>
                            <button class="chart-type-btn" data-type="donut" onclick="setChartType(this,'donut')">
                                <i data-lucide="disc"></i> Donut
                            </button>
                            <button class="chart-type-btn" data-type="funnel" onclick="setChartType(this,'funnel')">
                                <i data-lucide="filter"></i> Funnel
                            </button>
                            <button class="chart-type-btn" data-type="treemap" onclick="setChartType(this,'treemap')">
                                <i data-lucide="layout-grid"></i> Treemap
                            </button>
                            <button class="chart-type-btn" data-type="radar" onclick="setChartType(this,'radar')">
                                <i data-lucide="radar"></i> Radar
                            </button>
                            <button class="chart-type-btn" data-type="table" onclick="setChartType(this,'table')">
                                <i data-lucide="table"></i> Table
                            </button>
                            <button class="chart-type-btn" data-type="metric" onclick="setChartType(this,'metric')">
                                <i data-lucide="gauge"></i> Metric
                            </button>
                        </div>
                    </div>
                </div>

                <!-- ── Data / Columns ── -->
                <div class="chart-config-section" id="section-data">
                    <div class="cfg-section-toggle" onclick="toggleSection(this)">
                        <h4>Данные</h4>
                        <i data-lucide="chevron-down" style="width:14px;height:14px;"></i>
                    </div>
                    <div class="cfg-section-content">
                        <div id="column-controls">
                            <div class="bi-form-group">
                                <label>Категория (X)</label>
                                <select id="cfg-category" onchange="onConfigChange()">
                                    <option value="">Загрузка...</option>
                                </select>
                            </div>
                            <div class="bi-form-group">
                                <label>Значения (Y)</label>
                                <div id="cfg-values-container" class="cfg-checkbox-list">
                                    <span style="font-size:12px;color:var(--color-text-secondary);">Загрузка...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ── Display ── -->
                <div class="chart-config-section" id="section-display">
                    <div class="cfg-section-toggle" onclick="toggleSection(this)">
                        <h4>Отображение</h4>
                        <i data-lucide="chevron-down" style="width:14px;height:14px;"></i>
                    </div>
                    <div class="cfg-section-content">
                        <div class="bi-form-group">
                            <div class="checkbox-row">
                                <input type="checkbox" id="cfg-show-labels" onchange="onConfigChange()">
                                <label for="cfg-show-labels">Метки данных</label>
                            </div>
                        </div>
                        <div class="bi-form-group" id="cfg-row-label-pos">
                            <label>Позиция меток</label>
                            <select id="cfg-label-pos" onchange="onConfigChange()">
                                <option value="top">Сверху</option>
                                <option value="inside">Внутри</option>
                                <option value="bottom">Снизу</option>
                                <option value="right">Справа</option>
                                <option value="left">Слева</option>
                            </select>
                        </div>
                        <div class="bi-form-group">
                            <label>Легенда</label>
                            <select id="cfg-legend-pos" onchange="onConfigChange()">
                                <option value="bottom">Снизу</option>
                                <option value="top">Сверху</option>
                                <option value="left">Слева</option>
                                <option value="right">Справа</option>
                                <option value="none">Скрыть</option>
                            </select>
                        </div>
                        <div class="bi-form-group" id="cfg-row-grid">
                            <div class="checkbox-row">
                                <input type="checkbox" id="cfg-show-grid" checked onchange="onConfigChange()">
                                <label for="cfg-show-grid">Сетка</label>
                            </div>
                        </div>
                        <div class="bi-form-group" id="cfg-row-smooth">
                            <div class="checkbox-row">
                                <input type="checkbox" id="cfg-smooth" checked onchange="onConfigChange()">
                                <label for="cfg-smooth">Сглаживание</label>
                            </div>
                        </div>
                        <div class="bi-form-group" id="cfg-row-stacked">
                            <div class="checkbox-row">
                                <input type="checkbox" id="cfg-stacked" onchange="onConfigChange()">
                                <label for="cfg-stacked">С накоплением</label>
                            </div>
                        </div>
                        <div class="bi-form-group" id="cfg-row-bar-dir">
                            <label>Направление</label>
                            <select id="cfg-bar-dir" onchange="onConfigChange()">
                                <option value="vertical">Вертикально</option>
                                <option value="horizontal">Горизонтально</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- ── Axes ── -->
                <div class="chart-config-section" id="section-axes">
                    <div class="cfg-section-toggle" onclick="toggleSection(this)">
                        <h4>Оси</h4>
                        <i data-lucide="chevron-down" style="width:14px;height:14px;"></i>
                    </div>
                    <div class="cfg-section-content">
                        <div class="bi-form-group">
                            <label>Заголовок оси X</label>
                            <input type="text" id="cfg-x-title" oninput="onConfigChange()" placeholder="Авто">
                        </div>
                        <div class="bi-form-group">
                            <label>Заголовок оси Y</label>
                            <input type="text" id="cfg-y-title" oninput="onConfigChange()" placeholder="Авто">
                        </div>
                    </div>
                </div>

                <!-- ── Number Format ── -->
                <div class="chart-config-section" id="section-format">
                    <div class="cfg-section-toggle" onclick="toggleSection(this)">
                        <h4>Формат чисел</h4>
                        <i data-lucide="chevron-down" style="width:14px;height:14px;"></i>
                    </div>
                    <div class="cfg-section-content">
                        <div class="bi-form-group">
                            <select id="cfg-num-format" onchange="onConfigChange()">
                                <option value="plain">Без формата</option>
                                <option value="thousands">1 234 567</option>
                                <option value="compact">1.2 млн</option>
                                <option value="percent">12.3%</option>
                                <option value="currency">1 234 ₽</option>
                            </select>
                        </div>
                        <div class="bi-form-group">
                            <label>Десятичные знаки</label>
                            <select id="cfg-decimals" onchange="onConfigChange()">
                                <option value="0">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- ── Colors ── -->
                <div class="chart-config-section">
                    <div class="cfg-section-toggle" onclick="toggleSection(this)">
                        <h4>Цвета</h4>
                        <i data-lucide="chevron-down" style="width:14px;height:14px;"></i>
                    </div>
                    <div class="cfg-section-content">
                        <div class="color-scheme-grid" id="color-scheme-grid">
                            <button class="color-scheme-btn active" data-scheme="default" onclick="setColorScheme(this)">
                                <div class="color-swatches">
                                    <span style="background:#3b82f6"></span><span style="background:#10b981"></span>
                                    <span style="background:#f59e0b"></span><span style="background:#ef4444"></span>
                                </div>
                                <span>Стандарт</span>
                            </button>
                            <button class="color-scheme-btn" data-scheme="warm" onclick="setColorScheme(this)">
                                <div class="color-swatches">
                                    <span style="background:#ef4444"></span><span style="background:#f97316"></span>
                                    <span style="background:#f59e0b"></span><span style="background:#eab308"></span>
                                </div>
                                <span>Тёплые</span>
                            </button>
                            <button class="color-scheme-btn" data-scheme="cool" onclick="setColorScheme(this)">
                                <div class="color-swatches">
                                    <span style="background:#3b82f6"></span><span style="background:#06b6d4"></span>
                                    <span style="background:#10b981"></span><span style="background:#8b5cf6"></span>
                                </div>
                                <span>Холодные</span>
                            </button>
                            <button class="color-scheme-btn" data-scheme="earth" onclick="setColorScheme(this)">
                                <div class="color-swatches">
                                    <span style="background:#92400e"></span><span style="background:#78716c"></span>
                                    <span style="background:#65a30d"></span><span style="background:#b45309"></span>
                                </div>
                                <span>Земля</span>
                            </button>
                            <button class="color-scheme-btn" data-scheme="mono" onclick="setColorScheme(this)">
                                <div class="color-swatches">
                                    <span style="background:#1e3a5f"></span><span style="background:#2563eb"></span>
                                    <span style="background:#60a5fa"></span><span style="background:#93c5fd"></span>
                                </div>
                                <span>Моно</span>
                            </button>
                            <button class="color-scheme-btn" data-scheme="pastel" onclick="setColorScheme(this)">
                                <div class="color-swatches">
                                    <span style="background:#93c5fd"></span><span style="background:#86efac"></span>
                                    <span style="background:#fde68a"></span><span style="background:#fca5a5"></span>
                                </div>
                                <span>Пастель</span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- ── Delete ── -->
                <div class="chart-config-section" style="margin-top:24px;border-top:1px solid var(--color-border);padding-top:16px;">
                    <button class="btn btn-danger btn-small" onclick="delChart()" style="width:100%;">
                        <i data-lucide="trash-2" style="width:14px;height:14px;"></i> Удалить график
                    </button>
                </div>

            </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 chartId = {{ chart_id }};
let _chart = null;
let _data = null;
let _currentType = 'bar';

/* ── Init ─────────────────────────────────── */

document.addEventListener('DOMContentLoaded', async function() {
    lucide.createIcons();
    try {
        _chart = await DAP_BI.getChart(chartId);
        _currentType = _chart.chart_type || 'bar';

        // Parse chart_config safely
        let cfg = _chart.chart_config || {};
        if (typeof cfg === 'string') {
            try { cfg = JSON.parse(cfg); } catch { cfg = {}; }
        }
        _chart.chart_config = cfg;

        // Fill basic form
        document.getElementById('preview-title').textContent = _chart.title;
        document.getElementById('cfg-title').value = _chart.title || '';
        document.getElementById('cfg-description').value = _chart.description || '';
        document.getElementById('cfg-public').checked = _chart.is_public;
        document.getElementById('chart-sql').value = _chart.sql_text || '';

        // Load datasources and set
        await DAP_BI.loadDatasources();
        DAP_BI.populateDatasourceSelect(document.getElementById('cfg-datasource'));
        if (_chart.datasource_id) document.getElementById('cfg-datasource').value = _chart.datasource_id;

        // Highlight active chart type
        document.querySelectorAll('#type-grid .chart-type-btn').forEach(b => {
            b.classList.toggle('active', b.dataset.type === _currentType);
        });

        // Fetch data and render
        await refreshChart();

        // Populate config controls from saved config
        populateConfigControls(cfg);
        updateTypeVisibility(_currentType);
    } catch (err) {
        alert('Ошибка загрузки: ' + err.message);
    }
    lucide.createIcons();
});

/* ── Column Controls ─────────────────────── */

function buildColumnControls(data, cfg) {
    if (!data || !data.columns || !data.rows || data.rows.length === 0) return;
    const cols = data.columns;
    const rows = data.rows;

    // ── Category dropdown ──
    const catSelect = document.getElementById('cfg-category');
    catSelect.innerHTML = '';
    cols.forEach((col, i) => {
        const opt = document.createElement('option');
        opt.value = i;
        opt.textContent = col;
        catSelect.appendChild(opt);
    });

    // Set from config or auto-detect
    if (cfg.categoryColumn !== undefined && cfg.categoryColumn !== null) {
        catSelect.value = cfg.categoryColumn;
    } else {
        // Find first string-like column
        let found = false;
        for (let i = 0; i < cols.length; i++) {
            const sample = rows[0]?.[i];
            if (typeof sample === 'string' && isNaN(Number(sample))) {
                catSelect.value = i;
                found = true;
                break;
            }
        }
        if (!found) catSelect.value = 0;
    }

    // ── Value checkboxes ──
    const container = document.getElementById('cfg-values-container');
    container.innerHTML = '';

    // Determine which columns are auto-detected as numeric
    const autoNumeric = [];
    for (let i = 0; i < cols.length; i++) {
        const sample = rows[0]?.[i];
        if (sample !== null && sample !== undefined && !isNaN(Number(sample))) {
            autoNumeric.push(i);
        }
    }

    const selectedVals = (cfg.valueColumns && cfg.valueColumns.length > 0)
        ? cfg.valueColumns.map(v => parseInt(v))
        : autoNumeric;

    cols.forEach((col, i) => {
        const isSelected = selectedVals.includes(i);
        const div = document.createElement('div');
        div.className = 'checkbox-row';
        div.style.marginBottom = '4px';
        div.innerHTML = `
            <input type="checkbox" class="cfg-value-col" value="${i}" id="cfg-val-${i}"
                   ${isSelected ? 'checked' : ''} onchange="onConfigChange()">
            <label for="cfg-val-${i}" style="font-size:13px;">${DAP_BI._esc(col)}</label>
        `;
        container.appendChild(div);
    });
}

/* ── Populate Config Controls from saved config ── */

function populateConfigControls(cfg) {
    if (!cfg) cfg = {};

    document.getElementById('cfg-show-labels').checked = cfg.showLabels || false;
    document.getElementById('cfg-label-pos').value = cfg.labelPosition || 'top';
    document.getElementById('cfg-legend-pos').value = cfg.legendPosition || 'bottom';
    document.getElementById('cfg-show-grid').checked = cfg.showGrid !== false;
    document.getElementById('cfg-smooth').checked = cfg.smooth !== false;
    document.getElementById('cfg-stacked').checked = cfg.stacked || false;
    document.getElementById('cfg-bar-dir').value = cfg.barDirection || 'vertical';
    document.getElementById('cfg-x-title').value = cfg.xAxisTitle || '';
    document.getElementById('cfg-y-title').value = cfg.yAxisTitle || '';
    document.getElementById('cfg-num-format').value = cfg.numberFormat || 'plain';
    document.getElementById('cfg-decimals').value = String(cfg.decimals ?? 0);

    // Color scheme
    const scheme = cfg.colorScheme || 'default';
    document.querySelectorAll('#color-scheme-grid .color-scheme-btn').forEach(b => {
        b.classList.toggle('active', b.dataset.scheme === scheme);
    });
}

/* ── Read Config from Controls ────────────── */

function readConfig() {
    const cfg = {};

    // Column mapping
    const catSelect = document.getElementById('cfg-category');
    if (catSelect && catSelect.value !== '') {
        cfg.categoryColumn = parseInt(catSelect.value);
    }

    const valChecks = document.querySelectorAll('.cfg-value-col:checked');
    if (valChecks.length > 0) {
        cfg.valueColumns = Array.from(valChecks).map(c => parseInt(c.value));
    }

    // Display
    cfg.showLabels = document.getElementById('cfg-show-labels').checked;
    cfg.labelPosition = document.getElementById('cfg-label-pos').value;
    cfg.legendPosition = document.getElementById('cfg-legend-pos').value;
    cfg.showGrid = document.getElementById('cfg-show-grid').checked;
    cfg.smooth = document.getElementById('cfg-smooth').checked;
    cfg.stacked = document.getElementById('cfg-stacked').checked;
    cfg.barDirection = document.getElementById('cfg-bar-dir').value;

    // Axes
    cfg.xAxisTitle = document.getElementById('cfg-x-title').value;
    cfg.yAxisTitle = document.getElementById('cfg-y-title').value;

    // Number format
    cfg.numberFormat = document.getElementById('cfg-num-format').value;
    cfg.decimals = parseInt(document.getElementById('cfg-decimals').value || '0');

    // Color scheme
    const activeScheme = document.querySelector('#color-scheme-grid .color-scheme-btn.active');
    cfg.colorScheme = activeScheme ? activeScheme.dataset.scheme : 'default';

    return cfg;
}

/* ── Live Preview on Config Change ────────── */

function onConfigChange() {
    const cfg = readConfig();
    _chart.chart_config = cfg;

    if (_data && !_data.error) {
        const el = document.getElementById('chart-container');
        DAP_BI.renderChart(el, _currentType, _data, cfg);
    }
}

/* ── Type-specific visibility ─────────────── */

function updateTypeVisibility(type) {
    const axisTypes   = ['bar', 'line', 'area', 'scatter'];
    const stackTypes  = ['bar', 'line', 'area'];
    const dirTypes    = ['bar'];
    const smoothTypes = ['line', 'area'];
    const gridTypes   = ['bar', 'line', 'area', 'scatter'];

    _toggle('cfg-row-bar-dir',   dirTypes.includes(type));
    _toggle('cfg-row-stacked',   stackTypes.includes(type));
    _toggle('cfg-row-smooth',    smoothTypes.includes(type));
    _toggle('cfg-row-grid',      gridTypes.includes(type));
    _toggle('cfg-row-label-pos', type !== 'table' && type !== 'metric');
    _toggle('section-axes',      axisTypes.includes(type));
    _toggle('section-format',    type !== 'table');
}

function _toggle(id, show) {
    const el = document.getElementById(id);
    if (el) el.style.display = show ? '' : 'none';
}

/* ── Section Toggle (collapse/expand) ─────── */

function toggleSection(toggleEl) {
    const content = toggleEl.nextElementSibling;
    const icon = toggleEl.querySelector('i, svg');
    if (content.classList.contains('collapsed')) {
        content.classList.remove('collapsed');
        if (icon) icon.style.transform = '';
    } else {
        content.classList.add('collapsed');
        if (icon) icon.style.transform = 'rotate(-90deg)';
    }
}

/* ── Refresh Chart Data ───────────────────── */

async function refreshChart() {
    const el = document.getElementById('chart-container');
    el.innerHTML = '<div class="bi-spinner bi-spinner-lg" style="margin:auto;"></div>';
    try {
        _data = await DAP_BI.getChartData(chartId);
        if (_data.error) {
            el.innerHTML = `<div class="bi-error-msg">${DAP_BI._esc(_data.message)}</div>`;
        } else {
            // Build column controls from data
            buildColumnControls(_data, _chart.chart_config || {});
            // Render with config
            DAP_BI.renderChart(el, _currentType, _data, _chart.chart_config || {});
        }
    } catch (err) {
        el.innerHTML = `<div class="bi-error-msg">${DAP_BI._esc(err.message)}</div>`;
    }
}

/* ── Set Chart Type ───────────────────────── */

function setChartType(btn, type) {
    _currentType = type;
    document.querySelectorAll('#type-grid .chart-type-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    updateTypeVisibility(type);
    if (_data && !_data.error) {
        const cfg = readConfig();
        _chart.chart_config = cfg;
        const el = document.getElementById('chart-container');
        DAP_BI.renderChart(el, type, _data, cfg);
    }
    lucide.createIcons();
}

/* ── Color Scheme ─────────────────────────── */

function setColorScheme(btn) {
    document.querySelectorAll('#color-scheme-grid .color-scheme-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    onConfigChange();
}

/* ── Save ─────────────────────────────────── */

async function saveChanges() {
    try {
        const cfg = readConfig();
        await DAP_BI.saveChart({
            id: chartId,
            title: document.getElementById('cfg-title').value.trim(),
            description: document.getElementById('cfg-description').value,
            chart_type: _currentType,
            is_public: document.getElementById('cfg-public').checked,
            chart_config: cfg,
        });
        _chart.chart_config = cfg;
        document.getElementById('preview-title').textContent = document.getElementById('cfg-title').value;

        // Brief success indicator
        const saveBtn = document.querySelector('.page-header .btn-primary');
        const origText = saveBtn.innerHTML;
        saveBtn.innerHTML = '<i data-lucide="check" style="width:14px;height:14px;"></i> Сохранено';
        saveBtn.classList.add('btn-success-flash');
        lucide.createIcons();
        setTimeout(() => {
            saveBtn.innerHTML = origText;
            saveBtn.classList.remove('btn-success-flash');
            lucide.createIcons();
        }, 1500);
    } catch (err) {
        alert('Ошибка сохранения: ' + err.message);
    }
}

/* ── Delete ────────────────────────────────── */

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