{% extends "base.html" %}

{% block title %}Create Account \u2013 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; }
    /* ── AI dark palette ── */
    .dg { background-image:radial-gradient(rgba(6,182,212,0.4) 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; }
    /* Dark inputs */
    .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); }
    .di-select { 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 0.75rem;width:100%;font-size:0.875rem;transition:all 0.2s; }
    .di-select:focus { outline:none;border-color:#22d3ee;box-shadow:0 0 0 3px rgba(6,182,212,0.12); }
    .di-select option { background:#0b1225;color:#f0f9ff; }
    /* Input wrapper */
    .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 .ii-select { left:auto; }
    .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; }
    /* Field label */
    .fl { display:block;font-size:0.78rem;font-weight:600;color:#94a3b8;margin-bottom:0.45rem;letter-spacing:0.04em; }
    /* Error */
    .fe { color:#f87171;font-size:0.75rem;margin-top:0.3rem;display:flex;align-items:center;gap:4px; }
    /* Buttons */
    .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.7rem 1.75rem;transition:all 0.2s;border:none;cursor:pointer;font-size:0.875rem; }
    .btn-p:hover { transform:translateY(-1px);box-shadow:0 0 24px rgba(6,182,212,0.25); }
    .btn-ghost { display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;border:1px solid rgba(6,182,212,0.3);color:#e0f2fe;border-radius:0.5rem;padding:0.7rem 1.5rem;transition:all 0.2s;background:transparent;cursor:pointer;font-size:0.875rem;font-weight:600; }
    .btn-ghost:hover { background:rgba(6,182,212,0.08); }
    /* Pill */
    .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; }
    /* Flash */
    .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; }
    /* Strength bars */
    .sb { height:3px;border-radius:2px;transition:all 0.3s;flex:1; }
    /* fadeInUp */
    @keyframes fiu { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
    .fiu { animation:fiu 0.5s ease-out; }
    /* Step connector */
    .sc { flex:1;height:3px;border-radius:2px;transition:background 0.4s; }
</style>
{% endblock extra_css %}

{% block content %}
{%- set sec2_err = form.roll_number.errors or form.section.errors or form.program.errors or form.department.errors %}
{%- set sec1_err = form.username.errors or form.email.errors or form.password.errors or form.confirm_password.errors %}
{%- set start2 = sec2_err and not sec1_err %}

<div class="min-h-screen relative" style="background:#04091a">
    <div class="absolute inset-0 dg opacity-30 pointer-events-none"></div>
    <div class="absolute left-1/4 top-0 w-96 h-96 rounded-full pointer-events-none" style="background:radial-gradient(ellipse,rgba(99,102,241,0.10),transparent 70%)"></div>
    <div class="absolute right-1/4 bottom-0 w-72 h-72 rounded-full pointer-events-none" style="background:radial-gradient(ellipse,rgba(6,182,212,0.08),transparent 70%)"></div>

    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

        <!-- Header -->
        <div class="text-center mb-10 fiu">
            <a href="{{ url_for('main.index') }}" class="inline-flex items-center gap-2 mb-6">
                <div class="w-9 h-9 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="" class="w-6 h-6 rounded-lg">
                </div>
                <span class="text-base 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>
            <h1 class="text-3xl md:text-4xl font-extrabold text-white mb-3">Create Your Account</h1>
            <p class="text-base" style="color:#7dd3fc">Start your AI-powered English learning journey today</p>
        </div>

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

        <!-- Step indicator -->
        <div class="flex items-center justify-center gap-3 mb-8 fiu">
            <div class="flex items-center gap-2">
                <div id="step1-ind" class="w-9 h-9 rounded-full flex items-center justify-center font-bold text-sm transition-all" style="background:linear-gradient(135deg,#22d3ee,#6366f1);color:#04091a">1</div>
                <span id="step1-txt" class="text-sm font-semibold hidden sm:block transition-all" style="color:#67e8f9">Personal Info</span>
            </div>
            <div class="sc w-16" style="background:rgba(6,182,212,0.12)">
                <div id="step-prog" class="h-full rounded transition-all" style="background:rgba(6,182,212,0.12);width:0%"></div>
            </div>
            <div class="flex items-center gap-2">
                <div id="step2-ind" class="w-9 h-9 rounded-full flex items-center justify-center font-bold text-sm transition-all" style="background:rgba(255,255,255,0.07);border:1px solid rgba(6,182,212,0.18);color:#475569">2</div>
                <span id="step2-txt" class="text-sm font-semibold hidden sm:block transition-all" style="color:#475569">Academic Info</span>
            </div>
        </div>

        <!-- Form Card -->
        <div class="gc p-6 md:p-10 fiu">
            <form method="POST" id="signupForm" novalidate>
                {{ form.hidden_tag() }}

                <!-- ── Section 1: Personal ── -->
                <div id="section1">
                    <div class="mb-7">
                        <h2 class="text-xl font-bold text-white mb-1">Personal Information</h2>
                        <p class="text-sm" style="color:#94a3b8">Tell us a bit about yourself to get started</p>
                    </div>

                    <div class="grid md:grid-cols-2 gap-5 mb-5">
                        <div>
                            <label for="username" class="fl">Full Name *</label>
                            <div class="iw">
                                <i class="fas fa-user ii"></i>
                                {{ form.username(class="di", placeholder="Enter your full name", id="username") }}
                            </div>
                            {% if form.username.errors %}{% for e in form.username.errors %}<p class="fe"><i class="fas fa-exclamation-circle"></i> {{ e }}</p>{% endfor %}{% endif %}
                        </div>
                        <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>

                    <div class="grid md:grid-cols-2 gap-5 mb-5">
                        <div>
                            <label for="password" class="fl">Create Password *</label>
                            <div class="iw">
                                <i class="fas fa-lock ii"></i>
                                {{ form.password(class="di", style="padding-right:2.5rem", placeholder="Min. 6 characters", id="password") }}
                                <button type="button" class="pe" onclick="togglePw('password','pwi1')" aria-label="Toggle"><i id="pwi1" class="fas fa-eye"></i></button>
                            </div>
                            <div class="mt-2">
                                <div class="flex gap-1 mb-1">
                                    <div class="sb" id="bar1" style="background:rgba(255,255,255,0.08)"></div>
                                    <div class="sb" id="bar2" style="background:rgba(255,255,255,0.08)"></div>
                                    <div class="sb" id="bar3" style="background:rgba(255,255,255,0.08)"></div>
                                    <div class="sb" id="bar4" style="background:rgba(255,255,255,0.08)"></div>
                                </div>
                                <p id="strengthLabel" class="text-xs" style="color:#475569">Password strength</p>
                            </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>
                            <label for="confirm_password" class="fl">Confirm Password *</label>
                            <div class="iw">
                                <i class="fas fa-shield-alt ii"></i>
                                {{ form.confirm_password(class="di", style="padding-right:2.5rem", placeholder="Repeat password", id="confirm_password") }}
                                <button type="button" class="pe" onclick="togglePw('confirm_password','pwi2')" aria-label="Toggle"><i id="pwi2" class="fas fa-eye"></i></button>
                            </div>
                            {% if form.confirm_password.errors %}{% for e in form.confirm_password.errors %}<p class="fe"><i class="fas fa-exclamation-circle"></i> {{ e }}</p>{% endfor %}{% endif %}
                        </div>
                    </div>

                    {% if form.enrolling_course %}
                    <div class="mb-6">
                        <label for="enrolling_course" class="fl">Course (Optional)</label>
                        {% if form.enrolling_course.data %}
                            <select disabled class="di-select" id="enrolling_course_display">
                                <option value="">Select a course (optional)</option>
                                {% if short_courses %}<optgroup label="Short Courses">{% for c in short_courses %}<option value="short_{{ c.id }}" {% if form.enrolling_course.data == 'short_' ~ c.id|string %}selected{% endif %}>{{ c.title }}</option>{% endfor %}</optgroup>{% endif %}
                                {% if learning_courses %}<optgroup label="Learning Courses">{% for c in learning_courses %}<option value="learn_{{ c.id }}" {% if form.enrolling_course.data == 'learn_' ~ c.id|string %}selected{% endif %}>{{ c.title }}</option>{% endfor %}</optgroup>{% endif %}
                            </select>
                            <input type="hidden" name="enrolling_course" value="{{ form.enrolling_course.data }}">
                        {% else %}
                            <select name="enrolling_course" id="enrolling_course" class="di-select">
                                <option value="">Select a course (optional)</option>
                                {% if short_courses %}<optgroup label="Short Courses">{% for c in short_courses %}<option value="short_{{ c.id }}" {% if form.enrolling_course.data == 'short_' ~ c.id|string %}selected{% endif %}>{{ c.title }}</option>{% endfor %}</optgroup>{% endif %}
                                {% if learning_courses %}<optgroup label="Learning Courses">{% for c in learning_courses %}<option value="learn_{{ c.id }}" {% if form.enrolling_course.data == 'learn_' ~ c.id|string %}selected{% endif %}>{{ c.title }}</option>{% endfor %}</optgroup>{% endif %}
                            </select>
                        {% endif %}
                    </div>
                    {% endif %}

                    <div class="flex justify-end mt-2">
                        <button type="button" id="nextBtn" class="btn-p">Continue <i class="fas fa-arrow-right text-xs"></i></button>
                    </div>
                </div>

                <!-- ── Section 2: Academic ── -->
                <div id="section2" class="hidden">
                    <div class="mb-7">
                        <h2 class="text-xl font-bold text-white mb-1">Academic Information</h2>
                        <p class="text-sm" style="color:#94a3b8">Help us personalize your learning experience</p>
                    </div>

                    <div class="grid md:grid-cols-2 gap-5 mb-5">
                        <div>
                            <label for="roll_number" class="fl">Roll Number *</label>
                            <div class="iw">
                                <i class="fas fa-id-badge ii"></i>
                                {{ form.roll_number(class="di", placeholder="e.g. SP21-BCS-001", id="roll_number") }}
                            </div>
                            {% if form.roll_number.errors %}{% for e in form.roll_number.errors %}<p class="fe"><i class="fas fa-exclamation-circle"></i> {{ e }}</p>{% endfor %}{% endif %}
                        </div>
                        <div>
                            <label for="section" class="fl">Section *</label>
                            <div class="iw">
                                <i class="fas fa-sitemap ii"></i>
                                {{ form.section(class="di", placeholder="e.g. A or B", id="section") }}
                            </div>
                            {% if form.section.errors %}{% for e in form.section.errors %}<p class="fe"><i class="fas fa-exclamation-circle"></i> {{ e }}</p>{% endfor %}{% endif %}
                        </div>
                    </div>

                    <div class="grid md:grid-cols-2 gap-5 mb-7">
                        <div>
                            <label for="program" class="fl">Program *</label>
                            <div class="iw">
                                <i class="fas fa-book ii"></i>
                                {{ form.program(class="di", placeholder="e.g. BSc Computer Science", id="program") }}
                            </div>
                            {% if form.program.errors %}{% for e in form.program.errors %}<p class="fe"><i class="fas fa-exclamation-circle"></i> {{ e }}</p>{% endfor %}{% endif %}
                        </div>
                        <div>
                            <label for="department" class="fl">Department *</label>
                            <div class="iw">
                                <i class="fas fa-university ii"></i>
                                {{ form.department(class="di", placeholder="e.g. Computer Science", id="department") }}
                            </div>
                            {% if form.department.errors %}{% for e in form.department.errors %}<p class="fe"><i class="fas fa-exclamation-circle"></i> {{ e }}</p>{% endfor %}{% endif %}
                        </div>
                    </div>

                    <div class="flex justify-between items-center">
                        <button type="button" id="backBtn" class="btn-ghost"><i class="fas fa-arrow-left text-xs"></i> Back</button>
                        <button type="submit" id="submitBtn" class="btn-p"><i class="fas fa-user-check"></i> Create Account</button>
                    </div>
                </div>

            </form>
        </div>

        <p class="text-center text-sm mt-8" style="color:#475569">
            Already have an account?
            <a href="{{ url_for('auth.login') }}" class="font-semibold ml-1" style="color:#67e8f9"
               onmouseover="this.style.color='#22d3ee'" onmouseout="this.style.color='#67e8f9'">Sign In</a>
        </p>
    </div>
</div>

<script>
var START2 = {{ 'true' if start2 else 'false' }};
function togglePw(f, i) {
    var field = document.getElementById(f), icon = document.getElementById(i);
    if (!field || !icon) return;
    var show = field.type === 'password';
    field.type = show ? 'text' : 'password';
    icon.className = show ? 'fas fa-eye-slash' : 'fas fa-eye';
}
function pwStr(p) {
    var s = 0;
    if (p.length >= 6) s++;
    if (p.length >= 8) s++;
    if (/[A-Z]/.test(p)) s++;
    if (/[0-9]/.test(p) || /[^A-Za-z0-9]/.test(p)) s++;
    return s;
}
document.addEventListener('DOMContentLoaded', function () {
    var s1 = document.getElementById('section1'), s2 = document.getElementById('section2');
    var nextBtn = document.getElementById('nextBtn'), backBtn = document.getElementById('backBtn');
    var ind1 = document.getElementById('step1-ind'), ind2 = document.getElementById('step2-ind');
    var txt1 = document.getElementById('step1-txt'), txt2 = document.getElementById('step2-txt');
    var prog = document.getElementById('step-prog');

    function toS2() {
        s1.classList.add('hidden'); s2.classList.remove('hidden');
        ind1.innerHTML = '&#10003;';
        ind1.style.background = 'linear-gradient(135deg,#22c55e,#16a34a)'; txt1.style.color = '#4ade80';
        ind2.style.background = 'linear-gradient(135deg,#22d3ee,#6366f1)';
        ind2.style.border = 'none'; ind2.style.color = '#04091a'; txt2.style.color = '#67e8f9';
        prog.style.width = '100%'; prog.style.background = 'linear-gradient(90deg,#22d3ee,#6366f1)';
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }
    function toS1() {
        s2.classList.add('hidden'); s1.classList.remove('hidden');
        ind1.innerHTML = '1'; ind1.style.background = 'linear-gradient(135deg,#22d3ee,#6366f1)'; txt1.style.color = '#67e8f9';
        ind2.style.background = 'rgba(255,255,255,0.07)'; ind2.style.border = '1px solid rgba(6,182,212,0.18)';
        ind2.style.color = '#475569'; txt2.style.color = '#475569';
        prog.style.width = '0%'; prog.style.background = 'rgba(6,182,212,0.12)';
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    if (START2) toS2();

    function valS1() {
        var ok = true;
        ['username', 'email', 'password', 'confirm_password'].forEach(function (id) {
            var f = document.getElementById(id);
            if (!f || !f.value.trim()) { ok = false; if (f) f.style.borderColor = '#f87171'; }
            else { f.style.borderColor = ''; }
        });
        var em = document.getElementById('email');
        if (em && em.value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(em.value)) { ok = false; em.style.borderColor = '#f87171'; }
        var pw = document.getElementById('password'), cp = document.getElementById('confirm_password');
        if (pw && pw.value && pw.value.length < 6) { ok = false; pw.style.borderColor = '#f87171'; }
        if (pw && cp && pw.value !== cp.value) { ok = false; cp.style.borderColor = '#f87171'; }
        return ok;
    }

    nextBtn.addEventListener('click', function (e) { e.preventDefault(); if (valS1()) toS2(); });
    backBtn.addEventListener('click', function (e) { e.preventDefault(); toS1(); });

    var pwf = document.getElementById('password');
    if (pwf) {
        pwf.addEventListener('input', function () {
            var s = pwStr(this.value);
            var cols = ['', '#ef4444', '#f97316', '#eab308', '#22c55e'];
            ['bar1', 'bar2', 'bar3', 'bar4'].forEach(function (id, i) {
                var el = document.getElementById(id);
                if (el) el.style.background = i < s ? cols[s] : 'rgba(255,255,255,0.08)';
            });
            var lbl = document.getElementById('strengthLabel');
            if (lbl) {
                var labs = ['', 'Weak', 'Fair', 'Good', 'Strong'];
                var lcs = ['#ef4444', '#ef4444', '#f97316', '#eab308', '#22c55e'];
                lbl.textContent = this.value ? labs[s] : 'Password strength';
                lbl.style.color = this.value ? lcs[s] : '#475569';
            }
        });
    }
    document.querySelectorAll('input,select').forEach(function (f) {
        f.addEventListener('input', function () { this.style.borderColor = ''; });
        f.addEventListener('change', function () { this.style.borderColor = ''; });
    });
});
</script>
{% endblock content %}