<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alloy Connectivity API Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f9fafb;
            color: #111827;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 24px;
        }
        
        .header {
            margin-bottom: 32px;
        }
        
        .header h1 {
            font-size: 2rem;
            font-weight: bold;
            color: #111827;
            margin-bottom: 8px;
        }
        
        .header p {
            color: #6b7280;
        }
        
        .progress {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 32px;
        }
        
        .step {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 500;
        }
        
        .step.active {
            background-color: #3b82f6;
            color: white;
        }
        
        .step.completed {
            background-color: #10b981;
            color: white;
        }
        
        .step.inactive {
            background-color: #e5e7eb;
            color: #6b7280;
        }
        
        .card {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 24px;
            margin-bottom: 24px;
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-primary {
            background-color: #3b82f6;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #2563eb;
        }
        
        .btn-success {
            background-color: #10b981;
            color: white;
        }
        
        .btn-success:hover {
            background-color: #059669;
        }
        
        .btn-outline {
            background: white;
            border: 1px solid #d1d5db;
            color: #6b7280;
        }
        
        .btn-outline:hover {
            background: #f9fafb;
        }
        
        .connector-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 20px;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            background: white;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-bottom: 12px;
            width: 100%;
            text-align: left;
        }
        
        .connector-card:hover {
            border-color: #3b82f6;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
            transform: translateY(-1px);
        }
        
        .connector-icon {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            object-fit: cover;
            background-color: #f3f4f6;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: #6b7280;
            flex-shrink: 0;
        }
        
        .connector-info {
            flex: 1;
            min-width: 0;
        }
        
        .connector-name {
            font-size: 18px;
            font-weight: 600;
            color: #111827;
            margin-bottom: 4px;
        }
        
        .connector-category {
            font-size: 14px;
            color: #6b7280;
            margin-bottom: 8px;
            text-transform: capitalize;
        }
        
        .connector-description {
            font-size: 13px;
            color: #9ca3af;
            line-height: 1.4;
        }
        
        .connector-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 16px;
            margin-top: 16px;
        }
        
        .form-group {
            margin-bottom: 16px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 4px;
            font-weight: 500;
            color: #374151;
        }
        
        .form-input, .form-select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 14px;
        }
        
        .form-input:focus, .form-select:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .loading {
            display: flex;
            justify-content: center;
            padding: 32px;
        }
        
        .spinner {
            width: 32px;
            height: 32px;
            border: 3px solid #f3f4f6;
            border-top: 3px solid #3b82f6;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .alert {
            padding: 16px;
            border-radius: 6px;
            margin-bottom: 16px;
        }
        
        .alert-success {
            background-color: #f0fdf4;
            color: #166534;
            border: 1px solid #bbf7d0;
        }
        
        .alert-error {
            background-color: #fef2f2;
            color: #dc2626;
            border: 1px solid #fecaca;
        }
        
        .alert-warning {
            background-color: #fefce8;
            color: #ca8a04;
            border: 1px solid #fef08a;
        }
        
        .alert-info {
            background-color: #eff6ff;
            color: #1d4ed8;
            border: 1px solid #bfdbfe;
        }
        
        .text-center {
            text-align: center;
        }
        
        .mb-4 { margin-bottom: 16px; }
        .mb-6 { margin-bottom: 24px; }
        .mt-4 { margin-top: 16px; }
        .mt-6 { margin-top: 24px; }
        
        .hidden { display: none; }
        
        pre {
            background-color: #f3f4f6;
            padding: 16px;
            border-radius: 6px;
            overflow-x: auto;
            font-size: 12px;
        }
        
        .optional-fields {
            margin-top: 24px;
            border-top: 1px solid #e5e7eb;
            padding-top: 20px;
        }
        
        .optional-fields-toggle {
            display: flex;
            align-items: center;
            cursor: pointer;
            color: #6b7280;
            font-weight: 500;
            margin-bottom: 16px;
            user-select: none;
        }
        
        .optional-fields-toggle:hover {
            color: #3b82f6;
        }
        
        .optional-fields-toggle .arrow {
            margin-right: 8px;
            transition: transform 0.2s;
            font-size: 12px;
        }
        
        .optional-fields-toggle.expanded .arrow {
            transform: rotate(90deg);
        }
        
        .optional-fields-content {
            display: none;
        }
        
        .optional-fields-content.show {
            display: block;
        }
        
        .field-section {
            margin-bottom: 32px;
        }
        
        .field-section-title {
            font-size: 16px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 1px solid #f3f4f6;
        }

        .method-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
            text-transform: uppercase;
            margin-right: 8px;
        }
        
        .method-get {
            background-color: #10b981;
            color: white;
        }
        
        .method-post {
            background-color: #3b82f6;
            color: white;
        }
        
        .method-put {
            background-color: #f59e0b;
            color: white;
        }
        
        .method-delete {
            background-color: #ef4444;
            color: white;
        }

        .api-inspector {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 400px;
            max-height: 80vh;
            background: white;
            border: 2px solid #e5e7eb;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .api-inspector.collapsed {
            width: 200px;
            height: 60px;
        }

        .api-inspector-header {
            padding: 16px;
            background: #f8fafc;
            border-bottom: 1px solid #e5e7eb;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            user-select: none;
        }

        .api-inspector-header:hover {
            background: #f1f5f9;
        }

        .api-inspector-title {
            font-weight: 600;
            color: #1f2937;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .api-inspector-toggle {
            font-size: 12px;
            color: #6b7280;
            transition: transform 0.2s;
        }

        .api-inspector.collapsed .api-inspector-toggle {
            transform: rotate(-90deg);
        }

        .api-inspector-content {
            padding: 16px;
            max-height: 60vh;
            overflow-y: auto;
        }

        .api-inspector.collapsed .api-inspector-content {
            display: none;
        }

        .api-call {
            margin-bottom: 16px;
            padding: 12px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #fafafa;
        }

        .api-call-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .api-call-method {
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .api-call-url {
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 11px;
            color: #4b5563;
            word-break: break-all;
        }

        .api-call-status {
            margin-left: auto;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
        }

        .status-success {
            background: #dcfce7;
            color: #166534;
        }

        .status-error {
            background: #fef2f2;
            color: #dc2626;
        }

        .api-call-timing {
            font-size: 11px;
            color: #9ca3af;
            margin-bottom: 8px;
        }

        .api-call-section {
            margin-bottom: 8px;
        }

        .api-call-section-title {
            font-weight: 600;
            color: #374151;
            margin-bottom: 4px;
        }

        .api-call-section-content {
            background: white;
            padding: 8px;
            border-radius: 4px;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 10px;
            white-space: pre-wrap;
            word-break: break-all;
            max-height: 120px;
            overflow-y: auto;
        }

        .api-inspector-clear {
            padding: 8px 16px;
            background: #f8fafc;
            border-top: 1px solid #e5e7eb;
            text-align: center;
        }

        .api-inspector-clear button {
            padding: 4px 8px;
            font-size: 12px;
            border: 1px solid #d1d5db;
            background: white;
            border-radius: 4px;
            cursor: pointer;
            color: #6b7280;
        }

        .api-inspector-clear button:hover {
            background: #f9fafb;
        }

        .test-mode-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 999;
        }

        .test-mode-toggle label {
            display: flex;
            align-items: center;
            gap: 8px;
            background: white;
            padding: 8px 16px;
            border-radius: 8px;
            border: 2px solid #e5e7eb;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s;
        }

        .test-mode-toggle label:hover {
            border-color: #3b82f6;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
        }

        .test-mode-toggle input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .schema-debug {
            margin-top: 24px;
            padding: 16px;
            background: #fef3c7;
            border: 2px solid #fbbf24;
            border-radius: 8px;
        }

        .schema-debug-title {
            font-weight: 600;
            color: #92400e;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .schema-debug-content {
            background: white;
            padding: 12px;
            border-radius: 6px;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 11px;
            max-height: 300px;
            overflow-y: auto;
        }

        @media (max-width: 768px) {
            .api-inspector {
                position: relative;
                top: auto;
                right: auto;
                width: 100%;
                margin-bottom: 24px;
                max-height: none;
            }

            .api-inspector.collapsed {
                width: 100%;
            }

            .test-mode-toggle {
                position: relative;
                bottom: auto;
                right: auto;
                margin-bottom: 16px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- API Inspector Panel -->
        <div class="api-inspector collapsed" id="api-inspector">
            <div class="api-inspector-header" onclick="toggleApiInspector()">
                <div class="api-inspector-title">
                    <span>🔍</span>
                    <span>API Inspector</span>
                    <span id="api-call-count" style="background: #3b82f6; color: white; padding: 2px 6px; border-radius: 10px; font-size: 10px;">0</span>
                </div>
                <div class="api-inspector-toggle">▼</div>
            </div>
            <div class="api-inspector-content" id="api-inspector-content">
                <div style="text-align: center; color: #9ca3af; padding: 20px; font-size: 12px;">
                    No API calls yet. Start the demo to see live requests!
                </div>
            </div>
            <div class="api-inspector-clear">
                <button onclick="clearApiInspector()">Clear History</button>
            </div>
        </div>

        <!-- Test Mode Toggle -->
        <div class="test-mode-toggle">
            <label>
                <input type="checkbox" id="test-mode-checkbox" onchange="toggleTestMode()">
                <span>🔬 Test Mode</span>
            </label>
        </div>

        <div class="header">
            <h1>Alloy Connectivity API Demo</h1>
            <p>Universal schema-driven integration with ANY connector!</p>
            <button class="btn btn-primary mt-4" onclick="resetDemo()">Reset Demo</button>
        </div>

        <div class="progress">
            <div class="step active" id="step-1">1</div>
            <div class="step inactive" id="step-2">2</div>
            <div class="step inactive" id="step-3">3</div>
            <div class="step inactive" id="step-4">4</div>
            <div class="step inactive" id="step-5">5</div>
        </div>

        <div id="connectors-step">
            <div class="card">
                <h2>1. Choose Integration Platform</h2>
                <p class="mb-4">Select the platform you want to integrate with:</p>
                
                <div id="loading-connectors" class="loading">
                    <div class="spinner"></div>
                </div>
                
                <div id="connectors-list" class="hidden"></div>
            </div>
        </div>

        <div id="resources-step" class="hidden">
            <div class="card">
                <h2>2. Select Resource Type</h2>
                <p class="mb-4">Platform: <strong id="selected-connector-name">-</strong></p>
                
                <div id="loading-resources" class="loading hidden">
                    <div class="spinner"></div>
                </div>
                
                <div id="resources-list"></div>
            </div>
        </div>

        <div id="action-step" class="hidden">
            <div class="card">
                <h2>3. Configure Action</h2>
                <div id="action-form"></div>
            </div>
        </div>

        <div id="execution-step" class="hidden">
            <div class="card">
                <h2>4. Executing Action...</h2>
                <div class="loading">
                    <div class="spinner"></div>
                </div>
                <p class="text-center mt-4">Creating record in <strong id="executing-connector">-</strong></p>
            </div>
        </div>

        <div id="result-step" class="hidden">
            <div class="card">
                <h2>5. Result</h2>
                <div id="result-content"></div>
            </div>
        </div>
    </div>

    <script>
        console.log('🚀 V2 - Alloy Demo with Nested Schema Parsing Loaded');
        
        // Configuration
        function getConfig() {
            return {
                apiKey: sessionStorage.getItem('alloy_api_key') || 'YOUR_ALLOY_API_KEY_HERE',
                userId: sessionStorage.getItem('alloy_user_id') || 'YOUR_ALLOY_USER_ID_HERE',
                baseUrl: 'https://production.runalloy.com'
            };
        }

        function saveConfig(apiKey, userId) {
            sessionStorage.setItem('alloy_api_key', apiKey);
            sessionStorage.setItem('alloy_user_id', userId);
        }

        // Global state
        let currentStep = 1;
        let selectedUser = null;
        let selectedConnector = null;
        let selectedConnectorId = null;
        let selectedResource = null;
        let actionDetails = null;
        let actionDetailsGlobal = null;
        let formData = {};
        let config = getConfig();
        let apiCallHistory = [];
        let testMode = false;

        selectedUser = { id: config.userId, name: 'Demo User' };
        let apiKey = config.apiKey;

        // Test Mode
        function toggleTestMode() {
            testMode = document.getElementById('test-mode-checkbox').checked;
            console.log(`🔬 Test Mode: ${testMode ? 'ON' : 'OFF'}`);
        }

        // API Inspector Functions
        function toggleApiInspector() {
            const inspector = document.getElementById('api-inspector');
            inspector.classList.toggle('collapsed');
        }

        function clearApiInspector() {
            apiCallHistory = [];
            updateApiInspector();
        }

        function addApiCall(callData) {
            apiCallHistory.unshift(callData);
            if (apiCallHistory.length > 10) {
                apiCallHistory = apiCallHistory.slice(0, 10);
            }
            
            const inspector = document.getElementById('api-inspector');
            if (apiCallHistory.length === 1 && inspector.classList.contains('collapsed')) {
                inspector.classList.remove('collapsed');
            }
            
            updateApiInspector();
        }

        function updateApiInspector() {
            const content = document.getElementById('api-inspector-content');
            const counter = document.getElementById('api-call-count');
            
            counter.textContent = apiCallHistory.length;
            
            if (apiCallHistory.length === 0) {
                content.innerHTML = `
                    <div style="text-align: center; color: #9ca3af; padding: 20px; font-size: 12px;">
                        No API calls yet. Start the demo to see live requests!
                    </div>
                `;
                return;
            }
            
            let html = '';
            apiCallHistory.forEach((call, index) => {
                const methodClass = `method-${call.method.toLowerCase()}`;
                const statusClass = call.status >= 200 && call.status < 300 ? 'status-success' : 'status-error';
                
                html += `
                    <div class="api-call">
                        <div class="api-call-header">
                            <span class="api-call-method ${methodClass}">${call.method}</span>
                            <span class="api-call-status ${statusClass}">${call.status}</span>
                        </div>
                        <div class="api-call-url">${call.url}</div>
                        <div class="api-call-timing">
                            ${new Date(call.timestamp).toLocaleTimeString()} • ${call.duration}ms
                        </div>
                        
                        ${call.requestBody ? `
                            <div class="api-call-section">
                                <div class="api-call-section-title">Request Body</div>
                                <div class="api-call-section-content">${JSON.stringify(call.requestBody, null, 2)}</div>
                            </div>
                        ` : ''}
                        
                        ${call.responseBody ? `
                            <div class="api-call-section">
                                <div class="api-call-section-title">Response ${call.status >= 200 && call.status < 300 ? 'Body' : 'Error'}</div>
                                <div class="api-call-section-content">${typeof call.responseBody === 'string' ? call.responseBody : JSON.stringify(call.responseBody, null, 2)}</div>
                            </div>
                        ` : ''}
                    </div>
                `;
            });
            
            content.innerHTML = html;
        }

        // API function with enhanced logging
        async function makeAlloyApiCall(endpoint, method = 'GET', body = null, includeUserId = true) {
            const startTime = Date.now();
            const url = `https://production.runalloy.com${endpoint}`;
            
            const headers = {
                'Authorization': `Bearer ${apiKey}`,
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'x-api-version': '2025-06',
            };
            
            if (includeUserId && selectedUser?.id) {
                headers['x-alloy-userid'] = selectedUser.id;
            }

            try {
                console.log(`🚀 API Call: ${method} ${url}`);
                if (body) console.log('📤 Body:', body);
                
                const response = await fetch(url, {
                    method,
                    headers,
                    body: body ? JSON.stringify(body) : null,
                });

                const endTime = Date.now();
                const duration = endTime - startTime;
                
                let responseData;
                let responseText;
                
                try {
                    responseText = await response.text();
                    responseData = responseText ? JSON.parse(responseText) : null;
                } catch (parseError) {
                    responseData = responseText;
                }

                const apiCall = {
                    method,
                    url,
                    status: response.status,
                    timestamp: startTime,
                    duration,
                    requestBody: body,
                    responseBody: response.ok ? responseData : responseText || `${response.status} ${response.statusText}`
                };
                
                addApiCall(apiCall);

                if (!response.ok) {
                    console.error(`❌ Error: ${responseText}`);
                    throw new Error(`${response.status} ${response.statusText}: ${responseText}`);
                }

                console.log(`✅ Success:`, responseData);
                return responseData;
                
            } catch (error) {
                const endTime = Date.now();
                const duration = endTime - startTime;
                
                const apiCall = {
                    method,
                    url,
                    status: 0,
                    timestamp: startTime,
                    duration,
                    requestBody: body,
                    responseBody: error.message
                };
                
                addApiCall(apiCall);
                
                console.error('❌ API Error:', error);
                throw error;
            }
        }

        // FIXED: RECURSIVE schema parser for nested properties
        function parseSchemaProperties(properties, requiredList = [], parentPath = '') {
            const fields = [];
            
            console.log(`    🔧 Parsing ${Object.keys(properties).length} properties at path: "${parentPath}"`);
            
            for (const key of Object.keys(properties)) {
                const prop = properties[key];
                const isRequired = requiredList.includes(key);
                const fieldPath = parentPath ? `${parentPath}.${key}` : key;
                
                console.log(`      • ${key}: type=${prop.type}, hasNested=${!!prop.properties}`);
                
                // RECURSIVELY drill into nested objects
                if (prop.type === 'object' && prop.properties) {
                    console.log(`      🔽 DRILLING into "${key}"`);
                    const nestedFields = parseSchemaProperties(
                        prop.properties, 
                        prop.required || [], 
                        fieldPath
                    );
                    console.log(`      ✅ Got ${nestedFields.length} nested fields from "${key}"`);
                    fields.push(...nestedFields);
                    continue;
                }
                
                // Arrays - create textarea for JSON input
                if (prop.type === 'array') {
                    console.log(`      📋 Array field: ${key}`);
                    fields.push({
                        name: fieldPath,
                        displayName: prop.title || humanizeFieldName(key),
                        type: 'textarea',
                        description: prop.description || `Enter ${humanizeFieldName(key)} as JSON array`,
                        required: isRequired,
                        paramType: 'body',
                        isArray: true
                    });
                    continue;
                }
                
                // Regular field
                console.log(`      ➕ Adding field: ${key}`);
                const field = {
                    name: fieldPath,
                    displayName: prop.title || humanizeFieldName(key),
                    type: mapSchemaType(prop.type, prop.format),
                    description: prop.description || `Enter ${humanizeFieldName(key)}`,
                    required: isRequired,
                    paramType: 'body'
                };

                // Handle enums
                if (prop.enum && Array.isArray(prop.enum)) {
                    field.type = 'select';
                    field.options = prop.enum.map(val => ({
                        value: val,
                        label: humanizeFieldName(String(val))
                    }));
                }

                // Handle booleans
                if (prop.type === 'boolean') {
                    field.type = 'select';
                    field.options = [
                        { value: 'true', label: 'Yes' },
                        { value: 'false', label: 'No' }
                    ];
                }

                fields.push(field);
            }

            console.log(`    ✅ Returning ${fields.length} total fields for "${parentPath}"`);
            return fields;
        }

        // Parse action schema
        function parseActionSchema(action) {
            console.log(`🔍 Parsing schema for action:`, action.name || action.id);
            
            const schema = {
                method: null,
                pathParameters: [],
                queryParameters: [],
                bodyParameters: [],
                requiredFields: [],
                optionalFields: []
            };

            schema.method = detectHttpMethod(action);
            console.log(`  📌 Method: ${schema.method}`);

            // EXTRACT PATH PARAMETERS from URL pattern
            if (action.path) {
                const pathParamMatches = action.path.match(/\{([^}]+)\}/g);
                if (pathParamMatches) {
                    console.log(`  🔗 Found path parameters in URL: ${action.path}`);
                    pathParamMatches.forEach(match => {
                        const paramName = match.replace(/[{}]/g, '');
                        console.log(`    • Path param: ${paramName}`);
                        schema.pathParameters.push({
                            name: paramName,
                            displayName: humanizeFieldName(paramName),
                            type: 'string',
                            description: `Enter the ${humanizeFieldName(paramName)}`,
                            required: true,
                            paramType: 'path'
                        });
                    });
                }
            }

            // Find schema
            let actionSchema = null;
            const schemaChecks = [
                { path: action.requestBody, name: 'action.requestBody' },
                { path: action.requestBody?.schema, name: 'action.requestBody.schema' },
                { path: action.inputSchema, name: 'action.inputSchema' },
                { path: action.schema, name: 'action.schema' }
            ];
            
            for (const check of schemaChecks) {
                if (check.path) {
                    actionSchema = check.path;
                    console.log(`  📋 Found schema in: ${check.name}`);
                    break;
                }
            }

            // Parse body parameters if schema exists
            let bodyProps = null;
            let bodyRequired = [];
            
            if (actionSchema && actionSchema.properties && typeof actionSchema.properties === 'object') {
                bodyProps = actionSchema.properties;
                bodyRequired = actionSchema.required || [];
                console.log(`  📦 Root properties:`, Object.keys(bodyProps));
            }

            if (bodyProps && Object.keys(bodyProps).length > 0) {
                schema.bodyParameters = parseSchemaProperties(bodyProps, bodyRequired);
                console.log(`  📦 Total body params: ${schema.bodyParameters.length}`);
            }

            // Combine all parameters
            const allParams = [...schema.pathParameters, ...schema.queryParameters, ...schema.bodyParameters];
            schema.requiredFields = allParams.filter(p => p.required);
            schema.optionalFields = allParams.filter(p => !p.required);

            console.log(`  ✅ Parsed: ${schema.requiredFields.length} required, ${schema.optionalFields.length} optional`);

            // If no schema found and no path params, use generic
            if (schema.requiredFields.length === 0 && schema.optionalFields.length === 0) {
                console.log(`  ⚠️ No schema found, generating generic`);
                return generateGenericSchema(schema.method, action);
            }

            return schema;
        }

        function detectHttpMethod(action) {
            if (action.httpMethod) return action.httpMethod.toUpperCase();
            if (action.method) return action.method.toUpperCase();
            
            const name = (action.name || action.id || '').toLowerCase();
            if (name.includes('create')) return 'POST';
            if (name.includes('update')) return 'PUT';
            if (name.includes('delete')) return 'DELETE';
            if (name.includes('list') || name.includes('get')) return 'GET';
            
            return 'POST';
        }

        function mapSchemaType(type, format) {
            if (format === 'date' || format === 'date-time') return 'date';
            if (type === 'integer' || type === 'number') return 'number';
            if (type === 'boolean') return 'select';
            return 'string';
        }

        function humanizeFieldName(name) {
            return name
                .replace(/_/g, ' ')
                .replace(/([A-Z])/g, ' $1')
                .split(' ')
                .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
                .join(' ')
                .trim();
        }

        function generateGenericSchema(method, action) {
            const schema = {
                method,
                pathParameters: [],
                queryParameters: [],
                bodyParameters: [],
                requiredFields: [],
                optionalFields: []
            };

            if (method === 'POST') {
                const nameField = { name: 'name', displayName: 'Name', type: 'string', required: true, paramType: 'body' };
                schema.bodyParameters = [nameField];
                schema.requiredFields = [nameField];
            }

            return schema;
        }

        // FIXED: Build request with nested structure reconstruction
        function buildRequestFromSchema(schema, formData) {
            console.log(`🔧 Building request for ${schema.method}`);
            
            const request = {
                pathParams: {},
                queryParameters: {},
                requestBody: {}
            };

            const allParams = [...schema.pathParameters, ...schema.queryParameters, ...schema.bodyParameters];
            
            allParams.forEach(param => {
                const value = formData[param.name];
                
                if (value !== undefined && value !== '') {
                    let convertedValue = value;
                    
                    if (param.type === 'number') {
                        convertedValue = Number(value);
                    } else if (param.type === 'select' && (value === 'true' || value === 'false')) {
                        convertedValue = value === 'true';
                    } else if (param.isArray) {
                        try {
                            convertedValue = JSON.parse(value);
                        } catch (e) {
                            console.warn(`Failed to parse array for ${param.name}`);
                        }
                    }
                    
                    // Route based on parameter type
                    if (param.paramType === 'path') {
                        request.pathParams[param.name] = convertedValue;
                        console.log(`    🔗 Path param: ${param.name} = ${convertedValue}`);
                    } else if (param.paramType === 'query') {
                        request.queryParameters[param.name] = convertedValue;
                        console.log(`    🔍 Query param: ${param.name} = ${convertedValue}`);
                    } else {
                        // Body param - reconstruct nested structure using dot notation
                        setNestedValue(request.requestBody, param.name, convertedValue);
                        console.log(`    📦 Body param: ${param.name} = ${JSON.stringify(convertedValue)}`);
                    }
                }
            });

            console.log(`  ✅ Built request:`, request);
            return request;
        }
        
        // Helper to set nested values
        function setNestedValue(obj, path, value) {
            const keys = path.split('.');
            let current = obj;
            
            for (let i = 0; i < keys.length - 1; i++) {
                const key = keys[i];
                if (!current[key]) {
                    current[key] = {};
                }
                current = current[key];
            }
            
            current[keys[keys.length - 1]] = value;
        }

        // Configuration validation
        function validateConfiguration() {
            config = getConfig();
            apiKey = config.apiKey;
            selectedUser = { id: config.userId, name: 'Demo User' };
            
            if (config.apiKey === 'YOUR_ALLOY_API_KEY_HERE' || !config.apiKey) {
                showConfigurationModal();
                return false;
            }
            return true;
        }

        function showConfigurationModal() {
            const container = document.getElementById('connectors-list');
            container.innerHTML = `
                <div class="card" style="max-width: 600px; margin: 0 auto;">
                    <h3 style="margin-bottom: 24px; text-align: center;">Configure Your Alloy Credentials</h3>
                    <p style="color: #6b7280; margin-bottom: 24px; text-align: center;">
                        Enter your Alloy API credentials. These will be stored for this session only.
                    </p>
                    
                    <div class="form-group">
                        <label class="form-label">API Key <span style="color: #dc2626;">*</span></label>
                        <input type="text" id="config-api-key" class="form-input" 
                               placeholder="Enter your Alloy API key"
                               value="${config.apiKey !== 'YOUR_ALLOY_API_KEY_HERE' ? config.apiKey : ''}">
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label">User ID <span style="color: #dc2626;">*</span></label>
                        <input type="text" id="config-user-id" class="form-input" 
                               placeholder="Enter your Alloy User ID"
                               value="${config.userId !== 'YOUR_ALLOY_USER_ID_HERE' ? config.userId : ''}">
                    </div>
                    
                    <div style="text-align: center; margin-top: 24px;">
                        <button class="btn btn-primary" onclick="saveConfigurationAndStart()">
                            Start Demo
                        </button>
                    </div>
                </div>
            `;
            container.classList.remove('hidden');
            document.getElementById('loading-connectors').classList.add('hidden');
        }

        function saveConfigurationAndStart() {
            const apiKeyInput = document.getElementById('config-api-key');
            const userIdInput = document.getElementById('config-user-id');
            
            const apiKey = apiKeyInput.value.trim();
            const userId = userIdInput.value.trim();
            
            if (!apiKey || !userId) {
                alert('Please enter both API Key and User ID');
                return;
            }
            
            saveConfig(apiKey, userId);
            config = getConfig();
            window.apiKey = config.apiKey;
            selectedUser = { id: config.userId, name: 'Demo User' };
            
            initializeDemo();
        }

        // Initialize demo
        async function initializeDemo() {
            if (!validateConfiguration()) return;
            
            try {
                console.log('🚀 Loading all available connectors...');
                
                document.getElementById('loading-connectors').classList.remove('hidden');
                const response = await makeAlloyApiCall('/connectors', 'GET', null, false);
                
                const connectors = response.connectors || response.data || response || [];
                
                console.log(`✅ Found ${connectors.length} connectors`);
                
                document.getElementById('loading-connectors').classList.add('hidden');
                displayConnectors(connectors);
                
            } catch (error) {
                document.getElementById('loading-connectors').classList.add('hidden');
                console.error('❌ Failed to load connectors:', error);
                
                document.getElementById('connectors-list').innerHTML = `
                    <div class="alert alert-error">
                        <h3>Initialization Error</h3>
                        <p><strong>Error:</strong> ${error.message}</p>
                    </div>
                `;
                document.getElementById('connectors-list').classList.remove('hidden');
            }
        }

        function displayConnectors(connectors) {
            const container = document.getElementById('connectors-list');
            container.innerHTML = '';
            
            const gridContainer = document.createElement('div');
            gridContainer.className = 'connector-grid';
            
            connectors.forEach(connector => {
                const connectorCard = document.createElement('div');
                connectorCard.className = 'connector-card';
                
                const iconElement = document.createElement('div');
                iconElement.className = 'connector-icon';
                
                if (connector.icon) {
                    const img = document.createElement('img');
                    img.src = connector.icon;
                    img.alt = connector.name;
                    img.style.width = '100%';
                    img.style.height = '100%';
                    img.style.objectFit = 'cover';
                    img.style.borderRadius = '8px';
                    img.onerror = () => {
                        iconElement.innerHTML = (connector.name || '?').charAt(0).toUpperCase();
                    };
                    iconElement.appendChild(img);
                } else {
                    iconElement.textContent = (connector.name || '?').charAt(0).toUpperCase();
                }
                
                const infoElement = document.createElement('div');
                infoElement.className = 'connector-info';
                
                infoElement.innerHTML = `
                    <div class="connector-name">${connector.name}</div>
                    <div class="connector-category">${(connector.category || ['Integration']).join(', ')}</div>
                `;
                
                connectorCard.appendChild(iconElement);
                connectorCard.appendChild(infoElement);
                connectorCard.onclick = () => selectConnector(connector);
                
                gridContainer.appendChild(connectorCard);
            });
            
            container.appendChild(gridContainer);
            container.classList.remove('hidden');
        }

        async function selectConnector(connector) {
            selectedConnector = connector;
            selectedConnectorId = connector.id;
            
            console.log(`✅ Selected connector: ${selectedConnectorId}`);
            
            document.getElementById('selected-connector-name').textContent = connector.name;
            
            updateStep(2);
            showStep('resources-step');
            await loadResources(selectedConnectorId);
        }

        async function loadResources(connectorId) {
            try {
                console.log(`📋 Loading resources for: ${connectorId}`);
                document.getElementById('loading-resources').classList.remove('hidden');
                
                const response = await makeAlloyApiCall(`/connectors/${connectorId}/resources`, 'GET', null, false);
                const resources = response.resources || response.data || response || [];
                
                console.log(`✅ Found ${resources.length} resources`);
                
                document.getElementById('loading-resources').classList.add('hidden');
                displayResources(resources);
                
            } catch (error) {
                document.getElementById('loading-resources').classList.add('hidden');
                console.error(`❌ Failed to load resources:`, error);
            }
        }

        function displayResources(resources) {
            const container = document.getElementById('resources-list');
            container.innerHTML = '';
            
            if (!resources || resources.length === 0) {
                container.innerHTML = `
                    <div class="alert alert-warning">
                        <h3>No Resources Available</h3>
                        <p>No resources found for this connector.</p>
                    </div>
                `;
                return;
            }
            
            resources.forEach(resource => {
                const resourceDiv = document.createElement('div');
                resourceDiv.style.cssText = 'margin-bottom:16px;border:2px solid #e5e7eb;border-radius:8px;padding:16px;background:white;';
                
                resourceDiv.innerHTML = `
                    <div style="margin-bottom:12px;">
                        <div><strong>${resource.displayName || resource.name || 'Unknown Resource'}</strong></div>
                        <div style="font-size:12px;color:#6b7280;margin-top:4px;">
                            ${resource.description || 'Manage data records'}
                        </div>
                    </div>
                    <div>
                        <label class="form-label">Select Action:</label>
                        <select class="form-select" id="action-select-${resource.name}">
                            <option value="">Choose an action...</option>
                        </select>
                        <button class="btn btn-primary mt-4" style="display:none;" onclick="proceedWithAction('${resource.name}')">
                            Continue
                        </button>
                    </div>
                `;
                
                const select = resourceDiv.querySelector(`#action-select-${resource.name}`);
                
                if (resource.actions && resource.actions.length > 0) {
                    resource.actions.forEach(action => {
                        const option = document.createElement('option');
                        option.value = action.id;
                        
                        const method = detectHttpMethod(action);
                        const methodBadge = `[${method}]`;
                        
                        option.textContent = `${methodBadge} ${action.name} - ${action.description || 'No description'}`;
                        option.dataset.actionData = JSON.stringify(action);
                        select.appendChild(option);
                    });
                    
                    select.addEventListener('change', (e) => {
                        const button = resourceDiv.querySelector('button');
                        if (e.target.value) {
                            button.style.display = 'inline-block';
                            button.dataset.resourceData = JSON.stringify(resource);
                            button.dataset.actionData = e.target.options[e.target.selectedIndex].dataset.actionData;
                        } else {
                            button.style.display = 'none';
                        }
                    });
                } else {
                    select.innerHTML = '<option value="">No actions available</option>';
                    select.disabled = true;
                }
                
                container.appendChild(resourceDiv);
            });
        }

        async function proceedWithAction(resourceName) {
            const button = event.target;
            const resourceData = JSON.parse(button.dataset.resourceData);
            const actionData = JSON.parse(button.dataset.actionData);
            
            selectedResource = resourceData;
            
            console.log(`✅ Selected action: ${actionData.name} (${actionData.id})`);
            
            updateStep(3);
            showStep('action-step');
            
            const container = document.getElementById('action-form');
            container.innerHTML = `
                <div class="loading">
                    <div class="spinner"></div>
                </div>
                <p class="text-center mt-4">Loading action details...</p>
            `;
            
            // CORRECT ENDPOINT
            try {
                console.log(`🔥 Fetching action metadata for: ${actionData.id}`);
                const actionMetadataEndpoint = `/connectors/${selectedConnectorId}/actions/${actionData.id}`;
                
                const response = await makeAlloyApiCall(actionMetadataEndpoint, 'GET', null, false);
                
                console.log(`📋 Action metadata response:`, response);
                
                let fullActionData;
                if (response.action) {
                    fullActionData = response.action;
                } else if (response.data?.action) {
                    fullActionData = response.data.action;
                } else if (response.data) {
                    fullActionData = response.data;
                } else {
                    fullActionData = response;
                }
                
                console.log(`✅ Full action data with schema:`, fullActionData);
                actionDetailsGlobal = fullActionData;
                
                // Check credentials before showing form
                await ensureCredentials();
                
                // Load options for dropdowns
                await loadDynamicOptions(fullActionData);
                
                displayActionForm();
                
            } catch (error) {
                console.error(`❌ Failed to fetch action metadata:`, error);
                actionDetailsGlobal = actionData;
                
                try {
                    await ensureCredentials();
                    await loadDynamicOptions(actionData);
                } catch (credError) {
                    console.error(`❌ Credential error:`, credError);
                }
                
                displayActionForm();
            }
        }

        // NEW: Ensure credentials exist before showing form
        async function ensureCredentials() {
            try {
                console.log(`🔑 Checking credentials for: ${selectedConnectorId}`);
                
                const credResponse = await makeAlloyApiCall(`/connectors/${selectedConnectorId}/credentials`, 'GET', null, true);
                const existingCreds = credResponse.credentials || credResponse.data || credResponse || [];
                
                if (existingCreds.length === 0) {
                    console.log(`⚠️ No credentials found, starting OAuth flow`);
                    await startOAuthFlow(selectedConnectorId);
                } else {
                    console.log(`✅ Credentials found`);
                }
            } catch (error) {
                console.error(`❌ Error checking credentials:`, error);
                
                if (error.message.includes('401') || error.message.includes('403') || error.message.includes('404')) {
                    console.log(`🔐 Starting OAuth flow due to auth error`);
                    await startOAuthFlow(selectedConnectorId);
                } else {
                    throw error;
                }
            }
        }

        // NEW: Load dynamic options for ID fields AND enum fields
        async function loadDynamicOptions(actionData) {
            const schema = parseActionSchema(actionData);
            const allFields = [...schema.pathParameters, ...schema.bodyParameters, ...schema.queryParameters];
            
            // Fields that need options loaded
            const idFields = allFields.filter(field => 
                field.name.toLowerCase().includes('id') || 
                field.name.toLowerCase().includes('company') ||
                (field.type === 'string' && !field.options && isLikelyEnumField(field.name))
            );
            
            if (idFields.length === 0) {
                console.log(`ℹ️ No fields to load options for`);
                return;
            }
            
            console.log(`🔄 Checking for loadable options in fields:`, idFields.map(f => f.name));
            
            // NOTE: We skip automatic option loading via execute endpoints
            // because it triggers actual action execution which:
            // 1. Requires credentials (causes auth errors)
            // 2. Consumes API quota
            // 3. Can be slow
            //
            // Instead, we rely on:
            // - Enum values in the schema (already handled)
            // - User typing IDs manually (works fine)
            // - Future enhancement: Use dedicated metadata endpoints if available
            
            console.log(`ℹ️ Skipping automatic option loading to avoid unnecessary API calls`);
            console.log(`💡 Tip: If the schema includes enum values, they will appear as dropdowns automatically`);
        }

        // Helper to identify fields that are likely enums
        function isLikelyEnumField(fieldName) {
            const enumKeywords = [
                'stage', 'status', 'state', 'type', 'category', 
                'priority', 'severity', 'level', 'grade', 'class',
                'phase', 'step', 'mode', 'kind', 'variant'
            ];
            
            const fieldLower = fieldName.toLowerCase();
            return enumKeywords.some(keyword => fieldLower.includes(keyword));
        }

        // NEW: Infer list endpoint from field name
        function inferListEndpoint(fieldName, resourceName) {
            const fieldLower = fieldName.toLowerCase();
            
            // Map common ID fields to list action patterns
            const mappings = {
                'companyid': 'listCompanies',
                'company': 'listCompanies',
                'accountid': 'listAccounts', 
                'account': 'listAccounts',
                'contactid': 'listContacts',
                'contact': 'listContacts',
                'ownerid': 'listOwners',
                'owner': 'listOwners',
                'userid': 'listUsers',
                'user': 'listUsers',
                'pipelineid': 'listPipelines',
                'pipeline': 'listPipelines',
                'dealid': 'listDeals',
                'deal': 'listDeals',
                'taskid': 'listTasks',
                'task': 'listTasks',
                'projectid': 'listProjects',
                'project': 'listProjects'
            };
            
            // Check direct mappings first
            for (const [key, actionId] of Object.entries(mappings)) {
                if (fieldLower.includes(key)) {
                    // Return the execute endpoint for the list action
                    return `/connectors/${selectedConnectorId}/actions/${actionId}/execute`;
                }
            }
            
            // If no direct mapping found, return null (don't guess)
            console.log(`⚠️ No list endpoint mapping for field: ${fieldName}`);
            return null;
        }

        // OAuth flow for credentials
        async function startOAuthFlow(connectorId) {
            try {
                // First, get credential metadata to see if additional fields are needed
                console.log(`🔐 Getting credential metadata for: ${connectorId}`);
                const metadataResponse = await makeAlloyApiCall(`/connectors/${connectorId}/credentials/metadata`, 'GET', null, false);
                
                let requiredFields = [];
                
                if (metadataResponse.metadata && Array.isArray(metadataResponse.metadata) && metadataResponse.metadata.length > 0) {
                    const firstMetadata = metadataResponse.metadata[0];
                    
                    if (firstMetadata.inputSchema && firstMetadata.inputSchema.properties) {
                        const schema = firstMetadata.inputSchema;
                        
                        if (schema.properties.data && schema.properties.data.properties) {
                            const dataProperties = schema.properties.data.properties;
                            const dataRequired = schema.properties.data.required || [];
                            
                            Object.keys(dataProperties).forEach(key => {
                                if (dataRequired.includes(key)) {
                                    const prop = dataProperties[key];
                                    requiredFields.push({
                                        name: key,
                                        displayName: prop.title || humanizeFieldName(key),
                                        type: prop.type || 'string',
                                        description: prop.description || `Enter your ${humanizeFieldName(key)}`,
                                        required: true
                                    });
                                }
                            });
                        }
                    }
                }
                
                if (requiredFields.length > 0) {
                    console.log(`ℹ️ Additional fields required before OAuth:`, requiredFields.map(f => f.name));
                    return await showCredentialFieldsForm(connectorId, requiredFields);
                } else {
                    return await initiateOAuth(connectorId, {});
                }
                
            } catch (error) {
                console.error(`❌ Error starting OAuth flow:`, error);
                throw error;
            }
        }

        // Show form to collect credential fields (like tenantId)
        async function showCredentialFieldsForm(connectorId, requiredFields) {
            return new Promise((resolve, reject) => {
                updateStep(4);
                showStep('execution-step');
                
                const executionContainer = document.getElementById('execution-step');
                const cardElement = executionContainer.querySelector('.card');
                
                const connectorName = selectedConnector?.name || connectorId;
                
                let formFieldsHtml = '';
                requiredFields.forEach(field => {
                    formFieldsHtml += `
                        <div class="form-group">
                            <label class="form-label">
                                ${field.displayName}
                                <span style="color: #dc2626;"> *</span>
                            </label>
                            ${field.description ? `<p style="font-size: 12px; color: #6b7280; margin-bottom: 4px;">${field.description}</p>` : ''}
                            <input type="text" 
                                   id="cred-field-${field.name}" 
                                   class="form-input" 
                                   placeholder="Enter ${field.displayName.toLowerCase()}"
                                   required>
                        </div>
                    `;
                });
                
                cardElement.innerHTML = `
                    <h2>4. Setup ${connectorName} Connection</h2>
                    <div class="alert alert-info">
                        <strong>Additional Information Required</strong>
                        <p>${connectorName} requires some information before authentication.</p>
                    </div>
                    
                    <div style="padding: 24px 0;">
                        <h3 style="margin-bottom: 16px;">Connection Details</h3>
                        ${formFieldsHtml}
                        
                        <div style="text-align: center; margin-top: 32px;">
                            <button class="btn btn-primary" id="continue-to-oauth-btn">
                                Continue to Authentication
                            </button>
                            
                            <button class="btn btn-outline mt-4" onclick="resetDemo()" style="margin-left: 12px;">
                                Cancel
                            </button>
                        </div>
                    </div>
                `;

                document.getElementById('continue-to-oauth-btn').onclick = async () => {
                    const fieldData = {};
                    let missingFields = [];
                    
                    requiredFields.forEach(field => {
                        const input = document.getElementById(`cred-field-${field.name}`);
                        const value = input ? input.value.trim() : '';
                        
                        if (value) {
                            fieldData[field.name] = value;
                        } else if (field.required) {
                            missingFields.push(field.displayName);
                        }
                    });
                    
                    if (missingFields.length > 0) {
                        alert(`Please fill in: ${missingFields.join(', ')}`);
                        return;
                    }
                    
                    try {
                        await initiateOAuth(connectorId, fieldData);
                        resolve();
                    } catch (error) {
                        alert(`Error: ${error.message}`);
                        reject(error);
                    }
                };
            });
        }

        // Initiate OAuth with optional additional data
        async function initiateOAuth(connectorId, additionalData = {}) {
            return new Promise((resolve, reject) => {
                const executionContainer = document.getElementById('execution-step');
                const cardElement = executionContainer.querySelector('.card');
                
                const connectorName = selectedConnector?.name || connectorId;
                
                cardElement.innerHTML = `
                    <h2>4. Authenticate with ${connectorName}</h2>
                    <div class="alert alert-warning">
                        <strong>Authentication Required</strong>
                        <p>You need to authenticate with ${connectorName} before using this action.</p>
                    </div>
                    
                    <div style="text-align: center; padding: 32px;">
                        <p style="margin-bottom: 24px;">Click the button below to authenticate:</p>
                        
                        <button class="btn btn-primary" id="start-oauth-btn">
                            🔐 Authenticate with ${connectorName}
                        </button>
                        
                        <div style="margin-top: 24px; padding: 16px; background-color: #f8f9fa; border-radius: 6px;">
                            <p style="margin-bottom: 16px;"><strong>Instructions:</strong></p>
                            <ol style="text-align: left; margin-left: 20px;">
                                <li>Click authentication button above</li>
                                <li>Complete OAuth in new window</li>
                                <li>Return here and click "I've Authenticated"</li>
                            </ol>
                        </div>
                        
                        <button class="btn btn-outline mt-4" onclick="resetDemo()">
                            Cancel
                        </button>
                    </div>
                `;

                document.getElementById('start-oauth-btn').onclick = async () => {
                    try {
                        const credentialRequest = {
                            userId: selectedUser.id,
                            authenticationType: 'oauth2',
                            redirectUri: window.location.origin + '/oauth-callback'
                        };
                        
                        if (Object.keys(additionalData).length > 0) {
                            credentialRequest.data = additionalData;
                        }
                        
                        const oauthResponse = await makeAlloyApiCall(`/connectors/${connectorId}/credentials`, 'POST', credentialRequest, false);
                        
                        const authUrl = oauthResponse.oauthUrl || oauthResponse.authUrl || oauthResponse.url;
                        
                        if (authUrl) {
                            window.open(authUrl, '_blank');
                            
                            // Show "waiting" state
                            cardElement.innerHTML = `
                                <h2>4. Waiting for Authentication...</h2>
                                <div class="alert alert-info">
                                    <strong>Complete the authentication in the popup window</strong>
                                    <p>Once complete, click "I've Authenticated" below.</p>
                                </div>
                                
                                <div style="text-align: center; padding: 32px;">
                                    <button class="btn btn-success" id="check-auth-btn">
                                        ✅ I've Authenticated
                                    </button>
                                </div>
                            `;
                            
                            document.getElementById('check-auth-btn').onclick = async () => {
                                try {
                                    const credResponse = await makeAlloyApiCall(`/connectors/${connectorId}/credentials`, 'GET', null, true);
                                    const creds = credResponse.credentials || credResponse.data || [];
                                    
                                    if (creds.length > 0) {
                                        resolve();
                                    } else {
                                        alert('Authentication not complete yet. Please complete the OAuth flow and try again.');
                                    }
                                } catch (error) {
                                    alert(`Error checking authentication: ${error.message}`);
                                }
                            };
                        } else {
                            throw new Error('No OAuth URL returned');
                        }
                        
                    } catch (error) {
                        alert(`Authentication error: ${error.message}`);
                        reject(error);
                    }
                };
            });
        }

        function displayActionForm() {
            const container = document.getElementById('action-form');
            formData = {};
            
            const currentActionDetails = actionDetails || actionDetailsGlobal;
            
            if (!currentActionDetails) {
                console.error('❌ No action details available');
                container.innerHTML = `
                    <div class="alert alert-error">
                        <strong>Error:</strong> No action details available. Please try again.
                    </div>
                    <button class="btn btn-primary mt-4" onclick="resetDemo()">Reset Demo</button>
                `;
                return;
            }
            
            const schema = parseActionSchema(currentActionDetails);
            currentActionDetails.parsedSchema = schema;
            
            const methodClass = `method-${schema.method.toLowerCase()}`;
            const methodBadge = `<span class="method-badge ${methodClass}">${schema.method}</span>`;
            
            container.innerHTML = `
                <div style="margin-bottom:24px;">
                    ${methodBadge}
                    <h3 style="display:inline;">${currentActionDetails.displayName || currentActionDetails.name}</h3>
                    <p style="color:#6b7280;margin-top:8px;">${currentActionDetails.description || ''}</p>
                </div>
            `;

            // Test Mode Debug Panel
            if (testMode) {
                const debugPanel = document.createElement('div');
                debugPanel.className = 'schema-debug';
                debugPanel.innerHTML = `
                    <div class="schema-debug-title">
                        <span>🔬</span>
                        <span>Schema Debug Info</span>
                    </div>
                    <div class="schema-debug-content">
                        <strong>Connector:</strong> ${selectedConnectorId}<br>
                        <strong>Resource:</strong> ${selectedResource.name}<br>
                        <strong>Action:</strong> ${currentActionDetails.id || currentActionDetails.name}<br>
                        <br>
                        <strong>Parsed Schema:</strong>
                        <pre>${JSON.stringify(schema, null, 2)}</pre>
                        <br>
                        <strong>Raw Action Object Keys:</strong>
                        <pre>${JSON.stringify(Object.keys(currentActionDetails), null, 2)}</pre>
                    </div>
                `;
                container.appendChild(debugPanel);
            }

            if (schema.method === 'GET') {
                const infoDiv = document.createElement('div');
                infoDiv.className = 'alert alert-info';
                infoDiv.innerHTML = `
                    <strong>Retrieve Data</strong>
                    <p>This will fetch ${selectedResource.displayName || selectedResource.name} from ${selectedConnector.name}.</p>
                `;
                container.appendChild(infoDiv);
            }

            if (schema.requiredFields.length === 0 && schema.optionalFields.length === 0) {
                const noSchemaAlert = document.createElement('div');
                noSchemaAlert.className = 'alert alert-warning';
                noSchemaAlert.innerHTML = `
                    <strong>⚠️ No Schema Available</strong>
                    <p>This action doesn't provide field definitions via the API.</p>
                `;
                container.appendChild(noSchemaAlert);
            }

            if (schema.requiredFields.length > 0) {
                const requiredSection = document.createElement('div');
                requiredSection.className = 'field-section';
                
                const requiredTitle = document.createElement('div');
                requiredTitle.className = 'field-section-title';
                requiredTitle.textContent = 'Required Fields';
                requiredSection.appendChild(requiredTitle);
                
                schema.requiredFields.forEach(field => {
                    requiredSection.appendChild(createFieldElement(field));
                });
                
                container.appendChild(requiredSection);
            }

            if (schema.optionalFields.length > 0) {
                const optionalSection = document.createElement('div');
                optionalSection.className = 'optional-fields';
                
                const toggleButton = document.createElement('div');
                toggleButton.className = 'optional-fields-toggle';
                toggleButton.innerHTML = `
                    <span class="arrow">▶</span>
                    Optional Fields (${schema.optionalFields.length})
                `;
                
                const optionalContent = document.createElement('div');
                optionalContent.className = 'optional-fields-content';
                
                schema.optionalFields.forEach(field => {
                    optionalContent.appendChild(createFieldElement(field));
                });
                
                toggleButton.addEventListener('click', () => {
                    const isExpanded = toggleButton.classList.contains('expanded');
                    if (isExpanded) {
                        toggleButton.classList.remove('expanded');
                        optionalContent.classList.remove('show');
                    } else {
                        toggleButton.classList.add('expanded');
                        optionalContent.classList.add('show');
                    }
                });
                
                optionalSection.appendChild(toggleButton);
                optionalSection.appendChild(optionalContent);
                container.appendChild(optionalSection);
            }

            const submitBtn = document.createElement('button');
            submitBtn.className = 'btn btn-success mt-6';
            
            if (schema.method === 'GET') {
                submitBtn.textContent = 'Retrieve Data';
            } else if (schema.method === 'POST') {
                submitBtn.textContent = 'Create Record';
            } else if (schema.method === 'PUT') {
                submitBtn.textContent = 'Update Record';
            } else if (schema.method === 'DELETE') {
                submitBtn.textContent = 'Delete Record';
            } else {
                submitBtn.textContent = 'Execute Action';
            }
            
            submitBtn.onclick = executeAction;
            container.appendChild(submitBtn);
        }

        function createFieldElement(field) {
            const formGroup = document.createElement('div');
            formGroup.className = 'form-group';
            
            const label = document.createElement('label');
            label.className = 'form-label';
            label.textContent = field.displayName;
            if (field.required) {
                label.innerHTML += '<span style="color:#dc2626;"> *</span>';
            }
            if (field.description) {
                label.innerHTML += `<span style="color:#9ca3af;font-weight:normal;margin-left:8px;">(${field.description})</span>`;
            }
            
            let input;
            
            // Use loadedOptions if available (from API call)
            const options = field.loadedOptions || field.options;
            
            if (field.type === 'select' && options) {
                input = document.createElement('select');
                input.className = 'form-select';
                
                const defaultOption = document.createElement('option');
                defaultOption.value = '';
                defaultOption.textContent = `Select ${field.displayName}`;
                input.appendChild(defaultOption);
                
                options.forEach(option => {
                    const opt = document.createElement('option');
                    opt.value = option.value;
                    opt.textContent = option.label;
                    input.appendChild(opt);
                });
            } else if (field.type === 'textarea' || field.isArray) {
                input = document.createElement('textarea');
                input.className = 'form-input';
                input.rows = 3;
                input.placeholder = `Enter ${field.displayName.toLowerCase()}`;
            } else {
                input = document.createElement('input');
                input.className = 'form-input';
                input.type = field.type === 'number' ? 'number' : 
                           field.type === 'email' ? 'email' : 
                           field.type === 'date' ? 'date' : 'text';
                input.placeholder = `Enter ${field.displayName.toLowerCase()}`;
            }
            
            input.addEventListener('change', (e) => {
                formData[field.name] = e.target.value;
            });
            
            if (input.type === 'text' || input.type === 'email' || input.tagName === 'TEXTAREA') {
                input.addEventListener('input', (e) => {
                    formData[field.name] = e.target.value;
                });
            }
            
            formGroup.appendChild(label);
            formGroup.appendChild(input);
            return formGroup;
        }

        async function executeAction() {
            try {
                const currentActionDetails = actionDetails || actionDetailsGlobal;
                const schema = currentActionDetails.parsedSchema;
                
                const missingFields = schema.requiredFields.filter(field => !formData[field.name] || formData[field.name] === '');
                
                if (missingFields.length > 0) {
                    alert(`Please fill in: ${missingFields.map(f => f.displayName).join(', ')}`);
                    return;
                }
                
                updateStep(4);
                showStep('execution-step');
                
                const platformName = selectedConnector?.name || 'platform';
                const executionText = document.getElementById('execution-step')?.querySelector('p');
                if (executionText) {
                    executionText.innerHTML = `Executing ${currentActionDetails.name} in <strong>${platformName}</strong>`;
                }
                
                console.log(`🔑 Getting credential for: ${selectedConnectorId}`);
                
                // Get credential (simplified for now)
                const credResponse = await makeAlloyApiCall(`/connectors/${selectedConnectorId}/credentials`, 'GET', null, true);
                const existingCreds = credResponse.credentials || credResponse.data || credResponse || [];
                
                if (existingCreds.length === 0) {
                    throw new Error('No credentials found. Please set up credentials for this connector first.');
                }
                
                const credential = existingCreds[0];
                
                const request = buildRequestFromSchema(schema, formData);
                request.credentialId = credential.credentialId || credential.id;
                request.additionalHeaders = {};
                
                const executeEndpoint = `/connectors/${selectedConnectorId}/actions/${currentActionDetails.id}/execute`;
                
                console.log(`🚀 Executing action with request:`, request);
                
                const response = await makeAlloyApiCall(executeEndpoint, 'POST', request, true);
                
                updateStep(5);
                showStep('result-step');
                
                const resultContainer = document.getElementById('result-content');
                
                let successMessage = `${currentActionDetails.displayName || currentActionDetails.name} executed successfully in ${platformName}!`;
                
                resultContainer.innerHTML = `
                    <div class="alert alert-success">
                        <strong>Success!</strong> ${successMessage}
                    </div>
                    <div>
                        <h4>Response:</h4>
                        <pre>${JSON.stringify(response, null, 2)}</pre>
                    </div>
                    <button class="btn btn-primary mt-4" onclick="resetDemo()">Try Another Integration</button>
                `;
                
            } catch (error) {
                console.error('❌ Execute action error:', error);
                
                updateStep(5);
                showStep('result-step');
                
                const resultContainer = document.getElementById('result-content');
                
                resultContainer.innerHTML = `
                    <div class="alert alert-error">
                        <strong>Error:</strong> ${error.message}
                    </div>
                    <div style="margin-top:16px;">
                        <h4>Debug Info:</h4>
                        <pre>${JSON.stringify({
                            connector: selectedConnectorId,
                            resource: selectedResource?.name,
                            action: (actionDetails || actionDetailsGlobal)?.id,
                            method: (actionDetails || actionDetailsGlobal)?.parsedSchema?.method,
                            formData: formData
                        }, null, 2)}</pre>
                    </div>
                    <button class="btn btn-primary mt-4" onclick="resetDemo()">Try Again</button>
                `;
            }
        }

        function updateStep(step) {
            currentStep = step;
            for (let i = 1; i <= 5; i++) {
                const stepEl = document.getElementById(`step-${i}`);
                if (i < step) {
                    stepEl.className = 'step completed';
                    stepEl.textContent = '✓';
                } else if (i === step) {
                    stepEl.className = 'step active';
                    stepEl.textContent = i;
                } else {
                    stepEl.className = 'step inactive';
                    stepEl.textContent = i;
                }
            }
        }

        function showStep(stepId) {
            const steps = ['connectors-step', 'resources-step', 'action-step', 'execution-step', 'result-step'];
            steps.forEach(id => {
                document.getElementById(id).classList.add('hidden');
            });
            document.getElementById(stepId).classList.remove('hidden');
        }

        function resetDemo() {
            currentStep = 1;
            selectedConnector = null;
            selectedConnectorId = null;
            selectedResource = null;
            actionDetails = null;
            formData = {};
            
            delete window.oauthResolve;
            delete window.oauthReject;
            
            config = getConfig();
            apiKey = config.apiKey;
            selectedUser = { id: config.userId, name: 'Demo User' };
            
            updateStep(1);
            showStep('connectors-step');
            initializeDemo();
        }

        document.addEventListener('DOMContentLoaded', function() {
            console.log('🚀 Universal Alloy Demo Initialized (V2 with nested parsing)');
            initializeDemo();
        });
    </script>
</body>
</html>