/**
 * DetailsPanel - Panneau d'affichage des détails d'un code
 * 
 * Responsabilités:
 * - Afficher les informations du code sélectionné
 * - Afficher toutes les preuves avec liens vers documents
 * - Afficher le raisonnement du système
 * - Afficher les boutons d'action
 * - Gérer la navigation vers les documents
 * 
 * Validates: Requirements 5.1, 5.2, 5.3, 5.5, 5.6, 5.7
 */
class DetailsPanel {
  constructor(stateManager) {
    this.stateManager = stateManager;
    this.container = document.getElementById('code-details');
    
    // S'abonner aux changements d'état
    this.stateManager.on('codeSelected', (code) => this.render(code));
  }

  /**
   * Rendre le panneau des détails
   */
  render(code) {
    if (!code) {
      this.renderEmpty();
      return;
    }
    
    const confidenceClass = this.getConfidenceClass(code.confidence);
    const confidencePercent = Math.round(code.confidence * 100);
    
    let html = `
      <div class="code-details-container">
        <!-- En-tête du code -->
        <div class="code-details-header">
          <div class="code-details-title">
            <h3>${code.code}</h3>
            <span class="confidence-badge ${confidenceClass}">
              ${confidencePercent}%
            </span>
          </div>
          <div class="code-details-type">${this.getCodeTypeLabel(code.type)}</div>
          <div class="code-details-label">${code.label}</div>
        </div>
        
        <!-- Raisonnement -->
        ${this.renderReasoning(code)}
        
        <!-- Preuves -->
        ${this.renderEvidence(code)}
        
        <!-- Faits cliniques -->
        ${this.renderClinicalFacts(code)}
        
        <!-- Actions -->
        ${this.renderActions(code)}
      </div>
    `;
    
    this.container.innerHTML = html;
  }

  /**
   * Rendre l'état vide
   * Validates: Requirements 5.1
   */
  renderEmpty() {
    this.container.innerHTML = `
      <div class="empty-state">
        <div class="empty-icon">📋</div>
        <h3>Aucun code sélectionné</h3>
        <p>Sélectionnez un code dans le panneau de gauche pour voir ses détails</p>
      </div>
    `;
  }

  /**
   * Rendre le raisonnement du système
   * Validates: Requirements 5.6
   */
  renderReasoning(code) {
    if (!code.reasoning) return '';
    
    return `
      <div class="details-section">
        <h4>💡 Raisonnement du système</h4>
        <div class="reasoning-content">
          ${this.escapeHTML(code.reasoning)}
        </div>
      </div>
    `;
  }

  /**
   * Rendre les preuves
   * Validates: Requirements 5.3, 5.5
   */
  renderEvidence(code) {
    if (!code.evidence || code.evidence.length === 0) {
      return `
        <div class="details-section">
          <h4>📄 Preuves (0)</h4>
          <p class="no-evidence">Aucune preuve disponible pour ce code</p>
        </div>
      `;
    }
    
    let html = `
      <div class="details-section">
        <h4>📄 Preuves (${code.evidence.length})</h4>
        <div class="evidence-list">
    `;
    
    code.evidence.forEach((ev, index) => {
      html += `
        <div class="evidence-item" onclick="window.detailsPanel.navigateToEvidence('${ev.document_id}', ${index})">
          <div class="evidence-header">
            <span class="evidence-number">#${index + 1}</span>
            <span class="evidence-document">📄 ${ev.document_id}</span>
          </div>
          <div class="evidence-text">
            "${this.escapeHTML(ev.text || 'Texte de preuve')}"
          </div>
          ${ev.context ? `<div class="evidence-context">${this.escapeHTML(ev.context)}</div>` : ''}
        </div>
      `;
    });
    
    html += `
        </div>
      </div>
    `;
    
    return html;
  }

