class ThemeToggle extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .toggle-container {
          position: fixed;
          top: 1rem;
          right: 1rem;
          z-index: 1000;
        }
        .toggle-btn {
          background: var(--tw-gradient-to);
          border: none;
          border-radius: 50%;
          width: 2.5rem;
          height: 2.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .toggle-btn:hover {
          transform: scale(1.1);
        }
        .toggle-btn:focus {
          outline: none;
          ring: 2px solid rgba(59, 130, 246, 0.5);
        }
        .icon {
          width: 1.25rem;
          height: 1.25rem;
          color: white;
        }
      </style>
      <div class="toggle-container">
        <button class="toggle-btn bg-gray-800 dark:bg-yellow-400">
          <span class="icon">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path id="sun-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
              <path id="moon-icon" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" style="display: none;" />
            </svg>
          </span>
        </button>
      </div>
    `;

    this.button = this.shadowRoot.querySelector('.toggle-btn');
    this.sunIcon = this.shadowRoot.querySelector('#sun-icon');
    this.moonIcon = this.shadowRoot.querySelector('#moon-icon');

    this.button.addEventListener('click', () => this.toggleTheme());
    this.initTheme();
  }

  initTheme() {
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.documentElement.setAttribute('data-theme', savedTheme);
    this.updateUI(savedTheme);
  }

  toggleTheme() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
    this.updateUI(newTheme);
  }

  updateUI(theme) {
    if (theme === 'dark') {
      this.sunIcon.style.display = 'none';
      this.moonIcon.style.display = 'block';
    } else {
      this.sunIcon.style.display = 'block';
      this.moonIcon.style.display = 'none';
    }
  }
}

customElements.define('custom-theme-toggle', ThemeToggle);