<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Вход — WBfeed</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
</head>
<body>
<div class="login-split">

    <!-- Левая панель — маркетинг -->
    <div class="login-promo">
        <div class="login-promo__inner">
            <div class="login-brand">
                <div class="login-brand__icon">
                    <img src="{{ url_for('static', filename='wb3.png') }}" alt="WB">
                </div>
                
            </div>

            <h1 class="login-promo__title">Автоответы на отзывы<br>Wildberries — на автопилоте</h1>
            <p class="login-promo__sub">Сервис сам отвечает на отзывы покупателей пока вы занимаетесь бизнесом. Никаких ручных ответов, никаких пропущенных оценок.</p>

            <ul class="login-features">
                <li class="login-features__item">
                    <span class="login-features__icon">⚡</span>
                    <div>
                        <strong>Автоответы 24/7</strong>
                        <span>Настраивайте ответы для каждого рейтинга — от 1★ до 5★, с нужными шаблонами</span>
                    </div>
                </li>
                <li class="login-features__item">
                    <span class="login-features__icon">✏️</span>
                    <div>
                        <strong>Свои шаблоны</strong>
                        <span>Настройте уникальные ответы для каждой оценки — звучит как живой человек</span>
                    </div>
                </li>
                <li class="login-features__item">
                    <span class="login-features__icon">🏪</span>
                    <div>
                        <strong>Несколько магазинов</strong>
                        <span>Управляйте всеми аккаунтами WB из одного кабинета</span>
                    </div>
                </li>
                <li class="login-features__item">
                    <span class="login-features__icon">📋</span>
                    <div>
                        <strong>Журнал и очередь</strong>
                        <span>Видите каждый отправленный ответ с датой, оценкой и текстом</span>
                    </div>
                </li>
            </ul>

            <div class="login-price">
                <div class="login-price__amount">15 ₽<span>/день</span></div>
                <div class="login-price__desc">За один магазин. До 144 ответов в день</div>
            </div>
        </div>
    </div>

    <!-- Правая панель — форма -->
    <div class="login-form-wrap">
        <section class="auth-card">
            <div class="auth-kicker">
                <img src="{{ url_for('static', filename='wb3.png') }}" class="auth-kicker-logo-img" alt="WB">
                
            </div>
            <h2 class="login-form-title">Войдите в кабинет</h2>

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

            <form method="post" class="auth-form">
                <label>
                    Логин
                    <input type="text" name="username" placeholder="Введите логин" required autofocus />
                </label>
                <label>
                    Пароль
                    <input type="password" name="password" placeholder="••••••••" required />
                </label>
                <button type="submit">Войти</button>
            </form>

            <p class="auth-footer">Нет аккаунта? <a href="#" id="open-request-modal">Запросить доступ</a></p>
        </section>
    </div>

</div>

<!-- Модал запроса доступа -->
<div class="modal-overlay" id="request-modal">
    <div class="modal-card">
        <button class="modal-close" id="close-request-modal">&times;</button>

        <div id="modal-form-view">
            <div class="auth-kicker" style="margin-bottom:16px">
                <img src="{{ url_for('static', filename='wb3.png') }}" class="auth-kicker-logo-img" alt="WB">
            </div>
            <h2 class="login-form-title">Запросить доступ</h2>
            <p style="font-size:13px;color:#6b7280;margin-bottom:20px;margin-top:-10px">Оставьте контакты — мы свяжемся и откроем доступ.</p>

            <div class="alert alert-error" id="modal-error" style="display:none"></div>

            <form class="auth-form" id="request-form" novalidate>
                <label>
                    Имя
                    <input type="text" name="name" placeholder="Иван Иванов" required autocomplete="name">
                    <span class="field-error" id="err-name"></span>
                </label>
                <label>
                    Email
                    <input type="email" name="email" placeholder="ivan@company.ru" required autocomplete="email">
                    <span class="field-error" id="err-email"></span>
                </label>
                <label>
                    Телефон
                    <input type="tel" name="phone" placeholder="+7 999 000-00-00" required autocomplete="tel">
                    <span class="field-error" id="err-phone"></span>
                </label>
                <button type="submit" id="request-submit">Отправить запрос</button>
            </form>
        </div>

        <div id="modal-success-view" style="display:none;text-align:center;padding:20px 0">
            <div style="font-size:52px;margin-bottom:16px">✅</div>
            <h2 style="margin-bottom:10px">Запрос отправлен!</h2>
            <p style="font-size:14px;color:#6b7280">Мы получили ваши данные и скоро свяжемся с вами.</p>
        </div>
    </div>
