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

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        .importer-container {
          padding: 2rem;
          background: #f8fafc;
          border-radius: 0.5rem;
          box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .dropzone {
          border: 2px dashed #cbd5e1;
          border-radius: 0.5rem;
          padding: 3rem;
          text-align: center;
          cursor: pointer;
          transition: all 0.2s;
        }
        .dropzone:hover {
          border-color: #6366f1;
        }
        .btn-primary {
          background: #6366f1;
          color: white;
          padding: 0.75rem 1.5rem;
          border-radius: 0.5rem;
          border: none;
          cursor: pointer;
          font-weight: 500;
          transition: all 0.2s;
        }
        .btn-primary:hover {
          background: #4f46e5;
        }
      </style>
      <div class="importer-container">
        <div class="dropzone" id="dropzone">
          <i data-feather="upload-cloud" class="w-12 h-12 mb-4 mx-auto text-gray-400"></i>
          <h3 class="text-lg font-medium text-gray-900 mb-2">Drop Figma file here</h3>
          <p class="text-gray-500 mb-4">or click to browse files</p>
          <button class="btn-primary">Import Design</button>
        </div>
      </div>
    `;
    this.setupDropzone();
  }

  setupDropzone() {
    const dropzone = this.shadowRoot.getElementById('dropzone');
    
    dropzone.addEventListener('click', () => {
      this.importFromFigma();
    });

    dropzone.addEventListener('dragover', (e) => {
      e.preventDefault();
      dropzone.style.borderColor = '#6366f1';
      dropzone.style.backgroundColor = '#eef2ff';
    });

    dropzone.addEventListener('dragleave', () => {
      dropzone.style.borderColor = '#cbd5e1';
      dropzone.style.backgroundColor = 'transparent';
    });

    dropzone.addEventListener('drop', (e) => {
      e.preventDefault();
      dropzone.style.borderColor = '#cbd5e1';
      dropzone.style.backgroundColor = 'transparent';
      
      const file = e.dataTransfer.files[0];
      if (file) {
        this.processFigmaFile(file);
      }
    });
  }

  importFromFigma() {
    // TODO: Implement Figma API integration
    console.log('Connecting to Figma API...');
  }

  processFigmaFile(file) {
    // TODO: Implement file processing
    console.log('Processing Figma file:', file.name);
  }
}

customElements.define('figma-importer', FigmaImporter);