class CustomControlPanel extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
        .control-group {
          margin-bottom: 1.5rem;
        }
        .control-title {
          font-weight: 600;
          margin-bottom: 1rem;
          display: flex;
          align-items: center;
        }
        .control-icon {
          margin-right: 0.5rem;
        }
        .slider-control {
          margin-bottom: 1rem;
        }
        .slider-label {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0.5rem;
          font-size: 0.875rem;
        }
        .slider {
          width: 100%;
          height: 6px;
          -webkit-appearance: none;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 3px;
          outline: none;
        }
        .slider::-webkit-slider-thumb {
          -webkit-appearance: none;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: #3a86ff;
          cursor: pointer;
        }
        .toggle-control {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 1rem;
        }
        .toggle-label {
          display: flex;
          align-items: center;
        }
        .toggle-icon {
          margin-right: 0.5rem;
        }
        .toggle-switch {
          position: relative;
          display: inline-block;
          width: 50px;
          height: 24px;
        }
        .toggle-input {
          opacity: 0;
          width: 0;
          height: 0;
        }
        .toggle-slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #2d3748;
          transition: .4s;
          border-radius: 24px;
        }
        .toggle-slider:before {
          position: absolute;
          content: "";
          height: 16px;
          width: 16px;
          left: 4px;
          bottom: 4px;
          background-color: white;
          transition: .4s;
          border-radius: 50%;
        }
        .toggle-input:checked + .toggle-slider {
          background-color: #3a86ff;
        }
        .toggle-input:checked + .toggle-slider:before {
          transform: translateX(26px);
        }
        .button-control {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 0.5rem;
          margin-top: 1rem;
        }
        .control-button {
          background: rgba(58, 134, 255, 0.2);
          border: 1px solid rgba(58, 134, 255, 0.3);
          color: #3a86ff;
          padding: 0.5rem;
          border-radius: 0.375rem;
          cursor: pointer;
          font-size: 0.875rem;
          text-align: center;
          transition: all 0.2s;
        }
        .control-button:hover {
          background: rgba(58, 134, 255, 0.3);
        }
      </style>
      <div class="control-panel">
        <div class="control-group">
          <div class="control-title">
            <i data-feather="move" class="control-icon"></i> Positioning
          </div>
          <div class="slider-control">
            <div class="slider-label">
              <span>X-Axis</span>
              <span id="x-value">0</span>
            </div>
            <input type="range" min="-10" max="10" value="0" step="0.1" class="slider" id="x-slider">
          </div>
          <div class="slider-control">
            <div class="slider-label">
              <span>Y-Axis</span>
              <span id="y-value">0</span>
            </div>
            <input type="range" min="-10" max="10" value="0" step="0.1" class="slider" id="y-slider">
          </div>
          <div class="slider-control">
            <div class="slider-label">
              <span>Z-Axis</span>
              <span id="z-value">0</span>
            </div>
            <input type="range" min="-10" max="10" value="0" step="0.1" class="slider" id="z-slider">
          </div>
        </div>

        <div class="control-group">
          <div class="control-title">
            <i data-feather="rotate-cw" class="control-icon"></i> Rotation
          </div>
          <div class="slider-control">
            <div class="slider-label">
              <span>X-Rotation</span>
              <span id="x-rot-value">0°</span>
            </div>
            <input type="range" min="0" max="360" value="0" step="1" class="slider" id="x-rot-slider">
          </div>
          <div class="slider-control">
            <div class="slider-label">
              <span>Y-Rotation</span>
              <span id="y-rot-value">0°</span>
            </div>
            <input type="range" min="0" max="360" value="0" step="1" class="slider" id="y-rot-slider">
          </div>
          <div class="slider-control">
            <div class="slider-label">
              <span>Z-Rotation</span>
              <span id="z-rot-value">0°</span>
            </div>
            <input type="range" min="0" max="360" value="0" step="1" class="slider" id="z-rot-slider">
          </div>
        </div>

        <div class="control-group">
          <div class="control-title">
            <i data-feather="settings" class="control-icon"></i> Options
          </div>
          <div class="toggle-control">
            <label class="toggle-label">
              <i data-feather="grid" class="toggle-icon"></i> Show Grid
            </label>
            <label class="toggle-switch">
              <input type="checkbox" class="toggle-input" checked>
              <span class="toggle-slider"></span>
            </label>
          </div>
          <div class="toggle-control">
            <label class="toggle-label">
              <i data-feather="eye" class="toggle-icon"></i> Wireframe
            </label>
            <label class="toggle-switch">
              <input type="checkbox" class="toggle-input">
              <span class="toggle-slider"></span>
            </label>
          </div>
          <div class="toggle-control">
            <label class="toggle-label">
              <i data-feather="sun" class="toggle-icon"></i> Shadows
            </label>
            <label class="toggle-switch">
              <input type="checkbox" class="toggle-input" checked>
              <span class="toggle-slider"></span>
            </label>
          </div>
          <div class="button-control">
            <button class="control-button">Reset View</button>
            <button class="control-button">Center All</button>
          </div>
        </div>
      </div>
    `;
    feather.replace();

    // Add slider value updates
    this.shadowRoot.querySelectorAll('.slider').forEach(slider => {
      slider.addEventListener('input', () => {
        const valueId = slider.id.replace('-slider', '-value');
        const valueElement = this.shadowRoot.getElementById(valueId);
        if (valueElement) {
          valueElement.textContent = slider.id.includes('rot') 
            ? `${slider.value}°` 
            : slider.value;
        }
      });
    });
  }
}
customElements.define('custom-control-panel', CustomControlPanel);