<ion-header [translucent]="true">
  <ion-toolbar [color]="isNightMode ? 'dark' : 'primary'">
    <ion-title>
      <ion-text color="light">{{ greetingMessage }}</ion-text>
    </ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="openVoiceInput()">
        <ion-icon slot="icon-only" name="mic"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
  
  <!-- 紧急状态条 -->
  <div *ngIf="emergencyAlert" class="emergency-bar" (click)="openEmergencyModal()">
    <ion-icon name="warning"></ion-icon>
    <ion-label>{{ emergencyAlert.message }}</ion-label>
    <ion-icon name="chevron-forward"></ion-icon>
  </div>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 子女消息区域 -->
  <div *ngIf="isElderly && childrenMessages.length" class="children-messages">
    <ion-card *ngFor="let msg of childrenMessages" 
              [class.unread]="!msg.played"
              (click)="playMessage(msg)">
      <ion-card-header>
        <ion-card-title>
          <ion-icon name="person"></ion-icon>
          {{ msg.from }}
        </ion-card-title>
        <ion-card-subtitle>{{ msg.time | date:'HH:mm' }}</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        {{ msg.text }}
        <div *ngIf="!msg.played" class="unread-indicator"></div>
      </ion-card-content>
    </ion-card>
  </div>


  <!-- 服务九宫格 -->
  <div class="services-grid">
    <ion-grid>
      <ion-row>
        <ion-col *ngFor="let service of services" size="4" class="service-item">
          <!-- 添加data-service-id属性用于样式区分 -->
          <ion-button (click)="handleServiceClick(service.id)" fill="clear" [attr.data-service-id]="service.id">
            <div class="icon-container">
              <ion-icon [name]="service.icon"></ion-icon>
            </div>
            <ion-label>{{ service.name }}</ion-label>
            <ion-badge *ngIf="service.badge > 0">{{ service.badge }}</ion-badge>
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <!-- 社区动态信息流 -->
  <div class="community-feed">
    <ion-list lines="none">
      <ion-list-header>
        <ion-label>社区互助动态</ion-label>
      </ion-list-header>
      
      <ion-item *ngFor="let item of communityFeed" 
                [class.emergency-item]="item.type === 'emergency'"
                [class.completed-item]="item.status === 'completed'"
                (click)="goDynamic('123'); playPointsAnimation($event)">
        <ion-avatar slot="start">
          <img [src]="item.userAvatar" />
        </ion-avatar>
        <ion-label>
          <h2>{{ item.userName }}</h2>
          <p>{{ item.description }}</p>
          <p *ngIf="item.type === 'emergency'" class="emergency-tag">
            <ion-icon name="warning"></ion-icon>
            紧急
          </p>
        </ion-label>
        <div slot="end" class="item-meta">
          <span class="time">{{ item.time | date:'HH:mm' }}</span>
          <span *ngIf="item.points" class="points">+{{ item.points }}分</span>
        </div>
      </ion-item>
    </ion-list>
  </div>
</ion-content>

<!-- 悬浮助手按钮 -->
<div class="assistant-button" (click)="openVoiceInput()">
  <div class="assistant-face">
    <div class="assistant-eye left-eye"></div>
    <div class="assistant-eye right-eye"></div>
    <div class="assistant-mouth"></div>
  </div>
</div>

