class UploadButton extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .upload-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          padding: 0.75rem 1.5rem;
          background-color: #6366f1;
          color: white;
          border-radius: 0.5rem;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.2s;
          border: none;
          outline: none;
        }
        .dark .upload-btn {
          background-color: #8b5cf6;
        }
        .upload-btn:hover {
          background-color: #4f46e5;
          transform: translateY(-1px);
        }
        .dark .upload-btn:hover {
          background-color: #7c3aed;
        }
        .upload-btn:active {
          transform: translateY(0);
        }
        .upload-icon {
          margin-right: 0.5rem;
        }
        input[type="file"] {
          display: none;
        }
      </style>
      <button class="upload-btn">
        <i data-feather="upload" class="upload-icon"></i>
        <span><slot>Upload Document</slot></span>
        <input type="file" accept=".pdf,.jpg,.jpeg,.png" />
      </button>
    `;

    const button = this.shadowRoot.querySelector('.upload-btn');
    const fileInput = this.shadowRoot.querySelector('input[type="file"]');
    
    button.addEventListener('click', () => fileInput.click());
    fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
  }

  handleFileSelect(event) {
    const file = event.target.files[0];
    if (file) {
      this.dispatchEvent(new CustomEvent('file-uploaded', {
        detail: { file },
        bubbles: true,
        composed: true
      }));
    }
  }
}

customElements.define('upload-button', UploadButton);