<!-- mood.page.html -->
<ion-content class="mood-journal-v2">
  <div class="mood-journal">
    <!-- 顶部情绪状态指示 -->
    <div class="mood-header">
      <div class="current-status">
        <ion-icon name="happy" class="pulse"></ion-icon>
        <h2>当前情绪指数</h2>
        <div class="score">7.2<span>/10</span></div>
      </div>
      <div class="emotion-cloud">
        <span class="tag happy">快乐</span>
        <span class="tag calm">平静</span>
        <span class="tag anxious">轻微焦虑</span>
      </div>
    </div>
  </div>

  <!-- 新型情绪仪表盘 -->
  <div class="emotion-dashboard">
    <!-- <div class="circular-progress">
      <div class="wave-container" [style.--progress]="currentMoodScore/10">
        <div class="liquid"></div>
        <div class="glow"></div>
      </div>
      <div class="progress-text">
        <div class="score">{{ currentMoodScore | number:'1.1-1' }}</div>
        <div class="label">今日情绪指数</div>
      </div>
    </div>
    新增周边指标
    <div class="vital-stats">
      <div class="stat-item" > (click)="toggleStat('stress')"
        <div class="stat-icon heart-beat"></div>
        <div class="stat-value">72</div>
        <div class="stat-label">压力指数</div>
      </div>
      其他指标...
    </div> -->
    <!-- 动态波纹背景 -->
    <div class="ripple-background">
      <div class="ripple" *ngFor="let r of ripples" 
          [style]="getRippleStyle(r)"></div>
    </div>

    <!-- 情绪时间轴 -->
    <div class="emotion-timeline">
      <div class="timeline-scroller" (pan)="handlePan($event)">
        <div class="timeline-track" [style.transform]="'translateX(' + offsetX + 'px)'">
          <div class="time-block" *ngFor="let hour of hourlyMood" [style.--intensity]="hour.score/10">
            <div class="bar"></div>
            <div class="time">{{ hour.time }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 蜂窝状情绪日历 -->
  <div class="honeycomb-calendar">
    <div class="hex-row" *ngFor="let week of calendarWeeks">
      <div class="hex-cell" 
           *ngFor="let day of week"
           [ngClass]="getMoodClass(day)"
           (click)="showDayDetail(day)">
        <div class="hex-content">
          <div class="date">{{ day.date | date:'d' }}</div>
          <div class="particles"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- 智能分析浮窗 -->
  <div class="analysis-card">
    <div class="insight">
      <ion-icon name="bulb"></ion-icon>
      <span>本周情绪峰值出现在周三下午3点</span>
    </div>
    <div class="suggestion">建议：尝试傍晚进行呼吸训练</div>
  </div>

  <!-- 语音输入按钮 -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button class="voice-btn" (click)="startRecording()">
      <ion-icon name="mic" [class.recording]="isRecording"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

