#!/usr/bin/env node

/**
 * Add data-i18n attributes to implementer.html based on translation keys
 * This script performs strategic replacements to add i18n attributes
 */

const fs = require('fs');
const path = require('path');

const HTML_FILE = path.join(__dirname, '../public/implementer.html');

console.log('Adding data-i18n attributes to implementer.html...\n');

let html = fs.readFileSync(HTML_FILE, 'utf8');
let changeCount = 0;

// Architecture section
const architectureReplacements = [
  {
    from: '<h2 class="text-3xl font-bold text-gray-900 mb-4">System Architecture</h2>',
    to: '<h2 class="text-3xl font-bold text-gray-900 mb-4" data-i18n="architecture.heading">System Architecture</h2>'
  },
  {
    from: '<h3 class="font-semibold text-gray-900 mb-3">Six Core Services</h3>',
    to: '<h3 class="font-semibold text-gray-900 mb-3" data-i18n="architecture.six_services_title">Six Core Services</h3>'
  },
  {
    from: '<span>BoundaryEnforcer (Tractatus 12.1-12.7)</span>',
    to: '<span data-i18n="architecture.service_1">BoundaryEnforcer (Tractatus 12.1-12.7)</span>'
  },
  {
    from: '<span>InstructionPersistenceClassifier</span>',
    to: '<span data-i18n="architecture.service_2">InstructionPersistenceClassifier</span>'
  },
  {
    from: '<span>CrossReferenceValidator</span>',
    to: '<span data-i18n="architecture.service_3">CrossReferenceValidator</span>'
  },
  {
    from: '<span>ContextPressureMonitor</span>',
    to: '<span data-i18n="architecture.service_4">ContextPressureMonitor</span>'
  },
  {
    from: '<span>MetacognitiveVerifier</span>',
    to: '<span data-i18n="architecture.service_5">MetacognitiveVerifier</span>'
  },
  {
    from: '<span>PluralisticDeliberationOrchestrator</span>',
    to: '<span data-i18n="architecture.service_6">PluralisticDeliberationOrchestrator</span>'
  },
  {
    from: '<h3 class="text-xl font-bold text-gray-900 mb-4">Service Interaction Flow</h3>',
    to: '<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="architecture.main_flow_title">Service Interaction Flow</h3>'
  },
  {
    from: 'alt="Tractatus Framework Architecture: Shows how 6 governance services interact in sequence"',
    to: 'data-i18n-alt="architecture.main_flow_alt" alt="Tractatus Framework Architecture: Shows how 6 governance services interact in sequence"'
  },
  {
    from: '<h3 class="text-xl font-bold text-gray-900 mb-4">Service Trigger Conditions</h3>',
    to: '<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="architecture.trigger_tree_title">Service Trigger Conditions</h3>'
  },
  {
    from: 'alt="Service Trigger Decision Tree: When each framework service activates"',
    to: 'data-i18n-alt="architecture.trigger_tree_alt" alt="Service Trigger Decision Tree: When each framework service activates"'
  },
  {
    from: '<h3 class="text-xl font-bold text-gray-900 mb-4">System Architecture</h3>\n      <p class="text-sm text-gray-600 mb-4">High-level overview showing how the 6 governance services integrate with your application and data layer.</p>',
    to: '<h3 class="text-xl font-bold text-gray-900 mb-4" data-i18n="architecture.system_arch_title">System Architecture</h3>\n      <p class="text-sm text-gray-600 mb-4" data-i18n="architecture.system_arch_desc">High-level overview showing how the 6 governance services integrate with your application and data layer.</p>'
  },
  {
    from: 'alt="Tractatus System Architecture: Component interaction and data flow"',
    to: 'data-i18n-alt="architecture.system_arch_alt" alt="Tractatus System Architecture: Component interaction and data flow"'
  },
  {
    from: 'aria-label="Download architecture main flow diagram as SVG">',
    to: 'data-i18n-aria-label="architecture.download_svg_aria" aria-label="Download architecture main flow diagram as SVG">'
  },
  {
    from: 'aria-label="Download service trigger decision tree as SVG">',
    to: 'data-i18n-aria-label="architecture.download_trigger_svg_aria" aria-label="Download service trigger decision tree as SVG">'
  },
  {
    from: 'aria-label="Download system architecture diagram as SVG">',
    to: 'data-i18n-aria-label="architecture.download_system_svg_aria" aria-label="Download system architecture diagram as SVG">'
  },
  // Download SVG text in buttons
  {
    from: '>Download SVG</a>',
    to: '><span data-i18n="architecture.download_svg">Download SVG</span></a>'
  }
];

// Apply architecture replacements
architectureReplacements.forEach(({ from, to }) => {
  if (html.includes(from)) {
    html = html.replace(from, to);
    changeCount++;
  }
});

console.log(`✓ Applied ${changeCount} replacements\n`);

// Write updated HTML
fs.writeFileSync(HTML_FILE, html, 'utf8');
console.log(`✅ Updated ${HTML_FILE}\n`);
console.log(`Added ${changeCount} data-i18n attributes to Architecture section\n`);