import { Component, inject, signal, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '../../core/services/auth.service';
import { ToastService } from '../../core/services/toast.service';

@Component({
  selector: 'app-oauth-callback',
  standalone: true,
  template: `
    <div class="min-h-screen flex items-center justify-center bg-background px-4">
      <div class="max-w-md w-full text-center">
        @if (error()) {
          <div class="w-16 h-16 bg-destructive/10 flex items-center justify-center mx-auto mb-4">
            <svg class="w-10 h-10 text-destructive" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>
          <h1 class="font-mono text-xl font-bold text-foreground mb-2">Authentication Failed</h1>
          <p class="font-mono text-sm text-muted-foreground mb-6">{{ error() }}</p>
          <a href="/login" class="btn-primary btn-md">Back to Login</a>
        } @else {
          <div class="w-16 h-16 bg-primary flex items-center justify-center mx-auto mb-4">
            <svg class="animate-spin w-10 h-10 text-primary-foreground" fill="none" viewBox="0 0 24 24">
              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
            </svg>
          </div>
          <h1 class="font-mono text-xl font-bold text-foreground mb-2">Signing you in...</h1>
          <p class="font-mono text-sm text-muted-foreground">Please wait while we complete authentication</p>
        }
      </div>
    </div>
  `,
})
export class OAuthCallbackComponent implements OnInit {
  private authService = inject(AuthService);
  private router = inject(Router);
  private toastService = inject(ToastService);

  error = signal<string | null>(null);

  ngOnInit(): void {
    this.handleCallback();
  }

  private handleCallback(): void {
    const params = new URLSearchParams(window.location.search);
    const accessToken = params.get('accessToken');
    const refreshToken = params.get('refreshToken');
    const sessionId = params.get('sessionId');
    const errorParam = params.get('error');

    if (errorParam) {
      this.error.set(decodeURIComponent(errorParam));
      return;
    }

    if (!accessToken || !refreshToken || !sessionId) {
      this.error.set('Missing authentication tokens');
      return;
    }

    // Store the tokens and redirect
    this.authService.handleOAuthCallback(accessToken, refreshToken, sessionId);
    this.toastService.success('Welcome!');
    this.router.navigate(['/dashboard']);
  }
}