{% extends "base.html" %}

{% block title %}Регистрация{% endblock %}

{% block extra_head %}
<!-- Inputmask для маски телефона -->
<script src="https://cdn.jsdelivr.net/npm/inputmask@5.0.8/dist/inputmask.min.js"></script>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-7 col-lg-5">
        <div class="card shadow">
            <div class="card-header bg-success text-white">
                <h4 class="mb-0">📝 Регистрация</h4>
            </div>
            <div class="card-body p-4">
                <!-- Общая ошибка -->
                <div id="formError" class="alert alert-danger d-none"></div>

                <form id="registerForm" novalidate>
                    {{REGISTER_LOGIN_FIELD}}

                    <!-- Пароль -->
                    <div class="mb-3">
                        <label for="password" class="form-label fw-semibold">Пароль <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="password" name="password"
                                   placeholder="Минимум 8 символов" required autocomplete="new-password">
                            <button class="btn btn-outline-secondary" type="button" id="togglePw">👁</button>
                        </div>
                        <div class="invalid-feedback" id="passwordError"></div>
                        <!-- Индикатор силы пароля -->
                        <div class="mt-1">
                            <div class="progress" style="height: 4px;">
                                <div class="progress-bar" id="passwordStrength" role="progressbar" style="width: 0%"></div>
                            </div>
                            <small class="text-muted" id="passwordStrengthText"></small>
                        </div>
                    </div>

                    <!-- Подтверждение пароля -->
                    <div class="mb-3">
                        <label for="confirm_password" class="form-label fw-semibold">Подтверждение пароля <span class="text-danger">*</span></label>
                        <input type="password" class="form-control" id="confirm_password" name="confirm_password"
                               placeholder="Повторите пароль" required autocomplete="new-password">
                        <div class="invalid-feedback" id="confirmError"></div>
                    </div>

                    {{REGISTER_EXTRA_FIELDS}}
                    {{CUSTOM_USER_REG_FIELDS}}

                    <!-- Согласие -->
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="rules" name="rules" required>
                        <label class="form-check-label" for="rules">
                            Я согласен(на) на обработку персональных данных <span class="text-danger">*</span>
                        </label>
                        <div class="invalid-feedback" id="rulesError"></div>
                    </div>

                    <button type="submit" class="btn btn-success w-100 py-2" id="submitBtn">
                        Зарегистрироваться
                    </button>
                </form>
                <hr>
                <div class="text-center">
                    <a href="{{ url_for('login') }}" class="text-decoration-none">
                        Уже есть аккаунт? <strong>Войти</strong>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// ─── Маска телефона ───────────────────────────────────────────────
{{PHONE_MASK_SCRIPT}}

// ─── Показать/скрыть пароль ───────────────────────────────────────
document.getElementById('togglePw').addEventListener('click', function() {
    const pw = document.getElementById('password');
    pw.type = pw.type === 'password' ? 'text' : 'password';
    this.textContent = pw.type === 'password' ? '👁' : '🙈';
});

// ─── Индикатор силы пароля ────────────────────────────────────────
document.getElementById('password').addEventListener('input', function() {
    const val = this.value;
    const bar = document.getElementById('passwordStrength');
    const txt = document.getElementById('passwordStrengthText');
    let score = 0;
    if (val.length >= 8) score++;
    if (/[A-Z]/.test(val)) score++;
    if (/[a-z]/.test(val)) score++;
    if (/\d/.test(val)) score++;
    if (/[^A-Za-z0-9]/.test(val)) score++;

    const levels = [
        { pct: 0,   cls: '',        txt: '' },
        { pct: 20,  cls: 'bg-danger',  txt: 'Очень слабый' },
        { pct: 40,  cls: 'bg-warning', txt: 'Слабый' },
        { pct: 60,  cls: 'bg-info',    txt: 'Средний' },
        { pct: 80,  cls: 'bg-primary', txt: 'Хороший' },
        { pct: 100, cls: 'bg-success', txt: 'Отличный' },
    ];
    const lvl = levels[score];
    bar.style.width = lvl.pct + '%';
    bar.className = 'progress-bar ' + lvl.cls;
    txt.textContent = lvl.txt;
});

// ─── Проверка совпадения паролей в реальном времени ───────────────
document.getElementById('confirm_password').addEventListener('input', function() {
    const pw = document.getElementById('password').value;
    if (this.value && this.value !== pw) {
        this.classList.add('is-invalid');
        this.classList.remove('is-valid');
        document.getElementById('confirmError').textContent = 'Пароли не совпадают';
    } else if (this.value) {
        this.classList.remove('is-invalid');
        this.classList.add('is-valid');
        document.getElementById('confirmError').textContent = '';
    }
});

{{REGISTER_LOGIN_CHECK_SCRIPT}}

// ─── Отправка формы через AJAX ────────────────────────────────────
document.getElementById('registerForm').addEventListener('submit', function(e) {
    e.preventDefault();

    // Сброс ошибок
    document.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
    document.getElementById('formError').classList.add('d-none');

    const btn = document.getElementById('submitBtn');
    btn.disabled = true;
    btn.textContent = 'Регистрация...';

    const formData = new FormData(this);

    fetch('/register', {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            window.location.href = data.redirect;
        } else {
            // Показываем ошибки под полями
            for (const [field, msg] of Object.entries(data.errors)) {
                const input = document.getElementById(field) || document.querySelector('[name="' + field + '"]');
                const errEl = document.getElementById(field + 'Error');
                if (input) {
                    input.classList.add('is-invalid');
                }
                if (errEl) {
                    errEl.textContent = msg;
                } else {
                    // Если нет конкретного поля — показываем общую ошибку
                    const fe = document.getElementById('formError');
                    fe.textContent = msg;
                    fe.classList.remove('d-none');
                }
            }
            btn.disabled = false;
            btn.textContent = 'Зарегистрироваться';
        }
    })
    .catch(() => {
        document.getElementById('formError').textContent = 'Ошибка соединения. Попробуйте ещё раз.';
        document.getElementById('formError').classList.remove('d-none');
        btn.disabled = false;
        btn.textContent = 'Зарегистрироваться';
    });
});
</script>
{% endblock %}