// src/pages/process-element/process-element.ts

import { interpolate } from '../../utils/html.utils';
import Services from '../../services/service';
import { Process, ProcessState } from 'pkg/sdk_client';
// 1. Plus besoin de 'getCorrectDOM'

/**
 * Fonction d'initialisation, appelée par process-component.ts
 * Reçoit le shadowRoot et les IDs.
 */
export async function initProcessElement(container: ShadowRoot, processId: string, stateId: string) {
  console.log(`[process-element.ts] 3. init() appelé pour ${processId}_${stateId}`);
  
  const services = await Services.getInstance();

  // 2. Récupérer les éléments du DOM *dans* le shadowRoot (container)
  const titleH1 = container.querySelector('h1');
  const processContainer = container.querySelector('.process-container');

  if (!titleH1 || !processContainer) {
      console.error("[process-element.ts] 💥 Le HTML de base (h1 ou .process-container) est introuvable !");
      return;
  }

  // 3. Récupérer les données
  const process = await services.getProcess(processId);
  if (!process) {
      console.error(`[process-element.ts] 💥 Processus ${processId} non trouvé !`);
      titleH1.innerText = "Erreur";
      processContainer.innerHTML = `<p>Le processus ${processId} n'a pas pu être chargé.</p>`;
      return;
  }
  
  const state = services.getStateFromId(process, stateId);
  if (!state) {
      console.error(`[process-element.ts] 💥 État ${stateId} non trouvé dans le processus ${processId} !`);
      titleH1.innerText = "Erreur";
      processContainer.innerHTML = `<p>L'état ${stateId} n'a pas pu être chargé.</p>`;
      return;
  }

  console.log("[process-element.ts] ✅ Processus et État chargés.");

  // 4. Mettre à jour le titre
  const processName = services.getProcessName(process) || "Processus";
  titleH1.innerHTML = interpolate(titleH1.innerHTML, { processTitle: processName });

  // 5. Logique de rendu de l'élément (À COMPLÉTER PAR TES SOINS)
  // C'est là que tu dois construire le HTML pour cet état spécifique
  // Par exemple, déchiffrer les attributs et les afficher.
  processContainer.innerHTML = `
      <div class="card" style="margin: 1rem; padding: 1rem;">
          <h3>État: ${stateId.substring(0, 10)}...</h3>
          <p>Commit: ${state.commited_in}</p>
          <div id="attributes-list">
            <p><em>Chargement des attributs...</em></p>
          </div>
      </div>
  `;

  // 6. Tenter de déchiffrer les données de cet état
  await decryptAndDisplayAttributes(services, container, processId, state);
}

/**
 * Helper (exemple) pour déchiffrer et afficher les données dans le conteneur
 */
async function decryptAndDisplayAttributes(services: Services, container: ShadowRoot, processId: string, state: ProcessState) {
    const attributesList = container.querySelector('#attributes-list');
    if (!attributesList) return;

    console.log(`[process-element.ts] 🔐 Déchiffrement des attributs pour l'état ${state.state_id}...`);
    attributesList.innerHTML = ''; // Vide le message "Chargement..."
    let hasPrivateData = false;
    
    // Affiche les données publiques
    if (state.public_data) {
        for (const [key, value] of Object.entries(state.public_data)) {
            const el = document.createElement('div');
            el.className = 'attribute-pair public';
            el.innerHTML = `<strong>${key} (public):</strong> ${JSON.stringify(services.decodeValue(value))}`;
            attributesList.appendChild(el);
        }
    }

    // Affiche les données privées
    for (const attribute of Object.keys(state.pcd_commitment)) {
        if (attribute === 'roles' || (state.public_data && state.public_data[attribute])) {
            continue; // Skip les données publiques (déjà fait) et les rôles
        }
        
        const decryptedValue = await services.decryptAttribute(processId, state, attribute);
        
        const el = document.createElement('div');
        el.className = 'attribute-pair private';
        
        if (decryptedValue) {
            hasPrivateData = true;
            el.innerHTML = `<strong>${attribute} (privé):</strong> ${JSON.stringify(decryptedValue)}`;
        } else {
            el.innerHTML = `<strong>${attribute} (privé):</strong> <span style="color: red;">[Déchiffrement impossible / Clé manquante]</span>`;
        }
        attributesList.appendChild(el);
    }
    
    if (!hasPrivateData && !(state.public_data && Object.keys(state.public_data).length > 0)) {
        console.log("[process-element.ts] ℹ️ Aucun attribut (public ou privé) trouvé pour cet état.");
        attributesList.innerHTML = '<p>Cet état ne contient aucun attribut visible.</p>';
    }
}