<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preloop - Authorize Application</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #e2e8f0;
        }
        .container {
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 16px;
            padding: 40px;
            width: 100%;
            max-width: 420px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }
        .logo {
            text-align: center;
            margin-bottom: 24px;
        }
        .logo h1 {
            font-size: 28px;
            font-weight: 700;
            color: #f8fafc;
            letter-spacing: -0.5px;
        }
        .logo .subtitle {
            font-size: 14px;
            color: #94a3b8;
            margin-top: 4px;
        }
        .client-info {
            background: #0f172a;
            border: 1px solid #334155;
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 24px;
            text-align: center;
        }
        .client-info .label {
            font-size: 12px;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }
        .client-info .name {
            font-size: 16px;
            font-weight: 600;
            color: #e2e8f0;
        }
        .client-info .scope-note {
            font-size: 13px;
            color: #94a3b8;
            margin-top: 8px;
        }
        .form-group {
            margin-bottom: 16px;
        }
        .form-group label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: #cbd5e1;
            margin-bottom: 6px;
        }
        .form-group input {
            width: 100%;
            padding: 10px 14px;
            background: #0f172a;
            border: 1px solid #334155;
            border-radius: 8px;
            color: #f8fafc;
            font-size: 15px;
            transition: border-color 0.2s;
        }
        .form-group input:focus {
            outline: none;
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
        }
        .btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn-primary {
            background: #6366f1;
            color: white;
            margin-bottom: 10px;
        }
        .btn-primary:hover { background: #4f46e5; }
        .btn-secondary {
            background: transparent;
            color: #94a3b8;
            border: 1px solid #334155;
        }
        .btn-secondary:hover { background: #334155; color: #e2e8f0; }
        .error {
            background: #450a0a;
            border: 1px solid #7f1d1d;
            color: #fca5a5;
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 14px;
            margin-bottom: 16px;
            display: none;
        }
        .divider {
            text-align: center;
            color: #475569;
            font-size: 13px;
            margin: 16px 0;
            position: relative;
        }
        .divider::before, .divider::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 40%;
            height: 1px;
            background: #334155;
        }
        .divider::before { left: 0; }
        .divider::after { right: 0; }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo">
            <h1>Preloop</h1>
            <p class="subtitle">Authorize Application</p>
        </div>

        <div class="client-info">
            <div class="label">Application requesting access</div>
            <div class="name" id="clientName">{{ client_name }}</div>
            <div class="scope-note">This application will be able to access your Preloop account tools and data.</div>
            <div class="scope-note">{{ next_step_note }}</div>
        </div>

        <div class="error" id="errorMsg"></div>

        <form id="authForm" method="POST" action="/mcp/authorize/consent">
            <!-- Hidden fields carrying OAuth params -->
            <input type="hidden" name="client_id" value="{{ client_id }}">
            <input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
            <input type="hidden" name="code_challenge" value="{{ code_challenge }}">
            <input type="hidden" name="state" value="{{ state }}">
            <input type="hidden" name="scopes" value="{{ scopes }}">
            <input type="hidden" name="redirect_uri_provided_explicitly" value="{{ redirect_uri_provided_explicitly }}">
            <input type="hidden" name="resource" value="{{ resource }}">

            <div class="form-group">
                <label for="username">Username or Email</label>
                <input type="text" id="username" name="username" required autocomplete="username" autofocus>
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required autocomplete="current-password">
            </div>

            <button type="submit" class="btn btn-primary">Authorize</button>
            <button type="button" class="btn btn-secondary" onclick="handleDeny()">Deny</button>
        </form>
    </div>

    <script>
        function handleDeny() {
            const redirectUri = {{ redirect_uri_json }};
            const state = {{ state_json }};
            if (redirectUri === 'urn:ietf:wg:oauth:2.0:oob') {
                document.body.innerHTML = `
                    <div class="container">
                        <div class="logo">
                            <h1>Preloop</h1>
                            <p class="subtitle">Authorization Cancelled</p>
                        </div>
                        <div class="client-info">
                            <div class="scope-note">You denied this request. You can close this window and return to the CLI.</div>
                        </div>
                    </div>
                `;
                return;
            }
            let denyUrl = redirectUri + '?error=access_denied&error_description=User+denied+the+request';
            if (state) {
                denyUrl += '&state=' + encodeURIComponent(state);
            }
            window.location.href = denyUrl;
        }

        // Show server-side error if present
        const serverError = {{ error_json }};
        if (serverError) {
            const errEl = document.getElementById('errorMsg');
            errEl.textContent = serverError;
            errEl.style.display = 'block';
        }
    </script>
</body>
</html>
