<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab2"></ion-back-button>
    </ion-buttons>
    <ion-title>情绪发泄室</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="vent-content" (touchmove)="onTouchMove($event)" (touchend)="onTouchEnd()">
  <div class="bubble-container">
    <div *ngFor="let bubble of bubbles" 
         class="negative-bubble"
         [style.left]="bubble.x + 'px'"
         [style.top]="bubble.y + 'px'"
         [style.background]="bubble.color"
         [style.transform]="'scale(' + bubble.scale + ')'"
         [class.burst]="bubble.burst"
         (click)="onBubbleClick(bubble, $event)">
      {{ bubble.text }}
    </div>
    
    <!-- 粒子效果容器 -->
    <div #particlesContainer class="particles-container"></div>
  </div>

  <!-- 锤子图标 -->
  <div class="hammer" [style.left]="hammerX + 'px'" [style.top]="hammerY + 'px'">
    🔨
  </div>

  <!-- 在ion-content内部添加 -->
<ion-modal #keywordModal>
  <ng-template>
    <ion-header>
      <ion-toolbar>
        <ion-title>添加关键词</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="dismissModal()">关闭</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <ion-item>
        <!-- <ion-label position="floating">输入你想粉碎的负面情绪词</ion-label> -->
        <ion-input [(ngModel)]="newKeyword" placeholder="例如: 焦虑、压力"></ion-input>
      </ion-item>
      
      <ion-button expand="block" (click)="addKeyword()" class="ion-margin-top">
        添加关键词
      </ion-button>
      
      <ion-list *ngIf="customKeywords.length > 0">
        <ion-list-header>
          <ion-label>已添加的关键词</ion-label>
        </ion-list-header>
        <ion-item-sliding *ngFor="let keyword of customKeywords">
          <ion-item>
            <ion-label>{{ keyword }}</ion-label>
            <ion-icon slot="end" name="trash-outline" (click)="removeKeyword(keyword)"></ion-icon>
          </ion-item>
        </ion-item-sliding>
      </ion-list>
    </ion-content>
  </ng-template>
</ion-modal>

<!-- 在统计信息区域添加按钮 -->
<div class="stats">
  <div>已粉碎: {{ burstCount }} / {{ bubbles.length }}</div>
  <div>
    <ion-button (click)="resetBubbles()" fill="clear" size="small">
      <ion-icon name="refresh" slot="start"></ion-icon>
      重置
    </ion-button>
    <ion-button (click)="openKeywordModal()" fill="clear" size="small">
      <ion-icon name="add" slot="start"></ion-icon>
      添加关键词
    </ion-button>
  </div>
</div>
</ion-content>