{% extends "base.html" %}
{% block title %}Подключения — ЭВОСИНК{% endblock %}

{% block content %}
<div class="row justify-center">
    <div class="col-sm-10 col-md-8 col-lg-6">

        <h1 style="font-size:1.3rem; margin-bottom:1.5rem;">
            <i class="bi bi-plug me-2"></i>Подключения
        </h1>

        {% if request.query_params.get('success') %}
        <div role="alert" class="alert alert-success mb-3">
            <p>Подключение сохранено.</p>
        </div>
        {% endif %}

        {# ── Evotor ── #}
        <article class="card mb-4">
            <header class="d-flex align-center justify-between">
                <span><i class="bi bi-cpu me-2"></i><strong>Эвотор</strong></span>
                {% if evotor %}
                    <span class="badge badge-success"><i class="bi bi-check-circle me-1"></i>Подключено</span>
                {% else %}
                    <span class="badge badge-secondary">Не подключено</span>
                {% endif %}
            </header>

            {% if evotor %}
            <ul class="list-group mb-3">
                <li class="list-group-item">
                    <span class="text-muted small">Токен</span>
                    <span class="font-monospace small">{{ evotor.access_token[:8] }}••••••••</span>
                </li>
                {% if evotor.evotor_user_id %}
                <li class="list-group-item">
                    <span class="text-muted small">Evotor User ID</span>
                    <span class="font-monospace small">{{ evotor.evotor_user_id }}</span>
                </li>
                {% endif %}
                <li class="list-group-item">
                    <span class="text-muted small">Подключено</span>
                    <span>{{ evotor.connected_at | datefmt }}</span>
                </li>
                <li class="list-group-item">
                    <span class="text-muted small">Обновлено</span>
                    <span>{{ evotor.updated_at | datefmt }}</span>
                </li>
            </ul>
            {% endif %}

            <div class="card-body">
                <details {% if not evotor %}open{% endif %}>
                    <summary>
                        {% if evotor %}Обновить токен{% else %}Ввести API-токен{% endif %}
                    </summary>
                    <form method="post" action="/connections/evotor" class="mt-3">
                        <label>
                            API-токен Эвотор
                            <input type="text" name="access_token"
                                   placeholder="Вставьте токен из личного кабинета Эвотор"
                                   value="{{ evotor.access_token if evotor else '' }}"
                                   required autocomplete="off">
                        </label>
                        <label>
                            Evotor User ID <span class="text-muted small">(необязательно)</span>
                            <input type="text" name="evotor_user_id"
                                   placeholder="Например: 01234567-89ab-cdef-0123-456789abcdef"
                                   value="{{ evotor.evotor_user_id if evotor and evotor.evotor_user_id else '' }}"
                                   autocomplete="off">
                        </label>
                        <button type="submit">
                            <i class="bi bi-save me-1"></i>Сохранить
                        </button>
                    </form>
                </details>

                {% if evotor %}
                <div class="d-flex gap-2 mt-3" style="flex-wrap:wrap; align-items:center;">
                    <button type="button" class="outline sm" onclick="testConnection('evotor', this)">
                        <i class="bi bi-wifi me-1"></i>Проверить соединение
                    </button>
                    <span id="evotor-test-result" class="small"></span>
                </div>
                <form method="post" action="/connections/evotor/disconnect"
                      class="mt-2"
                      onsubmit="return confirm('Отключить Эвотор? Кешированные данные каталога останутся.')">
                    <button type="submit" class="outline danger sm">
                        <i class="bi bi-plug me-1"></i>Отключить
                    </button>
                </form>
                {% endif %}
            </div>
        </article>

        {# ── VK ── #}
        <article class="card mb-4">
            <header class="d-flex align-center justify-between">
                <span><i class="bi bi-badge-vr me-2"></i><strong>ВКонтакте (Маркет)</strong></span>
                {% if vk %}
                    <span class="badge badge-success"><i class="bi bi-check-circle me-1"></i>Подключено</span>
                {% else %}
                    <span class="badge badge-secondary">Не подключено</span>
                {% endif %}
            </header>

            {% if vk %}
            <ul class="list-group mb-3">
                <li class="list-group-item">
                    <span class="text-muted small">Токен</span>
                    <span class="font-monospace small">{{ vk.access_token[:8] }}••••••••</span>
                </li>
                {% if vk.vk_user_id %}
                <li class="list-group-item">
                    <span class="text-muted small">ID сообщества</span>
                    <span class="font-monospace small">{{ vk.vk_user_id }}</span>
                </li>
                {% endif %}
                {% if vk.first_name or vk.last_name %}
                <li class="list-group-item">
                    <span class="text-muted small">Аккаунт</span>
                    <span>{{ vk.first_name }} {{ vk.last_name }}</span>
                </li>
                {% endif %}
                <li class="list-group-item">
                    <span class="text-muted small">Подключено</span>
                    <span>{{ vk.connected_at | datefmt }}</span>
                </li>
                <li class="list-group-item">
                    <span class="text-muted small">Обновлено</span>
                    <span>{{ vk.updated_at | datefmt }}</span>
                </li>
            </ul>
            {% endif %}

            <div class="card-body">
                <details {% if not vk %}open{% endif %}>
                    <summary>
                        {% if vk %}Обновить подключение{% else %}Подключить ВКонтакте{% endif %}
                    </summary>
                    <p class="text-muted small mt-2">
                        Укажите токен пользователя VK с правами <code>market,photos,groups</code>
                        и ID сообщества, в котором включён Маркет.
                    </p>
                    <form method="post" action="/connections/vk" class="mt-2">
                        <label>
                            Токен доступа VK
                            <input type="text" name="access_token"
                                   placeholder="vk1.a.xxxxxxxxxxxxxxxx…"
                                   value="{{ vk.access_token if vk else '' }}"
                                   required autocomplete="off">
                        </label>
                        <label>
                            ID сообщества ВКонтакте
                            <input type="text" name="vk_group_id"
                                   placeholder="Например: 229744980"
                                   value="{{ vk.vk_user_id if vk and vk.vk_user_id else '' }}"
                                   autocomplete="off">
                            <small class="text-muted">Числовой ID группы/паблика с включённым Маркетом (без минуса)</small>
                        </label>
                        <button type="submit">
                            <i class="bi bi-save me-1"></i>Сохранить
                        </button>
                    </form>
                </details>

                {% if vk %}
                <div class="d-flex gap-2 mt-3" style="flex-wrap:wrap; align-items:center;">
                    <button type="button" class="outline sm" onclick="testConnection('vk', this)">
                        <i class="bi bi-wifi me-1"></i>Проверить соединение
                    </button>
                    <span id="vk-test-result" class="small"></span>
                </div>
                <form method="post" action="/connections/vk/disconnect"
                      class="mt-2"
                      onsubmit="return confirm('Отключить ВКонтакте?')">
                    <button type="submit" class="outline danger sm">
                        <i class="bi bi-plug me-1"></i>Отключить
                    </button>
                </form>
                {% endif %}
            </div>
        </article>

    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
async function testConnection(provider, btn) {
    const resultEl = document.getElementById(provider + '-test-result');
    btn.disabled = true;
    resultEl.textContent = 'Проверяем…';
    resultEl.style.color = '';
    try {
        const resp = await fetch('/connections/' + provider + '/test', {method: 'POST'});
        const data = await resp.json();
        resultEl.textContent = data.message;
        resultEl.style.color = data.ok ? 'var(--pico-color-green-500, #2d8a4e)' : 'var(--pico-color-red-500, #c0392b)';
    } catch (e) {
        resultEl.textContent = 'Ошибка сети';
        resultEl.style.color = 'var(--pico-color-red-500, #c0392b)';
    } finally {
        btn.disabled = false;
    }
}
</script>
{% endblock %}