{% extends "admin/admin_base.html" %}

{% block title %}Автоматизация — API-ключи и вебхуки{% endblock %}

{% block breadcrumb %}
{{ super() }}
<li class="breadcrumb-item active">Автоматизация</li>
{% endblock %}

{% block admin_content %}
<div class="admin-toolbar">
    <div class="admin-toolbar__main">
        <h1 class="admin-toolbar__title"><i class="bi bi-robot" aria-hidden="true"></i> Автоматизация</h1>
        <p class="admin-toolbar__meta muted">API-ключи, вебхуки и примеры интеграции</p>
    </div>
</div>

<ul class="nav nav-tabs mb-4" id="automationTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="api-keys-tab" type="button" data-automation-tab="automation-api-keys" aria-controls="automation-api-keys" aria-selected="true">
            <i class="bi bi-key-fill" aria-hidden="true"></i> API Ключи
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="webhooks-tab" type="button" data-automation-tab="automation-webhooks" aria-controls="automation-webhooks" aria-selected="false">
            <i class="bi bi-broadcast" aria-hidden="true"></i> Вебхуки
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="examples-tab" type="button" data-automation-tab="automation-examples" aria-controls="automation-examples" aria-selected="false">
            <i class="bi bi-code-square" aria-hidden="true"></i> Примеры использования
        </button>
    </li>
</ul>

<div class="automation-tab-panels" id="automationTabContent">
    <div class="automation-panel active" id="automation-api-keys" aria-labelledby="api-keys-tab">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h3 class="h5 mb-0">API Ключи</h3>
            <button type="button" class="btn primary btn-sm" onclick="showCreateApiKeyModal()">
                <i class="bi bi-plus-circle" aria-hidden="true"></i> Создать API ключ
            </button>
        </div>
        <article class="admin-card card">
            <div class="table-wrap">
                <table class="admin-table table table-hover" id="apiKeysTable">
                    <thead>
                        <tr>
                            <th>Название</th>
                            <th>Префикс</th>
                            <th>Описание</th>
                            <th>Тип</th>
                            <th>Сервис</th>
                            <th>Разрешения</th>
                            <th>Сущности</th>
                            <th>Статус</th>
                            <th>Последнее использование</th>
                            <th>Истекает</th>
                            <th>Действия</th>
                        </tr>
                    </thead>
                    <tbody id="apiKeysTableBody">
                        <tr>
                            <td colspan="11" class="text-center">Загрузка...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </article>
    </div>

    <div class="automation-panel" id="automation-webhooks" hidden aria-labelledby="webhooks-tab">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h3 class="h5 mb-0">Вебхуки</h3>
            <button type="button" class="btn primary btn-sm" onclick="showCreateWebhookModal()">
                <i class="bi bi-plus-circle" aria-hidden="true"></i> Создать вебхук
            </button>
        </div>
        <article class="admin-card card">
            <div class="table-wrap">
                <table class="admin-table table table-hover" id="webhooksTable">
                    <thead>
                        <tr>
                            <th>Название</th>
                            <th>URL</th>
                            <th>Типы событий</th>
                            <th>Метод</th>
                            <th>Статус</th>
                            <th>Последнее обновление</th>
                            <th>Действия</th>
                        </tr>
                    </thead>
                    <tbody id="webhooksTableBody">
                        <tr>
                            <td colspan="7" class="text-center">Загрузка...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </article>
    </div>

    <div class="automation-panel" id="automation-examples" hidden aria-labelledby="examples-tab">
        <h3 class="h5 mb-3">Примеры использования API</h3>
        <article class="admin-card card mb-3">
            <div class="card-body">
                <h5 class="card-title">Python</h5>
                <pre class="mb-0"><code>import requests

API_KEY = "your-api-key-here"
BASE_URL = "https://gateway.example.com/api/v1"

headers = {
    "X-API-Key": API_KEY,
    "Content-Type": "application/json"
}

