class ModuleCard extends HTMLElement {
  static get observedAttributes() {
    return ['title', 'icon', 'description', 'status', 'action'];
  }

  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.render();
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      this.render();
    }
  }

  render() {
    const title = this.getAttribute('title') || 'Module';
    const icon = this.getAttribute('icon') || 'box';
    const description = this.getAttribute('description') || 'No description provided';
    const status = this.getAttribute('status') || 'inactive';
    const action = this.getAttribute('action') || 'configure';

    const statusColors = {
      active: 'bg-green-500',
      inactive: 'bg-gray-500',
      ready: 'bg-blue-500',
      error: 'bg-red-500'
    };

    const actionTexts = {
      configure: 'Configure',
      launch: 'Launch',
      monitor: 'Monitor',
      execute: 'Execute'
    };

    this.shadowRoot.innerHTML = `
      <style>
        .card {
          background: rgba(15, 10, 31, 0.6);
          border: 1px solid rgba(110, 64, 201, 0.2);
          border-radius: 0.5rem;
          padding: 1.5rem;
          transition: all 0.3s;
          height: 100%;
          display: flex;
          flex-direction: column;
        }
        .card:hover {
          border-color: rgba(110, 64, 201, 0.5);
          transform: translateY(-2px);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        .card-header {
          display: flex;
          align-items: center;
          gap: 1rem;
          margin-bottom: 1rem;
        }
        .card-icon {
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 50%;
          background: rgba(110, 64, 201, 0.2);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #6e40c9;
        }
        .card-title {
          font-size: 1.1rem;
          font-weight: 600;
          margin: 0;
        }
        .card-description {
          color: rgba(255, 255, 255, 0.6);
          font-size: 0.9rem;
          margin-bottom: 1.5rem;
          flex-grow: 1;
        }
        .card-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        .status {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.8rem;
        }
        .status-dot {
          width: 0.6rem;
          height: 0.6rem;
          border-radius: 50%;
        }
        .action-btn {
          padding: 0.4rem 1rem;
          border-radius: 0.25rem;
          font-size: 0.8rem;
          background: rgba(110, 64, 201, 0.2);
          color: #6e40c9;
          border: none;
          cursor: pointer;
          transition: all 0.2s;
        }
        .action-btn:hover {
          background: rgba(110, 64, 201, 0.4);
        }
      </style>
      <div class="card">
        <div class="card-header">
          <div class="card-icon">
            <i data-feather="${icon}"></i>
          </div>
          <h3 class="card-title">${title}</h3>
        </div>
        <p class="card-description">${description}</p>
        <div class="card-footer">
          <div class="status">
            <div class="status-dot ${statusColors[status]}"></div>
            <span>${status.charAt(0).toUpperCase() + status.slice(1)}</span>
          </div>
          <button class="action-btn">${actionTexts[action]}</button>
        </div>
      </div>
    `;
    feather.replace();
  }
}
customElements.define('module-card', ModuleCard);