class CustomCodePreview extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 100%;
          height: 100vh;
          background: white;
          padding: 1.5rem;
          overflow-y: auto;
        }
        .tabs {
          display: flex;
          border-bottom: 1px solid #e2e8f0;
          margin-bottom: 1.5rem;
        }
        .tab {
          padding: 0.5rem 1rem;
          cursor: pointer;
          color: #64748b;
          border-bottom: 2px solid transparent;
        }
        .tab.active {
          color: #1e40af;
          border-bottom-color: #1e40af;
        }
        .code-area {
          background: #f8fafc;
          border: 1px solid #e2e8f0;
          border-radius: 0.5rem;
          padding: 1rem;
          font-family: monospace;
          white-space: pre;
          overflow-x: auto;
          margin-bottom: 1rem;
        }
        .final-result {
          margin-top: 2rem;
          padding-top: 1rem;
          border-top: 1px solid #e2e8f0;
        }
        .result-title {
          font-weight: 600;
          margin-bottom: 1rem;
          color: #1e293b;
        }
        .export-options {
          display: flex;
          gap: 0.5rem;
          margin-top: 1rem;
        }
        .export-button {
          background: #e0f2fe;
          color: #0369a1;
          border: none;
          border-radius: 0.5rem;
          padding: 0.5rem 1rem;
          cursor: pointer;
          font-size: 0.875rem;
        }
      </style>
      <div class="tabs">
        <div class="tab active">[ APERÇU ]</div>
        <div class="tab">[ CODES ]</div>
        <div class="tab">[ PARAMÈTRES ]</div>
        <div class="tab">[ PUBLIER ]</div>
      </div>
      <div class="code-scroll-title">▼ DÉFILEMENT DES CODES EN TEMPS RÉEL ▼</div>
      <div class="code-area">
        <div class="code-line">▸ while (code_generation) {</div>
        <div class="code-line">    display_new_code_line();</div>
        <div class="code-line">    update_preview();</div>
        <div class="code-line">  }</div>
        <div class="code-line">▸ function generateVideo() {</div>
        <div class="code-line">    const ffmpeg = new FFmpeg();</div>
        <div class="code-line">    ffmpeg.setInput(mediaFiles);</div>
        <div class="code-line">    ffmpeg.render();</div>
        <div class="code-line">  }</div>
        <div class="code-line">▸ class RosalindaIA {</div>
        <div class="code-line">    constructor() {</div>
        <div class="code-line">      this.name = "Rosalinda";</div>
        <div class="code-line">      this.capabilities = ["vidéos", "images", "thèmes"];</div>
        <div class="code-line">    }</div>
        <div class="code-line">  }</div>
        <div class="code-line">... [les codes continuent de défiler ici] ...</div>
      </div>
      <div class="status">✅ FIN DE GÉNÉRATION</div>
      <div class="final-result">
        <div class="result-title">📊 <strong>RÉSULTAT FINAL - ROSALINDA IA</strong></div>
        <div>• Code complet généré</div>
        <div>• Aperçu fonctionnel du module</div>
        <div>• Paramètres vidéo appliqués</div>
        <div>• Thème personnalisé intégré</div>
        <div class="export-options">
          <button class="export-button">📥 Télécharger</button>
          <button class="export-button">📋 Copier</button>
          <button class="export-button">↗ Partager</button>
        </div>
        <div class="features">
          <div class="features-title">Fonctionnalités clés de ROSALINDA :</div>
          <div>• Génération vidéo complète avec FFmpeg</div>
          <div>• Création d'images et thumbnails optimisées</div>
          <div>• Design de thèmes professionnels personnalisables</div>
          <div>• Interface conversationnelle intuitive</div>
          <div>• Export multi-format (MP4, GIF, WebM)</div>
        </div>
        <div class="integration-note">
          ROSALINDA est maintenant intégrée à Espace Codage et prête à générer vos vidéos, images et thèmes avec une interface en 3 colonnes parfaitement organisée.
        </div>
      </div>
`;
  }
}
customElements.define('custom-code-preview', CustomCodePreview);