/* eslint-disable @typescript-eslint/no-explicit-any */
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { CommonModule } from '@angular/common';
import { TransactionService } from 'src/app/_services/trafics/transaction/transaction.service';
import { ITransaction } from 'src/app/_interfaces/trafics/transaction/transaction';
import { HttpClientModule } from '@angular/common/http';
import { RouterLink } from '@angular/router';
import { IOperateur } from 'src/app/_interfaces/trafics/operateur/operateur';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { OperateurService } from 'src/app/_services/trafics/operateur/operateur.service';
import { ServiceService } from 'src/app/_services/service/service.service';
import { IService } from 'src/app/_interfaces/servives/service';
import * as XLSX from 'xlsx';

@Component({
  selector: 'bgui-suivi-transaction',
  standalone: true,
  imports: [
    CommonModule,
    HttpClientModule,
    RouterLink,
    FormsModule,
    MatTableModule,
    MatPaginatorModule,
    MatFormFieldModule,
    MatInputModule,
  ],
  templateUrl: './suivi-transaction.component.html',
  styleUrls: ['./suivi-transaction.component.scss'],
})
export class SuiviTransactionComponent implements AfterViewInit {
  breadCrumbItems: Array<{}> = [
    { label: 'Transactions', url: '/transactions/suivi-transaction' },
    { label: 'Suivi transactions', url: '/transactions/suivi-transaction' },
  ];

  transactions: ITransaction[] = [];
  operateurs: IOperateur[] = [];
  services: IService[] = [];
  selectedOperateur: string = '';
  selectedService: string = '';
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  startDate: any;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  endDate: any;

  displayedColumns: string[] = [
    // 'transaction_id',
    'date',
    'reference',
    'montant',
    'type_paiement_label',
    //'marchand',
    'service',

    // 'etat',
    'status',
    'commentaire',
  ];

  dataSource = new MatTableDataSource<ITransaction>();

  @ViewChild(MatPaginator) paginator!: MatPaginator;

  constructor(
    private transactionService: TransactionService,
    private operateurservice: OperateurService,
    private service: ServiceService
  ) {}

  ngOnInit(): void {
    this.transactionService.getAll().subscribe((data: ITransaction[]) => {
      this.transactions = data;
      console.log('transactions=>>>>>>>>>>>>>>>>>', this.transactions);
      this.dataSource.data = this.transactions;
    });

    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    this.operateurservice.getAllOperator().subscribe((operateur: any) => {
      this.operateurs = operateur.results;

      console.log('operateurs==>', this.operateurs);
    });

    this.service.getServices().subscribe((service: any) => {
      this.services = service.results;

      console.log('service==>', this.services);
    });
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.paginator.pageIndex = this.paginator.pageSize;
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    // Ajouter le filtre sur l'opérateur
    if (this.selectedOperateur) {
      this.dataSource.filterPredicate = (
        data: ITransaction,
        filter: string
      ) => {
        return (
          data.type_paiement_label.toLowerCase().includes(filter) &&
          data.type_paiement_label
            .toLowerCase()
            .includes(this.selectedOperateur)
        );
      };
    } else {
      this.dataSource.filterPredicate = (
        data: ITransaction,
        filter: string
      ) => {
        return data.marchand.toLowerCase().includes(filter);
      };
    }
  }

  onSearch() {
    // Filtrer les transactions en fonction de la plage de dates
    let filteredTransactions = this.transactions.filter(transaction => {
      const transactionDate = new Date(transaction.date);
      return (
        transactionDate >= this.startDate && transactionDate <= this.endDate
      );
    });

    // Filtrer les transactions en fonction de l'opérateur sélectionné
    if (this.selectedOperateur) {
      filteredTransactions = filteredTransactions.filter(
        transaction => transaction.type_paiement === transaction.type_paiement
      );
    }

    // Filtrer les transactions en fonction du service sélectionné
    if (this.selectedService) {
      filteredTransactions = filteredTransactions.filter(
        transaction => transaction.service === this.selectedService
      );
    }

    // Mettre à jour la source de données avec les transactions filtrées
    this.dataSource = new MatTableDataSource<ITransaction>(
      filteredTransactions
    );
  }

  onImport() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.csv';

    input.onchange = () => {
      const file = input.files?.[0];
      if (file) {
        // Vérifiez si file est défini
        const reader = new FileReader();

        reader.onload = () => {
          const data = reader.result as string;
          const rows = data.split(/[\r\n]+/);
          const headerRow = rows[0].split(',');
          const transactions: ITransaction[] = [];

          for (let i = 1; i < rows.length; i++) {
            const columns = rows[i].split(';');

            if (columns.length === headerRow.length) {
              // eslint-disable-next-line @typescript-eslint/no-explicit-any
              const transaction: any = {};

              for (let j = 0; j < columns.length; j++) {
                transaction[headerRow[j]] = columns[j];
              }

              transactions.push(transaction);
            }
          }

          this.transactions = transactions;
          this.dataSource = new MatTableDataSource<ITransaction>(
            this.transactions
          );
        };

        reader.readAsText(file);
      }
    };

    input.click();
  }

  onExport() {
    const worksheet = XLSX.utils.json_to_sheet(this.transactions);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Transactions');
    XLSX.writeFile(workbook, 'transactions.xlsx');
  }

  getColorStatus(status: string): string {
    switch (status) {
      case 'SUCCESS':
        return 'success-status';
      case 'FAILED':
        return 'failure-status';
      case 'ECHEC':
        return 'failure-status';
      case 'INITIATED':
        return 'pending-status';
      default:
        return '';
    }
  }
}