{% extends "base.html" %}
{% from 'partials/nav_icon.html' import nav_icon %}
{% from 'partials/ui_icon.html' import ui_icon %}

{% block title %}Секреты - Automation Workspace Manager{% endblock %}
{% block extra_head %}
<style>
    .secrets-table-wrap {
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow-x: auto;
        background: var(--surface);
    }
    .secrets-table {
        width: 100%;
        min-width: 640px;
        border-collapse: separate;
        border-spacing: 0;
    }
    .secrets-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);
        white-space: nowrap;
        text-align: left;
    }
    .secrets-table tbody td {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
        color: var(--gray-800);
        text-align: left;
    }
    .secrets-table tbody tr:last-child td {
        border-bottom: none;
    }
    .secrets-table tbody tr:hover {
        background: var(--bg-secondary);
    }
    .secret-name code {
        font-size: 12px;
        padding: 3px 8px;
        border-radius: 8px;
        background: #eef2ff;
        color: #3730a3;
        border: 1px solid #c7d2fe;
    }
    .secret-username {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 13px;
        color: var(--gray-700);
    }
    .secret-desc {
        max-width: 460px;
        white-space: pre-wrap;
        word-break: break-word;
        color: var(--gray-700);
    }
    .secret-updated {
        color: var(--gray-600);
        font-size: 13px;
        white-space: nowrap;
    }
    .secret-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-start;
        white-space: nowrap;
    }
    .secrets-empty {
        text-align: center;
        padding: 26px 10px;
        color: var(--gray-500);
    }
    @media (max-width: 640px) {
        .secrets-table {
            min-width: 560px;
        }
        .secret-actions {
            flex-wrap: wrap;
        }
        .secret-actions .btn {
            flex: 1 1 100%;
            justify-content: center;
        }
        #secret-modal [style*="display:flex"] {
            flex-direction: column;
        }
        #secret-modal [style*="display:flex"] > .btn {
            width: 100%;
            justify-content: center;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="card">
    <div class="ui-page-header is-inset">
        <div class="ui-page-header__main">
            <span class="ui-page-header__icon">{{ nav_icon('secrets') }}</span>
            <div>
                <h2 class="ui-page-header__title">Секреты</h2>
                <p class="ui-page-header__subtitle">Пароли для плейбуков и подключений. Ссылка: <code>{% raw %}{{secret:my_ssh_password}}{% endraw %}</code>.</p>
            </div>
        </div>
        <div class="ui-page-header__actions">
            <button class="btn btn-primary" onclick="openSecretModal()">{{ ui_icon('plus') }}Новый секрет</button>
        </div>
    </div>

    <div class="alert alert-info" style="margin-bottom:12px;">
        В инвентори указывайте: <code>{% raw %}ansible_password={{secret:prod_ssh}}{% endraw %}</code> или
        <code>{% raw %}ansible_become_pass={{secret:prod_sudo}}{% endraw %}</code>.
        При запуске AWM подставит пароль автоматически.
        Если в секрете заполнен <strong>Имя пользователя</strong>, а в инвентори нет <code>ansible_user</code>, логин подставится из секрета.
    </div>

    <div class="secrets-table-wrap awm-list-scroll" style="max-height:min(70vh, 720px);">
        <table class="secrets-table">
            <thead>
                <tr>
                    <th>Имя секрета</th>
                    <th>Доступ</th>
                    <th>Имя пользователя</th>
                    <th>Описание</th>
                    <th>Обновлено</th>
                    <th>Действия</th>
                </tr>
            </thead>
            <tbody id="secrets-body"></tbody>
        </table>
    </div>
    <div id="secrets-pager" class="awm-pagination-host"></div>
</div>

<div id="secret-modal" class="modal" style="display:none;">
    <div class="modal-content" style="max-width:640px;">
        <div class="modal-header">
            <h3 id="secret-modal-title">Новый секрет</h3>
            <button type="button" class="close-btn" onclick="closeSecretModal()" aria-label="Закрыть">&times;</button>
        </div>
        <form id="secret-form">
            <div class="form-group">
                <label for="secret-name">Имя секрета (используется в {% raw %}{{secret:name}}{% endraw %})</label>
                <input type="text" id="secret-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="secret-username">Имя пользователя (опционально)</label>
                <input type="text" id="secret-username">
            </div>
            <div class="form-group">
                <label for="secret-password">Пароль</label>
                <input type="password" id="secret-password" required>
            </div>
            <div class="form-group">
                <label for="secret-description">Описание</label>
                <textarea id="secret-description" rows="3"></textarea>
            </div>
            <div class="form-group">
                <label for="secret-notes">Заметки/напоминания</label>
                <textarea id="secret-notes" rows="3" placeholder="Порядок смены и назначение секрета"></textarea>
            </div>
            <div class="form-group">
                <label for="secret-group-id">Доступ</label>
                <select id="secret-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="closeSecretModal()">Отмена</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let editingSecretId = null;
