class AvatarCustomizer extends HTMLElement {
  constructor() {
    super();
    this.avatarData = {
      gender: 'female',
      skinTone: '#f8d9b4',
      hairStyle: 'long',
      hairColor: '#2c140c',
      eyeColor: '#3a74a8',
      facialFeature: 'none',
      clothing: 'casual',
      accessories: 'none'
    };
    
    this.options = {
      gender: ['male', 'female'],
      skinTone: ['#f8d9b4', '#e0b080', '#c68650', '#a0522d', '#6b3e1e'],
      hairStyle: ['short', 'medium', 'long', 'curly', 'ponytail', 'bun'],
      hairColor: ['#2c140c', '#4a2c14', '#8b4513', '#d2b48c', '#000000', '#808080', '#ff0000', '#ffa500'],
      eyeColor: ['#3a74a8', '#5e8c31', '#8d67a8', '#8b4513', '#000000'],
      facialFeature: ['none', 'freckles', 'mole', 'scar'],
      clothing: ['casual', 'formal', 'fantasy', 'punk', 'sporty'],
      accessories: ['none', 'glasses', 'hat', 'earrings', 'necklace']
    };
  }

  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.render();
    this.setupEventListeners();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          font-family: 'Inter', sans-serif;
        }
        
        .avatar-customizer {
          display: flex;
          flex-direction: column;
          gap: 1.5rem;
        }
        
        .preview-section {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 1rem;
        }
        
        .avatar-preview {
          width: 200px;
          height: 300px;
          background: #1f2937;
          border-radius: 1rem;
          position: relative;
          overflow: hidden;
          border: 2px solid #374151;
        }
        
        .avatar-container {
          position: relative;
          width: 100%;
          height: 100%;
        }
        
        .avatar-part {
          position: absolute;
        }
        
        .coins-display {
          background: #1f2937;
          padding: 0.5rem 1rem;
          border-radius: 9999px;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 0.5rem;
        }
        
        .controls-section {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
          gap: 1rem;
        }
        
        .control-group {
          background: #1f2937;
          padding: 1rem;
          border-radius: 0.75rem;
        }
        
        .control-title {
          font-weight: 600;
          margin-bottom: 0.75rem;
          color: #f9fafb;
        }
        
        .options-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0.5rem;
        }
        
        .option-item {
          width: 40px;
          height: 40px;
          border-radius: 0.5rem;
          cursor: pointer;
          border: 2px solid transparent;
          transition: all 0.2s;
        }
        
        .option-item:hover {
          transform: scale(1.1);
        }
        
        .option-item.selected {
          border-color: #8b5cf6;
          box-shadow: 0 0 0 2px #1f2937, 0 0 0 4px #8b5cf6;
        }
        
        .color-option {
          border-radius: 50%;
        }
        
        .actions {
          display: flex;
          justify-content: center;
          gap: 1rem;
          margin-top: 1rem;
        }
        
        button {
          padding: 0.75rem 1.5rem;
          border-radius: 0.5rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s;
          border: none;
        }
        
        .btn-primary {
          background: linear-gradient(90deg, #8b5cf6, #6366f1);
          color: white;
        }
        
        .btn-secondary {
          background: #374151;
          color: #f9fafb;
        }
        
        button:hover {
          opacity: 0.9;
          transform: translateY(-2px);
        }
      </style>
      
      <div class="avatar-customizer">
        <div class="preview-section">
          <div class="avatar-preview">
            <div class="avatar-container">
              <div class="avatar-part body"></div>
              <div class="avatar-part head"></div>
              <div class="avatar-part hair"></div>
              <div class="avatar-part eyes"></div>
              <div class="avatar-part clothing"></div>
              <div class="avatar-part accessories"></div>
            </div>
          </div>
          <div class="coins-display">
            <span>🪙</span>
            <span id="coin-count">1500 Coins</span>
          </div>
        </div>
        
        <div class="controls-section">
          ${Object.keys(this.options).map(category => `
            <div class="control-group">
              <div class="control-title">${this.capitalizeFirstLetter(category)}</div>
              <div class="options-grid">
                ${this.renderOptions(category)}
              </div>
            </div>
          `).join('')}
        </div>
        <div class="actions">
          <button class="btn-primary" id="save-avatar">Save Avatar (50 coins)</button>
          <button class="btn-secondary" id="randomize">Randomize</button>
          <button class="btn-primary" id="next-step">Next: Personality</button>
        </div>
      </div>
    `;
this.updateAvatarPreview();
  }

  renderOptions(category) {
    if (category === 'skinTone' || category === 'hairColor' || category === 'eyeColor') {
      return this.options[category].map(color => `
        <div class="option-item color-option ${this.avatarData[category] === color ? 'selected' : ''}" 
             data-category="${category}" 
             data-value="${color}"
             style="background-color: ${color};"></div>
      `).join('');
    }
    
    return this.options[category].map(option => `
      <div class="option-item ${this.avatarData[category] === option ? 'selected' : ''}" 
           data-category="${category}" 
           data-value="${option}">${this.capitalizeFirstLetter(option)}</div>
    `).join('');
  }

  setupEventListeners() {
    // Option selection
    this.shadowRoot.querySelectorAll('.option-item').forEach(item => {
      item.addEventListener('click', (e) => {
        const category = e.target.dataset.category;
        const value = e.target.dataset.value;
        this.selectOption(category, value);
      });
    });
    
    // Action buttons
    this.shadowRoot.getElementById('save-avatar').addEventListener('click', () => {
      this.saveAvatar();
    });
    this.shadowRoot.getElementById('randomize').addEventListener('click', () => {
      this.randomizeAvatar();
    });
    
    this.shadowRoot.getElementById('next-step').addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('step-change', { detail: { step: 2 } }));
    });
  }

  selectOption(category, value) {
this.avatarData[category] = value;
    this.render();
  }

  updateAvatarPreview() {
    const preview = this.shadowRoot.querySelector('.avatar-container');
    if (!preview) return;
    
    // Update body
    const body = preview.querySelector('.body');
    body.style.backgroundColor = this.avatarData.skinTone;
    body.style.width = '100px';
    body.style.height = '120px';
    body.style.top = '180px';
    body.style.left = '50px';
    body.style.borderRadius = '50% 50% 0 0';
    
    // Update head
    const head = preview.querySelector('.head');
    head.style.backgroundColor = this.avatarData.skinTone;
    head.style.width = '80px';
    head.style.height = '80px';
    head.style.top = '100px';
    head.style.left = '60px';
    head.style.borderRadius = '50%';
    
    // Update hair
    const hair = preview.querySelector('.hair');
    hair.style.backgroundColor = this.avatarData.hairColor;
    switch(this.avatarData.hairStyle) {
      case 'short':
        hair.style.width = '90px';
        hair.style.height = '40px';
        hair.style.top = '90px';
        hair.style.left = '55px';
        hair.style.borderRadius = '50% 50% 0 0';
        break;
      case 'long':
        hair.style.width = '90px';
        hair.style.height = '120px';
        hair.style.top = '70px';
        hair.style.left = '55px';
        hair.style.borderRadius = '50% 50% 0 0';
        break;
      case 'ponytail':
        hair.style.width = '40px';
        hair.style.height = '100px';
        hair.style.top = '70px';
        hair.style.left = '95px';
        hair.style.borderRadius = '50% 50% 0 0';
        break;
    }
    
    // Update eyes
    const eyes = preview.querySelector('.eyes');
    eyes.style.backgroundColor = this.avatarData.eyeColor;
    eyes.style.width = '10px';
    eyes.style.height = '10px';
    eyes.style.top = '130px';
    eyes.style.left = '80px';
    eyes.style.borderRadius = '50%';
    eyes.style.boxShadow = '15px 0 0 ' + this.avatarData.eyeColor;
  }

  saveAvatar() {
    // Simulate coin deduction
    const coinElement = this.shadowRoot.getElementById('coin-count');
    let coins = parseInt(coinElement.textContent);
    if (coins >= 50) {
      coins -= 50;
      coinElement.textContent = `${coins} Coins`;
      // Show success message
      alert('Avatar saved successfully!');
    } else {
      alert('Not enough coins! Complete more chats to earn coins.');
    }
  }

  randomizeAvatar() {
    Object.keys(this.options).forEach(category => {
      const options = this.options[category];
      const randomIndex = Math.floor(Math.random() * options.length);
      this.avatarData[category] = options[randomIndex];
    });
    this.render();
  }

  capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
  }
}

customElements.define('avatar-customizer', AvatarCustomizer);