<!-- 四阶段导航 -->
<div 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') {
            <svg class="icon" viewBox="0 0 512 512">
              <path fill="currentColor" d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" opacity=".3"/>
              <path fill="currentColor" d="M352 176L217.6 336 160 272"/>
            </svg>
          } @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>
</div>

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

  <!-- 错误 -->
  @if (error && !loading) {
    <div class="error-container">
      <svg class="icon error-icon" viewBox="0 0 512 512">
        <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm0 319.91a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.94v-.05a21.74 21.74 0 1143.44 0z"/>
      </svg>
      <p>{{ error }}</p>
      <button class="button outline" (click)="loadData()">重试</button>
    </div>
  }

  <!-- 项目详情内容 -->
  @if (!loading && !error && project) {
    <!-- 客户信息快速查看卡片 -->
    <div class="customer-quick-view">
      <div class="card">
        <div class="card-content">
          <div class="customer-info">
            <div class="avatar">
              @if (customer?.get('data')?.avatar) {
                <img [src]="customer?.get('data')?.avatar" alt="客户头像" />
              } @else {
                <svg class="icon avatar-icon" viewBox="0 0 512 512">
                  <path fill="currentColor" d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm0 60a60 60 0 11-60 60 60 60 0 0160-60zm0 336c-63.6 0-119.92-36.47-146.39-89.68C109.74 329.09 176.24 296 256 296s146.26 33.09 146.39 58.32C376.92 407.53 319.6 444 256 444z"/>
                </svg>
              }
            </div>
            <div class="info-text">
              <h3>{{ customer?.get('name') || '待设置' }}</h3>
              @if (customer && canViewCustomerPhone) {
                <p>{{ customer.get('mobile') }}</p>
                <p class="wechat-id">微信: {{ customer.get('data')?.wechat || customer.get('external_userid') }}</p>
              } @else if (customer) {
                <p class="info-limited">仅客服可查看联系方式</p>
              }
              <div class="tags">
                @if (customer?.get('source')) {
                  <span class="badge badge-primary">{{ customer?.get('source') }}</span>
                }
                <span class="badge" [class.badge-success]="project.get('status') === '进行中'" [class.badge-warning]="project.get('status') !== '进行中'">
                  {{ project.get('status') }}
                </span>
              </div>
              @if (!customer && canEdit && role === '客服') {
                <button class="btn btn-sm btn-primary" (click)="selectCustomer()">
                  选择客户
                </button>
              }
            </div>
          </div>
        </div>
      </div>
    </div>

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

  <!-- 项目底部卡片 -->
  @if (!loading && !error && project) {
    <app-project-bottom-card
      [project]="project"
      [groupChat]="groupChat"
      [currentUser]="currentUser"
      [cid]="cid"
      [issueCount]="issueCount"
      (showFiles)="showFiles()"
      (showMembers)="showMembers()"
      (showIssues)="showIssues()">
    </app-project-bottom-card>
  }

  <!-- 文件模态框 -->
  <app-project-files-modal
    [project]="project"
    [currentUser]="currentUser"
    [isVisible]="showFilesModal"
    (close)="closeFilesModal()">
  </app-project-files-modal>

  <!-- 成员模态框 -->
     <app-project-members-modal
     [project]="project"
     [groupChat]="groupChat"
     [currentUser]="currentUser"
     [cid]="cid"
     [isVisible]="showMembersModal"
     (close)="closeMembersModal()">
    </app-project-members-modal>

  <!-- 问题模态框 -->
  <app-project-issues-modal
    [project]="project"
    [currentUser]="currentUser"
    [isVisible]="showIssuesModal"
    (close)="closeIssuesModal()">
  </app-project-issues-modal>
</div>
