class CustomFileUpload extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .upload-container {
          border: 2px dashed #cbd5e0;
          border-radius: 0.5rem;
          padding: 2rem;
          text-align: center;
          transition: all 0.2s;
          cursor: pointer;
        }
        .upload-container:hover {
          border-color: #4299e1;
          background-color: #f8fafc;
        }
        .upload-icon {
          margin-bottom: 1rem;
          color: #718096;
        }
        .upload-text {
          color: #4a5568;
          margin-bottom: 0.5rem;
        }
        .upload-hint {
          color: #a0aec0;
          font-size: 0.875rem;
        }
        input[type="file"] {
          display: none;
        }
        .file-name {
          margin-top: 1rem;
          color: #2d3748;
          font-weight: 500;
        }
      </style>
      <div>
        <label for="srt-upload">
          <div class="upload-container" id="drop-zone">
            <i data-feather="upload-cloud" class="upload-icon w-12 h-12 mx-auto"></i>
            <div class="upload-text">Click to upload or drag and drop</div>
            <div class="upload-hint">SRT files only</div>
            <div class="file-name" id="file-name"></div>
          </div>
          <input type="file" id="srt-upload" accept=".srt" />
        </label>
      </div>
    `;

    const input = this.shadowRoot.getElementById('srt-upload');
    const dropZone = this.shadowRoot.getElementById('drop-zone');
    const fileName = this.shadowRoot.getElementById('file-name');

    // Handle click
    dropZone.addEventListener('click', () => {
      input.click();
    });

    // Handle file selection
    input.addEventListener('change', (e) => {
      if (e.target.files.length) {
        const file = e.target.files[0];
        fileName.textContent = file.name;
        this.dispatchEvent(new CustomEvent('file-uploaded', {
          detail: { file },
          bubbles: true,
          composed: true
        }));
      }
    });

    // Handle drag and drop
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
      dropZone.addEventListener(eventName, preventDefaults, false);
    });

    function preventDefaults(e) {
      e.preventDefault();
      e.stopPropagation();
    }

    ['dragenter', 'dragover'].forEach(eventName => {
      dropZone.addEventListener(eventName, highlight, false);
    });

    ['dragleave', 'drop'].forEach(eventName => {
      dropZone.addEventListener(eventName, unhighlight, false);
    });

    function highlight() {
      dropZone.classList.add('border-blue-500', 'bg-blue-50');
    }

    function unhighlight() {
      dropZone.classList.remove('border-blue-500', 'bg-blue-50');
    }

    dropZone.addEventListener('drop', handleDrop, false);

    function handleDrop(e) {
      const dt = e.dataTransfer;
      const files = dt.files;

      if (files.length) {
        const file = files[0];
        if (file.name.endsWith('.srt')) {
          fileName.textContent = file.name;
          input.files = files;
          this.dispatchEvent(new CustomEvent('file-uploaded', {
            detail: { file },
            bubbles: true,
            composed: true
          }));
        } else {
          fileName.textContent = 'Please select a .srt file';
        }
      }
    }
  }
}

customElements.define('custom-file-upload', CustomFileUpload);