import { Component } from '@angular/core';
import {
  FormControl,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import PocketBase from 'pocketbase';
import { environment } from '../../environments/environment';
import { Router } from '@angular/router';
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule, MatLabel } from '@angular/material/input';
import { MatButton, MatButtonModule } from '@angular/material/button';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatDividerModule } from '@angular/material/divider';

@Component({
  selector: 'app-login',
  imports: [
    ReactiveFormsModule,
    MatCardModule,
    MatInputModule,
    MatLabel,
    MatFormFieldModule,
    MatButtonModule,
    MatDividerModule,
  ],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css',
})
export class LoginComponent {
  public loginForm!: FormGroup;
  public invalidCredentials = false;
  private pb = new PocketBase(environment.POCKETBASE);
  public errorMessages: Record<string, string> = {};

  constructor(
    private router: Router,
    private snackBar: MatSnackBar,
  ) {}

  private validationErrorMessages: Record<string, string> = {
    required: 'This field is required',
  };

  updateErrorMessages(): void {
    this.errorMessages = {};

    Object.keys(this.loginForm.controls).forEach((field) => {
      const control = this.loginForm.get(field);

      if (control && control.errors) {
        this.errorMessages[field] = Object.keys(control.errors)
          .map(
            (errorKey) =>
              this.validationErrorMessages[errorKey] ||
              `Unknown error: ${errorKey}`,
          )
          .join(' ');
      }
    });
  }

  ngOnInit(): void {
    this.loginForm = new FormGroup({
      email: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required),
    });

    if (this.pb.authStore.isValid) {
      this.router.navigate(['dashboard']);
    }

    this.loginForm.valueChanges.subscribe(() => {
      this.updateErrorMessages();
    });
  }

  loginWithAuthentik() {
    this.pb
      .collection('users')
      .authWithOAuth2({
        provider: 'oidc',
        scopes: ['openid', 'email', 'profile', 'avatar'],
      })
      .then(() => {
        this.router.navigate(['dashboard']);
      })
      .catch(() => {
        this.invalidCredentials = true;
        const error = this.snackBar.open('Invalid Credentials');
        setTimeout(() => {
          error.dismiss();
        }, 5000);
      });
  }

  submit() {
    if (!this.loginForm.valid) {
      this.updateErrorMessages();
    }

    this.pb
      .collection('users')
      .authWithPassword(
        this.loginForm.get('email')?.value,
        this.loginForm.get('password')?.value,
      )
      .then(() => {
        this.router.navigate(['dashboard']);
      })
      .catch(() => {
        this.invalidCredentials = true;
        const error = this.snackBar.open('Invalid Credentials');
        setTimeout(() => {
          error.dismiss();
        }, 5000);
      });
  }
}