class AIAgent extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.state = {
      userQuery: '',
      explanation: '',
      loading: false
    };
  }

  connectedCallback() {
    this.render();
    this.setupEventListeners();
  }

  async generateExplanation(query) {
    // Simulate API call
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(`Voici une explication détaillée pour votre demande : "${query}". 
        L'agent IA analyse votre requête et génère un contenu complet adapté à votre projet.`);
      }, 1500);
    });
  }

  async handleSubmit(e) {
    e.preventDefault();
    if (!this.state.userQuery.trim()) return;

    this.setState({ loading: true });
    const result = await this.generateExplanation(this.state.userQuery);
    this.setState({ 
      explanation: result,
      loading: false 
    });
  }

  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.render();
  }

  setupEventListeners() {
    const form = this.shadowRoot.querySelector('form');
    const textarea = this.shadowRoot.querySelector('textarea');
    
    textarea.addEventListener('input', (e) => {
      this.setState({ userQuery: e.target.value });
    });
    
    form.addEventListener('submit', (e) => this.handleSubmit(e));
  }

  render() {
    const welcomeMessage = "Bonjour, je suis votre assistante Agent IA, comment puis-je vous aider avec votre projet aujourd'hui ?";
    
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          width: 100%;
        }
        .container {
          display: flex;
          gap: 20px;
          padding: 20px;
        }
        .column {
          flex: 1;
          background: var(--bg-color, #1e293b);
          border-radius: 8px;
          padding: 16px;
          color: var(--text-color, #f8fafc);
        }
        textarea {
          width: 100%;
          min-height: 120px;
          padding: 12px;
          border-radius: 6px;
          border: 1px solid #334155;
          background: #0f172a;
          color: #f8fafc;
          resize: vertical;
        }
        button {
          background: #3b82f6;
          color: white;
          border: none;
          padding: 8px 16px;
          border-radius: 6px;
          cursor: pointer;
          transition: background 0.2s;
        }
        button:hover {
          background: #2563eb;
        }
        button:disabled {
          background: #64748b;
          cursor: not-allowed;
        }
        h3 {
          margin-top: 0;
          color: #94a3b8;
        }
      </style>
      
      <div class="container">
        <!-- First Column: User Input -->
        <div class="column">
          <h3>Votre demande</h3>
          <form>
            <textarea
              placeholder="Entrez votre demande ici..."
              value="${this.state.userQuery}"
            ></textarea>
            <button type="submit" ${this.state.loading ? 'disabled' : ''}>
              ${this.state.loading ? 'Génération en cours...' : 'Envoyer'}
            </button>
          </form>
        </div>

        <!-- Second Column: AI Response -->
        <div class="column">
          <h3>Agent IA - Assistance</h3>
          <p>${this.state.explanation || welcomeMessage}</p>
        </div>

        <!-- Third Column: Media Preview -->
        <div class="column">
          <h3>Aperçu média</h3>
          <p>Échec de chargement de l'aperçu. La génération automatique de médias sera intégrée ici.</p>
        </div>
      </div>
    `;
  }
}

customElements.define('ai-agent', AIAgent);