components/ai-model-card.js

class AIModelCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    const name = this.getAttribute('name') || 'Modèle IA';
    const type = this.getAttribute('type') || 'text';
    const status = this.getAttribute('status') || 'active';
    const lastUsed = this.getAttribute('last-used') || 'N/A';

    this.shadowRoot.innerHTML = `
      <style>
        .card {
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 0.75rem;
          padding: 1rem;
          transition: all 0.2s ease;
        }
        .card:hover {
          border-color: rgba(99, 102, 241, 0.5);
        }
        .header {
          display: flex;
          align-items: center;
          margin-bottom: 0.75rem;
        }
        .icon {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 0.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 0.75rem;
        }
        .text-icon {
          background: rgba(99, 102, 241, 0.1);
          color: rgba(99, 102, 241, 0.8);
        }
        .image-icon {
          background: rgba(16, 185, 129, 0.1);
          color: rgba(16, 185, 129, 0.8);
        }
        .video-icon {
          background: rgba(236, 72, 153, 0.1);
          color: rgba(236, 72, 153, 0.8);
        }
        .title {
          font-weight: 600;
          flex-grow: 1;
        }
        .status {
          font-size: 0.75rem;
          padding: 0.25rem 0.5rem;
          border-radius: 9999px;
        }
        .active {
          background: rgba(16, 185, 129, 0.1);
          color: rgba(16, 185, 129, 0.8);
        }
        .inactive {
          background: rgba(107, 114, 128, 0.1);
          color: rgba(107, 114, 128, 0.8);
        }
        .training {
          background: rgba(234, 179, 8, 0.1);
          color: rgba(234, 179, 8, 0.8);
        }
        .details {
          font-size: 0.875rem;
          color: rgba(156, 163, 175, 1);
          margin-top: 0.5rem;
        }
        .actions {
          display: flex;
          gap: 0.5rem;
          margin-top: 1rem;
        }
        button {
          flex: 1;
          padding: 0.5rem;
          border-radius: 0.5rem;
          font-size: 0.75rem;
          border: none;
          cursor: pointer;
          transition: all 0.2s ease;
        }
        .primary {
          background: rgba(99, 102, 241, 0.1);
          color: rgba(99, 102, 241, 0.8);
        }
        .primary:hover {
          background: rgba(99, 102, 241, 0.2);
        }
        .secondary {
          background: rgba(255, 255, 255, 0.05);
          color: rgba(255, 255, 255, 0.8);
        }
        .secondary:hover {
          background: rgba(255, 255, 255, 0.1);
        }
      </style>
      <div class="card">
        <div class="header">
          <div class="icon ${type}-icon">
            <i data-feather="${this.getIcon(type)}"></i>
          </div>
          <div class="title">${name}</div>
          <div class="status ${status}">${this.getStatusText(status)}</div>
        </div>
        <div class="details">
          <div>Type: ${this.getTypeText(type)}</div>
          <div>Dernière utilisation: ${lastUsed}</div>
        </div>
        <div class="actions">
          <button class="primary">Utiliser</button>
          <button class="secondary">Configurer</button>
        </div>
      </div>
    `;
    feather.replace();
  }

  getIcon(type) {
    switch(type) {
      case 'text': return 'file-text';
      case 'image': return 'image';
      case 'video': return 'video';
      default: return 'cpu';
    }
  }

  getTypeText(type) {
    switch(type) {
      case 'text': return 'Texte';
      case 'image': return 'Image';
      case 'video': return 'Vidéo';
      default: return 'Multimédia';
    }
  }

  getStatusText(status) {
    switch(status) {
      case 'active': return 'Actif';
      case 'inactive': return 'Inactif';
      case 'training': return 'Entraînement';
      default: return status;
    }
  }
}

customElements.define('ai-model-card', AIModelCard);