class CustomApiDocs extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .api-docs {
          background: #1a1a1a;
          border: 1px solid #dc2626;
          border-radius: 0.5rem;
          padding: 1.5rem;
          margin: 1rem 0;
        }
        .api-section {
          margin-bottom: 2rem;
        }
        .api-title {
          font-size: 1.5rem;
          font-weight: bold;
          margin-bottom: 1rem;
          color: white;
        }
        .api-endpoint {
          background: #000000;
          padding: 1rem;
          border-radius: 0.375rem;
          margin-bottom: 1rem;
          border-left: 4px solid #dc2626;
        }
        .endpoint-method {
          display: inline-block;
          background: #dc2626;
          color: white;
          padding: 0.25rem 0.75rem;
          border-radius: 0.25rem;
          font-weight: bold;
          margin-right: 0.5rem;
        }
        .endpoint-url {
          color: #e5e5e5;
          font-family: monospace;
        }
        .api-description {
          color: #a3a3a3;
          margin: 0.5rem 0;
        }
        .api-example {
          background: #262626;
          padding: 1rem;
          border-radius: 0.375rem;
          font-family: monospace;
          color: #e5e5e5;
          margin: 0.5rem 0;
          font-size: 0.875rem;
        }
        .code-block {
          background: #000000;
          padding: 1rem;
          border-radius: 0.375rem;
          margin: 1rem 0;
        }
        .api-input {
          background: #000000;
          border: 1px solid #374151;
          padding: 0.5rem;
          border-radius: 0.25rem;
          color: #e5e5e5;
          font-family: monospace;
        }
        .api-response {
          background: #000000;
          padding: 1rem;
          border-radius: 0.375rem;
          margin: 1rem 0;
        }
        .response-key {
          color: #dc2626;
        }
        .response-value {
          color: #e5e5e5;
        }
      </style>
      <div class="api-docs">
        <div class="api-section">
          <h3 class="api-title">Hanzi Hunter API Documentation</h3>
          
          <div class="api-endpoint">
            <span class="endpoint-method">POST</span>
            <span class="endpoint-url">/api/analyze</h3>
          <p class="api-description">Analyze a Chinese word and get HSK level, usage, and meaning information.</p>
            
            <div class="api-example">
              <strong>Request:</strong><br>
              { "word": "冒险" }
            </div>
            
            <div class="api-example">
              <strong>Response:</strong><br>
              {<br>
              &nbsp;&nbsp;"word": "冒险",<br>
              &nbsp;&nbsp;"level": "HSK 4",<br>
              &nbsp;&nbsp;"style": "Neutral",<br>
              &nbsp;&nbsp;"usage": "Common",<br>
              &nbsp;&nbsp;"meaning": "adventure, take risks",<br>
              &nbsp;&nbsp;"pinyin": "mào xiǎn"<br>
              }
            </div>
          </div>
          
          <div class="api-endpoint">
            <span class="endpoint-method">GET</span>
            <span class="endpoint-url">/api/hsk/:level</h3>
          <p class="api-description">Get all words from a specific HSK level.</p>
            
            <div class="api-example">
              <strong>Example:</strong><br>
              GET /api/hsk/1
            </div>
            
            <div class="api-response">
              <strong>Response Format:</strong><br>
              {<br>
              &nbsp;&nbsp;"level": 1,<br>
              &nbsp;&nbsp;"words": ["你好", "谢谢", "学习"]<br>
              }
            </div>
          </div>
          
          <div class="api-endpoint">
            <span class="endpoint-method">POST</span>
            <span class="endpoint-url">/api/batch-analyze</h3>
          <p class="api-description">Analyze multiple Chinese words at once.</p>
            
            <div class="api-example">
              <strong>Request:</strong><br>
              { "words": ["冒险", "学习", "你好"] }
            </div>
        </div>
      </div>
    `;
  }
}

customElements.define('custom-api-docs', CustomApiDocs);