<div class="min-h-screen bg-deep-blue flex items-center justify-center">
  <div class="modal-card max-w-md w-full bg-deep-blue rounded-lg shadow-xl p-6 relative">
    <button
      (click)="closeDialog.emit()"
      class="absolute top-4 right-4 text-text-secondary hover:text-white transition-colors"
      aria-label="Dialog schließen"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M6 18L18 6M6 6l12 12"
        />
      </svg>
    </button>

    <h2 class="modal-heading text-center">Konto erstellen</h2>

    @if (errorMessage()) {
      <div class="bg-accent-red text-white p-4 rounded mb-4">
        {{ errorMessage() }}
      </div>
    }

    <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="space-y-4">
      <div>
        <label for="email" class="text-text-secondary text-sm font-medium mb-1 block">E-Mail</label>
        <input
          id="email"
          type="email"
          formControlName="email"
          class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
          [ngClass]="{ 'border-accent-red': fieldErrors()['email'] }"
          placeholder="Gib deine E-Mail-Adresse ein"
        />

        @if (fieldErrors()['email']) {
          <div class="text-accent-red mt-1 text-sm">
            {{ fieldErrors()['email'] }}
          </div>
        }

        @if (!fieldErrors()['email'] && form['email'].touched && form['email'].errors) {
          <div class="text-accent-red mt-1 text-sm">
            @if (form['email'].errors['required']) {
              <span>E-Mail ist erforderlich</span>
            }
            @if (form['email'].errors['email']) {
              <span>Bitte gib eine gültige E-Mail-Adresse ein</span>
            }
          </div>
        }
      </div>

      <div>
        <label for="username" class="text-text-secondary text-sm font-medium mb-1 block"
          >Benutzername</label
        >
        <input
          id="username"
          type="text"
          formControlName="username"
          class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
          [ngClass]="{ 'border-accent-red': fieldErrors()['username'] }"
          placeholder="Wähle einen Benutzernamen"
        />

        @if (fieldErrors()['username']) {
          <div class="text-accent-red mt-1 text-sm">
            {{ fieldErrors()['username'] }}
          </div>
        }

        @if (!fieldErrors()['username'] && form['username'].touched && form['username'].errors) {
          <div class="text-accent-red mt-1 text-sm">
            @if (form['username'].errors['required']) {
              <span>Benutzername ist erforderlich</span>
            }
            @if (form['username'].errors['minlength']) {
              <span>Benutzername muss mindestens 3 Zeichen haben</span>
            }
          </div>
        }
      </div>

      <div>
        <label for="password" class="text-text-secondary text-sm font-medium mb-1 block"
          >Passwort</label
        >
        <input
          id="password"
          type="password"
          formControlName="password"
          class="w-full px-4 py-2.5 bg-deep-blue-light/50 text-white rounded-lg my-1 border border-deep-blue-light/30 focus:border-emerald/50 focus:ring-1 focus:ring-emerald/50 outline-none transition-all duration-200"
          placeholder="Erstelle ein Passwort"
        />

        @if (form['password'].touched && form['password'].errors) {
          <div class="text-accent-red mt-1 text-sm">
            @if (form['password'].errors['required']) {
              <span>Passwort ist erforderlich</span>
            }
            @if (form['password'].errors['minlength']) {
              <span>Passwort muss mindestens 6 Zeichen haben</span>
            }
          </div>
        }
      </div>

      <div class="pt-2">
        <button
          type="submit"
          [disabled]="registerForm.invalid || isLoading()"
          class="button-primary w-full py-2.5 rounded"
        >
          {{ isLoading() ? 'Konto wird erstellt...' : 'Registrieren' }}
        </button>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-sm text-text-secondary">
        Bereits ein Konto?
        <button
          (click)="switchToLogin()"
          class="font-medium text-emerald hover:text-emerald-light transition-all duration-200"
        >
          Anmelden
        </button>
      </p>
    </div>
  </div>
</div>
