{% extends "base.html" %}
{% block title %}Подключение аккаунта — TG Agent{% endblock %}
{% block content %}
<h1>Подключение аккаунта</h1>

<div class="card mb-4">
    <div class="card-header fw-semibold">Инструкция</div>
    <div class="card-body">
        <ol>
            <li>Настройте API credentials на странице <a href="/settings">Настройки</a></li>
            <li>Введите номер телефона в международном формате (например, <code>+1234567890</code>)</li>
            <li>Нажмите «Отправить код»</li>
            <li>Введите код из Telegram</li>
            <li>Если включена 2FA — введите пароль</li>
        </ol>
        <details>
            <summary>Важно</summary>
            <ul class="mt-2">
                <li>Первый аккаунт станет основным</li>
                <li>Добавьте второй аккаунт как fallback</li>
                <li>Данные сессии хранятся локально безопасно</li>
            </ul>
        </details>
    </div>
</div>

{% if error %}
<div class="alert alert-danger" role="alert">{{ error }}</div>
{% endif %}

{% if step == 'pending' %}
<div class="card mb-4">
    <div class="card-body">
        <p class="mb-2">Команда отправлена в worker и сейчас обрабатывается.</p>
        <p class="text-muted small mb-2">
            {% if pending_status == 'running' %}
            Выполняется {{ pending_elapsed_seconds or 0 }} сек.
            {% else %}
            Ожидает worker {{ pending_elapsed_seconds or 0 }} сек.
            {% endif %}
        </p>
        {% if pending_slow %}
        <div class="alert alert-warning mb-2" role="alert">
            запрос к Telegram занял слишком много времени, worker завершит его ошибкой.
        </div>
        {% endif %}
        <p class="text-muted small mb-0">Страница обновится автоматически, когда команда завершится.</p>
    </div>
</div>
<script>
(function() {
    setTimeout(function() {
        window.location.reload();
    }, 1500);
})();
</script>

{% elif step == 'credentials' %}
<div class="card mb-4">
    <div class="card-header fw-semibold">Шаг 1: API Credentials</div>
    <div class="card-body">
        <p>API credentials не настроены. Введите <code>api_id</code> и <code>api_hash</code> с <a href="https://my.telegram.org/apps" target="_blank">my.telegram.org/apps</a>.</p>
        <form method="post" action="/auth/save-credentials" data-busy>
            <div class="mb-3">
                <label for="api_id" class="form-label">API ID</label>
                <input type="number" class="form-control" id="api_id" name="api_id" placeholder="12345678" required>
            </div>
            <div class="mb-3">
                <label for="api_hash" class="form-label">API Hash</label>
                <input type="text" class="form-control" id="api_hash" name="api_hash" placeholder="0123456789abcdef..." required>
            </div>
            <button type="submit" class="btn btn-primary">Сохранить</button>
        </form>
    </div>
</div>

{% elif step == 'phone' or not step %}
<div class="card mb-4">
    <div class="card-body">
        <form method="post" action="/auth/send-code" data-busy>
            <div class="mb-3">
                <label for="phone" class="form-label">Номер телефона</label>
                <input type="tel" class="form-control" id="phone" name="phone" placeholder="+1234567890" value="{{ phone or '' }}" required>
            </div>
            <button type="submit" class="btn btn-primary">Отправить код</button>
        </form>
    </div>
</div>

{% elif step == 'code' %}
<div class="card mb-4">
    <div class="card-body">
        <form method="post" action="/auth/verify-code" data-busy>
            <input type="hidden" name="phone" value="{{ phone }}">
            <input type="hidden" name="phone_code_hash" value="{{ phone_code_hash }}">
            <input type="hidden" name="code_type" value="{{ code_type or '' }}">
            <input type="hidden" name="next_type" value="{{ next_type or '' }}">
            <input type="hidden" name="timeout" value="{{ timeout or '' }}">
            <p>Код отправлен через <strong>{{ code_type or 'Telegram' }}</strong> на <strong>{{ phone }}</strong></p>
            <div class="mb-3">
                <label for="code" class="form-label">Код подтверждения</label>
                <input type="text" class="form-control" id="code" name="code" placeholder="12345" required autofocus>
            </div>
            <div class="mb-3">
                <label for="password_2fa" class="form-label">Пароль 2FA (если есть)</label>
                <input type="password" class="form-control" id="password_2fa" name="password_2fa" placeholder="Оставьте пустым, если нет 2FA">
            </div>
            <button type="submit" class="btn btn-primary">Подтвердить</button>
        </form>
        {% if next_type %}
        <form method="post" action="/auth/resend-code" class="mt-3" data-busy>
            <input type="hidden" name="phone" value="{{ phone }}">
            <input type="hidden" name="phone_code_hash" value="{{ phone_code_hash }}">
            <button type="submit" id="resend-btn" class="btn btn-outline-secondary">
                Отправить через {{ next_type }}
            </button>
        </form>
        {% endif %}
        <form method="post" action="/auth/send-code" class="mt-2" data-busy>
            <input type="hidden" name="phone" value="{{ phone }}">
            <button type="submit" class="btn btn-outline-secondary">Отправить код повторно</button>
        </form>
        <a href="/auth/login" class="btn btn-outline-secondary mt-2 d-block text-center">Указать другой номер</a>
    </div>
</div>
{% if timeout %}
<script>
(function() {
    var btn = document.getElementById('resend-btn');
    if (!btn) return;
    var remaining = {{ timeout }};
    if (remaining <= 0) return;
    btn.disabled = true;
    var originalText = btn.textContent;
    function tick() {
        if (remaining <= 0) {
            btn.disabled = false;
            btn.textContent = originalText;
            return;
        }
        btn.textContent = originalText + ' (' + remaining + ' сек)';
        remaining--;
        setTimeout(tick, 1000);
    }
    tick();
})();
</script>
{% endif %}

{% elif step == '2fa' %}
<div class="card mb-4">
    <div class="card-body">
        <form method="post" action="/auth/verify-code" data-busy>
            <input type="hidden" name="phone" value="{{ phone }}">
            <input type="hidden" name="code" value="{{ code }}">
            <input type="hidden" name="phone_code_hash" value="{{ phone_code_hash }}">
            <p>Требуется пароль двухфакторной аутентификации для <strong>{{ phone }}</strong></p>
            <div class="mb-3">
                <label for="password_2fa" class="form-label">Пароль 2FA</label>
                <input type="password" class="form-control" id="password_2fa" name="password_2fa" required autofocus>
            </div>
            <button type="submit" class="btn btn-primary">Подтвердить</button>
        </form>
    </div>
</div>
{% endif %}
{% endblock %}