  /**
   * Rendre les faits cliniques
   * Validates: Requirements 5.4, 6.2, 6.3, 6.6
   */
  renderClinicalFacts(code) {
    const facts = this.stateManager.getClinicalFacts();
    if (!facts || facts.length === 0) {
      return `
        <div class="details-section">
          <h4>🔬 Faits cliniques liés</h4>
          <p class="no-facts">Aucun fait clinique disponible</p>
        </div>
      `;
    }
    
    // Filtrer les faits liés à ce code
    const linkedFacts = facts.filter(fact => 
      fact.linked_codes && fact.linked_codes.includes(code.code)
    );
    
    if (linkedFacts.length === 0) {
      return `
        <div class="details-section">
          <h4>🔬 Faits cliniques liés</h4>
          <p class="no-facts">Aucun fait clinique lié à ce code</p>
        </div>
      `;
    }
    
    // Organiser par catégorie
    const byCategory = {};
    linkedFacts.forEach(fact => {
      if (!byCategory[fact.category]) {
        byCategory[fact.category] = [];
      }
      byCategory[fact.category].push(fact);
    });
    
    let html = `
      <div class="details-section">
        <h4>🔬 Faits cliniques liés (${linkedFacts.length})</h4>
        <div class="clinical-facts-container">
    `;
    
    // Icônes par catégorie
    const categoryIcons = {
      'symptoms': '🤒',
      'diagnoses': '🩺',
      'treatments': '💊',
      'procedures': '🔬',
      'history': '📋',
      'allergies': '⚠️',
      'medications': '💉',
      'lab_results': '🧪'
    };
    
    // Libellés par catégorie
    const categoryLabels = {
      'symptoms': 'Symptômes',
      'diagnoses': 'Diagnostics',
      'treatments': 'Traitements',
      'procedures': 'Procédures',
      'history': 'Antécédents',
      'allergies': 'Allergies',
      'medications': 'Médicaments',
      'lab_results': 'Résultats de laboratoire'
    };
    
    Object.keys(byCategory).forEach(category => {
      const icon = categoryIcons[category] || '📌';
      const label = categoryLabels[category] || category;
      const categoryFacts = byCategory[category];
      
      html += `
        <div class="clinical-facts-category">
          <h5 class="category-header">
            ${icon} ${label} (${categoryFacts.length})
          </h5>
          <div class="facts-list">
      `;
      
      categoryFacts.forEach(fact => {
        html += `
          <div class="fact-item" onclick="window.detailsPanel.navigateToFact('${fact.document_id}', ${fact.span[0]})">
            <div class="fact-text">${this.escapeHTML(fact.text)}</div>
            ${fact.confidence ? `<span class="fact-confidence">${Math.round(fact.confidence * 100)}%</span>` : ''}
            <div class="fact-source">📄 ${fact.document_id}</div>
          </div>
        `;
      });
      
      html += `
          </div>
        </div>
      `;
    });
    
    html += `
        </div>
      </div>
    `;
    
    return html;
  }
  
  /**
   * Naviguer vers un fait clinique dans le document
   */
  navigateToFact(documentId, position) {
    // Changer l'onglet du document
    this.stateManager.setActiveDocumentTab(documentId);
    
    // Attendre que le document soit chargé puis scroller
    setTimeout(() => {
      const contentContainer = document.getElementById('document-text-content');
      if (contentContainer) {
        // Trouver l'élément à la position donnée
        const textContent = contentContainer.textContent;
        if (position < textContent.length) {
          contentContainer.scrollTop = Math.max(0, position - 200);
        }
      }
    }, 200);
  }

  /**
   * Rendre les boutons d'action
   * Validates: Requirements 5.7
   */
  renderActions(code) {
    return `
      <div class="details-section">
        <h4>⚙️ Actions</h4>
        <div class="actions-buttons">
          <button class="btn btn-primary" onclick="window.detailsPanel.correctCode('${code.code}')">
            ✏️ Corriger
          </button>
          <button class="btn btn-secondary" onclick="window.detailsPanel.addComment('${code.code}')">
            💬 Commenter
          </button>
          <button class="btn btn-success" onclick="window.detailsPanel.validateCode('${code.code}')">
            ✅ Valider
          </button>
        </div>
      </div>
    `;
  }

  /**
   * Naviguer vers une preuve dans le document
   * Validates: Requirements 5.5, 7.3, 7.4
   */
  navigateToEvidence(documentId, evidenceIndex) {
    // Changer l'onglet du document
    this.stateManager.setActiveDocumentTab(documentId);
    
    // Attendre que le document soit chargé puis scroller
    setTimeout(() => {
      const contentContainer = document.getElementById('document-text-content');
      if (contentContainer && window.highlightManager) {
        window.highlightManager.scrollToHighlight(contentContainer, evidenceIndex);
      }
    }, 200);
  }

  /**
   * Corriger un code
   */
  correctCode(codeValue) {
    const code = this.stateManager.getSelectedCode();
    if (!code) return;
    
    // Ouvrir le modal de correction
    const modal = document.getElementById('correctionModal');
    if (modal) {
      document.getElementById('originalCode').value = code.code;
      document.getElementById('correctedCode').value = '';
      document.getElementById('correctedLabel').value = '';
      document.getElementById('correctionComment').value = '';
      modal.style.display = 'block';
    }
  }

  /**
   * Ajouter un commentaire
   */
  addComment(codeValue) {
    const comment = prompt('Entrez votre commentaire:');
    if (comment) {
      // TODO: Envoyer le commentaire à l'API
      alert('Commentaire enregistré: ' + comment);
    }
  }

  /**
   * Valider un code
   */
  validateCode(codeValue) {
    if (confirm(`Voulez-vous valider le code ${codeValue} ?`)) {
      // TODO: Envoyer la validation à l'API
      alert('Code validé: ' + codeValue);
    }
  }

  /**
   * Obtenir le libellé du type de code
   */
  getCodeTypeLabel(type) {
    const labels = {
      'dp': 'Diagnostic Principal',
      'dr': 'Diagnostic Relié',
      'das': 'Diagnostic Associé Significatif',
      'ccam': 'Acte CCAM'
    };
    return labels[type] || type;
  }

  /**
   * Obtenir la classe CSS du badge de confiance
   */
  getConfidenceClass(confidence) {
    if (confidence >= 0.8) return 'confidence-high';
    if (confidence >= 0.5) return 'confidence-medium';
    return 'confidence-low';
  }

  /**
   * Échapper le HTML
   */
  escapeHTML(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }
}

// Export pour utilisation dans d'autres modules
if (typeof module !== 'undefined' && module.exports) {
  module.exports = DetailsPanel;
}
