/**
 * Interactive Architecture Diagram Component
 * Tractatus Framework - Phase 3: Interactive Architecture Diagram
 *
 * Handles click/hover interactions on the hexagonal service diagram
 * Shows service details in a side panel
 */

class InteractiveDiagram {
  constructor() {
    this.activeService = null;
    this.loadTranslations();
    this.init();
  }

  loadTranslations() {
    // Get translations from i18n system
    const i18n = window.i18nTranslations || {};
    const diagram = i18n.diagram_services || {};
    
    // Define static properties (icons and colors)
    const staticProps = {
      overview: { color: '#0ea5e9', icon: '⚙️' },
      boundary: { color: '#10b981', icon: '🔒' },
      instruction: { color: '#6366f1', icon: '📋' },
      validator: { color: '#8b5cf6', icon: '✓' },
      pressure: { color: '#f59e0b', icon: '⚡' },
      metacognitive: { color: '#ec4899', icon: '💡' },
      deliberation: { color: '#14b8a6', icon: '👥' }
    };

    // Build serviceData from translations
    this.serviceData = {};
    
    Object.keys(staticProps).forEach(serviceId => {
      const trans = diagram[serviceId] || {};
      const details = [];
      
      // Collect detail1-detail6 (some services have 4, overview has 6)
      for (let i = 1; i <= 6; i++) {
        if (trans[`detail${i}`]) {
          details.push(trans[`detail${i}`]);
        }
      }
      
      this.serviceData[serviceId] = {
        name: trans.name || serviceId,
        shortName: trans.shortName || serviceId,
        color: staticProps[serviceId].color,
        icon: staticProps[serviceId].icon,
        description: trans.description || '',
        details: details,
        promise: trans.promise || ''
      };
    });
    
    console.log('[InteractiveDiagram] Loaded translations for', Object.keys(this.serviceData).length, 'services');
  }

    // FIXED: Better load detection with SVG verification
    const checkAndInit = () => {
      const svgDoc = objectElement.contentDocument;
      
      // Check if contentDocument exists and is actually SVG
      if (svgDoc && svgDoc.documentElement) {
        const rootTagName = svgDoc.documentElement.tagName ? svgDoc.documentElement.tagName.toLowerCase() : '';
        
        if (rootTagName === 'svg') {
          // It's an SVG - safe to initialize
          console.log('[InteractiveDiagram] SVG detected in contentDocument, initializing');
          initializeSVG();
          return true;
        } else {
          console.log('[InteractiveDiagram] contentDocument exists but root is:', rootTagName, '- not ready yet');
          return false;
        }
      }
      return false;
    };

