<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>mine</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <div class="login-container">
    @if(currentUser?.id) {
      <!-- 已登录状态 -->
      <div class="user-card">
        <ion-avatar class="user-avatar">
          <img [src]="currentUser?.get('avatar')?.url || 'assets/icon/default-avatar.png'" />
        </ion-avatar>
        <h2 class="username">{{ currentUser?.get("username") || "未设置用户名" }}</h2>
        
        <!-- 用户信息表单 -->
        <form [formGroup]="profileForm" (ngSubmit)="updateProfile()">
          <ion-item>
            <ion-label position="floating">用户名</ion-label>
            <ion-input 
              type="text" 
              formControlName="username"
              required></ion-input>
          </ion-item>
          <ion-note *ngIf="profileForm.get('username')?.invalid && (profileForm.get('username')?.dirty || profileForm.get('username')?.touched)" color="danger">
            @if(profileForm.get('username')?.errors?.['required']) {
              <span>用户名不能为空</span>
            }
          </ion-note>

          <ion-item>
            <ion-label position="floating">邮箱</ion-label>
            <ion-input 
              type="email" 
              formControlName="email"></ion-input>
          </ion-item>
          <ion-note *ngIf="profileForm.get('email')?.invalid && (profileForm.get('email')?.dirty || profileForm.get('email')?.touched)" color="danger">
            @if(profileForm.get('email')?.errors?.['email']) {
              <span>请输入有效的邮箱地址</span>
            }
          </ion-note>

          <ion-item>
            <ion-label position="floating">电话</ion-label>
            <ion-input 
              type="tel" 
              formControlName="phone"></ion-input>
          </ion-item>

          <ion-button expand="block" type="submit" [disabled]="!profileForm.valid || isLoading">
            <ion-icon slot="start" name="save-outline"></ion-icon>
            更新资料
          </ion-button>
        </form>

        <ion-button expand="block" color="danger" (click)="logout()">
          <ion-icon slot="start" name="log-out-outline"></ion-icon>
          退出登录
        </ion-button>
      </div>
    } @else {
      <!-- 未登录状态 -->
      <div class="login-card">
        <ion-avatar class="login-avatar">
          <img src="assets/icon/default-avatar.png" />
        </ion-avatar>
        <h2 class="welcome-text">{{ isLoginMode ? '欢迎登录' : '用户注册' }}</h2>

        <form (ngSubmit)="isLoginMode ? onLogin() : onRegister()">
          <ion-item>
            <ion-label position="floating">用户名</ion-label>
            <ion-input 
              type="text" 
              [(ngModel)]="credentials.username" 
              name="username"
              required
              minlength="3"
              maxlength="20"
              #usernameInput="ngModel"></ion-input>
          </ion-item>
          <ion-note *ngIf="usernameInput.invalid && (usernameInput.dirty || usernameInput.touched)" color="danger">
            @if(usernameInput.errors?.['required']) {
              <span>用户名不能为空</span>
            }
            @if(usernameInput.errors?.['minlength']) {
              <span>用户名至少3个字符</span>
            }
            @if(usernameInput.errors?.['maxlength']) {
              <span>用户名最多20个字符</span>
            }
          </ion-note>

          <ion-item>
            <ion-label position="floating">密码</ion-label>
            <ion-input 
              type="password" 
              [(ngModel)]="credentials.password" 
              name="password"
              required
              minlength="6"
              #passwordInput="ngModel"></ion-input>
          </ion-item>
          <ion-note *ngIf="passwordInput.invalid && (passwordInput.dirty || passwordInput.touched)" color="danger">
            @if(passwordInput.errors?.['required']) {
              <span>密码不能为空</span>
            }
            @if(passwordInput.errors?.['minlength']) {
              <span>密码至少6个字符</span>
            }
          </ion-note>

          @if(!isLoginMode) {
            <ion-item>
              <ion-label position="floating">确认密码</ion-label>
              <ion-input 
                type="password" 
                [(ngModel)]="credentials.confirmPassword" 
                name="confirmPassword"
                required
                #confirmPasswordInput="ngModel"></ion-input>
            </ion-item>
            <ion-note *ngIf="(confirmPasswordInput.invalid && (confirmPasswordInput.dirty || confirmPasswordInput.touched)) || 
                            (credentials.password && credentials.confirmPassword && credentials.password !== credentials.confirmPassword)" 
                      color="danger">
              @if(confirmPasswordInput.errors?.['required']) {
                <span>请确认密码</span>
              }
              @if(credentials.password && credentials.confirmPassword && credentials.password !== credentials.confirmPassword) {
                <span>两次密码不一致</span>
              }
            </ion-note>
          }

          <ion-button 
            expand="block" 
            type="submit"
            [disabled]="isLoading || 
                       (isLoginMode ? (!credentials.username || !credentials.password) : 
                                     (!credentials.username || !credentials.password || !credentials.confirmPassword || 
                                      credentials.password !== credentials.confirmPassword))">
            <ion-icon slot="start" [name]="isLoginMode ? 'log-in-outline' : 'person-add-outline'"></ion-icon>
            {{ isLoginMode ? '登录' : '注册' }}
          </ion-button>
        </form>

        <ion-button 
          expand="block" 
          fill="clear" 
          (click)="toggleAuthMode()">
          {{ isLoginMode ? '没有账号？立即注册' : '已有账号？立即登录' }}
        </ion-button>

        <div class="divider">
          <span class="divider-line"></span>
          <span class="divider-text">或</span>
          <span class="divider-line"></span>
        </div>
        
        <ion-button expand="block" fill="outline">
          <ion-icon slot="start" name="logo-google"></ion-icon>
          Google登录
        </ion-button>
        
        <ion-button expand="block" fill="outline">
          <ion-icon slot="start" name="logo-wechat"></ion-icon>
          微信登录
        </ion-button>
      </div>
    }
  </div>
</ion-content>