<ion-header>
  <ion-toolbar >
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab2" color="light"></ion-back-button>
    </ion-buttons>
    <ion-title color="light">情绪发泄室</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-modal #keywordModal>
    <ng-template>
      <ion-header>
        <ion-toolbar style="--background: #FF8A65; ">
          <ion-title>添加关键词</ion-title>
          <ion-buttons slot="end">
            <ion-button (click)="dismissModal()" color="light">关闭</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding modal-content">
        <ion-item>
          <ion-input [(ngModel)]="newKeyword" placeholder="例如: 焦虑、压力" class="custom-input"></ion-input>
        </ion-item>
        
        <ion-button expand="block" (click)="addKeyword()" class="add-button ion-margin-top">
          添加关键词
        </ion-button>
        
        <ion-list *ngIf="customKeywords.length > 0">
          <ion-list-header class="list-header">
            <ion-label>已添加的关键词</ion-label>
          </ion-list-header>
          <ion-item-sliding *ngFor="let keyword of customKeywords">
            <ion-item class="keyword-item">
              <ion-label>{{ keyword }}</ion-label>
              <ion-icon slot="end" name="trash-outline" (click)="removeKeyword(keyword)" class="delete-icon"></ion-icon>
            </ion-item>
          </ion-item-sliding>
        </ion-list>
      </ion-content>
    </ng-template>
  </ion-modal>

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