@extends('oauth.layout')

@section('title', '登录')

@push('styles')
<style>
    .login-content {
        position: relative;
        z-index: 2;
        padding-top: 29.33vw; /* 110px */
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 13.33vw; /* 50px */
    }

    /* Text Logo */
    .text-logo {
        width: 40.53vw; /* 152px */
        height: auto;
        margin-bottom: 3.2vw; /* 12px */
    }

    /* 欢迎文字 */
    .welcome-text {
        font-weight: 400;
        font-size: 4vw; /* 15px */
        line-height: 4vw;
        color: #1434CB;
        margin-bottom: 9.33vw; /* 35px */
        text-align: center;
    }

    /* 主Logo图片 */
    .login-logo {
        width: 76vw; /* 285px */
        height: auto;
        margin-bottom: 8vw; /* 30px */
    }

    /* 验证码输入框特殊样式 */
    .verification-wrapper {
        margin-bottom: 9.33vw; /* 35px */
    }

    .verification-wrapper .input-field {
        padding-right: 32vw; /* 120px */
    }

    /* 勾选模块 */
    .agreement-section {
        width: 86.67vw; /* 325px */
        display: flex;
        align-items: center;
        padding-left: 6.67vw; /* 25px */
        margin-bottom: 5.07vw; /* 19px */
    }

    /* 来源提示 */
    .source-hint {
        font-size: 3.2vw; /* 12px */
        color: #999999;
        text-align: center;
        margin-top: 8vw; /* 30px */
    }
</style>
@endpush

@section('content')
<div class="page-content">
    <!-- 渐变背景 -->
    <div class="gradient-bg"></div>

    <div class="login-content">
        <!-- Text Logo -->
        <img src="/images/oauth/text.png" class="text-logo" alt="登录 V享臻选">

        <!-- 标题文字 -->
        <div class="welcome-text">解锁你专属的Visa卡持卡人福利!</div>

        <!-- 主Logo -->
        <img src="/images/oauth/card.png" class="login-logo" alt="Visa">

        <!-- 登录表单 -->
        <form id="loginForm">
            <!-- 手机号输入框 -->
            <div class="input-wrapper">
                <input type="tel" id="mobile" name="mobile"
                       class="input-field"
                       placeholder="请输入手机号"
                       maxlength="15">
            </div>

            <!-- 验证码输入框 -->
            <div class="input-wrapper verification-wrapper">
                <input type="text" id="otp" name="otp"
                       class="input-field"
                       placeholder="请输入验证码"
                       maxlength="6">
                <button type="button" id="sendOtpBtn" class="get-code-btn">
                    获取验证码
                </button>
            </div>

            <!-- 错误消息 -->
            <div id="errorMessage" class="error-message"></div>

            <!-- 勾选模块 -->
            <div class="agreement-section">
                <img id="agreementCheckbox"
                     src="/images/oauth/nocheck.png"
                     class="agreement-checkbox"
                     alt="勾选">
                <div class="agreement-text">
                    <span class="normal-text">已阅读并同意</span>
                    <a href="#" class="link-text" id="agreementLink">《V享臻选平台用户服务协议》</a>
                </div>
            </div>

            <!-- 登录按钮 -->
            <button type="submit" id="submitBtn" class="btn-primary">
                <span class="btn-primary-text">登录</span>
            </button>
        </form>

        @if(isset($client) && $client)
        <div class="source-hint">
            来自「{{ $client->name }}」的授权请求
        </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('loginForm');
    const mobileInput = document.getElementById('mobile');
    const otpInput = document.getElementById('otp');
    const sendOtpBtn = document.getElementById('sendOtpBtn');
    const submitBtn = document.getElementById('submitBtn');
    const errorMessage = document.getElementById('errorMessage');
    const agreementCheckbox = document.getElementById('agreementCheckbox');

    let isAgreed = false;
    let countdown = 0;

    function showError(message) {
        errorMessage.textContent = message;
        errorMessage.classList.add('show');
    }

    function hideError() {
        errorMessage.classList.remove('show');
    }

    function startCountdown() {
        countdown = 60;
        sendOtpBtn.disabled = true;
        updateCountdown();
    }

    function updateCountdown() {
        if (countdown > 0) {
            sendOtpBtn.textContent = `${countdown}s后可重新发送`;
            countdown--;
            setTimeout(updateCountdown, 1000);
        } else {
            sendOtpBtn.textContent = '获取验证码';
            sendOtpBtn.disabled = false;
        }
    }

    // 协议勾选切换
    agreementCheckbox.addEventListener('click', function() {
        isAgreed = !isAgreed;
        agreementCheckbox.src = isAgreed ? '/images/oauth/check.png' : '/images/oauth/nocheck.png';
    });

    // 发送验证码
    sendOtpBtn.addEventListener('click', async function() {
        hideError();
        const mobile = mobileInput.value.trim();

        if (!mobile) {
            showError('请先输入手机号');
            return;
        }

        if (sendOtpBtn.disabled) {
            return;
        }

        sendOtpBtn.disabled = true;
        sendOtpBtn.textContent = '发送中...';

        try {
            const response = await fetch('/oauth/send-otp', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                body: JSON.stringify({ mobile }),
            });

            const data = await response.json();

            if (data.success) {
                startCountdown();
            } else {
                showError(data.message || '发送失败，请重试');
                sendOtpBtn.disabled = false;
                sendOtpBtn.textContent = '获取验证码';
            }
        } catch (error) {
            showError('网络错误，请重试');
            sendOtpBtn.disabled = false;
            sendOtpBtn.textContent = '获取验证码';
        }
    });

    // 登录
    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        hideError();

        const mobile = mobileInput.value.trim();
        const otp = otpInput.value.trim();

        if (!mobile) {
            showError('请输入手机号');
            return;
        }

        if (!otp) {
            showError('请输入验证码');
            return;
        }

        if (!isAgreed) {
            showError('请先同意《V享臻选平台用户服务协议》');
            return;
        }

        submitBtn.disabled = true;
        submitBtn.querySelector('.btn-primary-text').textContent = '登录中...';

        try {
            const response = await fetch('/oauth/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                body: JSON.stringify({ mobile, otp }),
            });

            const data = await response.json();

            if (data.success) {
                // 登录成功，刷新页面进入授权流程
                window.location.reload();
            } else {
                showError(data.message || '登录失败，请重试');
                submitBtn.disabled = false;
                submitBtn.querySelector('.btn-primary-text').textContent = '登录';
            }
        } catch (error) {
            showError('网络错误，请重试');
            submitBtn.disabled = false;
            submitBtn.querySelector('.btn-primary-text').textContent = '登录';
        }
    });
});
</script>
@endpush