<div>
  <app-header [current_page]="'appeal'" height="200px" background_image="/public/img/backgrounds/staff.png"
              [overlay_gradient]="0.5">
    <div class="title" header-content>
      <h1>Discord Appeal</h1>
    </div>
  </app-header>
  <main>
    <app-full-size>
      <section class="darkmodeSection appeal-container">
        <div class="form-container">
          <div class="pages">
            @if (currentPageIndex === 0) {
              <section class="formPage">
                <img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
                <h1>Discord Appeal</h1>
                <p>We aim to respond within 48 hours.</p>
                <button mat-raised-button (click)="nextPage()">
                  Next
                </button>
              </section>
            }

            @if (currentPageIndex === 1) {
              <section class="formPage">
                <div class="description">
                  <p>You are logged in as <strong>{{ authService.username() }}</strong>. If this is the correct
                    account please continue</p>
                  <br>
                  <p><strong>Notice: </strong> Submitting an appeal is <strong>not</strong> an instant process.
                    We will investigate the punishment you are appealing and respond within 48 hours.</p>
                  <p style="font-style: italic;">Appeals that seem to have been made with
                    little to no effort will be automatically denied.</p>
                </div>
                <button mat-raised-button (click)="nextPage()" [disabled]="authService.username() == null">
                  I, {{ authService.username() }}, understand and agree
                </button>
              </section>
            }

            @if (currentPageIndex === 2) {
              <section class="formPage">
                <div class="description">
                  <p>Please enter your Discord ID below.</p>
                  <p>You can find your Discord ID by going to User settings -> Advanced -> Developer Mode and turning it
                    on</p>
                  <p>With Developer Mode on in Discord click your profile in the bottom left and click Copy User ID</p>
                  <p>We use this to find your punishment on our Discord server.</p>
                </div>
                <mat-form-field appearance="fill">
                  <mat-label>Discord Id</mat-label>
                  <input matInput placeholder="Discord ID" [(ngModel)]="discordId"
                         minlength="17" maxlength="18" pattern="^[0-9]+$">
                </mat-form-field>
                <button mat-raised-button (click)="checkPunishment()"
                        [disabled]="punishmentLoading || authService.username() == null">
                  Check punishments
                </button>
              </section>
            }

            @if (currentPageIndex === 3) {
              @if (bannedUser == null) {
                <section class="formPage">
                  <div class="description">
                    <p>We were unable to find your punishment on our Discord server.</p>
                  </div>
                </section>
              } @else if (!bannedUser.isBanned || bannedUser.bannedUser == null) {
                <section class="formPage">
                  <div class="description">
                    <p>Your discord account is not banned on our Discord server.</p>
                  </div>
                </section>
              } @else {
                <section class="formPage">
                  <div class="description">
                    <img ngSrc="{{ bannedUser.bannedUser.avatarUrl }}" title="{{ bannedUser.bannedUser.name }}"
                         width="128" height="128" class="discord-avatar"
                         alt="Avatar for Discord user {{ bannedUser.bannedUser.name }}">
                    <p style="text-align: center">{{ bannedUser.bannedUser.name }}</p>
                    <p style="margin-top: 30px;">Your punishment is: <strong>{{ bannedUser.bannedUser.reason }}</strong>
                    </p>
                    <button style="display: block; margin-top: 30px;" class="centered" mat-raised-button
                            (click)="nextPage()"
                            [disabled]="authService.username() == null">
                      This is my punishment, continue to appeal
                    </button>
                  </div>
                </section>)
              }
            }
            @if (currentPageIndex >= 4) {
              <form [formGroup]="form">
                @if (currentPageIndex === 4) {
                  <section class="formPage">
                    <div class="description">
                      <h2>Please enter your email.</h2>
                      <p style="font-style: italic">It does not have to be your minecraft email. You will have to verify
                        it</p>
                      <mat-form-field appearance="fill" style="width: 100%;">
                        <mat-label>Email</mat-label>
                        <input matInput
                               formControlName="email"
                               placeholder="Email"
                               type="email">
                        @if (form.controls.email.invalid && form.controls.email.touched) {
                          <mat-error>
                            @if (form.controls.email.errors?.['required']) {
                              Email is required
                            } @else if (form.controls.email.errors?.['email']) {
                              Please enter a valid email address
                            }
                          </mat-error>
                        }
                      </mat-form-field>
                      @if (emailIsValid()) {
                        <div class="valid-email">
                          <ng-container matSuffix>
                            <mat-icon>check</mat-icon>
                            <span>You have validated your email previously, and can continue to the next page!</span>
                          </ng-container>
                        </div>
                      }
                    </div>
                    <button mat-raised-button (click)="validateMailOrNextPage()"
                            [disabled]="form.controls.email.invalid">
                      Next
                    </button>
                  </section>
                }
                @if (currentPageIndex === 5) {
                  <section class="formPage">
                    <div class="description">
                      <h2>Why should your ban be reduced or removed?</h2>
                      <p style="font-style: italic">Please take your time writing this, we're more likely to accept an
                        appeal if effort was put into it.</p>
                      <mat-form-field appearance="fill" style="width: 100%;">
                        <mat-label>Reason</mat-label>
                        <textarea matInput formControlName="appeal" placeholder="Reason" rows="6"></textarea>
                        @if (form.controls.appeal.invalid && form.controls.appeal.touched) {
                          <mat-error>
                            @if (form.controls.appeal.errors?.['required']) {
                              Reason is required
                            } @else if (form.controls.appeal.errors?.['minlength']) {
                              Reason must be at least 10 characters
                            }
                          </mat-error>
                        }
                      </mat-form-field>
                    </div>
                    <button mat-raised-button (click)="onSubmit()" [disabled]="formSubmitting || form.invalid">
                      Submit Appeal
                    </button>
                  </section>
                }
              </form>
            }
          </div>

          <!-- Navigation dots -->
          @if (totalPages.length > 1) {
            <div class="form-navigation">
              <button mat-icon-button class="nav-button" (click)="previousPage()" [disabled]="isFirstPage()">
                <mat-icon>navigate_before</mat-icon>
              </button>

              @for (i of totalPages; track i) {
                <div
                  class="nav-dot"
                  [class.active]="i === currentPageIndex"
                  (click)="goToPage(i)">
                </div>
              }

              <button mat-icon-button class="nav-button" (click)="nextPage()" [disabled]="isLastPage()">
                <mat-icon>navigate_next</mat-icon>
              </button>
            </div>
          }
        </div>
      </section>
    </app-full-size>
  </main>
</div>
