<div class="color-get-dialog">
  <div class="dialog-header">
    <div class="title">色彩分析报告</div>
    <button class="close-btn" (click)="close()">×</button>
  </div>

  <div class="dialog-body">
    <div class="layout">
      <div class="image-panel">
        <div class="panel-title">原图 / 马赛克</div>
        <div class="image-wrapper">
          <img [src]="imageUrl" [alt]="imageName" />
        </div>
        <div class="mosaic-wrapper">
          <canvas #mosaicCanvas></canvas>
        </div>
      </div>

      <div class="analysis-panel">
        <div class="panel-title">色彩分析</div>

        <div class="loading" *ngIf="loading">
          <div class="spinner"></div>
          <div class="progress">分析中... {{ progress }}%</div>
        </div>

        <div class="metrics" *ngIf="!loading && report">
          <div class="metric-item">
            <div class="label">冷暖平衡</div>
            <div class="value" [class.cold]="report.metrics.warmCoolBalance < 0" [class.warm]="report.metrics.warmCoolBalance > 0">
              {{ report.metrics.warmCoolBalance | number:'1.0-0' }}
            </div>
          </div>
          <div class="metric-item">
            <div class="label">平均亮度</div>
            <div class="value">{{ report.metrics.averageBrightness | number:'1.0-0' }}</div>
          </div>
          <div class="metric-item">
            <div class="label">平均饱和度</div>
            <div class="value">{{ report.metrics.averageSaturation | number:'1.0-0' }}</div>
          </div>
          <div class="metric-item">
            <div class="label">色彩多样度</div>
            <div class="value">{{ report.metrics.diversity }}</div>
          </div>
        </div>

        <div class="palette" *ngIf="!loading && report">
          <div class="palette-title">主要色卡（Top 20）</div>
          <div class="palette-grid">
            <div class="palette-item" *ngFor="let c of report.palette">
              <div class="swatch" [style.background]="c.hex"></div>
              <div class="info">
                <div class="hex">{{ c.hex }}</div>
                <div class="pct">{{ c.percentage | number:'1.0-1' }}%</div>
              </div>
            </div>
          </div>
        </div>

        <div class="charts" *ngIf="report">
          <div class="chart-block">
            <div class="chart-title">色彩分布直方图（亮度/饱和度）</div>
            <div #histogramChart class="chart"></div>
          </div>
          <div class="chart-block">
            <div class="chart-title">色彩拆分图（纵轴明暗，横轴冷暖）</div>
            <div #splitChart class="chart"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">
      <div class="file-info">
        <span class="name">{{ imageName }}</span>
        <span class="size" *ngIf="imageSize">{{ imageSize / 1024 | number:'1.0-1' }} KB</span>
      </div>
      <div class="actions">
        <button class="save-btn" (click)="saveAnalysis()" [disabled]="saving || !report">{{ saving ? '保存中...' : '保存结果到文件' }}</button>
        <button class="re-btn" (click)="reAnalyze()" [disabled]="loading">重新分析</button>
        <span class="save-msg" *ngIf="saveMessage">{{ saveMessage }}</span>
      </div>
      <button class="close-btn" (click)="close()">关闭</button>
    </div>
  </div>
</div>