<div class="test-atmosphere-preview">
  <div class="header">
    <h2>氛围感预览图生成测试</h2>
    <p>测试氛围感预览图生成功能的集成效果</p>
  </div>

  <div class="controls">
    <label for="sceneType">选择场景类型:</label>
    <select id="sceneType" [value]="selectedSceneType" (change)="onSceneTypeChange($any($event.target).value)">
      @for (sceneType of testSceneTypes; track sceneType) {
        <option [value]="sceneType">{{ getSceneTypeName(sceneType) }}</option>
      }
    </select>
    <button (click)="generateTestPreview()" [disabled]="isGenerating">
      {{ isGenerating ? '生成中...' : '重新生成' }}
    </button>
  </div>

  @if (isGenerating) {
    <div class="loading">
      <div class="spinner"></div>
      <p>正在生成氛围感预览图，请稍候...</p>
    </div>
  }

  @if (error) {
    <div class="error">
      <h3>错误信息</h3>
      <p>{{ error }}</p>
    </div>
  }

  @if (previewResult && !isGenerating) {
    <div class="result">
      <h3>生成结果</h3>
      
      <div class="preview-section">
        <div class="preview-image">
          <h4>预览图</h4>
          <img [src]="previewResult.url" [alt]="getSceneTypeName(selectedSceneType)" />
          <p class="image-url">URL: {{ previewResult.url }}</p>
        </div>
        
        <div class="thumbnail-image">
          <h4>缩略图</h4>
          <img [src]="previewResult.thumbnailUrl" [alt]="getSceneTypeName(selectedSceneType) + ' 缩略图'" />
          <p class="image-url">URL: {{ previewResult.thumbnailUrl }}</p>
        </div>
      </div>

      <div class="metadata">
        <h4>元数据</h4>
        <div class="metadata-grid">
          <div class="metadata-item">
            <span class="label">场景类型:</span>
            <span class="value">{{ getSceneTypeName(previewResult.metadata.sceneType) }}</span>
          </div>
          <div class="metadata-item">
            <span class="label">生成时间:</span>
            <span class="value">{{ previewResult.metadata.generatedAt | date:'yyyy-MM-dd HH:mm:ss' }}</span>
          </div>
          <div class="metadata-item">
            <span class="label">处理时间:</span>
            <span class="value">{{ previewResult.metadata.processingTime }}ms</span>
          </div>
        </div>
      </div>

      <div class="parameters">
        <h4>场景参数</h4>
        <div class="params-section">
          <div class="param-group">
            <h5>灯光设置</h5>
            <div class="param-item">
              <span class="label">主光源类型:</span>
              <span class="value">{{ previewResult.metadata.parameters.lighting.primaryLight.type }}</span>
            </div>
            <div class="param-item">
              <span class="label">光照强度:</span>
              <span class="value">{{ previewResult.metadata.parameters.lighting.primaryLight.intensity }}%</span>
            </div>
            <div class="param-item">
              <span class="label">色温:</span>
              <span class="value">{{ previewResult.metadata.parameters.lighting.primaryLight.temperature }}K</span>
            </div>
          </div>

          <div class="param-group">
            <h5>环境设置</h5>
            <div class="param-item">
              <span class="label">环境类型:</span>
              <span class="value">{{ previewResult.metadata.parameters.environment.setting }}</span>
            </div>
            <div class="param-item">
              <span class="label">氛围:</span>
              <span class="value">{{ previewResult.metadata.parameters.environment.atmosphere }}</span>
            </div>
            <div class="param-item">
              <span class="label">时间:</span>
              <span class="value">{{ previewResult.metadata.parameters.environment.timeOfDay }}</span>
            </div>
          </div>

          <div class="param-group">
            <h5>风格设置</h5>
            <div class="param-item">
              <span class="label">渲染风格:</span>
              <span class="value">{{ previewResult.metadata.parameters.style.renderStyle }}</span>
            </div>
            <div class="param-item">
              <span class="label">色彩分级:</span>
              <span class="value">{{ previewResult.metadata.parameters.style.colorGrading }}</span>
            </div>
            <div class="param-item">
              <span class="label">纹理细节:</span>
              <span class="value">{{ previewResult.metadata.parameters.style.textureDetail }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  }
</div>