class CodeVisualizer extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.code = '';
    this.canvas = null;
    this.ctx = null;
  }

  connectedCallback() {
    this.render();
  }

  setCode(code) {
    this.code = code;
    this.render();
    this.visualizeCode();
  }

  visualizeCode() {
    if (!this.code) return;

    try {
      // Create a temporary style element to apply the CSS
      const style = document.createElement('style');
      style.textContent = this.code;
      document.head.appendChild(style);

      // Create a preview element to visualize the styles
      const preview = document.createElement('div');
      preview.style.width = '100%';
      preview.style.height = '100%';
      preview.style.position = 'relative';
      preview.innerHTML = `
        <div class="preview-element" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
          <p>Prévisualisation du thème</p>
        </div>
      `;

      this.shadowRoot.getElementById('preview-container').innerHTML = '';
      this.shadowRoot.getElementById('preview-container').appendChild(preview);

      // Remove the temporary style after visualization
      setTimeout(() => document.head.removeChild(style), 100);
    } catch (e) {
      console.error('Error visualizing code:', e);
    }
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 100%;
          height: 100%;
          background: var(--bg-color, #1e293b);
          color: var(--text-color, #f8fafc);
          padding: 1rem;
          box-sizing: border-box;
        }
        h3 {
          margin: 0 0 1rem 0;
          font-size: 1.125rem;
          font-weight: 600;
        }
        #preview-container {
          width: 100%;
          height: calc(100% - 2rem);
          background: white;
          border-radius: 0.5rem;
          overflow: hidden;
          position: relative;
        }
        .empty-state {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #64748b;
          font-size: 0.875rem;
        }
      </style>
      <h3>Visualisation</h3>
      <div id="preview-container">
        ${this.code ? '' : `
          <div class="empty-state">
            Générer du code pour voir la visualisation ici
          </div>
        `}
      </div>
    `;
  }
}

customElements.define('code-visualizer', CodeVisualizer);