<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button (click)="goBack()" defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ project?.get('title') || '项目详情' }}</ion-title>
    <ion-buttons slot="end">
      <ion-button>
        <ion-icon name="ellipsis-vertical-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>

  <!-- 四阶段导航 -->
  <ion-toolbar class="stage-toolbar">
    <div class="stage-navigation">
      @for (stage of stages; track stage.id) {
        <div
          class="stage-item"
          [class.completed]="getStageStatus(stage.id) === 'completed'"
          [class.active]="getStageStatus(stage.id) === 'active'"
          [class.pending]="getStageStatus(stage.id) === 'pending'"
          (click)="switchStage(stage.id)">
          <div class="stage-circle">
            @if (getStageStatus(stage.id) === 'completed') {
              <ion-icon name="checkmark"></ion-icon>
            } @else {
              <span>{{ stage.number }}</span>
            }
          </div>
          <div class="stage-label">{{ stage.name }}</div>
        </div>
        @if (!$last) {
          <div class="stage-connector" [class.completed]="getStageStatus(stage.id) === 'completed'"></div>
        }
      }
    </div>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- 加载中 -->
  @if (loading) {
    <div class="loading-container">
      <ion-spinner name="crescent"></ion-spinner>
      <p>加载项目信息...</p>
    </div>
  }

  <!-- 错误 -->
  @if (error && !loading) {
    <div class="error-container">
      <ion-icon name="alert-circle-outline"></ion-icon>
      <p>{{ error }}</p>
      <ion-button (click)="loadData()" fill="outline">重试</ion-button>
    </div>
  }

  <!-- 项目详情内容 -->
  @if (!loading && !error && project) {
    <!-- 客户信息快速查看卡片 -->
    <div class="customer-quick-view">
      <ion-card>
        <ion-card-content>
          <div class="customer-info">
            <ion-avatar>
              @if (customer?.get('data')?.avatar) {
                <img [src]="customer?.get('data')?.avatar" alt="客户头像" />
              } @else {
                <ion-icon name="person-circle-outline"></ion-icon>
              }
            </ion-avatar>
            <div class="info-text">
              <h3>{{ customer?.get('name') }}</h3>
              @if (canViewCustomerPhone) {
                <p>{{ customer?.get('mobile') }}</p>
              }
              <div class="tags">
                <ion-badge color="primary">{{ customer?.get('source') }}</ion-badge>
                <ion-badge [color]="project.get('status') === '进行中' ? 'success' : 'warning'">
                  {{ project.get('status') }}
                </ion-badge>
              </div>
            </div>
          </div>
        </ion-card-content>
      </ion-card>
    </div>

    <!-- 子路由内容（各阶段组件） -->
    <div class="stage-content">
      <router-outlet></router-outlet>
    </div>
  }
</ion-content>
