<ion-header [translucent]="true">
  <ion-toolbar>
      <div class="header">
        <ion-item class="search-bar">
          <ion-icon name="search-outline" slot="start"></ion-icon>
          <ion-input class="Input with placeholder" placeholder="负面情绪禁止过夜——现在立刻销毁"></ion-input>
        </ion-item>
        
        <!-- 添加右侧按钮 -->
        <ion-buttons slot="end">
          <ion-button (click)="addDynamic()">
            <ion-icon name="add-circle-outline" slot="icon-only"></ion-icon>
          </ion-button>
        </ion-buttons>
      </div>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <!-- 功能板块 -->
  <div class="function-grid">
    <div (click)="importData()" class="function-card card-1">树洞</div>
    <div (click)="goThankslist('清单')" class="function-card card-2">感恩清单</div>
    <div class="function-card card-3">漂流瓶</div>
    <div (click)="goToManage()" class="function-card card-4">情绪发泄室</div>
  </div>
  
  <!-- 动态日记标题栏 -->
  <div class="tab-container">
    <div class="tab-bar">
      <div class="tab-item" 
          *ngFor="let tab of tabs" 
          [class.active]="activeTab === tab.id"
          (click)="switchTab(tab.id)">
        {{ tab.title }}
      </div>
      <div class="tab-slider" [style.transform]="'translateX(' + (activeTab * 100) + '%)'"></div>
    </div>
  </div>
   

  <!-- 动态日记列表 -->
  <div class="diary-list">

    <!-- 动态项 -->
    <div class="diary-item" *ngFor="let dynamic of dynamics">
      <div class="user-info">
        <div class="user-left">
          <div class="user-avatar">{{ dynamic.get('author')?.get('username')?.charAt(0) || 'U' }}</div>
          <div class="user-name">{{ dynamic.get('author')?.get('username') || '匿名用户' }}</div>
        </div>
        <ion-icon name="ellipsis-horizontal" class="more-icon"></ion-icon>
      </div>
      <div (click)="goToDynamic(dynamic.id)">
      <div class="diary-content">
        {{ dynamic.get('content') }}
      </div>
      <div class="diary-image" *ngIf="dynamic.get('images')?.length > 0">
        <img [src]="dynamic.get('images')[0]" alt="动态图片">
      </div>
        </div>
      <div class="action-bar">
        <div class="action-item" (click)="toggleLike(dynamic)">
          <ion-icon 
            [name]="userInteractions[dynamic.id]?.liked ? 'heart' : 'heart-outline'" 
            [color]="userInteractions[dynamic.id]?.liked ? 'danger' : ''" 
            class="action-icon">
          </ion-icon>
          <span class="action-count">{{ dynamic.get('likeCount') || 0 }}</span>
        </div> 
        <div class="action-item" (click)="addComment(dynamic)">
          <ion-icon name="chatbubble-ellipses-outline" class="action-icon"></ion-icon>
          <span class="action-count">{{ dynamic.get('commentCount') || 0 }}</span>
        </div>
        <div class="action-item" (click)="shareDynamic(dynamic)">
          <ion-icon name="share-social-outline" class="action-icon"></ion-icon>
          <span class="action-text">{{ dynamic.get('shareCount') || 0 }}</span>
        </div>
      </div>
    </div>
  </div>
</ion-content>