import { ChangeDetectionStrategy, Component } from '@angular/core';
import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
import { environment } from 'environments/environment';

/**
 * Terminal error page shown when the OAuth Authorization Code exchange fails.
 *
 * Reachable at /callback-error — this route carries NO authentication guard
 * so a failed exchange always has a safe landing place and can never cause an
 * infinite authorize → callback → fail → relaunch loop.
 *
 * The "try again" button sends the user back to the hub launcher explicitly,
 * which is the only safe way to start a new authorize round-trip.
 */
@Component({
  selector: 'app-callback-error',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [TranslocoDirective],
  providers: [provideTranslocoScope('auth')],
  template: `
    <ng-container *transloco="let t; scope: 'auth'">
      <div class="flex min-h-svh flex-col items-center justify-center gap-4 p-6 text-center">
        <h1 class="text-2xl font-semibold">{{ t('auth.callbackError.Headline') }}</h1>
        <p class="text-muted-foreground max-w-sm text-sm">
          {{ t('auth.callbackError.Message') }}
        </p>
        <a
          class="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center rounded-md px-4 py-2 text-sm font-medium"
          [href]="hubLoginUrl"
        >
          {{ t('auth.callbackError.RetryButton') }}
        </a>
      </div>
    </ng-container>
  `,
})
export default class CallbackErrorComponent {
  /** Direct link to the hub launcher — always triggers a fresh authorize round-trip. */
  readonly hubLoginUrl: string = `${environment.api.rest}/auth/login`;
}
