<template>
  <div class="conditional-logic-demo p-6 bg-gray-50 rounded-lg">
    <h3 class="text-lg font-semibold mb-4">Conditional Logic Optimization Demo</h3>
    
    <!-- Before Optimization Example -->
    <div class="mb-6">
      <h4 class="text-md font-medium text-red-600 mb-2">❌ Before Optimization (Duplicate Handlers)</h4>
      <div class="bg-red-50 p-4 rounded border border-red-200">
        <pre class="text-sm text-red-800 whitespace-pre-wrap">{{ beforeOptimization }}</pre>
      </div>
    </div>
    
    <!-- After Optimization Example -->
    <div class="mb-6">
      <h4 class="text-md font-medium text-green-600 mb-2">✅ After Optimization (Grouped Handlers)</h4>
      <div class="bg-green-50 p-4 rounded border border-green-200">
        <pre class="text-sm text-green-800 whitespace-pre-wrap">{{ afterOptimization }}</pre>
      </div>
    </div>
    
    <!-- Benefits -->
    <div class="bg-blue-50 p-4 rounded border border-blue-200">
      <h4 class="text-md font-medium text-blue-800 mb-2">🚀 Benefits of Optimization</h4>
      <ul class="text-sm text-blue-700 space-y-1">
        <li>• <strong>Reduced Memory Usage:</strong> Only one handler per watched field instead of multiple duplicates</li>
        <li>• <strong>Better Performance:</strong> Fewer function calls when field values change</li>
        <li>• <strong>Cleaner Code:</strong> Grouped logic is easier to read and maintain</li>
        <li>• <strong>No Conflicts:</strong> Eliminates potential conflicts between duplicate handlers</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

// Example scenario: 3 fields (field2, field3, field4) all depend on field1
const beforeOptimization = computed(() => `// BEFORE: Multiple duplicate handlers for the same field
// This creates performance issues and potential conflicts

// Conditional logic for field: field2
onFieldChange('field1', function() {
  if (getField('field1') === 'show') {
    showField('field2');
  } else {
    hideField('field2');
  }
});

// Conditional logic for field: field3  
onFieldChange('field1', function() {
  if (getField('field1') === 'show') {
    showField('field3');
  } else {
    hideField('field3');
  }
});

// Conditional logic for field: field4
onFieldChange('field1', function() {
  if (getField('field1') === 'show') {
    showField('field4');
  } else {
    hideField('field4');
  }
});

// Problem: 3 duplicate handlers listening to the same field!`)

const afterOptimization = computed(() => `// AFTER: Single optimized handler for all dependent fields
// Much more efficient and prevents conflicts

// Optimized field change handler for: field1
// Handles 3 dependent field(s): field2, field3, field4
onFieldChange('field1', function() {
  // Logic for text field: field2
  if (getField('field1') === 'show') {
    showField('field2');
  } else {
    hideField('field2');
  }

  // Logic for text field: field3
  if (getField('field1') === 'show') {
    showField('field3');
  } else {
    hideField('field3');
  }

  // Logic for text field: field4
  if (getField('field1') === 'show') {
    showField('field4');
  } else {
    hideField('field4');
  }
});

// Solution: Only 1 handler managing all dependent fields!`)
</script>

<style scoped>
pre {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.4;
  overflow-x: auto;
}
</style>