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

{% block title %}SSH-ключи - Automation Workspace Manager{% endblock %}
{% block extra_head %}
<style>
    .ssh-keys-table-wrap {
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow-x: auto;
        background: var(--surface);
    }
    .ssh-keys-table {
        width: 100%;
        min-width: 640px;
        border-collapse: separate;
        border-spacing: 0;
    }
    .ssh-keys-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;
    }
    .ssh-keys-table tbody td {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
        color: var(--gray-800);
        text-align: left;
    }
    .ssh-keys-table tbody tr:last-child td {
        border-bottom: none;
    }
    .ssh-keys-table tbody tr:hover {
        background: var(--bg-secondary);
    }
    .ssh-key-name code {
        font-size: 12px;
        padding: 3px 8px;
        border-radius: 8px;
        background: #eef2ff;
        color: #3730a3;
        border: 1px solid #c7d2fe;
    }
    .ssh-key-username {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 13px;
        color: var(--gray-700);
    }
    .ssh-key-desc {
        max-width: 460px;
        white-space: pre-wrap;
        word-break: break-word;
        color: var(--gray-700);
    }
    .ssh-key-updated {
        color: var(--gray-600);
        font-size: 13px;
        white-space: nowrap;
    }
    .ssh-key-actions {
        display: flex;
        gap: 8px;
        justify-content: flex-start;
        white-space: nowrap;
    }
    .ssh-keys-empty {
        text-align: center;
        padding: 26px 10px;
        color: var(--gray-500);
    }
    @media (max-width: 640px) {
        .ssh-keys-table {
            min-width: 560px;
        }
        .ssh-key-actions {
            flex-wrap: wrap;
        }
        .ssh-key-actions .btn {
            flex: 1 1 100%;
            justify-content: center;
        }
        #ssh-key-modal [style*="display:flex"] {
            flex-direction: column;
        }
        #ssh-key-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('ssh_keys') }}</span>
            <div>
                <h2 class="ui-page-header__title">SSH-ключи</h2>
                <p class="ui-page-header__subtitle">SSH-ключи для инвентори и подключений. Ссылка: <code>{% raw %}{{sshkey:my_key}}{% endraw %}</code>.</p>
            </div>
        </div>
        <div class="ui-page-header__actions">
            <button class="btn btn-primary" onclick="openSSHKeyModal()">{{ ui_icon('plus') }}Новый SSH-ключ</button>
        </div>
    </div>

    <div class="alert alert-info" style="margin-bottom:12px;">
        Для хоста указывайте: <code>{% raw %}ansible_ssh_private_key_file={{sshkey:prod_key}}{% endraw %}</code>.
        При запуске AWM создаст временный файл ключа и удалит его после выполнения.
    </div>

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

<div id="ssh-key-modal" class="modal" style="display:none;">
    <div class="modal-content" style="max-width:720px;">
        <div class="modal-header">
            <h3 id="ssh-key-modal-title">Новый SSH-ключ</h3>
            <button type="button" class="close-btn" onclick="closeSSHKeyModal()" aria-label="Закрыть">&times;</button>
        </div>
        <form id="ssh-key-form">
            <div class="form-group">
                <label for="ssh-key-name">Имя ключа (используется в {% raw %}{{sshkey:name}}{% endraw %})</label>
                <input type="text" id="ssh-key-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="ssh-key-username">Имя пользователя (опционально)</label>
                <input type="text" id="ssh-key-username">
            </div>
            <div class="form-group">
                <label for="ssh-key-private">Приватный ключ</label>
                <textarea id="ssh-key-private" rows="10" required placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"></textarea>
                <small id="ssh-key-private-hint" class="form-hint" style="display:none;">
                    Сохранённый приватный ключ скрыт. Оставьте поле пустым, чтобы не менять его, или вставьте новый ключ для замены.
                </small>
            </div>
            <div class="form-group" id="ssh-key-public-meta" style="display:none;">
                <label>Публичные сведения (безопасны для копирования)</label>
                <div class="form-hint" id="ssh-key-fingerprint-line" style="margin-bottom:8px;"></div>
                <textarea id="ssh-key-public" rows="3" readonly class="form-control" placeholder="Публичный ключ появится после сохранения"></textarea>
                <div style="margin-top:8px;">
                    <button type="button" class="btn btn-secondary btn-sm" id="ssh-key-copy-public-btn" onclick="copySSHKeyPublic()">Скопировать публичный ключ</button>
                </div>
            </div>
            <div class="form-group">
                <label for="ssh-key-passphrase">Парольная фраза (опционально)</label>
                <input type="password" id="ssh-key-passphrase" autocomplete="new-password">
                <small id="ssh-key-passphrase-hint" class="form-hint" style="display:none;">
                    Парольная фраза скрыта. Оставьте пустым, чтобы не менять; укажите новое значение — чтобы сменить (нужно, чтобы оно подходило к сохранённому ключу, либо замените ключ вместе с парольной фразой).
                </small>
            </div>
            <div class="form-group">
                <label for="ssh-key-description">Описание</label>
                <textarea id="ssh-key-description" rows="3"></textarea>
            </div>
            <div class="form-group">
                <label for="ssh-key-notes">Заметки/напоминания</label>
                <textarea id="ssh-key-notes" rows="3" placeholder="Назначение ключа (среда, ограничения)"></textarea>
            </div>
            <div class="form-group">
                <label for="ssh-key-group-id">Доступ</label>
                <select id="ssh-key-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="closeSSHKeyModal()">Отмена</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let editingSSHKeyId = null;
