import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-pages-fitting-room',
  imports: [CommonModule],
  templateUrl: './pages-fitting-room.html',
  styleUrls: ['./pages-fitting-room.scss']
})
export class PagesFittingRoom {
  // 身材参数
  height = 170;
  weight = 60;
  selectedScene: keyof typeof this.sceneNames | null = null;
  isARCameraActive = false;
  bodyMeasurements = {
    chest: 90,
    waist: 70,
    hips: 95
  };

  // 场景映射
  sceneNames = {
    'office': '办公场景',
    'date': '约会场景', 
    'party': '派对场景',
    'casual': '休闲场景'
  };
  
  // 场景背景色
  sceneBackgrounds = {
    'office': { '--scene-bg-start': '#ff9a9e', '--scene-bg-end': '#fecfef' },
    'date': { '--scene-bg-start': '#a8edea', '--scene-bg-end': '#fed6e3' },
    'party': { '--scene-bg-start': '#667eea', '--scene-bg-end': '#764ba2' },
    'casual': { '--scene-bg-start': '#ffeaa7', '--scene-bg-end': '#fab1a0' }
  };

  // 获取场景图标
  getSceneIcon(scene: keyof typeof this.sceneNames): string {
    const icons = {
      'office': '🏢',
      'date': '💕',
      'party': '🎉',
      'casual': '☕'
    };
    return icons[scene];
  }

  // 获取场景键数组
  get sceneKeys(): (keyof typeof this.sceneNames)[] {
    return Object.keys(this.sceneNames) as (keyof typeof this.sceneNames)[];
  }

  // 更新身高
  updateHeight(event: Event) {
    this.height = parseInt((event.target as HTMLInputElement).value);
    this.updateBodyMeasurements();
  }

  // 更新体重
  updateWeight(event: Event) {
    this.weight = parseInt((event.target as HTMLInputElement).value);
    this.updateBodyMeasurements();
  }

  // 根据身高体重自动计算其他身体参数
  updateBodyMeasurements() {
    const heightRatio = this.height / 170;
    const weightRatio = this.weight / 60;
    
    this.bodyMeasurements = {
      chest: Math.round(90 * heightRatio * (0.7 + 0.3 * weightRatio)),
      waist: Math.round(70 * heightRatio * (0.6 + 0.4 * weightRatio)),
      hips: Math.round(95 * heightRatio * (0.8 + 0.2 * weightRatio))
    };
  }

  // 选择场景
  selectScene(scene: keyof typeof this.sceneNames) {
    this.selectedScene = scene;
    this.showNotification('场景切换', `已切换到${this.sceneNames[scene]}`);
  }

  // 启动AR试衣
  startAR() {
    this.isARCameraActive = true;
    setTimeout(() => {
      this.showNotification('AR试穿', '相机已就绪，请将摄像头对准全身');
    }, 1500);
  }

  // 关闭AR试衣
  stopAR() {
    this.isARCameraActive = false;
  }

  // 显示通知
  showNotification(title: string, message: string) {
    const notification = document.createElement('div');
    notification.className = 'custom-notification';
    notification.innerHTML = `
      <strong>${title}</strong>
      <span>${message}</span>
    `;
    document.body.appendChild(notification);
    
    setTimeout(() => {
      notification.classList.add('show');
    }, 10);
    
    setTimeout(() => {
      notification.classList.remove('show');
      setTimeout(() => {
        document.body.removeChild(notification);
      }, 300);
    }, 3000);
  }
}