<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button (click)="goBack()" defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>客户画像</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <!-- 加载中 -->
  @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 && contactInfo) {
    <div class="contact-container">
      <!-- 头部：头像 + 基础信息 -->
      <ion-card class="header-card">
        <ion-card-content>
          <div class="customer-header">
            <ion-avatar class="customer-avatar">
              @if (profile.basic.avatar) {
                <img [src]="profile.basic.avatar" alt="头像" />
              } @else {
                <ion-icon name="person-circle-outline"></ion-icon>
              }
            </ion-avatar>
            <div class="customer-info">
              <h2>{{ profile.basic.name }}</h2>
              <div class="source-badge">
                <ion-icon [name]="getSourceIcon(profile.basic.source)"></ion-icon>
                <span>{{ profile.basic.source }}</span>
              </div>
            </div>
          </div>

          <!-- 标签 -->
          @if (profile.basic.tags.length > 0) {
            <div class="tags-container">
              @for (tag of profile.basic.tags; track tag) {
                <ion-chip color="primary" outline="true">
                  <ion-label>{{ tag }}</ion-label>
                </ion-chip>
              }
            </div>
          }
        </ion-card-content>
      </ion-card>

      <!-- 基础信息 -->
      <ion-card class="basic-info-card">
        <ion-card-header>
          <ion-card-title>
            <ion-icon name="information-circle-outline"></ion-icon>
            基础信息
          </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <ion-list lines="none">
            <ion-item>
              <ion-icon name="call-outline" slot="start"></ion-icon>
              <ion-label>
                <p>手机号</p>
                <h3>{{ profile.basic.mobile }}</h3>
              </ion-label>
            </ion-item>
            <ion-item>
              <ion-icon name="logo-wechat" slot="start"></ion-icon>
              <ion-label>
                <p>微信号</p>
                <h3>{{ profile.basic.wechat || '未绑定' }}</h3>
              </ion-label>
            </ion-item>
            @if (!canViewSensitiveInfo) {
              <div class="permission-notice">
                <ion-icon name="lock-closed-outline"></ion-icon>
                <span>仅客服和组长可查看完整联系方式</span>
              </div>
            }
          </ion-list>
        </ion-card-content>
      </ion-card>

      <!-- 客户画像 -->
      <ion-card class="preferences-card">
        <ion-card-header>
          <ion-card-title>
            <ion-icon name="color-palette-outline"></ion-icon>
            客户画像
          </ion-card-title>
        </ion-card-header>
        <ion-card-content>
          <div class="preference-grid">
            <!-- 风格偏好 -->
            <div class="preference-item">
              <div class="preference-label">
                <ion-icon name="brush-outline"></ion-icon>
                <span>风格偏好</span>
              </div>
              <div class="preference-value">
                @if (profile.preferences.style.length > 0) {
                  @for (style of profile.preferences.style; track style) {
                    <ion-badge color="tertiary">{{ style }}</ion-badge>
                  }
                } @else {
                  <span class="empty">未设置</span>
                }
              </div>
            </div>

            <!-- 预算范围 -->
            <div class="preference-item">
              <div class="preference-label">
                <ion-icon name="cash-outline"></ion-icon>
                <span>预算范围</span>
              </div>
              <div class="preference-value">
                <ion-badge color="success">
                  {{ formatBudget(profile.preferences.budget) }}
                </ion-badge>
              </div>
            </div>

            <!-- 色彩氛围 -->
            @if (profile.preferences.colorAtmosphere) {
              <div class="preference-item">
                <div class="preference-label">
                  <ion-icon name="sunny-outline"></ion-icon>
                  <span>色彩氛围</span>
                </div>
                <div class="preference-value">
                  <ion-badge color="warning">
                    {{ profile.preferences.colorAtmosphere }}
                  </ion-badge>
                </div>
              </div>
            }

            <!-- 需求类型 -->
            @if (profile.preferences.demandType) {
              <div class="preference-item">
                <div class="preference-label">
                  <ion-icon name="newspaper-outline"></ion-icon>
                  <span>需求类型</span>
                </div>
                <div class="preference-value">
                  <ion-badge color="medium">
                    {{ profile.preferences.demandType }}
                  </ion-badge>
                </div>
              </div>
            }
          </div>
        </ion-card-content>
      </ion-card>

      <!-- 所在群聊 -->
      @if (profile.groups.length > 0) {
        <ion-card class="groups-card">
          <ion-card-header>
            <ion-card-title>
              <ion-icon name="chatbubbles-outline"></ion-icon>
              所在群聊
            </ion-card-title>
            <ion-card-subtitle>点击可跳转到群聊</ion-card-subtitle>
          </ion-card-header>
          <ion-card-content>
            <div class="groups-grid">
              @for (item of profile.groups; track item.groupChat.id) {
                <div
                  class="group-item"
                  (click)="navigateToGroupChat(item.groupChat.get('chat_id'))">
                  <div class="group-info">
                    <ion-icon name="people-circle-outline"></ion-icon>
                    <div class="group-text">
                      <h4>{{ item.groupChat.get('name') }}</h4>
                      @if (item.project) {
                        <p class="project-name">
                          <ion-icon name="briefcase-outline"></ion-icon>
                          {{ item.project.get('title') }}
                        </p>
                      } @else {
                        <p class="no-project">暂无关联项目</p>
                      }
                    </div>
                  </div>
                  <ion-icon name="chevron-forward-outline" class="arrow"></ion-icon>
                </div>
              }
            </div>
          </ion-card-content>
        </ion-card>
      }

      <!-- 历史项目 -->
      @if (profile.projects.length > 0) {
        <ion-card class="projects-card">
          <ion-card-header>
            <ion-card-title>
              <ion-icon name="folder-outline"></ion-icon>
              历史项目
            </ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <ion-list lines="full">
              @for (project of profile.projects; track project.id) {
                <ion-item
                  button
                  (click)="navigateToProject(project)"
                  detail="true">
                  <ion-label>
                    <h2>{{ project.get('title') }}</h2>
                    <p>
                      <ion-badge [class]="getProjectStatusClass(project.get('status'))">
                        {{ project.get('status') }}
                      </ion-badge>
                      <span style="margin-left: 8px;">
                        {{ project.get('currentStage') }}
                      </span>
                    </p>
                    <p class="ion-text-wrap">
                      更新时间: {{ formatDate(project.get('updatedAt')) }}
                    </p>
                  </ion-label>
                  <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
                </ion-item>
              }
            </ion-list>
          </ion-card-content>
        </ion-card>
      }

      <!-- 跟进记录时间线 -->
      @if (profile.followUpRecords.length > 0) {
        <ion-card class="timeline-card">
          <ion-card-header>
            <ion-card-title>
              <ion-icon name="time-outline"></ion-icon>
              跟进记录
            </ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <div class="timeline">
              @for (record of profile.followUpRecords; track $index) {
                <div class="timeline-item">
                  <div class="timeline-dot">
                    <ion-icon [name]="getFollowUpIcon(record.type)"></ion-icon>
                  </div>
                  <div class="timeline-content">
                    <div class="timeline-time">{{ formatDate(record.time) }}</div>
                    <div class="timeline-text">
                      <strong>{{ record.operator }}</strong>
                      <p>{{ record.content }}</p>
                    </div>
                  </div>
                </div>
              }
            </div>
          </ion-card-content>
        </ion-card>
      }
    </div>
  }
</ion-content>