</div>

<style>
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.modal-overlay.active { opacity: 1; pointer-events: all; }
.modal-card {
    background: #fff;
    border-radius: 22px;
    padding: 40px;
    width: 100%;
    max-width: 420px;
    margin: 20px;
    position: relative;
    box-shadow: 0 32px 80px rgba(0,0,0,0.22);
    transform: translateY(20px) scale(0.98);
    transition: transform 0.2s ease;
}
.modal-overlay.active .modal-card { transform: translateY(0) scale(1); }
.modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #f3f4f6;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #9ca3af;
    display: flex; align-items: center; justify-content: center;
    box-shadow: none; padding: 0;
}
.modal-close:hover { background: #e5e7eb; color: #374151; transform: none; filter: none; }
.field-error { display: block; font-size: 11px; color: #dc2626; margin-top: 3px; min-height: 15px; }
</style>

<script>
const modal    = document.getElementById('request-modal');
const openBtn  = document.getElementById('open-request-modal');
const closeBtn = document.getElementById('close-request-modal');

openBtn.addEventListener('click', e => { e.preventDefault(); modal.classList.add('active'); });
closeBtn.addEventListener('click', () => modal.classList.remove('active'));
modal.addEventListener('click', e => { if (e.target === modal) modal.classList.remove('active'); });
document.addEventListener('keydown', e => { if (e.key === 'Escape') modal.classList.remove('active'); });

const form = document.getElementById('request-form');

function validateField(name) {
    const input = form[name];
    const errEl = document.getElementById('err-' + name);
    const val   = input.value.trim();
    let msg = '';

    if (name === 'name'  && !val)
        msg = 'Введите имя';
    if (name === 'email' && (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)))
        msg = 'Введите корректный email';
    if (name === 'phone' && val.replace(/\D/g, '').length < 10)
        msg = 'Введите корректный телефон';

    errEl.textContent = msg;
    input.classList.toggle('input-invalid', !!msg);
    return !msg;
}

['name', 'email', 'phone'].forEach(name => {
    const input = form[name];
    input.addEventListener('blur',  () => validateField(name));
    input.addEventListener('input', () => {
        if (input.classList.contains('input-invalid')) validateField(name);
    });
});

form.addEventListener('submit', async e => {
    e.preventDefault();
    const validName  = validateField('name');
    const validEmail = validateField('email');
    const validPhone = validateField('phone');
    if (!validName || !validEmail || !validPhone) return;

    document.getElementById('modal-error').style.display = 'none';

    const btn = document.getElementById('request-submit');
    btn.disabled = true; btn.textContent = 'Отправка…';

    try {
        const res  = await fetch('/request-access', { method: 'POST', body: new FormData(form) });
        const data = await res.json();
        if (data.ok) {
            document.getElementById('modal-form-view').style.display = 'none';
            document.getElementById('modal-success-view').style.display = 'block';
        } else {
            document.getElementById('modal-error').textContent = data.error || 'Ошибка. Попробуйте ещё раз.';
            document.getElementById('modal-error').style.display = 'block';
            btn.disabled = false; btn.textContent = 'Отправить запрос';
        }
    } catch {
        document.getElementById('modal-error').textContent = 'Ошибка сети. Попробуйте ещё раз.';
        document.getElementById('modal-error').style.display = 'block';
        btn.disabled = false; btn.textContent = 'Отправить запрос';
    }
});
</script>
</body>
</html>
