<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button default-href="/tabs/tab1" text=""></ion-back-button>
    </ion-buttons>
    <ion-title>每日签到</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 签到卡片 -->
  <div class="sign-in-card">
    <div class="date-info">
      <h2>{{ formatDate(currentDate) }}</h2>
      <div class="streak-info">
        <ion-icon name="flame"></ion-icon>
        <span>已连续签到 {{ currentStreak }} 天</span>
      </div>
    </div>

    <div class="sign-in-button" [class.signed]="todaySigned" (click)="signIn()">
      <ion-icon [name]="todaySigned ? 'checkmark-circle' : 'hand-right'"></ion-icon>
      <span>{{ todaySigned ? '已签到' : '立即签到' }}</span>
    </div>
  </div>

  <!-- 签到统计 -->
  <div class="stats-card">
    <div class="stat-item">
      <div class="stat-value">{{ currentStreak }}</div>
      <div class="stat-label">连续签到</div>
    </div>
    <div class="stat-divider"></div>
    <div class="stat-item">
      <div class="stat-value">{{ totalDays }}</div>
      <div class="stat-label">总签到天数</div>
    </div>
  </div>

  <!-- 奖励列表 -->
  <div class="rewards-section">
    <h3>签到奖励</h3>
    <div class="rewards-grid">
      @for(reward of rewards; track reward.days) {
      <div class="reward-item" [class.claimed]="reward.claimed"
        [class.available]="!reward.claimed && currentStreak >= reward.days" (click)="claimReward(reward)">
        <div class="day-count">{{ reward.days }}天</div>
        <div class="coin-amount">
          <ion-icon name="medal"></ion-icon>
          {{ reward.coins }}
        </div>
        <div class="claim-status">
          @if(reward.claimed) {
          <ion-icon name="checkmark-circle"></ion-icon>
          } @else if(currentStreak >= reward.days) {
          <span>可领取</span>
          } @else {
          <span>未达成</span>
          }
        </div>
      </div>
      }
    </div>
  </div>

  <!-- 签到规则 -->
  <div class="rules-section">
    <h3>签到规则</h3>
    <div class="rules-content">
      <p>1. 每日签到可获得5个积分</p>
      <p>2. 连续签到可获得额外奖励</p>
      <p>3. 断签将重置连续签到天数</p>
      <p>4. 积分可用于兑换精美礼品</p>
    </div>
  </div>
</ion-content>