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 – ESPACE CODAGE INDÉPENDANT</div>
<div class="code-area">
        <div class="code-line">▸ // Connexion à DeepSite</div>
        <div class="code-line">const deepSite = new DeepSiteAPI({</div>
        <div class="code-line">  user: "vous",</div>
        <div class="code-line">  collaboration: "ESPACE CODAGE",</div>
        <div class="code-line">  ia: "ROSALINDA"</div>
        <div class="code-line">});</div>
        <div class="code-line"></div>
        <div class="code-line">▸ // Génération vidéo avec ROSALINDA</div>
        <div class="code-line">async function genererAvecRosalinda() {</div>
        <div class="code-line">  const video = await rosalinda.genererVideo({</div>
        <div class="code-line">    format: "mp4",</div>
        <div class="code-line">    durée: "60s",</div>
        <div class="code-line">    style: "professionnel",</div>
        <div class="code-line">    musique: true,</div>
        <div class="code-line">    sousTitres: "français"</div>
        <div class="code-line">  });</div>
        <div class="code-line">  return video;</div>
        <div class="code-line">}</div>
<div class="code-line"></div>
        <div class="code-line">▸ // Fonction de génération vidéo</div>
        <div class="code-line">function genererVideo(contenu, parametres) {</div>
        <div class="code-line">  const ffmpeg = new FFmpeg();</div>
        <div class="code-line">  ffmpeg.charger(contenu);</div>
        <div class="code-line">  ffmpeg.appliquer(parametres);</div>
        <div class="code-line">  return ffmpeg.exporter();</div>
        <div class="code-line">}</div>
        <div class="code-line"></div>
        <div class="code-line">▸ // Interface utilisateur</div>
        <div class="code-line">class InterfaceEspaceCodage {</div>
        <div class="code-line">  constructor() {</div>
        <div class="code-line">    this.colonnes = 3;</div>
        <div class="code-line">    this.microphone = true;</div>
        <div class="code-line">    this.trombone = true;</div>
        <div class="code-line">    this.ia = "Rosalinda";</div>
        <div class="code-line">  }</div>
        <div class="code-line">}</div>
        <div class="code-line"></div>
        <div class="code-line">... [les codes continuent de défiler] ...</div>
      </div>
      <div class="status">✅ FIN DE GÉNÉRATION - ROSALINDA A TERMINÉ</div>
      <div class="final-result">
        <div class="result-title">📦 <strong>RÉSULTAT FINAL PRÊT :</strong></div>
        <div>• Vidéo générée : marketing_espace_codage.mp4</div>
        <div>• Images créées : 12 thumbnails optimisés</div>
        <div>• Thème appliqué : Professionnel - Bleu/Nuit</div>
        <div>• Code complet exporté</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);