# Получение списка сервисов
response = requests.get(f"{BASE_URL}/admin/services/list", headers=headers)
services = response.json()
print(services)</code></pre>
            </div>
        </article>
        <article class="admin-card card mb-3">
            <div class="card-body">
                <h5 class="card-title">JavaScript/Node.js</h5>
                <pre class="mb-0"><code>const axios = require('axios');

const client = axios.create({
    baseURL: 'https://gateway.example.com',
    headers: {
        'X-API-Key': 'your-api-key-here',
        'Content-Type': 'application/json'
    }
});

// Получение списка сервисов
const services = await client.get('/api/v1/admin/services/list');
console.log(services.data);</code></pre>
            </div>
        </article>
        <article class="admin-card card mb-3">
            <div class="card-body">
                <h5 class="card-title">cURL</h5>
                <pre class="mb-0"><code>curl -H "X-API-Key: your-api-key-here" \
     https://gateway.example.com/api/v1/admin/services/list</code></pre>
            </div>
        </article>
        <article class="admin-card card mb-3">
            <div class="card-body">
                <h5 class="card-title">PHP — Database Service (service key)</h5>
                <pre class="mb-0"><code>$ch = curl_init('https://gateway.example.com/api/v1/db/query');
curl_setopt_array($ch, [
    CURLOPT_POST =&gt; true,
    CURLOPT_HTTPHEADER =&gt; [
        'Content-Type: application/json',
        'X-API-Key: YOUR_SERVICE_KEY',
    ],
    CURLOPT_POSTFIELDS =&gt; json_encode([
        'entity' =&gt; 'lk_orders',
        'action' =&gt; 'select',
        'limit' =&gt; 10,
    ]),
    CURLOPT_RETURNTRANSFER =&gt; true,
]);
$response = curl_exec($ch);</code></pre>
            </div>
        </article>
        <article class="admin-card card mb-3">
            <div class="card-body">
                <h5 class="card-title">PHP — Public Auth с site public key</h5>
                <pre class="mb-0"><code>$ch = curl_init('https://gateway.example.com/api/v1/auth/login');
curl_setopt_array($ch, [
    CURLOPT_POST =&gt; true,
    CURLOPT_HTTPHEADER =&gt; [
        'Content-Type: application/json',
        'X-API-Key: YOUR_SITE_PUBLIC_KEY',
    ],
    CURLOPT_POSTFIELDS =&gt; json_encode([
        'email' =&gt; 'user@example.com',
        'password' =&gt; 'secret',
    ]),
    CURLOPT_RETURNTRANSFER =&gt; true,
]);</code></pre>
            </div>
        </article>
        <div class="alert alert-info">
            <i class="bi bi-info-circle" aria-hidden="true"></i>
            <strong>Подробнее:</strong> Полная документация с примерами доступна в файле <code>docs/api_examples.md</code>
        </div>
    </div>
</div>