let userGroups = [];
let allSSHKeys = [];
const sshKeysPager = { 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 renderSSHKeysTablePage() {
    const body = document.getElementById('ssh-keys-body');
    if (!body) return;
    const page = slicePageItems(allSSHKeys, sshKeysPager);
    sshKeysPager.total = page.total;
    if (!page.items.length) {
        body.innerHTML = `<tr><td colspan="6"><div class="ui-empty"><span class="ui-empty__icon">${awmIcon('key')}</span><div class="ui-empty__title">SSH-ключи отсутствуют</div></div></td></tr>`;
    } else {
        body.innerHTML = page.items.map((s) => `
        <tr>
            <td class="ssh-key-name"><code>${esc(s.name)}</code></td>
            <td>${s.access_scope === 'group' ? 'Групповой' : 'Личный'}</td>
            <td class="ssh-key-username">${esc(s.username || '-')}</td>
            <td class="ssh-key-desc">${esc(s.description || '-')}</td>
            <td class="ssh-key-updated">${esc((s.updated_at || '').replace('T', ' ').slice(0, 19))}</td>
            <td class="ssh-key-actions">
                <div class="ui-row-actions">
                    <button type="button" class="ui-icon-btn is-sm" onclick="openSSHKeyModal(${s.id})" title="Редактировать" aria-label="Редактировать">${awmIcon('edit')}</button>
                    <button type="button" class="ui-icon-btn is-sm ui-icon-btn-danger" onclick="deleteSSHKey(${s.id})" title="Удалить" aria-label="Удалить">${awmIcon('trash')}</button>
                </div>
            </td>
        </tr>
    `).join('');
    }
    const host = document.getElementById('ssh-keys-pager');
    if (host && window.awmPagination) {
        host.innerHTML = window.awmPagination.renderBarHtml({
            total: sshKeysPager.total,
            limit: sshKeysPager.limit,
            offset: sshKeysPager.offset,
            idPrefix: 'ssh-keys',
        });
        window.awmPagination.bindBar(host, sshKeysPager, (next) => {
            sshKeysPager.limit = next.limit;
            sshKeysPager.offset = next.offset;
            renderSSHKeysTablePage();
        });
    }
}

async function loadSSHKeys() {
    const res = await fetch('/api/ssh-keys');
    if (!res.ok) {
        alert('Не удалось загрузить SSH-ключи');
        return;
    }
    allSSHKeys = await res.json();
    sshKeysPager.offset = 0;
    renderSSHKeysTablePage();
}

async function openSSHKeyModal(keyId = null) {
    editingSSHKeyId = keyId;
    document.getElementById('ssh-key-form').reset();
    const title = document.getElementById('ssh-key-modal-title');
    const nameInput = document.getElementById('ssh-key-name');
    const privateInput = document.getElementById('ssh-key-private');
    const privateHint = document.getElementById('ssh-key-private-hint');
    const passHint = document.getElementById('ssh-key-passphrase-hint');
    const publicMeta = document.getElementById('ssh-key-public-meta');
    nameInput.disabled = false;
    privateInput.required = true;
    privateInput.value = '';
    privateInput.placeholder = '-----BEGIN OPENSSH PRIVATE KEY-----';
    document.getElementById('ssh-key-passphrase').value = '';
    if (privateHint) privateHint.style.display = 'none';
    if (passHint) passHint.style.display = 'none';
    if (publicMeta) publicMeta.style.display = 'none';
    document.getElementById('ssh-key-public').value = '';
    document.getElementById('ssh-key-fingerprint-line').textContent = '';
    if (keyId) {
        title.textContent = 'Редактирование SSH-ключа';
        const res = await fetch(`/api/ssh-keys/${keyId}`);
        if (!res.ok) {
            alert('Не удалось загрузить SSH-ключ');
            return;
        }
        const s = await res.json();
        nameInput.value = s.name || '';
        nameInput.disabled = true;
        document.getElementById('ssh-key-username').value = s.username || '';
        privateInput.required = false;
        privateInput.placeholder = '•••• сохранён (оставьте пустым, чтобы не менять)';
        if (privateHint) privateHint.style.display = 'block';
        if (passHint) passHint.style.display = 'block';
        document.getElementById('ssh-key-passphrase').placeholder = s.has_passphrase
            ? '•••• сохранён (оставьте пустым, чтобы не менять)'
            : 'Не задан';
        document.getElementById('ssh-key-description').value = s.description || '';
        document.getElementById('ssh-key-notes').value = s.notes || '';
        document.getElementById('ssh-key-group-id').value = s.group_id || '';
        if (publicMeta && (s.fingerprint || s.public_key)) {
            publicMeta.style.display = 'block';
            const typeLabel = s.key_type || 'ssh';
            document.getElementById('ssh-key-fingerprint-line').textContent =
                `Тип: ${typeLabel}` + (s.fingerprint ? ` · Отпечаток: ${s.fingerprint}` : '');
            document.getElementById('ssh-key-public').value = s.public_key || '';
        }
    } else {
        title.textContent = 'Новый SSH-ключ';
        document.getElementById('ssh-key-passphrase').placeholder = '';
    }
    document.getElementById('ssh-key-modal').style.display = 'flex';
}

async function copySSHKeyPublic() {
    const value = String(document.getElementById('ssh-key-public').value || '').trim();
    if (!value) {
        alert('Публичный ключ недоступен');
        return;
    }
    try {
        if (navigator.clipboard && navigator.clipboard.writeText) {
            await navigator.clipboard.writeText(value);
            if (typeof awmAlert === 'function') await awmAlert('Публичный ключ скопирован.', 'Выполнено');
            else alert('Публичный ключ скопирован.');
            return;
        }
    } catch (e) {}
    alert(value);
}

function closeSSHKeyModal() {
    document.getElementById('ssh-key-modal').style.display = 'none';
}

document.getElementById('ssh-key-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const privateKey = document.getElementById('ssh-key-private').value;
    const passphrase = document.getElementById('ssh-key-passphrase').value;
    const payload = {
        name: document.getElementById('ssh-key-name').value.trim().toLowerCase(),
        username: document.getElementById('ssh-key-username').value.trim(),
        private_key: privateKey,
        passphrase: passphrase,
        description: document.getElementById('ssh-key-description').value.trim(),
        notes: document.getElementById('ssh-key-notes').value.trim(),
        group_id: document.getElementById('ssh-key-group-id').value ? Number(document.getElementById('ssh-key-group-id').value) : null
    };
    let res;
    if (editingSSHKeyId) {
        delete payload.name;
        if (!String(privateKey || '').trim()) delete payload.private_key;
        // Пустой passphrase при редактировании = не менять сохранённый.
        if (!String(passphrase || '')) delete payload.passphrase;
        res = await fetch(`/api/ssh-keys/${editingSSHKeyId}`, {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload)
        });
    } else {
        res = await fetch('/api/ssh-keys', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload)
        });
    }
    if (!res.ok) {
        const err = await res.json().catch(() => ({}));
        const detail = (typeof awmFormatApiDetail === 'function')
            ? awmFormatApiDetail(err.detail)
            : (err.detail || 'Ошибка сохранения SSH-ключа');
        alert(detail || 'Ошибка сохранения SSH-ключа');
        return;
    }
    closeSSHKeyModal();
    await loadSSHKeys();
});

async function deleteSSHKey(keyId) {
    if (!await awmConfirm('Удалить SSH-ключ?')) return;
    const res = await fetch(`/api/ssh-keys/${keyId}`, {method: 'DELETE'});
    if (!res.ok) {
        alert('Не удалось удалить SSH-ключ');
        return;
    }
    await loadSSHKeys();
}

async function loadGroupsForSSHKeys() {
    try {
        userGroups = await fetch('/api/groups').then((r) => r.ok ? r.json() : []);
    } catch (e) {
        userGroups = [];
    }
    const select = document.getElementById('ssh-key-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 loadGroupsForSSHKeys();
    await loadSSHKeys();
});
</script>
{% endblock %}