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

  connectedCallback() {
    this.checkApiStatus();
    setInterval(() => this.checkApiStatus(), 30000); // Check every 30 seconds
  }

  async checkApiStatus() {
    try {
      // Get API key from localStorage
      const settings = JSON.parse(localStorage.getItem('janusSettings')) || {};
      const apiKey = settings.apiKey;
      
      if (!apiKey) {
        this.renderStatus('no-key');
        return;
      }

      // Test OpenRouter API
      const openrouterResponse = await fetch('https://openrouter.ai/api/v1/models', {
        headers: {
          'Authorization': `Bearer ${apiKey}`,
          'HTTP-Referer': window.location.href,
          'X-Title': 'Janus Scanner Pro'
        }
      });
      
      const openrouterStatus = openrouterResponse.ok;
      this.apiStatus = openrouterStatus;
      
      this.renderStatus(openrouterStatus ? 'online' : 'offline');
    } catch (error) {
      this.apiStatus = false;
      this.renderStatus('offline');
    }
  }

  renderStatus(status) {
    const statusConfig = {
      'online': { color: '#10b981', text: 'AI API Connected', pulse: true },
      'offline': { color: '#ef4444', text: 'AI API Offline', pulse: false },
      'no-key': { color: '#f59e0b', text: 'API Key Not Configured', pulse: false }
    };

    const config = statusConfig[status] || statusConfig['offline'];
    
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          margin: 1rem 0;
        }
        
        .api-status {
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        
        .status-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: ${config.color};
          ${config.pulse ? 'animation: pulse 2s infinite;' : ''}
        }
        
        .status-text {
          color: ${config.color};
          font-weight: 500;
        }
        
        @keyframes pulse {
          0% { opacity: 1; }
          50% { opacity: 0.5; }
          100% { opacity: 1; }
        }
        
        .settings-hint {
          margin-top: 0.5rem;
          font-size: 0.75rem;
          color: #9ca3af;
        }
      </style>
      
      <div class="api-status">
        <div class="status-dot"></div>
        <span class="status-text">${config.text}</span>
      </div>
      ${status === 'no-key' ? '<div class="settings-hint">Go to Settings to configure your OpenRouter API key</div>' : ''}
    `;
  }
}

customElements.define('api-status', ApiStatus);