// Demo: Full Ghost Mechanic Diagnosis + Fix Proposal
import { createGhostMechanic } from '../mechanic/core/diagnoser';
import { DiagnosisResult } from '../mechanic/core/types';
import * as fs from 'fs';
import * as path from 'path';

async function runDemo() {
  console.log('\n╔═══════════════════════════════════════════════════════════════╗');
  console.log('║         👻 GHOST MECHANIC - LIVE DIAGNOSIS DEMO 👻            ║');
  console.log('╚═══════════════════════════════════════════════════════════════╝\n');

  const mechanic = createGhostMechanic();
  
  // Load the buggy component
  const componentPath = path.join(__dirname, 'test-artifacts/order-form-buggy.tsx');
  const componentCode = fs.readFileSync(componentPath, 'utf-8');
  
  console.log('📋 SCENARIO: Customer reports "Submit button does nothing"\n');
  console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
  
  const result = await mechanic.diagnose({
    artifactId: 'order-form-v1',
    errorType: 'behavior',
    userDescription: 'When I click Submit Order, nothing happens. The button just stays there. No loading spinner, no error, no success message.',
    componentCode,
    actionLog: [
      { actionType: 'SELECT', element: { type: 'select', selector: '#customer' }, timestamp: '10:42:01' },
      { actionType: 'SELECT', element: { type: 'select', selector: '#product' }, timestamp: '10:42:05' },
      { actionType: 'INPUT', element: { type: 'input', selector: '#quantity' }, value: 5, timestamp: '10:42:08' },
      { actionType: 'CLICK', element: { type: 'button', text: 'Submit Order', selector: 'button.submit' }, timestamp: '10:42:12' }
    ]
  }) as DiagnosisResult;

  console.log(`🔍 DIAGNOSIS`);
  console.log(`   Confidence: ${result.confidence}%`);
  console.log(`   Category: ${result.category}`);
  console.log(`   Root Cause: ${result.rootCause}`);
  console.log('');
  console.log(`📖 EXPLANATION:`);
  console.log(`   ${result.explanation}`);
  console.log('');

  if (result.affectedCode && result.affectedCode.length > 0) {
    console.log(`📍 AFFECTED CODE:`);
    result.affectedCode.forEach((code, i) => {
      console.log(`   [${i + 1}] ${code.file}, lines ${code.lines[0]}-${code.lines[1]}`);
      console.log(`       "${code.snippet}"`);
    });
    console.log('');
  }

  if (result.proposedFix) {
    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
    console.log(`🔧 PROPOSED FIX`);
    console.log(`   ID: ${result.proposedFix.id}`);
    console.log(`   Confidence: ${result.proposedFix.confidence}%`);
    console.log(`   Effort: ${result.proposedFix.estimatedEffort}`);
    console.log('');
    console.log(`   Description:`);
    console.log(`   ${result.proposedFix.description}`);
    console.log('');
    
    console.log(`📝 CODE CHANGES:`);
    result.proposedFix.changes.forEach((change, i) => {
      console.log(`\n   [Change ${i + 1}] ${change.file} (${change.type})`);
      console.log(`   Explanation: ${change.explanation}`);
      if (change.before) {
        console.log(`\n   BEFORE:`);
        console.log(`   ┌──────────────────────────────────────────────────`);
        change.before.split('\n').forEach(line => console.log(`   │ ${line}`));
        console.log(`   └──────────────────────────────────────────────────`);
      }
      if (change.after) {
        console.log(`\n   AFTER:`);
        console.log(`   ┌──────────────────────────────────────────────────`);
        change.after.split('\n').forEach(line => console.log(`   │ ${line}`));
        console.log(`   └──────────────────────────────────────────────────`);
      }
    });

    console.log('\n');
    console.log(`✅ TEST PLAN:`);
    console.log(`   ${result.proposedFix.testPlan}`);
    console.log('');
    console.log(`↩️  ROLLBACK PLAN:`);
    console.log(`   ${result.proposedFix.rollbackPlan}`);
  }

  if (result.needsMoreInfo && result.needsMoreInfo.length > 0) {
    console.log('\n❓ QUESTIONS FOR USER:');
    result.needsMoreInfo.forEach((q, i) => {
      console.log(`   ${i + 1}. ${q}`);
    });
  }

  console.log('\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
  console.log('👻 Ghost Mechanic diagnosis complete.\n');
}

runDemo().catch(console.error);
