// Demo: Weft Sandbox Action Logging
import { createSandbox } from '../weft/core/sandbox';
import { orderFormWeftConfig } from './test-artifacts/order-form-weft.config';

async function runDemo() {
  console.log('\n╔═══════════════════════════════════════════════════════════════╗');
  console.log('║         🧶 WEFT SANDBOX - LIVE PREVIEW DEMO 🧶               ║');
  console.log('╚═══════════════════════════════════════════════════════════════╝\n');

  const sandbox = createSandbox(orderFormWeftConfig);
  sandbox.start();

  console.log('📋 SCENARIO: User filling out Order Form\n');
  console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');

  // Simulate user actions
  console.log('🎬 SIMULATING USER ACTIONS...\n');

  sandbox.logClick({ type: 'dropdown', text: 'Select Customer', selector: '#customer-select' });
  sandbox.logSelect({ type: 'select', id: 'customer', selector: '#customer-select' }, 'Acme Corp (C001)');
  
  sandbox.logClick({ type: 'dropdown', text: 'Select Product', selector: '#product-select' });
  sandbox.logSelect({ type: 'select', id: 'product', selector: '#product-select' }, 'Widget Alpha (WIDGET-A)');
  
  sandbox.logInput({ type: 'input', id: 'quantity', selector: '#quantity' }, 5);
  
  sandbox.logClick({ type: 'button', text: 'Add to Order', selector: 'button.add-item' });

  // API call simulation
  const response = await sandbox.handleFetch('POST', '/api/orders', {
    customerId: 'C001',
    items: [{ sku: 'WIDGET-A', quantity: 5 }],
    notes: 'Rush delivery'
  });
  const orderResult = await response.json();

  sandbox.logSubmit(
    { type: 'form', selector: 'form.order-form' },
    { customerId: 'C001', items: [{ sku: 'WIDGET-A', quantity: 5 }] },
    '/api/orders',
    'POST'
  );

  console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
  console.log('📜 ACTION LOG:\n');
  console.log(sandbox.exportActionsAsText());

  console.log('\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
  console.log('📊 SUMMARY:\n');
  const summary = sandbox.getActionSummary();
  console.log(`   Total Actions: ${summary.totalActions}`);
  console.log(`   API Calls: ${summary.apiCallCount}`);
  console.log(`   Avg API Latency: ${summary.averageApiLatency}ms`);

  console.log('\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
  console.log('📚 API DOCUMENTATION (Auto-generated):\n');
  const docs = sandbox.getApiDocs();
  docs.endpoints.forEach(ep => {
    console.log(`   ${ep.method} ${ep.endpoint}`);
    console.log(`   └─ ${ep.description}`);
    console.log(`   └─ Response: ${ep.mockStatus}`);
    console.log('');
  });

  console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
  console.log('📦 MOCK API RESPONSE (simulated):');
  console.log(`   ${JSON.stringify(orderResult, null, 2).split('\n').join('\n   ')}`);

  sandbox.stop();
  console.log('\n🧶 Weft Sandbox demo complete.\n');
}

runDemo().catch(console.error);
