{% extends "base.html" %}

{% block title %}Переменные - Automation Workspace Manager{% endblock %}
{% block extra_head %}
<style>
    .vars-table-wrap { border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; background: var(--surface); }
    .vars-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 600px; }
    .vars-table thead th { background: var(--bg-secondary); color: var(--gray-700); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: left; }
    .vars-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; text-align: left; }
    .vars-table tbody tr:last-child td { border-bottom: none; }
    .var-name code { font-size: 12px; padding: 3px 8px; border-radius: 8px; background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
    .var-value { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: pre-wrap; word-break: break-word; max-width: min(420px, 100%); }
    .vars-empty { text-align: center; padding: 26px 10px; color: var(--gray-500); }
    @media (max-width: 640px) {
        .vars-table { min-width: 520px; }
        #var-modal [style*="display:flex"] {
            flex-direction: column;
        }
        #var-modal [style*="display:flex"] > .btn {
            width: 100%;
            justify-content: center;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="card">
    <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px;">
        <div>
            <h2 style="margin:0;">Переменные</h2>
            <div class="text-muted">Общие переменные для Playbook, Inventory и Terraform. Ссылка: <code>{% raw %}{{var:my_var}}{% endraw %}</code>.</div>
        </div>
        <button class="btn btn-primary" onclick="openVarModal()">+ Новая переменная</button>
    </div>
    <div class="alert alert-info" style="margin-bottom:12px;">
        Допускается подстановка <code>{% raw %}{{var:region}}{% endraw %}</code>, <code>{% raw %}{{var:env}}{% endraw %}</code>, <code>{% raw %}{{var:owner}}{% endraw %}</code> в плейбуках, инвентори и Terraform.
    </div>
    <div class="vars-table-wrap awm-list-scroll" style="max-height:min(70vh, 720px);">
        <table class="vars-table">
            <thead>
                <tr>
                    <th>Имя</th>
                    <th>Доступ</th>
                    <th>Значение</th>
                    <th>Описание</th>
                    <th>Обновлено</th>
                    <th>Действия</th>
                </tr>
            </thead>
            <tbody id="vars-body"></tbody>
        </table>
    </div>
    <div id="vars-pager" class="awm-pagination-host"></div>
</div>

<div id="var-modal" class="modal" style="display:none;">
    <div class="modal-content" style="max-width:680px;">
        <div class="modal-header">
            <h3 id="var-modal-title">Новая переменная</h3>
            <button class="btn btn-secondary btn-sm" onclick="closeVarModal()">Закрыть</button>
        </div>
        <form id="var-form">
            <div class="form-group">
                <label for="var-name">Имя ({% raw %}{{var:name}}{% endraw %})</label>
                <input type="text" id="var-name" required pattern="[a-z0-9_.\-]+" title="Только нижний регистр: a-z, цифры, _ . -" autocomplete="off" autocapitalize="off" spellcheck="false" oninput="this.value = this.value.toLowerCase()">
                <small class="form-hint">Только нижний регистр (a-z), цифры, «_», «.», «-». Поиск подстановок идёт по нижнему регистру.</small>
            </div>
            <div class="form-group">
                <label for="var-value">Значение</label>
                <textarea id="var-value" rows="4" required></textarea>
            </div>
            <div class="form-group">
                <label for="var-description">Описание</label>
                <textarea id="var-description" rows="2"></textarea>
            </div>
            <div class="form-group">
                <label for="var-notes">Заметки/напоминания</label>
                <textarea id="var-notes" rows="2"></textarea>
            </div>
            <div class="form-group">
                <label for="var-group-id">Доступ</label>
                <select id="var-group-id"><option value="">Личный (только владелец)</option></select>
            </div>
            <div style="display:flex; gap:8px;">
                <button class="btn btn-primary" type="submit">Сохранить</button>
                <button class="btn btn-secondary" type="button" onclick="closeVarModal()">Отмена</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let editingVarId = null;
let allVars = [];
const varsPager = { offset: 0, limit: 20, total: 0 };

function esc(v) {
    return String(v || '').replace(/[&<>"']/g, (s) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[s]));
}

function slicePageItems(items, pager) {
    if (window.awmPagination) {
        return window.awmPagination.sliceClient(items, pager.offset, pager.limit);
    }
    const list = Array.isArray(items) ? items : [];
    return { items: list, total: list.length, limit: list.length || 20, offset: 0 };
}

function renderVarsTablePage() {
    const body = document.getElementById('vars-body');
    if (!body) return;
    const page = slicePageItems(allVars, varsPager);
    varsPager.total = page.total;
    if (!page.items.length) {
        body.innerHTML = '<tr><td colspan="6" class="vars-empty">Переменные отсутствуют</td></tr>';
    } else {
        body.innerHTML = page.items.map((v) => `
        <tr>
            <td class="var-name"><code>${esc(v.name)}</code></td>
            <td>${v.access_scope === 'group' ? 'Групповой' : 'Личный'}</td>
            <td class="var-value">${esc(v.value || '')}</td>
            <td>${esc(v.description || '-')}</td>
            <td>${esc((v.updated_at || '').replace('T', ' ').slice(0, 19))}</td>
            <td>
                <button class="btn btn-sm btn-secondary" onclick="openVarModal(${v.id})">Редактировать</button>
                <button class="btn btn-sm btn-danger" onclick="deleteVar(${v.id})">Удалить</button>
            </td>
        </tr>
    `).join('');
    }
    const host = document.getElementById('vars-pager');
    if (host && window.awmPagination) {
        host.innerHTML = window.awmPagination.renderBarHtml({
            total: varsPager.total,
            limit: varsPager.limit,
            offset: varsPager.offset,
            idPrefix: 'vars',
        });
        window.awmPagination.bindBar(host, varsPager, (next) => {
            varsPager.limit = next.limit;
            varsPager.offset = next.offset;
            renderVarsTablePage();
        });
    }
}

async function loadVars() {
    const res = await fetch('/api/vars');
    if (!res.ok) { alert('Не удалось загрузить переменные'); return; }
    allVars = await res.json();
    varsPager.offset = 0;
    renderVarsTablePage();
}

async function openVarModal(varId = null) {
    editingVarId = varId;
    document.getElementById('var-form').reset();
    const title = document.getElementById('var-modal-title');
    const nameInput = document.getElementById('var-name');
    nameInput.disabled = false;
    if (varId) {
        title.textContent = 'Редактирование переменной';
        const res = await fetch(`/api/vars/${varId}`);
        if (!res.ok) { alert('Не удалось загрузить переменную'); return; }
        const v = await res.json();
        nameInput.value = v.name || '';
        nameInput.disabled = true;
        document.getElementById('var-value').value = v.value || '';
        document.getElementById('var-description').value = v.description || '';
        document.getElementById('var-notes').value = v.notes || '';
        document.getElementById('var-group-id').value = v.group_id || '';
    } else {
        title.textContent = 'Новая переменная';
    }
    document.getElementById('var-modal').style.display = 'flex';
}

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

document.getElementById('var-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const payload = {
        name: document.getElementById('var-name').value.trim().toLowerCase(),
        value: document.getElementById('var-value').value,
        description: document.getElementById('var-description').value.trim(),
        notes: document.getElementById('var-notes').value.trim(),
        group_id: document.getElementById('var-group-id').value ? Number(document.getElementById('var-group-id').value) : null
    };
    let res;
    if (editingVarId) {
        delete payload.name;
        res = await fetch(`/api/vars/${editingVarId}`, {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload)
        });
    } else {
        res = await fetch('/api/vars', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload)
        });
    }
    if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        alert(err.detail || 'Ошибка сохранения переменной');
        return;
    }
    closeVarModal();
    await loadVars();
});

async function deleteVar(varId) {
    if (!await awmConfirm('Удалить переменную?')) return;
    const res = await fetch(`/api/vars/${varId}`, { method: 'DELETE' });
    if (!res.ok) { alert('Не удалось удалить переменную'); return; }
    await loadVars();
}

async function loadGroupsForVars() {
    let groups = [];
    try { groups = await fetch('/api/groups').then((r) => r.ok ? r.json() : []); } catch (e) {}
    const select = document.getElementById('var-group-id');
    select.innerHTML = ['<option value="">Личный (только владелец)</option>']
        .concat(groups.map((g) => `<option value="${g.id}">${esc(g.name)}</option>`))
        .join('');
}

document.addEventListener('DOMContentLoaded', async () => {
    await loadGroupsForVars();
    await loadVars();
});
</script>
{% endblock %}