class SubjectSelector extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: relative;
        }
        
        .selector-btn {
          background: linear-gradient(135deg, #6366f1, #8b5cf6);
          color: white;
          border: none;
          border-radius: 9999px;
          padding: 0.75rem 1.5rem;
          font-weight: 600;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 0.5rem;
          transition: all 0.3s ease;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        .selector-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        .dropdown {
          position: absolute;
          top: 100%;
          left: 0;
          width: 300px;
          background: white;
          border-radius: 12px;
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
          padding: 1rem;
          z-index: 50;
          display: none;
          margin-top: 0.5rem;
        }
        
        .dropdown.show {
          display: block;
          animation: fadeIn 0.2s ease-out;
        }
        
        .search-input {
          width: 100%;
          padding: 0.5rem;
          border: 1px solid #e5e7eb;
          border-radius: 6px;
          margin-bottom: 1rem;
        }
        
        .subject-list {
          max-height: 300px;
          overflow-y: auto;
        }
        
        .subject-item {
          padding: 0.5rem;
          border-radius: 6px;
          cursor: pointer;
          transition: background 0.2s;
        }
        
        .subject-item:hover {
          background: #f3f4f6;
        }
        
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
      </style>
      
      <button class="selector-btn" id="selectorBtn">
        <i data-feather="book"></i>
        Choose Subject
      </button>
      
      <div class="dropdown" id="dropdown">
        <input type="text" class="search-input" placeholder="Search subjects..." id="searchInput">
        <div class="subject-list" id="subjectList">
          <!-- Subjects will be loaded here -->
        </div>
      </div>
    `;

    const btn = this.shadowRoot.getElementById('selectorBtn');
    const dropdown = this.shadowRoot.getElementById('dropdown');
    const searchInput = this.shadowRoot.getElementById('searchInput');
    const subjectList = this.shadowRoot.getElementById('subjectList');

    // Toggle dropdown
    btn.addEventListener('click', () => {
      dropdown.classList.toggle('show');
      if (dropdown.classList.contains('show') && subjectList.innerHTML === '') {
        this.loadSubjects();
      }
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', (e) => {
      if (!this.shadowRoot.contains(e.target)) {
        dropdown.classList.remove('show');
      }
    });

    // Search functionality
    searchInput.addEventListener('input', () => {
      const searchTerm = searchInput.value.toLowerCase();
      const items = subjectList.querySelectorAll('.subject-item');
      
      items.forEach(item => {
        const text = item.textContent.toLowerCase();
        if (text.includes(searchTerm)) {
          item.style.display = 'block';
        } else {
          item.style.display = 'none';
        }
      });
    });

    // Initialize Feather icons
    if (window.feather) {
      window.feather.replace({ 'stroke-width': 2 });
    }
  }

  loadSubjects() {
    const subjectList = this.shadowRoot.getElementById('subjectList');
    
    // Common academic subjects
    const subjects = [
      { name: "Mathematics", level: "basic", path: "math.html?level=basic" },
      { name: "Mathematics", level: "intermediate", path: "math.html?level=intermediate" },
      { name: "Mathematics", level: "advanced", path: "math.html?level=advanced" },
      { name: "Physics", level: "basic", path: "science.html?subject=physics&level=basic" },
      { name: "Physics", level: "intermediate", path: "science.html?subject=physics&level=intermediate" },
      { name: "Chemistry", level: "basic", path: "science.html?subject=chemistry&level=basic" },
      { name: "Chemistry", level: "intermediate", path: "science.html?subject=chemistry&level=intermediate" },
      { name: "Biology", level: "basic", path: "science.html?subject=biology&level=basic" },
      { name: "Biology", level: "intermediate", path: "science.html?subject=biology&level=intermediate" },
      { name: "Computer Science", level: "basic", path: "tech.html?subject=cs&level=basic" },
      { name: "Computer Science", level: "intermediate", path: "tech.html?subject=cs&level=intermediate" },
      { name: "History", level: "basic", path: "history.html?level=basic" },
      { name: "History", level: "intermediate", path: "history.html?level=intermediate" },
      { name: "Geography", level: "basic", path: "geography.html?level=basic" },
      { name: "Art", level: "basic", path: "art.html?level=basic" },
      { name: "Music", level: "basic", path: "music.html?level=basic" },
      { name: "Literature", level: "basic", path: "literature.html?level=basic" },
      { name: "Philosophy", level: "basic", path: "philosophy.html?level=basic" },
      { name: "Economics", level: "basic", path: "economics.html?level=basic" },
      { name: "Psychology", level: "basic", path: "psychology.html?level=basic" },
      { name: "Spanish", level: "basic", path: "languages.html?lang=spanish&level=basic" },
      { name: "French", level: "basic", path: "languages.html?lang=french&level=basic" },
      { name: "German", level: "basic", path: "languages.html?lang=german&level=basic" },
      { name: "Chinese", level: "basic", path: "languages.html?lang=chinese&level=basic" }
    ];

    subjectList.innerHTML = subjects.map(subject => `
      <a href="${subject.path}" class="subject-item">
        ${subject.name} (${subject.level})
      </a>
    `).join('');

    // Initialize Feather icons again after loading content
    if (window.feather) {
      window.feather.replace({ 'stroke-width': 2 });
    }
  }
}

customElements.define('subject-selector', SubjectSelector);