<div class="modal fade" id="createApiKeyModal" tabindex="-1" aria-labelledby="apiKeyModalTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="apiKeyModalTitle">Создать API ключ</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
            </div>
            <div class="modal-body">
                <form id="createApiKeyForm">
                    <input type="hidden" id="editApiKeyId" value="">
                    <div class="alert alert-info d-none" id="editKeySecretNote">
                        Секрет ключа нельзя изменить. При компрометации создайте новый ключ и отключите старый.
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Название *</label>
                        <input type="text" class="form-control" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Описание</label>
                        <textarea class="form-control" name="description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Тип ключа *</label>
                        <select class="form-select" name="key_type" id="keyTypeSelect" onchange="onKeyTypeChange()">
                            <option value="service">Сервисный ключ</option>
                            <option value="public">Публичный (site) ключ</option>
                        </select>
                    </div>
                    <div class="mb-3" id="linkedServiceGroup">
                        <label class="form-label">Связанный сервис *</label>
                        <select class="form-select" name="linked_service_name" id="linkedServiceSelect" onchange="onLinkedServiceChange()"></select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Разрешения</label>
                        <div id="permissionsCheckboxes" class="border rounded p-2"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Whitelist сущностей (для db:query)</label>
                        <select multiple class="form-select" name="allowed_entities" id="allowedEntitiesSelect" size="6" onchange="updateKeyCreatePreview()"></select>
                        <small class="text-muted">Удерживайте Ctrl для выбора нескольких</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Предпросмотр тела запроса</label>
                        <pre class="admin-json-preview bg-light p-2 border rounded" id="keyCreatePreview">{}</pre>
                    </div>
                    <div class="alert alert-warning d-none" id="publicKeyDisclaimer">
                        Публичный ключ во фронте — только с предупреждением и whitelist. Предпочитайте паттерн B (шлюз + backend).
                    </div>
                    <div class="mb-3 d-none">
                        <label class="form-label">Разрешения (JSON legacy)</label>
                        <input type="text" class="form-control" name="permissions" value='[]'>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Дата истечения</label>
                        <input type="datetime-local" class="form-control" name="expires_at">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn ghost" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn primary" id="apiKeySaveBtn" onclick="saveApiKey()">Создать</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="showApiKeyModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">API ключ создан</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="bi bi-exclamation-triangle" aria-hidden="true"></i>
                    <strong>Важно!</strong> Сохраните этот ключ — он больше не будет показан.
                </div>
                <div class="mb-3">
                    <label class="form-label" for="apiKeyValue">API ключ:</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="apiKeyValue" readonly>
                        <button class="btn ghost" type="button" onclick="copyApiKey()">
                            <i class="bi bi-clipboard" aria-hidden="true"></i> Копировать
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn primary" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="createWebhookModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Создать вебхук</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
            </div>
            <div class="modal-body">
                <form id="createWebhookForm">
                    <div class="mb-3">
                        <label class="form-label">Название *</label>
                        <input type="text" class="form-control" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">URL *</label>
                        <input type="url" class="form-control" name="url" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Типы событий (JSON массив) *</label>
                        <input type="text" class="form-control" name="event_types" value='["service_restart", "deployment_started"]' required>
                        <small class="form-text text-muted">Пример: ["service_restart", "deployment_started", "config_update"]</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">HTTP метод</label>
                        <select class="form-select" name="method">
                            <option value="POST" selected>POST</option>
                            <option value="PUT">PUT</option>
                            <option value="PATCH">PATCH</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Секрет для подписи</label>
                        <input type="text" class="form-control" name="secret" placeholder="Опционально">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Заголовки (JSON объект)</label>
                        <input type="text" class="form-control" name="headers" value='{}' placeholder='{"Authorization": "Bearer token"}'>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Количество повторов</label>
                                <input type="number" class="form-control" name="retry_count" value="3" min="1" max="10">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Таймаут (секунды)</label>
                                <input type="number" class="form-control" name="timeout" value="10" min="1" max="60">
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Описание</label>
                        <textarea class="form-control" name="description" rows="2"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn ghost" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn primary" onclick="createWebhook()">Создать</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="webhookDeliveriesModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">История доставки вебхука</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
            </div>
            <div class="modal-body">
                <div class="table-wrap">
                    <table class="admin-table table table-hover">
                        <thead>
                            <tr>
                                <th>Тип события</th>
                                <th>Статус</th>
                                <th>Код ответа</th>
                                <th>Попытка</th>
                                <th>Время доставки</th>
                                <th>Ошибка</th>
                            </tr>
                        </thead>
                        <tbody id="webhookDeliveriesBody">
                            <tr>
                                <td colspan="6" class="text-center">Загрузка...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn ghost" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block admin_scripts %}
<script src="{{ url_for('static', filename='js/automation.js') }}"></script>
{% endblock %}