let userGroups = [];
let allSecrets = [];
const secretsPager = { offset: 0, limit: 20, total: 0 };

function esc(v) {
    return (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 renderSecretsTablePage() {
    const body = document.getElementById('secrets-body');
    if (!body) return;
    const page = slicePageItems(allSecrets, secretsPager);
    secretsPager.total = page.total;
    if (!page.items.length) {
        body.innerHTML = `<tr><td colspan="6"><div class="ui-empty"><span class="ui-empty__icon">${awmIcon('lock')}</span><div class="ui-empty__title">Секреты отсутствуют</div></div></td></tr>`;
    } else {
        body.innerHTML = page.items.map((s) => `
        <tr>
            <td class="secret-name"><code>${esc(s.name)}</code></td>
            <td>${s.access_scope === 'group' ? 'Групповой' : 'Личный'}</td>
            <td class="secret-username">${esc(s.username || '-')}</td>
            <td class="secret-desc">${esc(s.description || '-')}</td>
            <td class="secret-updated">${esc((s.updated_at || '').replace('T', ' ').slice(0, 19))}</td>
            <td class="secret-actions">
                <div class="ui-row-actions">
                    <button type="button" class="ui-icon-btn is-sm" onclick="openSecretModal(${s.id})" title="Редактировать" aria-label="Редактировать">${awmIcon('edit')}</button>
                    <button type="button" class="ui-icon-btn is-sm ui-icon-btn-danger" onclick="deleteSecret(${s.id})" title="Удалить" aria-label="Удалить">${awmIcon('trash')}</button>
                </div>
            </td>
        </tr>
    `).join('');
    }
    const host = document.getElementById('secrets-pager');
    if (host && window.awmPagination) {
        host.innerHTML = window.awmPagination.renderBarHtml({
            total: secretsPager.total,
            limit: secretsPager.limit,
            offset: secretsPager.offset,
            idPrefix: 'secrets',
        });
        window.awmPagination.bindBar(host, secretsPager, (next) => {
            secretsPager.limit = next.limit;
            secretsPager.offset = next.offset;
            renderSecretsTablePage();
        });
    }
}

async function loadSecrets() {
    const res = await fetch('/api/secrets');
    if (!res.ok) {
        alert('Не удалось загрузить секреты');
        return;
    }
    allSecrets = await res.json();
    secretsPager.offset = 0;
    renderSecretsTablePage();
}

async function openSecretModal(secretId = null) {
    editingSecretId = secretId;
    document.getElementById('secret-form').reset();
    const title = document.getElementById('secret-modal-title');
    const nameInput = document.getElementById('secret-name');
    nameInput.disabled = false;
    document.getElementById('secret-password').required = true;
    if (secretId) {
        title.textContent = 'Редактирование секрета';
        const res = await fetch(`/api/secrets/${secretId}`);
        if (!res.ok) {
            alert('Не удалось загрузить секрет');
            return;
        }
        const s = await res.json();
        nameInput.value = s.name || '';
        nameInput.disabled = true;
        document.getElementById('secret-username').value = s.username || '';
        document.getElementById('secret-password').value = '';
        document.getElementById('secret-password').required = false;
        document.getElementById('secret-description').value = s.description || '';
        document.getElementById('secret-notes').value = s.notes || '';
        document.getElementById('secret-group-id').value = s.group_id || '';
    } else {
        title.textContent = 'Новый секрет';
    }
    document.getElementById('secret-modal').style.display = 'flex';
}

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

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

async function deleteSecret(secretId) {
    if (!await awmConfirm('Удалить секрет?')) return;
    const res = await fetch(`/api/secrets/${secretId}`, {method: 'DELETE'});
    if (!res.ok) {
        alert('Не удалось удалить секрет');
        return;
    }
    await loadSecrets();
}

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

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