@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 */
    }

    /* 一键登录区域 */
    .sso-section {
        width: 86.67vw; /* 325px */
        background: #F5F7FA;
        border-radius: 2.67vw; /* 10px */
        padding: 5.33vw 4vw; /* 20px 15px */
        margin-bottom: 5.33vw; /* 20px */
        text-align: center;
    }

    .sso-welcome {
        font-weight: 600;
        font-size: 4.27vw; /* 16px */
        color: #333333;
        margin-bottom: 2.13vw; /* 8px */
    }

    .sso-phone {
        font-weight: 400;
        font-size: 4vw; /* 15px */
        color: #666666;
        margin-bottom: 4vw; /* 15px */
    }

    .sso-login-btn {
        width: 100%;
        height: 12vw; /* 45px */
        background: #1434CB;
        border-radius: 8.8vw; /* 33px */
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border: none;
        outline: none;
        margin-bottom: 2.67vw; /* 10px */
    }

    .sso-login-btn:active {
        opacity: 0.9;
    }

    .sso-login-btn:disabled {
        background: #CCCCCC;
        cursor: not-allowed;
    }

    .sso-login-btn-text {
        font-weight: 600;
        font-size: 4.27vw; /* 16px */
        color: #FFFFFF;
    }

    .sso-switch-link {
        font-weight: 400;
        font-size: 3.47vw; /* 13px */
        color: #1434CB;
        cursor: pointer;
        background: none;
        border: none;
        outline: none;
    }

    .sso-switch-link:active {
        opacity: 0.7;
    }

    /* 分隔线 */
    .sso-divider {
        width: 86.67vw; /* 325px */
        display: flex;
        align-items: center;
        margin-bottom: 5.33vw; /* 20px */
    }

    .sso-divider-line {
        flex: 1;
        height: 1px;
        background: #E0E0E0;
    }

    .sso-divider-text {
        padding: 0 2.67vw; /* 10px */
        font-size: 3.2vw; /* 12px */
        color: #999999;
        white-space: nowrap;
    }
</style>
@endpush

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

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

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

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

        @if(isset($ssoUser) && $ssoUser)
        <!-- 一键登录区域 -->
        <div id="ssoSection" class="sso-section">
            <div class="sso-welcome">欢迎回来</div>
            <div class="sso-phone">{{ $ssoUser->mobile_heading_3 }}****{{ $ssoUser->mobile_last_4 }}</div>
            <button type="button" id="ssoLoginBtn" class="sso-login-btn">
                <span class="sso-login-btn-text">一键登录</span>
            </button>
            <button type="button" id="ssoSwitchBtn" class="sso-switch-link">使用其他账号登录</button>
        </div>

        <!-- 分隔线 -->
        <div id="ssoDivider" class="sso-divider">
            <div class="sso-divider-line"></div>
            <span class="sso-divider-text">或</span>
            <div class="sso-divider-line"></div>
        </div>
        @endif

        <!-- 登录表单 -->
        <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="https://vsracdn.offerpluscn.com/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 ? 'https://vsracdn.offerpluscn.com/images/oauth/check.png' : 'https://vsracdn.offerpluscn.com/images/oauth/nocheck.png';
    });

    // ============ 一键登录逻辑 ============
    const ssoSection = document.getElementById('ssoSection');
    const ssoDivider = document.getElementById('ssoDivider');
    const ssoLoginBtn = document.getElementById('ssoLoginBtn');
    const ssoSwitchBtn = document.getElementById('ssoSwitchBtn');

    if (ssoLoginBtn) {
        ssoLoginBtn.addEventListener('click', async function() {
            ssoLoginBtn.disabled = true;
            ssoLoginBtn.querySelector('.sso-login-btn-text').textContent = '登录中...';

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

                const data = await response.json();

                if (data.success) {
                    window.location.reload();
                } else {
                    showError(data.message || '登录失败，请使用验证码登录');
                    // 隐藏一键登录区域，引导用户使用验证码登录
                    if (ssoSection) ssoSection.style.display = 'none';
                    if (ssoDivider) ssoDivider.style.display = 'none';
                }
            } catch (error) {
                showError('网络错误，请重试');
                ssoLoginBtn.disabled = false;
                ssoLoginBtn.querySelector('.sso-login-btn-text').textContent = '一键登录';
            }
        });
    }

    if (ssoSwitchBtn) {
        ssoSwitchBtn.addEventListener('click', function() {
            if (ssoSection) ssoSection.style.display = 'none';
            if (ssoDivider) ssoDivider.style.display = 'none';
        });
    }

    // ============ 发送验证码 ============
    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