{% extends "base.html" %}

{% block title %}Sign In – Try English AI{% endblock %}

{% block extra_css %}
<script src="https://cdn.tailwindcss.com"></script>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
    body { font-family: 'Inter', sans-serif; }
    /* ── Dark AI palette ── */
    .dg { background-image:radial-gradient(rgba(6,182,212,0.45) 1px,transparent 1px);background-size:36px 36px; }
    .gc { background:rgba(6,182,212,0.04);border:1px solid rgba(6,182,212,0.15);border-radius:1rem; }
    .di { background:rgba(255,255,255,0.05);border:1px solid rgba(6,182,212,0.2);color:#f0f9ff;border-radius:0.5rem;padding:0.75rem 0.75rem 0.75rem 2.5rem;width:100%;font-size:0.875rem;transition:all 0.2s; }
    .di:focus { outline:none;border-color:#22d3ee;box-shadow:0 0 0 3px rgba(6,182,212,0.12);background:rgba(6,182,212,0.07); }
    .di::placeholder { color:rgba(148,163,184,0.45); }
    .iw { position:relative; }
    .iw .ii { position:absolute;left:12px;top:50%;transform:translateY(-50%);color:rgba(6,182,212,0.55);font-size:13px;pointer-events:none;z-index:1; }
    .iw .pe { position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(148,163,184,0.5);cursor:pointer;padding:4px; }
    .iw .pe:hover { color:#67e8f9; }
    .fl { display:block;font-size:0.78rem;font-weight:600;color:#94a3b8;margin-bottom:0.45rem;letter-spacing:0.04em; }
    .fe { color:#f87171;font-size:0.75rem;margin-top:0.3rem;display:flex;align-items:center;gap:4px; }
    .btn-p { display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;background:linear-gradient(135deg,#22d3ee,#6366f1);color:#04091a;font-weight:700;border-radius:0.5rem;padding:0.75rem 2rem;transition:all 0.2s;border:none;cursor:pointer;font-size:0.875rem;width:100%; }
    .btn-p:hover { transform:translateY(-1px);box-shadow:0 0 28px rgba(6,182,212,0.28); }
    .pill { display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:999px;font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;border:1px solid rgba(6,182,212,0.3);background:rgba(6,182,212,0.08);color:#67e8f9; }
    .fm-e { background:rgba(248,113,113,0.1);border:1px solid rgba(248,113,113,0.3);color:#fca5a5;border-radius:0.5rem;padding:0.65rem 1rem;font-size:0.85rem;margin-bottom:0.75rem; }
    .fm-s { background:rgba(34,211,238,0.07);border:1px solid rgba(34,211,238,0.25);color:#67e8f9;border-radius:0.5rem;padding:0.65rem 1rem;font-size:0.85rem;margin-bottom:0.75rem; }
    .fm-w { background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.25);color:#fde68a;border-radius:0.5rem;padding:0.65rem 1rem;font-size:0.85rem;margin-bottom:0.75rem; }
    @keyframes fiu { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
    .fiu { animation:fiu 0.55s ease-out both; }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .fade-in-up { animation: fadeInUp 0.55s ease-out both; }
    .form-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
    .input-icon-wrapper { position: relative; }
    .input-icon-wrapper .icon-left {
        position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
        color: #9ca3af; pointer-events: none; font-size: 15px;
    }
    .input-icon-wrapper input { padding-left: 38px; }
    .floating-label { transition: all 0.2s ease; }
    @keyframes shake {
        0%,100% { transform: translateX(0); }
        20%,60% { transform: translateX(-5px); }
        40%,80% { transform: translateX(5px); }
    }
    .shake { animation: shake 0.4s ease; }
</style>
{% endblock extra_css %}

{% block content %}
<div class="min-h-screen flex" style="background:#04091a">

    <!-- Left Panel – AI branding -->
    <div class="hidden lg:flex lg:w-2/5 flex-col justify-between p-12 relative overflow-hidden" style="background:#080f1f;border-right:1px solid rgba(6,182,212,0.1)">
        <div class="absolute inset-0 dg opacity-50 pointer-events-none"></div>
        <div class="absolute top-1/4 right-0 w-72 h-72 rounded-full pointer-events-none" style="background:radial-gradient(ellipse,rgba(99,102,241,0.16),transparent 70%)"></div>
        <div class="absolute bottom-1/4 left-0 w-56 h-56 rounded-full pointer-events-none" style="background:radial-gradient(ellipse,rgba(6,182,212,0.10),transparent 70%)"></div>

        <!-- Logo -->
        <div class="relative z-10">
            <a href="{{ url_for('main.index') }}" class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background:rgba(6,182,212,0.15);border:1px solid rgba(6,182,212,0.3)">
                    <img src="{{ url_for('static', filename='images/icon.png') }}" alt="Try English" class="w-7 h-7 rounded-lg">
                </div>
                <span class="text-lg font-bold" style="background:linear-gradient(90deg,#22d3ee,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">Try English</span>
            </a>
        </div>

        <!-- Feature bullets -->
        <div class="relative z-10 space-y-5">
            <div>
                <div class="pill mb-4"><i class="fas fa-microchip"></i> AI-Powered Platform</div>
                <h2 class="text-3xl font-extrabold text-white leading-tight mb-3">Continue your<br>learning journey.</h2>
                <p class="text-sm leading-relaxed" style="color:#7dd3fc">Personalized AI assessment, expert teacher guidance — all in one place.</p>
            </div>
            <div class="space-y-3">
                <div class="flex items-center gap-3 rounded-xl px-4 py-3" style="background:rgba(6,182,212,0.06);border:1px solid rgba(6,182,212,0.12)">
                    <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0" style="background:rgba(6,182,212,0.15)"><i class="fas fa-robot text-cyan-300 text-sm"></i></div>
                    <div><p class="text-sm font-semibold text-white">3-Stage AI Assessment</p><p class="text-xs" style="color:#7dd3fc">Read · Speak · Comprehend</p></div>
                </div>
                <div class="flex items-center gap-3 rounded-xl px-4 py-3" style="background:rgba(99,102,241,0.06);border:1px solid rgba(99,102,241,0.12)">
                    <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0" style="background:rgba(99,102,241,0.15)"><i class="fas fa-chart-line text-indigo-300 text-sm"></i></div>
                    <div><p class="text-sm font-semibold text-white">Progress Dashboard</p><p class="text-xs" style="color:#a5b4fc">Track improvement daily</p></div>
                </div>
                <div class="flex items-center gap-3 rounded-xl px-4 py-3" style="background:rgba(139,92,246,0.06);border:1px solid rgba(139,92,246,0.12)">
                    <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0" style="background:rgba(139,92,246,0.15)"><i class="fas fa-chalkboard-teacher text-violet-300 text-sm"></i></div>
                    <div><p class="text-sm font-semibold text-white">Expert Teacher Support</p><p class="text-xs" style="color:#c4b5fd">Qualified instructors guide you</p></div>
                </div>
            </div>
        </div>

        <div class="relative z-10 text-xs" style="color:#334155">&copy; 2026 Try English. All rights reserved.</div>
    </div>

    <!-- Right Panel – form -->
    <div class="flex-1 flex items-center justify-center p-6 sm:p-10 relative" style="background:#04091a">
        <div class="absolute inset-0 dg opacity-25 pointer-events-none"></div>
        <div class="w-full max-w-md fiu relative z-10">

            <!-- Mobile logo -->
            <div class="flex justify-center mb-8 lg:hidden">
                <a href="{{ url_for('main.index') }}" class="flex items-center gap-2">
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center" style="background:rgba(6,182,212,0.15);border:1px solid rgba(6,182,212,0.3)">
                        <img src="{{ url_for('static', filename='images/icon.png') }}" alt="Try English" class="w-7 h-7 rounded-lg">
                    </div>
                    <span class="text-lg font-bold" style="background:linear-gradient(90deg,#22d3ee,#818cf8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">Try English</span>
                </a>
            </div>

            {% with messages = get_flashed_messages(with_categories=true) %}{% if messages %}{% for category, message in messages %}
                <div class="fm-{{ 'e' if category == 'error' else ('w' if category == 'warning' else 's') }}"><i class="fas fa-{{ 'exclamation-circle' if category == 'error' else ('exclamation-triangle' if category == 'warning' else 'check-circle') }} mr-2"></i>{{ message }}</div>
            {% endfor %}{% endif %}{% endwith %}

            <div class="mb-7">
                <h1 class="text-2xl sm:text-3xl font-bold text-white mb-1">Welcome back</h1>
                <p class="text-sm" style="color:#7dd3fc">Sign in to continue your learning</p>
            </div>

            <!-- Form card -->
            <div class="gc p-6 sm:p-8">
                <form method="POST" id="loginForm" class="space-y-5" novalidate>
                    {{ form.hidden_tag() }}

                    <div>
                        <label for="email" class="fl">Email Address</label>
                        <div class="iw">
                            <i class="fas fa-envelope ii"></i>
                            {{ form.email(class="di", placeholder="you@example.com", id="email", autocomplete="email") }}
                        </div>
                        {% if form.email.errors %}{% for e in form.email.errors %}<p class="fe"><i class="fas fa-exclamation-circle"></i>{{ e }}</p>{% endfor %}{% endif %}
                    </div>

                    <div>
                        <label for="password" class="fl">Password</label>
                        <div class="iw">
                            <i class="fas fa-lock ii"></i>
                            {{ form.password(class="di", style="padding-right:2.5rem", placeholder="••••••••", id="password", autocomplete="current-password") }}
                            <button type="button" class="pe" onclick="togglePw('password','pi1')" aria-label="Toggle"><i id="pi1" class="fas fa-eye"></i></button>
                        </div>
                        {% if form.password.errors %}{% for e in form.password.errors %}<p class="fe"><i class="fas fa-exclamation-circle"></i>{{ e }}</p>{% endfor %}{% endif %}
                    </div>

                    <div class="flex items-center justify-between">
                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" name="remember-me" id="remember-me" class="w-4 h-4 rounded" style="accent-color:#22d3ee">
                            <span class="text-sm" style="color:#94a3b8">Remember me</span>
                        </label>
                        <a href="{{ url_for('auth.forgot_password') }}" class="text-sm font-medium" style="color:#67e8f9" onmouseover="this.style.color='#22d3ee'" onmouseout="this.style.color='#67e8f9'">Forgot password?</a>
                    </div>

                    <button type="submit" id="submitBtn" class="btn-p">
                        <span id="btnText">Sign In</span>
                        <i class="fas fa-arrow-right text-sm" id="btnIcon"></i>
                        <span id="btnSpinner" class="hidden"><i class="fas fa-spinner fa-spin"></i></span>
                    </button>
                </form>
            </div>

            <div class="mt-6 flex items-center gap-4">
                <div class="flex-1" style="height:1px;background:rgba(6,182,212,0.1)"></div>
                <span class="text-xs font-medium" style="color:#475569">OR</span>
                <div class="flex-1" style="height:1px;background:rgba(6,182,212,0.1)"></div>
            </div>

            <div class="mt-5 text-center space-y-3">
                <p class="text-sm" style="color:#94a3b8">New to Try English AI? <a href="{{ url_for('auth.signup') }}" class="font-semibold ml-1" style="color:#67e8f9" onmouseover="this.style.color='#22d3ee'" onmouseout="this.style.color='#67e8f9'">Create a free account</a></p>
                <div class="flex justify-center gap-4 text-xs" style="color:#475569">
                    <a href="{{ url_for('main.short_courses') }}" onmouseover="this.style.color='#67e8f9'" onmouseout="this.style.color='#475569'">Short Courses</a>
                    <span style="color:#334155">·</span>
                    <a href="{{ url_for('main.learning_courses') }}" onmouseover="this.style.color='#67e8f9'" onmouseout="this.style.color='#475569'">Learning Courses</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function togglePw(f,i){const field=document.getElementById(f),icon=document.getElementById(i);if(!field||!icon)return;const s=field.type==='password';field.type=s?'text':'password';icon.className=s?'fas fa-eye-slash':'fas fa-eye';}
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('loginForm');
    const submitBtn = document.getElementById('submitBtn');
    const btnText = document.getElementById('btnText');
    const btnIcon = document.getElementById('btnIcon');
    const btnSpinner = document.getElementById('btnSpinner');
    if (form) {
        form.addEventListener('submit', function () {
            submitBtn.disabled = true;
            btnText.textContent = 'Signing in...';
            btnIcon.classList.add('hidden');
            btnSpinner.classList.remove('hidden');
        });
    }

    const emailField = document.getElementById('email');
    if (emailField) {
        emailField.addEventListener('blur', function () {
            if (this.value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.value)) this.style.borderColor='#f87171';
        });
        emailField.addEventListener('input', function () { this.style.borderColor=''; });
    }
});
</script>
{% endblock content %}