<ion-content [fullscreen]="true" class="ion-padding profile-content">
  <div class="container">
    <!-- 顶部个人资料区域 -->
    <div class="profile-section">
      <div class="profile-bg"></div>
      <ion-avatar class="profile-avatar">
        <img src="assets/user.jpg" alt="">
      </ion-avatar>
      
      <ion-text class="profile-name">
        @if(currentUser?.id) {
          {{currentUser?.get("username")}}
        } @else {
          欢迎使用明律通
        }
      </ion-text>
      
      <ion-text class="profile-email">
        @if(currentUser?.id) {
          {{currentUser?.get('email') || currentUser?.get('username') + '@example.com'}}
        } @else {
          AI法律顾问平台
        }
      </ion-text>
      
      <!-- 登录状态显示 -->
      @if(currentUser?.id) {
      <div class="user-actions">
        <ion-button fill="outline" class="btn-outline" (click)="edit()">
          编辑资料
        </ion-button>
      </div>
      }
      
      <!-- 未登录状态显示 -->
      @if(!currentUser?.id) {
      <div class="login-form">
        <ion-item class="login-input">
          <ion-input 
            type="text" 
            placeholder="用户名" 
            [(ngModel)]="username"
          ></ion-input>
        </ion-item>
        
        <ion-item class="login-input">
          <ion-input 
            type="password" 
            placeholder="密码" 
            [(ngModel)]="password"
          ></ion-input>
        </ion-item>
        
        <ion-button class="btn-primary" expand="block" (click)="login()">
          登录
        </ion-button>
        <ion-button expand="block" color="secondary" (click)="openRegisterModal()">注册</ion-button>
      </div>
      }
    </div>
    
    <!-- 功能入口网格 (登录后显示) -->
    @if(currentUser?.id) {
    <div class="features-section">
      <div class="section-title">
        <ion-text>常用功能</ion-text>
        <ion-button fill="clear" size="small">管理</ion-button>
      </div>
      <div class="features-grid">
        <ion-card class="feature-card">
          <ion-icon name="document-text-outline" class="feature-icon"></ion-icon>
          <ion-text class="feature-title">我的文书</ion-text>
          <ion-text class="feature-desc">查看和管理您的法律文书</ion-text>
        </ion-card>
        
        <ion-card class="feature-card">
          <ion-icon name="star-outline" class="feature-icon"></ion-icon>
          <ion-text class="feature-title">收藏夹</ion-text>
          <ion-text class="feature-desc">您收藏的法律知识和案例</ion-text>
        </ion-card>
      </div>
    </div>
    }
    
    <!-- 律师入驻区域 (登录后显示) -->
    @if(currentUser?.id) {
    <ion-card class="lawyer-section">
      <div class="lawyer-header">
        <ion-text class="lawyer-title">律师入驻</ion-text>
        <ion-badge class="lawyer-status" color="primary">未入驻</ion-badge>      
      </div> 
      <ion-button class="lawyer-btn" id="apply-lawyer">
         立即申请入驻
      </ion-button>    
    </ion-card>
    }
    
    <!-- 设置区域 (登录后显示) -->
    @if(currentUser?.id) {
    <div class="settings-section">
      <ion-list class="settings-list">
        <ion-item class="setting-item" button detail>
          <ion-icon name="shield-checkmark-outline" slot="start" class="setting-icon"></ion-icon>
          <ion-label class="setting-content">
            <h3 class="setting-title">账户安全</h3>
            <p class="setting-desc">修改密码、设置密保</p>
          </ion-label>
          <ion-icon name="chevron-forward-outline" slot="end" class="setting-arrow"></ion-icon>
        </ion-item>
        
        <ion-item class="setting-item" button detail>
          <ion-icon name="notifications-outline" slot="start" class="setting-icon"></ion-icon>
          <ion-label class="setting-content">
            <h3 class="setting-title">消息通知</h3>
            <p class="setting-desc">设置接收通知类型</p>
          </ion-label>
          <ion-icon name="chevron-forward-outline" slot="end" class="setting-arrow"></ion-icon>
        </ion-item>
        
        <ion-item class="setting-item" button detail>
          <ion-icon name="settings-outline" slot="start" class="setting-icon"></ion-icon>
          <ion-label class="setting-content">
            <h3 class="setting-title">通用设置</h3>
            <p class="setting-desc">消息提醒、隐私设置</p>
          </ion-label>
          <ion-icon name="chevron-forward-outline" slot="end" class="setting-arrow"></ion-icon>
        </ion-item>
        
        <ion-item class="setting-item" button detail>
          <ion-icon name="help-circle-outline" slot="start" class="setting-icon"></ion-icon>
          <ion-label class="setting-content">
            <h3 class="setting-title">帮助中心</h3>
            <p class="setting-desc">常见问题与解答</p>
          </ion-label>
          <ion-icon name="chevron-forward-outline" slot="end" class="setting-arrow"></ion-icon>
        </ion-item>
        
        <ion-item class="setting-item" button detail (click)="logout()">
          <ion-icon name="log-out-outline" slot="start" class="setting-icon"></ion-icon>
          <ion-label class="setting-content">
            <h3 class="setting-title">退出登录</h3>
            <p class="setting-desc">安全退出当前账号</p>
          </ion-label>
          <ion-icon name="chevron-forward-outline" slot="end" class="setting-arrow"></ion-icon>
        </ion-item>
      </ion-list>
    </div>
    }
    
    <div class="footer">
      <ion-text>© 2025 明律通 - AI法律顾问平台</ion-text>
    </div>
  </div>
</ion-content>