import { getCsrfToken } from '../../utils/helpers.js';

export function initLoginForm($container) {
    $container.append(`
    <div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-4 bg-white shadow-sm rounded-4">
            <div class="text-center mb-4">
                <a href="/" class="text-decoration-none" style="font-size:2rem;font-weight:800;">
                    <span style="color:var(--tennis-green)">Tennis</span><span style="color:var(--tennis-dark)">Hub</span>
                </a>
                <p class="text-muted mt-1 mb-0">Войдите в свой аккаунт</p>
            </div>

            <div id="login-error-block" class="alert alert-danger d-none" role="alert">
                <i class="bi bi-exclamation-triangle me-2"></i>Неверный логин или пароль
            </div>

            <form id="login-form" method="POST" action="/account/login">
                <input type="hidden" name="_csrf" id="csrf-field">

                <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="username" name="username"
                           placeholder="email@example.com" autocomplete="email" required>
                    <label for="username">
                        <i class="bi bi-envelope me-1"></i>Email
                    </label>
                </div>

                <div class="form-floating mb-3 position-relative">
                    <input type="password" class="form-control" id="password" name="password"
                           placeholder="Пароль" autocomplete="current-password" required>
                    <label for="password">
                        <i class="bi bi-lock me-1"></i>Пароль
                    </label>
                    <button type="button" id="toggle-password"
                            class="btn btn-link position-absolute end-0 top-50 p-0 border-0"
                            style="transform:translateY(-50%); background:transparent; color:#6c757d; z-index:5; margin-right: 12px;">
                        <i class="bi bi-eye" id="toggle-password-icon"></i>
                    </button>
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn btn-lg w-100 fw-bold"
                            style="background:var(--tennis-green);color:#fff;border-radius:25px;">
                        <i class="bi bi-box-arrow-in-right me-2"></i>Войти
                    </button>
                </div>

                <div class="text-center mt-3">
<!--                    <span class="text-muted small">Нет аккаунта?</span>-->
<!--                    <button type="button" class="btn btn-link btn-sm p-0 ms-1"-->
<!--                            data-bs-toggle="modal" data-bs-target="#register-modal"-->
<!--                            style="color:var(&#45;&#45;tennis-green);font-size:0.875rem; text-decoration:none;">-->
<!--                        Зарегистрироваться-->
<!--                    </button>-->
<!--                </div>-->
            </form>
        </div>
    </div>
`);

    // ── Показать ошибку если ?error в URL ──
    const params = new URLSearchParams(window.location.search);
    if (params.has('error')) {
        $('#login-error-block').removeClass('d-none');
    }

    // ── Переключение видимости пароля ──
    $container.on('click', '#toggle-password', function () {
        const $input = $('#password');
        const $icon  = $('#toggle-password-icon');
        const isPass = $input.attr('type') === 'password';
        $input.attr('type', isPass ? 'text' : 'password');
        $icon.toggleClass('bi-eye', !isPass).toggleClass('bi-eye-fill', isPass);
    });

    // ── Подставить CSRF перед отправкой формы ──
    $container.on('submit', '#login-form', function () {
        $('#csrf-field').val(getCsrfToken());
    });
}
