@if (loading) {
  <div class="flex min-h-[20rem] w-full items-center justify-center px-4 py-8 text-sm text-text-secondary">
    {{ 'Auth.SSO_BIND.LOADING' | translate: { Default: 'Loading SSO account information...' } }}
  </div>
} @else if (loadError) {
  <div class="flex w-full max-w-md flex-col gap-4 px-2 py-4">
    <div class="rounded-2xl border border-divider-regular bg-background-default-subtle px-5 py-5">
      <div class="text-base font-semibold text-text-primary">
        {{ 'Auth.SSO_BIND.EXPIRED_TITLE' | translate: { Default: 'Binding Session Expired' } }}
      </div>
      <p class="mt-2 text-sm leading-6 text-text-secondary whitespace-pre-line">
        {{ loadError }}
      </p>
    </div>

    <button z-button zFull type="button" class="h-10 text-sm font-medium" (click)="navigateToLogin()">
      {{ 'Auth.SSO_BIND.BACK_TO_LOGIN' | translate: { Default: 'Back to Sign In' } }}
    </button>
  </div>
} @else if (challenge) {
  <div class="flex w-full max-w-md flex-col gap-5 px-2 py-4">
    <div class="flex flex-col items-center gap-3 px-5 py-3 text-center">
      @if (challenge.avatarUrl) {
        <img
          class="h-16 w-16 rounded-full border border-divider-regular object-cover"
          [src]="challenge.avatarUrl"
          [alt]="providerLabel(challenge.provider, challenge.displayName)"
        />
      } @else {
        <div
          class="flex h-16 w-16 items-center justify-center rounded-full border border-divider-regular bg-components-card-bg text-base font-semibold text-text-primary"
        >
          {{ providerLabel(challenge.provider, challenge.displayName).slice(0, 1) }}
        </div>
      }

      <div class="text-lg font-semibold text-text-primary">
        {{ challenge.displayName || ('Auth.SSO_BIND.DEFAULT_DISPLAY_NAME' | translate: { Default: 'SSO Account' }) }}
      </div>
    </div>

    @if (mode === 'choice') {
      <div class="flex flex-col gap-3">
        <button z-button zFull type="button" class="h-10 text-sm font-medium" (click)="openExistingAccountForm()">
          {{ 'Auth.SSO_BIND.LOGIN_EXISTING' | translate: { Default: 'Sign In to Existing Account' } }}
        </button>

        <button
          z-button
          zFull
          zType="outline"
          type="button"
          class="h-10 rounded-lg border border-divider-regular text-sm font-medium text-text-primary transition-colors hover:border-divider-deep hover:bg-hover-bg"
          (click)="openRegister()"
        >
          {{ 'Auth.SSO_BIND.REGISTER_NEW' | translate: { Default: 'Create New Account' } }}
        </button>
      </div>
    } @else {
      <form [formGroup]="form" (ngSubmit)="submit()" class="flex flex-col gap-4">
        <div>
          <label for="sso-bind-user-name" class="mb-2 block text-base font-medium text-text-primary">
            {{ 'Auth.SSO_BIND.ACCOUNT' | translate: { Default: 'Xpert account' } }}
          </label>
          <input
            z-input
            id="sso-bind-user-name"
            type="text"
            name="username"
            autocomplete="username"
            formControlName="userName"
            [placeholder]="'Auth.SSO_BIND.ACCOUNT_PLACEHOLDER' | translate: { Default: 'Xpert username / email' }"
            [attr.aria-invalid]="userName.invalid && userName.dirty"
            required
          />
          @if (userName.invalid && userName.dirty) {
            <p class="mb-0 mt-1.5 text-sm text-text-destructive">
              {{ 'Auth.SSO_BIND.ACCOUNT_REQUIRED' | translate: { Default: 'Enter your Xpert username or email.' } }}
            </p>
          }
        </div>

        <div>
          <label for="sso-bind-password" class="mb-2 block text-base font-medium text-text-primary">
            {{ 'AUTH.LOGIN.PASSWORD' | translate: { Default: 'Password' } }}
          </label>
          <input
            z-input
            id="sso-bind-password"
            type="password"
            name="password"
            autocomplete="current-password"
            formControlName="password"
            [placeholder]="'Auth.SSO_BIND.PASSWORD_PLACEHOLDER' | translate: { Default: 'Xpert account password' }"
            [attr.aria-invalid]="password.invalid && password.dirty"
            required
          />
          @if (password.invalid && password.dirty) {
            <p class="mb-0 mt-1.5 text-sm text-text-destructive">
              {{ 'Auth.SSO_BIND.PASSWORD_REQUIRED' | translate: { Default: 'Enter your Xpert account password.' } }}
            </p>
          }
        </div>

        @if (submitError) {
          <div
            class="rounded-2xl border border-divider-regular bg-background-default-subtle px-4 py-3 text-sm text-text-secondary whitespace-pre-line"
          >
            {{ submitError }}
          </div>
        }

        <div class="flex flex-col gap-3">
          <button
            z-button
            zFull
            type="submit"
            class="h-10 text-sm font-medium"
            [zLoading]="submitting"
            [disabled]="submitting"
          >
            {{ 'Auth.SSO_BIND.SUBMIT' | translate: { Default: 'Bind and Sign In' } }}
          </button>

          <button
            z-button
            zFull
            zType="outline"
            type="button"
            class="h-10 rounded-lg border border-divider-regular text-sm font-medium text-text-primary transition-colors hover:border-divider-deep hover:bg-hover-bg"
            (click)="mode = 'choice'"
          >
            {{ 'Auth.SSO_BIND.BACK' | translate: { Default: 'Back' } }}
          </button>
        </div>
      </form>
    }
  </div>
}