class DarkModeToggle extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .toggle-container {
          display: flex;
          align-items: center;
        }
        .toggle-switch {
          position: relative;
          display: inline-block;
          width: 60px;
          height: 30px;
          margin: 0 10px;
        }
        .toggle-switch input {
          opacity: 0;
          width: 0;
          height: 0;
        }
        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #4a5568;
          transition: .4s;
          border-radius: 34px;
        }
        .slider:before {
          position: absolute;
          content: "";
          height: 22px;
          width: 22px;
          left: 4px;
          bottom: 4px;
          background-color: white;
          transition: .4s;
          border-radius: 50%;
        }
        input:checked + .slider {
          background-color: #8b5cf6;
        }
        input:checked + .slider:before {
          transform: translateX(30px);
        }
        .icon {
          font-size: 1.2rem;
        }
      </style>
      <div class="toggle-container">
        <span class="icon">🌞</span>
        <label class="toggle-switch">
          <input type="checkbox">
          <span class="slider"></span>
        </label>
        <span class="icon">🌜</span>
      </div>
    `;

    const toggle = this.shadowRoot.querySelector('input');
    toggle.addEventListener('change', this.toggleDarkMode.bind(this));

    // Check for saved preference or system preference
    if (localStorage.getItem('darkMode') === 'true' || 
        (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      toggle.checked = true;
      document.documentElement.classList.add('dark');
    }
  }

  toggleDarkMode() {
    const isDark = this.shadowRoot.querySelector('input').checked;
    document.documentElement.classList.toggle('dark', isDark);
    localStorage.setItem('darkMode', isDark);
  }
}

customElements.define('darkmode-toggle', DarkModeToggle);