<div class="customer-review-form">
  <div class="form-header">
    <h3>客户服务评价</h3>
    <p class="project-info">项目：{{ projectName }} | 设计师：{{ designerName }}</p>
    <div class="overall-rating">
      <span class="rating-label">总体评分：</span>
      <span class="average-score">{{ getAverageScore() }}</span>
      <span class="score-suffix">/5</span>
      <div class="star-display">
        @for (star of generateStars(getAverageScore()); track $index) {
          <span class="star">{{ star }}</span>
        }
      </div>
    </div>
  </div>

  <div class="form-content">
    <!-- 总体满意度 -->
    <div class="rating-section">
      <h4>1. 总体满意度</h4>
      <p class="section-description">您对本次服务的整体满意程度</p>
      <div class="rating-control">
        @for (i of [1,2,3,4,5]; track i) {
          <label class="star-option">
            <input 
              type="radio" 
              name="overallSatisfaction" 
              [value]="i" 
              [(ngModel)]="reviewData.overallSatisfaction">
            <span class="star">{{ i <= reviewData.overallSatisfaction ? '★' : '☆' }}</span>
            <span class="score-label">{{ i }}分</span>
          </label>
        }
      </div>
    </div>

    <!-- 服务质量维度 -->
    <div class="rating-section">
      <h4>2. 服务质量</h4>
      <div class="dimensions-grid">
        <div class="dimension-item">
          <label>服务时效</label>
          <p class="dimension-desc">响应速度和交付及时性</p>
          <div class="rating-control">
            @for (i of [1,2,3,4,5]; track i) {
              <label class="star-option">
                <input 
                  type="radio" 
                  name="serviceTimeliness" 
                  [value]="i" 
                  [(ngModel)]="reviewData.serviceTimeliness">
                <span class="star">{{ i <= reviewData.serviceTimeliness ? '★' : '☆' }}</span>
              </label>
            }
          </div>
        </div>

        <div class="dimension-item">
          <label>建议回应</label>
          <p class="dimension-desc">对您建议的采纳和回应</p>
          <div class="rating-control">
            @for (i of [1,2,3,4,5]; track i) {
              <label class="star-option">
                <input 
                  type="radio" 
                  name="suggestionResponse" 
                  [value]="i" 
                  [(ngModel)]="reviewData.suggestionResponse">
                <span class="star">{{ i <= reviewData.suggestionResponse ? '★' : '☆' }}</span>
              </label>
            }
          </div>
        </div>

        <div class="dimension-item">
          <label>小图交付</label>
          <p class="dimension-desc">预览图的质量和效果</p>
          <div class="rating-control">
            @for (i of [1,2,3,4,5]; track i) {
              <label class="star-option">
                <input 
                  type="radio" 
                  name="smallImageDelivery" 
                  [value]="i" 
                  [(ngModel)]="reviewData.smallImageDelivery">
                <span class="star">{{ i <= reviewData.smallImageDelivery ? '★' : '☆' }}</span>
              </label>
            }
          </div>
        </div>

        <div class="dimension-item">
          <label>改图及时性</label>
          <p class="dimension-desc">修改请求的处理速度</p>
          <div class="rating-control">
            @for (i of [1,2,3,4,5]; track i) {
              <label class="star-option">
                <input 
                  type="radio" 
                  name="revisionEfficiency" 
                  [value]="i" 
                  [(ngModel)]="reviewData.revisionEfficiency">
                <span class="star">{{ i <= reviewData.revisionEfficiency ? '★' : '☆' }}</span>
              </label>
            }
          </div>
        </div>
      </div>
    </div>

    <!-- 渲染质量维度 -->
    <div class="rating-section">
      <h4>3. 渲染质量</h4>
      <div class="dimensions-grid">
        <div class="dimension-item">
          <label>材质表现</label>
          <p class="dimension-desc">材料质感和真实度</p>
          <div class="rating-control">
            @for (i of [1,2,3,4,5]; track i) {
              <label class="star-option">
                <input 
                  type="radio" 
                  name="materials" 
                  [value]="i" 
                  [(ngModel)]="reviewData.renderingQuality.materials">
                <span class="star">{{ i <= reviewData.renderingQuality.materials ? '★' : '☆' }}</span>
              </label>
            }
          </div>
        </div>

        <div class="dimension-item">
          <label>灯光效果</label>
          <p class="dimension-desc">光照氛围和自然度</p>
          <div class="rating-control">
            @for (i of [1,2,3,4,5]; track i) {
              <label class="star-option">
                <input 
                  type="radio" 
                  name="lighting" 
                  [value]="i" 
                  [(ngModel)]="reviewData.renderingQuality.lighting">
                <span class="star">{{ i <= reviewData.renderingQuality.lighting ? '★' : '☆' }}</span>
              </label>
            }
          </div>
        </div>

        <div class="dimension-item">
          <label>纹理细节</label>
          <p class="dimension-desc">表面纹理和细节处理</p>
          <div class="rating-control">
            @for (i of [1,2,3,4,5]; track i) {
              <label class="star-option">
                <input 
                  type="radio" 
                  name="texture" 
                  [value]="i" 
                  [(ngModel)]="reviewData.renderingQuality.texture">
                <span class="star">{{ i <= reviewData.renderingQuality.texture ? '★' : '☆' }}</span>
              </label>
            }
          </div>
        </div>

        <div class="dimension-item">
          <label>硬装结构</label>
          <p class="dimension-desc">空间结构和比例准确性</p>
          <div class="rating-control">
            @for (i of [1,2,3,4,5]; track i) {
              <label class="star-option">
                <input 
                  type="radio" 
                  name="structure" 
                  [value]="i" 
                  [(ngModel)]="reviewData.renderingQuality.structure">
                <span class="star">{{ i <= reviewData.renderingQuality.structure ? '★' : '☆' }}</span>
              </label>
            }
          </div>
        </div>
      </div>
    </div>

    <!-- 沟通体验维度 -->
    <div class="rating-section">
      <h4>4. 沟通体验</h4>
      <div class="dimensions-grid">
        <div class="dimension-item">
          <label>资料齐全性</label>
          <p class="dimension-desc">提供资料的完整程度</p>
          <div class="rating-control">
            @for (i of [1,2,3,4,5]; track i) {
              <label class="star-option">
                <input 
                  type="radio" 
                  name="documentation" 
                  [value]="i" 
                  [(ngModel)]="reviewData.communication.documentation">
                <span class="star">{{ i <= reviewData.communication.documentation ? '★' : '☆' }}</span>
              </label>
            }
          </div>
        </div>

        <div class="dimension-item">
          <label>需求理解</label>
          <p class="dimension-desc">对您需求的理解准确性</p>
          <div class="rating-control">
            @for (i of [1,2,3,4,5]; track i) {
              <label class="star-option">
                <input 
                  type="radio" 
                  name="requirementUnderstanding" 
                  [value]="i" 
                  [(ngModel)]="reviewData.communication.requirementUnderstanding">
                <span class="star">{{ i <= reviewData.communication.requirementUnderstanding ? '★' : '☆' }}</span>
              </label>
            }
          </div>
        </div>

        <div class="dimension-item">
          <label>沟通充分性</label>
          <p class="dimension-desc">沟通频率和信息透明度</p>
          <div class="rating-control">
            @for (i of [1,2,3,4,5]; track i) {
              <label class="star-option">
                <input 
                  type="radio" 
                  name="communicationSufficiency" 
                  [value]="i" 
                  [(ngModel)]="reviewData.communication.communicationSufficiency">
                <span class="star">{{ i <= reviewData.communication.communicationSufficiency ? '★' : '☆' }}</span>
              </label>
            }
          </div>
        </div>

        <div class="dimension-item">
          <label>内容相关性</label>
          <p class="dimension-desc">交付内容与需求的匹配度</p>
          <div class="rating-control">
            @for (i of [1,2,3,4,5]; track i) {
              <label class="star-option">
                <input 
                  type="radio" 
                  name="contentRelevance" 
                  [value]="i" 
                  [(ngModel)]="reviewData.communication.contentRelevance">
                <span class="star">{{ i <= reviewData.communication.contentRelevance ? '★' : '☆' }}</span>
              </label>
            }
          </div>
        </div>
      </div>
    </div>

    <!-- 场景评价 -->
    <div class="rating-section">
      <h4>5. 各场景评价</h4>
      <p class="section-description">请对每个设计场景进行评分</p>
      <div class="scenes-grid">
        @for (scene of reviewData.scenes; track $index) {
          <div class="scene-item">
            <label class="scene-name">{{ scene.sceneName }}</label>
            <div class="rating-control">
              @for (i of [1,2,3,4,5]; track i) {
                <label class="star-option">
                  <input 
                    type="radio" 
                    [name]="'scene-' + $index" 
                    [value]="i" 
                    [(ngModel)]="scene.score">
                  <span class="star">{{ i <= scene.score ? '★' : '☆' }}</span>
                </label>
              }
            </div>
            <textarea 
              class="scene-comments" 
              placeholder="对该场景的具体意见（选填）"
              [(ngModel)]="scene.comments"></textarea>
          </div>
        }
      </div>
    </div>

    <!-- 改进建议 -->
    <div class="suggestion-section">
      <h4>6. 改进建议</h4>
      <p class="section-description">您希望我们在哪些方面进行优化？</p>
      <textarea 
        class="suggestion-input" 
        placeholder="请分享您的宝贵建议，帮助我们做得更好"
        [(ngModel)]="reviewData.improvementSuggestions"></textarea>
    </div>

    <!-- 下次合作优化点 -->
    <div class="optimization-section">
      <h4>7. 下次合作优化点</h4>
      <p class="section-description">下次合作，您希望我们优化哪些点？</p>
      <div class="optimization-options">
        <div class="option-grid">
          <label class="option-item">
            <input type="checkbox" value="服务响应速度">
            <span>服务响应速度</span>
          </label>
          <label class="option-item">
            <input type="checkbox" value="设计创意水平">
            <span>设计创意水平</span>
          </label>
          <label class="option-item">
            <input type="checkbox" value="沟通协调能力">
            <span>沟通协调能力</span>
          </label>
          <label class="option-item">
            <input type="checkbox" value="项目管理流程">
            <span>项目管理流程</span>
          </label>
          <label class="option-item">
            <input type="checkbox" value="技术实现质量">
            <span>技术实现质量</span>
          </label>
          <label class="option-item">
            <input type="checkbox" value="售后服务质量">
            <span>售后服务质量</span>
          </label>
        </div>
        <textarea 
          class="optimization-input" 
          placeholder="其他具体的优化建议..."
          [(ngModel)]="reviewData.nextCooperationOptimization"></textarea>
      </div>
    </div>

    <!-- 合作意愿 -->
    <div class="cooperation-section">
      <h4>8. 合作意愿</h4>
      <div class="cooperation-options">
        <label class="cooperation-option">
          <input 
            type="radio" 
            name="willCooperateAgain" 
            [value]="true" 
            [(ngModel)]="reviewData.willCooperateAgain">
          <span class="option-label">愿意再次合作</span>
        </label>
        <label class="cooperation-option">
          <input 
            type="radio" 
            name="willCooperateAgain" 
            [value]="false" 
            [(ngModel)]="reviewData.willCooperateAgain">
          <span class="option-label">暂不考虑再次合作</span>
        </label>
      </div>
    </div>

    <!-- 投诉内容 -->
    <div class="complaint-section">
      <div class="complaint-toggle">
        <label class="complaint-switch">
          <input 
            type="checkbox" 
            [(ngModel)]="showComplaint">
          <span class="switch-label">我要投诉</span>
        </label>
      </div>

      @if (showComplaint) {
        <div class="complaint-content">
          <h5>投诉内容</h5>
          <p class="complaint-notice">⚠️ 投诉内容将作为实时代办项进行处理</p>
          <textarea 
            class="complaint-input" 
            placeholder="请详细描述您遇到的问题和不满意的方面"
            [(ngModel)]="reviewData.complaintContent"></textarea>
        </div>
      }
    </div>

    <!-- 提交按钮 -->
    <div class="form-actions">
      <button 
        class="submit-btn primary" 
        (click)="submitReview()">
        提交评价
      </button>
      <button 
        class="submit-btn secondary" 
        type="button">
        暂存草稿
      </button>
    </div>
  </div>
</div>