import { Component, inject, signal } from '@angular/core';
import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
import { MatButtonModule } from '@angular/material/button';
import { MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTabsModule } from '@angular/material/tabs';

import { endOfMonth, formatIsoDate } from '../core/date-utils';
import { EmployeeFunctionsService } from './employee-functions.service';

@Component({
  selector: 'app-employee-functions',
  templateUrl: './employee-functions.component.html',
  styleUrls: ['./employee-functions.component.css'],
  imports: [
    MatTabsModule,
    FormField,
    FormRoot,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatButtonModule,
  ],
})
export class EmployeeFunctionsComponent {
  private snackBar = inject(MatSnackBar);
  private ser = inject(EmployeeFunctionsService);

  creditSalaryModel = signal<{ date: Date }>({
    date: endOfMonth(new Date()),
  });

  creditSalaryForm = createForm(this.creditSalaryModel);

  attendanceRecordModel = signal<{ startDate: Date; finishDate: Date }>({
    startDate: new Date(),
    finishDate: new Date(),
  });

  attendanceRecordForm = createForm(this.attendanceRecordModel);

  fingerprintFile: File | null = null;

  constructor() {
    this.creditSalaryModel.set({ date: endOfMonth(new Date()) });
  }

  chosenYearHandler(normalizedYear: Date) {
    const current = this.creditSalaryModel().date;
    const updated = new Date(normalizedYear.getFullYear(), current.getMonth(), 1);
    this.creditSalaryModel.update((m) => ({ ...m, date: endOfMonth(updated) }));
  }

  chosenMonthHandler(normalizedMonth: Date, datepicker: MatDatepicker<Date>) {
    const current = this.creditSalaryModel().date;
    const updated = new Date(current.getFullYear(), normalizedMonth.getMonth(), 1);
    this.creditSalaryModel.update((m) => ({ ...m, date: endOfMonth(updated) }));
    datepicker.close();
  }

  creditSalary() {
    const date = formatIsoDate(this.creditSalaryModel().date);
    if (!date) {
      this.snackBar.open('Please choose a valid date.', 'Danger');
      return;
    }
    this.ser.creditSalary(date).subscribe({
      next: () => {
        this.snackBar.open('Salaries Credited', 'Success');
      },
      error: (error) => {
        this.snackBar.open(error as string, 'Danger');
      },
    });
  }

  attendanceRecordUrl() {
    const startDate = formatIsoDate(this.attendanceRecordModel().startDate ?? new Date());
    const finishDate = formatIsoDate(this.attendanceRecordModel().finishDate ?? new Date());
    if (!startDate || !finishDate) {
      this.snackBar.open('Please choose a start and finish date.', 'Danger');
      return '';
    }
    return `/attendance-report?s=${startDate}&f=${finishDate}`;
  }

  fingerPrintUrl() {
    const startDate = formatIsoDate(this.attendanceRecordModel().startDate);
    const finishDate = formatIsoDate(this.attendanceRecordModel().finishDate);
    if (!startDate || !finishDate) {
      this.snackBar.open('Please choose a start and finish date.', 'Danger');
      return '';
    }
    return `/fingerprint-report?s=${startDate}&f=${finishDate}`;
  }

  detectFiles(event: Event) {
    this.fingerprintFile = ((event.target as HTMLInputElement).files as FileList)[0];
  }

  uploadFingerprints() {
    if (!this.fingerprintFile) {
      this.snackBar.open('Please choose a file first!', 'Danger');
      return;
    }
    this.ser.uploadFingerprints(this.fingerprintFile).subscribe({
      next: () => {
        this.snackBar.open('Fingerprints uploaded', 'Success');
      },
      error: (error) => {
        this.snackBar.open(error as string, 'Danger');
      },
    });
  }
}