class CustomProfileEditor extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .editor-container {
          background: linear-gradient(135deg, #3b5998 0%, #2c3e50 100%);
          padding: 20px;
          border-radius: 10px;
          color: #00ff00;
          margin: 20px 0;
        }
.editor-tabs {
          display: flex;
          margin-bottom: 15px;
        }
        .tab {
          padding: 10px 20px;
          background: #3b5998;
          cursor: pointer;
          margin-right: 5px;
          border-radius: 5px 5px 0 0;
        }
        .tab.active {
          background: #4a6ea9;
        }
        .editor-content {
          background: rgba(0,0,0,0.5);
          padding: 20px;
          border-radius: 0 5px 5px 5px;
        }
        .form-group {
          margin-bottom: 15px;
        }
        label {
          display: block;
          margin-bottom: 5px;
        }
        input, textarea, select {
          width: 100%;
          padding: 8px;
          border-radius: 4px;
          border: 1px solid #ccc;
          background: rgba(255,255,255,0.9);
        }
        .color-picker {
          display: flex;
          gap: 10px;
          margin-top: 10px;
        }
        .color-option {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          cursor: pointer;
        }
        .save-btn {
          background: #3b5998;
          color: white;
          border: none;
          padding: 10px 20px;
          border-radius: 5px;
          cursor: pointer;
        }
        .save-btn:hover {
          background: #4a6ea9;
        }
      </style>
      <div class="editor-container">
        <div class="editor-tabs">
          <div class="tab active" data-tab="profile">Profile</div>
          <div class="tab" data-tab="background">Background</div>
          <div class="tab" data-tab="colors">Colors</div>
        </div>
        <div class="editor-content">
          <div class="tab-content" id="profile-tab">
            <div class="form-group">
              <label for="profile-name">Display Name</label>
              <input type="text" id="profile-name" value="John Doe">
            </div>
            <div class="form-group">
              <label for="profile-headline">Headline</label>
              <input type="text" id="profile-headline" value="MySpace Enthusiast">
            </div>
            <div class="form-group">
              <label for="profile-bio">About Me</label>
              <textarea id="profile-bio" rows="5">Welcome to my MySpace profile!</textarea>
            </div>
          </div>
          <div class="tab-content" id="background-tab" style="display:none;">
            <div class="form-group">
              <label>Background Image</label>
              <select id="background-select">
                <option value="none">No Background</option>
                <option value="space">Space Theme</option>
                <option value="hearts">Hearts</option>
                <option value="stars">Stars</option>
                <option value="custom">Custom URL</option>
              </select>
            </div>
            <div class="form-group" id="custom-bg-group" style="display:none;">
              <label for="custom-bg-url">Custom Background URL</label>
              <input type="text" id="custom-bg-url" placeholder="https://example.com/image.jpg">
            </div>
          </div>
          <div class="tab-content" id="colors-tab" style="display:none;">
            <div class="form-group">
              <label>Text Color</label>
              <div class="color-picker">
                <div class="color-option" style="background:white;" data-color="white"></div>
                <div class="color-option" style="background:black;" data-color="black"></div>
                <div class="color-option" style="background:#ff0000;" data-color="#ff0000"></div>
                <div class="color-option" style="background:#00ff00;" data-color="#00ff00"></div>
                <div class="color-option" style="background:#0000ff;" data-color="#0000ff"></div>
              </div>
            </div>
            <div class="form-group">
              <label>Link Color</label>
              <div class="color-picker">
                <div class="color-option" style="background:#3b5998;" data-color="#3b5998"></div>
                <div class="color-option" style="background:#ff00ff;" data-color="#ff00ff"></div>
                <div class="color-option" style="background:#00ffff;" data-color="#00ffff"></div>
                <div class="color-option" style="background:#ffff00;" data-color="#ffff00"></div>
                <div class="color-option" style="background:#ff9900;" data-color="#ff9900"></div>
              </div>
            </div>
          </div>
          <button class="save-btn">Save Changes</button>
        </div>
      </div>
    `;

    // Tab switching
    this.shadowRoot.querySelectorAll('.tab').forEach(tab => {
      tab.addEventListener('click', () => {
        this.shadowRoot.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        this.shadowRoot.querySelectorAll('.tab-content').forEach(c => c.style.display = 'none');
        
        tab.classList.add('active');
        const tabId = tab.getAttribute('data-tab') + '-tab';
        this.shadowRoot.getElementById(tabId).style.display = 'block';
      });
    });

    // Background select change
    this.shadowRoot.getElementById('background-select').addEventListener('change', (e) => {
      const customGroup = this.shadowRoot.getElementById('custom-bg-group');
      customGroup.style.display = e.target.value === 'custom' ? 'block' : 'none';
    });

    // Color picker
    this.shadowRoot.querySelectorAll('.color-option').forEach(option => {
      option.addEventListener('click', (e) => {
        const color = e.target.getAttribute('data-color');
        const pickerGroup = e.target.closest('.form-group');
        const label = pickerGroup.querySelector('label').textContent.toLowerCase();
        console.log(`Setting ${label} color to: ${color}`);
        // Would apply this color to the appropriate elements
      });
    });

    // Save button
    this.shadowRoot.querySelector('.save-btn').addEventListener('click', () => {
      alert('Profile saved! (This is a demo)');
    });
  }
}
customElements.define('custom-profile-editor', CustomProfileEditor);