{% extends "base.html" %}

{% block title %}登录 - AI 视界{% endblock %}

{% block content %}
<div class="w-full h-full flex items-center justify-center p-6 bg-slate-50/50 backdrop-blur-sm">
    <div
        class="auth-card w-full max-w-md space-y-8 bg-white p-10 rounded-[2.5rem] shadow-2xl border border-slate-100 relative z-10">
        <div class="text-center space-y-4">
            <div class="w-16 h-16 btn-primary mx-auto rounded-2xl flex items-center justify-center shadow-lg rotate-3">
                <i data-lucide="scan-eye" class="w-10 h-10"></i>
            </div>
            <div>
                <h2 id="authTitle" class="text-3xl font-black text-slate-900 tracking-tight">欢迎回来</h2>
                <p id="authSub" class="text-slate-400 text-sm mt-2">请登录以开启 AI 创作之旅</p>
            </div>
        </div>

        <div class="space-y-4">
            <div class="relative group">
                <input id="authPhone" type="text" placeholder="手机号"
                    class="w-full bg-slate-50 border border-slate-200 rounded-2xl p-4 pl-12 text-sm outline-none focus:border-indigo-500 transition-all">
                <i data-lucide="phone"
                    class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors"></i>
            </div>

            <div id="smsGroup" class="hidden relative group">
                <input id="authCode" type="text" placeholder="验证码"
                    class="w-full bg-slate-50 border border-slate-200 rounded-2xl p-4 pl-12 text-sm outline-none focus:border-indigo-500 transition-all">
                <i data-lucide="shield-check"
                    class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors"></i>
                <button id="sendSmsBtn"
                    class="absolute right-4 top-1/2 -translate-y-1/2 text-indigo-600 text-xs font-bold hover:text-indigo-700">发送验证码</button>
            </div>

            <!-- 图形验证码组 (仅在失败次数过多时显示) -->
            <div id="captchaGroup" class="hidden flex items-center gap-3">
                <div class="relative group flex-1">
                    <input id="authCaptcha" type="text" placeholder="图形验证码"
                        class="w-full bg-slate-50 border border-slate-200 rounded-2xl p-4 pl-12 text-sm outline-none focus:border-indigo-500 transition-all">
                    <i data-lucide="image"
                        class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors"></i>
                </div>
                <div class="w-32 h-14 bg-slate-100 rounded-2xl overflow-hidden cursor-pointer border border-slate-200 relative"
                    title="点击刷新验证码">
                    <span
                        class="absolute inset-0 flex items-center justify-center text-[10px] text-slate-400 font-bold z-0">输入手机号显示</span>
                    <img id="captchaImg" src="" class="w-full h-full object-cover relative z-10" alt="验证码"
                        onerror="this.style.display='none'" onload="this.style.display='block'">
                </div>
            </div>

            <div class="relative group">
                <input id="authPass" type="password" placeholder="密码"
                    class="w-full bg-slate-50 border border-slate-200 rounded-2xl p-4 pl-12 text-sm outline-none focus:border-indigo-500 transition-all">
                <i data-lucide="lock"
                    class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors"></i>
            </div>

            <div id="inviteGroup" class="hidden relative group">
                <input id="authInvite" type="text" placeholder="邀请码 (选填)"
                    class="w-full bg-slate-50 border border-slate-200 rounded-2xl p-4 pl-12 text-sm outline-none focus:border-indigo-500 transition-all uppercase">
                <i data-lucide="gift"
                    class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors"></i>
            </div>
        </div>

        <button id="authSubmitBtn"
            class="w-full btn-primary py-5 rounded-2xl shadow-xl shadow-indigo-100 hover:scale-[1.02] active:scale-[0.98] transition-all">
            <span class="text-lg font-bold">立即登录</span>
        </button>

        <div class="text-center pt-2 flex flex-col gap-3">
            <button id="authSwitchBtn"
                class="text-sm text-slate-400 hover:text-indigo-600 font-bold transition-colors">没有账号？立即注册</button>
            <button id="forgotPwdBtn"
                class="text-xs text-slate-300 hover:text-indigo-400 transition-colors">忘记密码？通过短信重置</button>
        </div>

        <div class="text-center">
            <a href="/" class="text-xs text-slate-300 hover:text-slate-500 flex items-center justify-center gap-1">
                <i data-lucide="arrow-left" class="w-3 h-3"></i> 返回首页
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/auth.js') }}"></script>
{% endblock %}