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

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

        {% if error %}
        <div class="alert alert-danger mt-4">
            {% if error == "invalid_token" %}
                <i class="bi bi-exclamation-triangle me-2"></i>Токен недействителен или у него нет прав администратора сообщества.
            {% elif error == "empty_token" %}
                <i class="bi bi-exclamation-triangle me-2"></i>Введите токен.
            {% elif error == "no_client_id" %}
                <i class="bi bi-exclamation-triangle me-2"></i>Автоматическое подключение не настроено. Введите токен вручную.
            {% else %}
                <i class="bi bi-exclamation-triangle me-2"></i>Произошла ошибка при подключении: {{ error }}
            {% endif %}
        </div>
        {% endif %}

        <div class="card shadow-sm mt-4">
            <div class="card-header">
                <h1 class="h5 mb-0">Подключение ВКонтакте</h1>
            </div>

            {% if connection %}
            {# ── CONNECTED STATE ── #}
            <ul class="list-group list-group-flush">
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="text-muted small">Статус</span>
                    <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>Подключено</span>
                </li>
                {% if connection.first_name %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="text-muted small">Сообщество</span>
                    <span>{{ connection.first_name }}</span>
                </li>
                {% endif %}
                {% if connection.vk_user_id %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="text-muted small">ID сообщества</span>
                    <span class="font-monospace small text-muted">{{ connection.vk_user_id }}</span>
                </li>
                {% endif %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    <span class="text-muted small">Подключено</span>
                    <span class="small">{{ connection.connected_at.strftime("%d.%m.%Y %H:%M") }}</span>
                </li>
            </ul>
            <div class="card-footer">
                <p class="text-muted small mb-2">Обновить токен пользователя:</p>
                <form method="post" action="/vk/token">
                    <div class="input-group input-group-sm">
                        <input type="text" name="token" class="form-control font-monospace" placeholder="Новый токен пользователя" required>
                        <button type="submit" class="btn btn-outline-secondary">Обновить</button>
                    </div>
                </form>
            </div>
            <div class="card-body d-grid">
                <form method="post" action="/vk/disconnect">
                    <button type="submit" class="btn btn-outline-danger w-100">Отключить ВКонтакте</button>
                </form>
            </div>

            {% else %}
            {# ── NOT CONNECTED STATE ── #}
            <div class="card-body">
                {% if vk_client_id %}
                <p class="text-muted mb-4">
                    Нажмите кнопку ниже, чтобы авторизоваться через ВКонтакте и выдать доступ к управлению товарами вашего сообщества.
                </p>
                <div class="d-grid mb-3">
                    <a href="/vk/connect" class="btn btn-primary btn-lg">
                        <i class="bi bi-box-arrow-in-right me-2"></i>Подключить ВКонтакте
                    </a>
                </div>
                <hr class="my-4">
                <p class="text-muted small mb-2">Или введите токен вручную:</p>
                {% else %}
                <p class="text-muted mb-3">
                    Для синхронизации товаров необходим <strong>токен пользователя</strong> ВКонтакте
                    с правами на управление товарами сообщества.
                </p>
                {% endif %}

                <form method="post" action="/vk/token">
                    <div class="mb-3">
                        <label class="form-label small text-muted">Токен пользователя ВКонтакте</label>
                        <input type="text" name="token" class="form-control font-monospace" placeholder="Вставьте токен пользователя" required {% if vk_client_id %}{% else %}autofocus{% endif %}>
                    </div>
                    <div class="d-grid">
                        <button type="submit" class="btn {% if vk_client_id %}btn-outline-secondary{% else %}btn-primary{% endif %}">Подключить</button>
                    </div>
                </form>
            </div>
            {% endif %}

        </div>

        <div class="mt-3 text-center">
            <a href="/connections" class="text-muted small">
                <i class="bi bi-arrow-left me-1"></i>Вернуться к подключениям
            </a>
        </div>

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