    // Try immediate initialization if already loaded
    if (!checkAndInit()) {
      // Not ready yet - wait for load event
      console.log('[InteractiveDiagram] Waiting for object to load...');
      
      objectElement.addEventListener('load', () => {
        console.log('[InteractiveDiagram] Object load event fired');
        // Small delay to ensure contentDocument is fully parsed
        setTimeout(() => {
          if (!checkAndInit()) {
            // Still not ready - start retry mechanism
            initializeSVG();
          }
        }, 50);
      });

      // Also try periodic checks as fallback
      let retryCount = 0;
      const maxRetries = 20;
      const retryInterval = setInterval(() => {
        retryCount++;
        if (checkAndInit() || retryCount >= maxRetries) {
          clearInterval(retryInterval);
          if (retryCount >= maxRetries) {
            console.error('[InteractiveDiagram] Failed to load SVG after', maxRetries, 'retries');
          }
        }
      }, 100);
    }
  }


  highlightService(serviceId) {
    if (!this.svg) return;

    const connectionLine = this.svg.querySelector(`#conn-${serviceId}`);
    if (connectionLine) {
      connectionLine.classList.add('active');
    }

    const node = this.svg.querySelector(`#node-${serviceId}`);
    if (node) {
      node.classList.add('hover');
    }
  }

  unhighlightService(serviceId) {
    if (!this.svg) return;

    if (this.activeService === serviceId) return;

    const connectionLine = this.svg.querySelector(`#conn-${serviceId}`);
    if (connectionLine) {
      connectionLine.classList.remove('active');
    }

    const node = this.svg.querySelector(`#node-${serviceId}`);
    if (node) {
      node.classList.remove('hover');
    }
  }

  showServiceDetails(serviceId) {
    const service = this.serviceData[serviceId];
    if (!service) {
      console.error('[InteractiveDiagram] Service not found:', serviceId);
      return;
    }

    this.activeService = serviceId;

    if (this.svg) {
      this.svg.querySelectorAll('.service-node').forEach(n => n.classList.remove('active'));
      this.svg.querySelectorAll('.connection-line').forEach(l => l.classList.remove('active'));

      const node = this.svg.querySelector(`#node-${serviceId}`);
      if (node) {
        node.classList.add('active');
      }

      const connectionLine = this.svg.querySelector(`#conn-${serviceId}`);
      if (connectionLine) {
        connectionLine.classList.add('active');
      }
    }

    this.renderServicePanel(service);

    console.log('[InteractiveDiagram] Showing details for:', service.name);
  }

  renderServicePanel(service) {
    const panel = document.getElementById('service-detail-panel');

    if (!panel) {
      console.error('[InteractiveDiagram] Service detail panel not found in DOM');
      return;
    }

    // Update border color to match selected service
    panel.style.borderColor = service.color;
    panel.style.borderWidth = '2px';

    const html = `
      <div class="flex items-start mb-4">
        <div class="flex items-center space-x-3">
          <div class="w-12 h-12 rounded-xl flex items-center justify-center text-2xl service-icon-box" data-color="${service.color}">
            ${service.icon}
          </div>
          <div>
            <h3 class="text-xl font-bold text-gray-900">${service.name}</h3>
            <span class="text-xs font-medium text-gray-600 uppercase">${service.shortName}</span>
          </div>
        </div>
      </div>

      <p class="text-gray-700 mb-4 leading-relaxed">${service.description}</p>

      <div class="mb-4">
        <h4 class="text-sm font-semibold text-gray-900 mb-2 uppercase">Key Features</h4>
        <ul class="space-y-2" id="service-features-list">
          ${service.details.map(detail => `
            <li class="flex items-start text-sm text-gray-700">
              <svg class="w-4 h-4 mr-2 mt-0.5 flex-shrink-0 service-check-icon" data-color="${service.color}" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/>
              </svg>
              <span>${detail}</span>
            </li>
          `).join('')}
        </ul>
      </div>

      <div class="text-xs rounded px-3 py-2 bg-opacity-20 service-promise-badge" data-color="${service.color}">
        <strong class="service-promise-text" data-color="${service.color}">Early Promise:</strong>
        <span class="text-gray-800">${service.promise}</span>
      </div>
    `;

    panel.innerHTML = html;

    // Apply styles via JavaScript (CSP-compliant)
    const iconBox = panel.querySelector('.service-icon-box');
    if (iconBox) {
      const color = iconBox.getAttribute('data-color');
      iconBox.style.background = `linear-gradient(135deg, ${color} 0%, ${color}dd 100%)`;
    }

    // Style all check icons
    const checkIcons = panel.querySelectorAll('.service-check-icon');
    checkIcons.forEach(icon => {
      const color = icon.getAttribute('data-color');
      icon.style.color = color;
    });

    // Style promise badge
    const promiseBadge = panel.querySelector('.service-promise-badge');
    if (promiseBadge) {
      const color = promiseBadge.getAttribute('data-color');
      promiseBadge.style.backgroundColor = color;
    }

    // Style promise text
    const promiseText = panel.querySelector('.service-promise-text');
    if (promiseText) {
      const color = promiseText.getAttribute('data-color');
      promiseText.style.color = color;
    }
  }

  addKeyboardNavigation(nodes) {
    nodes.forEach((node, index) => {
      node.setAttribute('tabindex', '0');
      node.setAttribute('role', 'button');

      node.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          const serviceId = node.getAttribute('data-service');
          this.showServiceDetails(serviceId);
        }
      });
    });
  }
}

if (typeof window !== 'undefined') {
  window.interactiveDiagram = new InteractiveDiagram();
}

if (typeof module !== 'undefined' && module.exports) {
  module.exports = InteractiveDiagram;
}

  // Listen for language changes and reload translations
  handleLanguageChange() {
    console.log('[InteractiveDiagram] Language changed, reloading translations');
    this.loadTranslations();
    // Re-render current service if one is active
    if (this.activeService) {
      const service = this.serviceData[this.activeService];
      if (service) {
        this.renderServicePanel(service);
      }
    }
  }
}

// Initialize and listen for language changes
if (typeof window !== 'undefined') {
  window.interactiveDiagram = new InteractiveDiagram();
  
  // Listen for i18n initialization and language changes
  window.addEventListener('i18nInitialized', () => {
    if (window.interactiveDiagram) {
      window.interactiveDiagram.handleLanguageChange();

  // Listen for language changes and reload translations
  handleLanguageChange() {
    console.log('[InteractiveDiagram] Language changed, reloading translations');
    this.loadTranslations();
    // Re-render current service if one is active
    if (this.activeService) {
      const service = this.serviceData[this.activeService];
      if (service) {
        this.renderServicePanel(service);
      }
    }
  }
}

// Initialize and listen for language changes
if (typeof window !== 'undefined') {
  window.interactiveDiagram = new InteractiveDiagram();
  
  // Listen for i18n initialization
  window.addEventListener('i18nInitialized', () => {
    if (window.interactiveDiagram) {
      window.interactiveDiagram.handleLanguageChange();
    }
  });
  
  // Listen for language changes
  window.addEventListener('languageChanged', () => {
    if (window.interactiveDiagram) {
      window.interactiveDiagram.handleLanguageChange();
    }
  });
}

if (typeof module !== 'undefined' && module.exports) {
  module.exports = InteractiveDiagram;
}