@extends('oauth.layout')

@section('title', '授权确认')

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

    /* 应用信息区域 */
    .client-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 8vw; /* 30px */
    }

    .client-logo {
        width: 16vw; /* 60px */
        height: 16vw;
        border-radius: 3.2vw; /* 12px */
        object-fit: cover;
        margin-bottom: 3.2vw; /* 12px */
    }

    .client-logo-placeholder {
        width: 16vw; /* 60px */
        height: 16vw;
        border-radius: 3.2vw; /* 12px */
        background: #1434CB;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 3.2vw; /* 12px */
    }

    .client-logo-placeholder span {
        color: #ffffff;
        font-size: 6.4vw; /* 24px */
        font-weight: 600;
    }

    .client-name {
        font-size: 4.8vw; /* 18px */
        font-weight: 600;
        color: #000000;
        margin-bottom: 1.6vw; /* 6px */
    }

    .client-desc {
        font-size: 3.73vw; /* 14px */
        color: #666666;
    }

    /* 权限列表 */
    .scope-section {
        width: 86.67vw; /* 325px */
        background: #F8F9FA;
        border-radius: 2.13vw; /* 8px */
        padding: 5.33vw; /* 20px */
        margin-bottom: 5.33vw; /* 20px */
    }

    .scope-title {
        font-size: 3.73vw; /* 14px */
        color: #666666;
        margin-bottom: 4.27vw; /* 16px */
    }

    .scope-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .scope-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 3.73vw; /* 14px */
    }

    .scope-item:last-child {
        margin-bottom: 0;
    }

    .scope-icon {
        width: 5.33vw; /* 20px */
        height: 5.33vw;
        margin-right: 3.2vw; /* 12px */
        flex-shrink: 0;
        margin-top: 0.53vw; /* 2px */
    }

    .scope-icon svg {
        width: 100%;
        height: 100%;
        color: #1434CB;
    }

    .scope-text {
        flex: 1;
    }

    .scope-name {
        font-size: 4vw; /* 15px */
        color: #000000;
        font-weight: 500;
        margin-bottom: 1.07vw; /* 4px */
    }

    .scope-desc {
        font-size: 3.47vw; /* 13px */
        color: #999999;
    }

    /* 用户信息卡片 */
    .user-card {
        width: 86.67vw; /* 325px */
        background: #F8F9FA;
        border-radius: 2.13vw; /* 8px */
        padding: 4.27vw 5.33vw; /* 16px 20px */
        margin-bottom: 6.4vw; /* 24px */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .user-info {
        display: flex;
        align-items: center;
    }

    .user-avatar {
        width: 10.67vw; /* 40px */
        height: 10.67vw;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 3.2vw; /* 12px */
    }

    .user-avatar-placeholder {
        width: 10.67vw; /* 40px */
        height: 10.67vw;
        border-radius: 50%;
        background: #DDDDDD;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 3.2vw; /* 12px */
    }

    .user-avatar-placeholder span {
        color: #666666;
        font-size: 3.73vw; /* 14px */
    }

    .user-name {
        font-size: 4vw; /* 15px */
        color: #000000;
        font-weight: 500;
        margin-bottom: 0.53vw; /* 2px */
    }

    .user-mobile {
        font-size: 3.47vw; /* 13px */
        color: #999999;
    }

    .switch-account-btn {
        font-size: 3.73vw; /* 14px */
        color: #1434CB;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .switch-account-btn:active {
        opacity: 0.7;
    }

    /* 按钮组 */
    .btn-group {
        width: 86.67vw; /* 325px */
        display: flex;
        gap: 3.2vw; /* 12px */
    }

    .btn-deny {
        flex: 1;
        height: 13.33vw; /* 50px */
        background: #F5F5F5;
        border: none;
        border-radius: 8.8vw; /* 33px */
        font-size: 4.27vw; /* 16px */
        font-weight: 500;
        color: #666666;
        cursor: pointer;
    }

    .btn-deny:active {
        background: #EEEEEE;
    }

    .btn-approve {
        flex: 1;
        height: 13.33vw; /* 50px */
        background: #1434CB;
        border: none;
        border-radius: 8.8vw; /* 33px */
        font-size: 4.27vw; /* 16px */
        font-weight: 600;
        color: #FFFFFF;
        cursor: pointer;
    }

    .btn-approve:active {
        opacity: 0.9;
    }

    .btn-approve:disabled,
    .btn-deny:disabled {
        background: #CCCCCC;
        cursor: not-allowed;
    }

    /* 底部提示 */
    .notice-text {
        width: 86.67vw; /* 325px */
        font-size: 3.2vw; /* 12px */
        color: #999999;
        text-align: center;
        margin-top: 6.4vw; /* 24px */
        line-height: 1.5;
    }
</style>
@endpush

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

    <div class="authorize-content">
        <!-- 应用信息 -->
        <div class="client-info">
            @if($client->logo_url)
                <img src="{{ $client->logo_url }}" alt="{{ $client->name }}" class="client-logo">
            @else
                <div class="client-logo-placeholder">
                    <span>{{ mb_substr($client->name, 0, 1) }}</span>
                </div>
            @endif
            <div class="client-name">{{ $client->name }}</div>
            <div class="client-desc">请求获取以下权限</div>
        </div>

        <!-- 权限列表 -->
        <div class="scope-section">
            <div class="scope-title">该应用将获得以下权限：</div>
            <ul class="scope-list">
                @foreach($scopeDetails as $key => $scopeConfig)
                    @if($key !== 'base')
                    <li class="scope-item">
                        <div class="scope-icon">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <div class="scope-text">
                            <div class="scope-name">{{ $scopeConfig['name'] }}</div>
                            <div class="scope-desc">{{ $scopeConfig['description'] }}</div>
                        </div>
                    </li>
                    @endif
                @endforeach
            </ul>
        </div>

        <!-- 用户信息 -->
        <div class="user-card">
            <div class="user-info">
                @if($user->avatar)
                    <img src="{{ $user->avatar }}" alt="头像" class="user-avatar">
                @else
                    <div class="user-avatar-placeholder">
                        <span>{{ mb_substr($user->name ?? '用', 0, 1) }}</span>
                    </div>
                @endif
                <div>
                    <div class="user-name">{{ $user->nickname ?? $user->name ?? '用户' }}</div>
                    @if($user->mobile_heading_3)
                        <div class="user-mobile">{{ $user->mobile_heading_3 }}****{{ $user->mobile_last_4 }}</div>
                    @endif
                </div>
            </div>
            <button type="button" id="switchAccountBtn" class="switch-account-btn">
                切换账号
            </button>
        </div>

        <!-- 按钮组 -->
        <form id="consentForm" method="POST" action="{{ url('/oauth/authorize/consent') }}">
            @csrf
            <input type="hidden" name="action" id="actionInput" value="">

            <div class="btn-group">
                <button type="button" id="denyBtn" class="btn-deny">拒绝</button>
                <button type="button" id="approveBtn" class="btn-approve">同意授权</button>
            </div>
        </form>

        <!-- 底部提示 -->
        <div class="notice-text">
            授权后，{{ $client->name }} 将获得上述权限。<br>
            您可以随时在账户设置中取消授权。
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('consentForm');
    const actionInput = document.getElementById('actionInput');
    const approveBtn = document.getElementById('approveBtn');
    const denyBtn = document.getElementById('denyBtn');
    const switchAccountBtn = document.getElementById('switchAccountBtn');

    approveBtn.addEventListener('click', function() {
        approveBtn.disabled = true;
        approveBtn.textContent = '处理中...';
        actionInput.value = 'approve';
        form.submit();
    });

    denyBtn.addEventListener('click', function() {
        denyBtn.disabled = true;
        actionInput.value = 'deny';
        form.submit();
    });

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

            if (response.ok) {
                window.location.reload();
            }
        } catch (error) {
            console.error('Switch account error:', error);
        }
    });
});
</script>
@endpush