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';

@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 {
  transactions: ITransaction[] = [];
  operateurs: IOperateur[] = [];
  selectedOperateur: string = 'OM';
  // 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',
    'type_paiement_label',
    'marchand',
    'service',
    'montant',
    'date',
    'commentaire',
    'etat',
    'status',
    'reference',
  ];

  dataSource = new MatTableDataSource<ITransaction>();

  @ViewChild(MatPaginator) paginator!: MatPaginator;

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

  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);
    });
  }

  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() {
    const startDate = new Date(this.startDate).setHours(0, 0, 0, 0);
    const endDate = new Date(this.endDate).setHours(23, 59, 59, 999);

    this.transactions = this.transactions.filter(transaction => {
      const transactionDate = new Date(transaction.date).getTime();
      return transactionDate >= startDate && transactionDate <= endDate;
    });

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

  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 csvData = this.transactions
      .map(transaction => {
        return [
          transaction.transaction_id,
          transaction.type_paiement_label,
          transaction.marchand,
          transaction.service,
          transaction.montant,
          transaction.date,
          transaction.commentaire,
          transaction.etat,
          transaction.status,
          transaction.reference,
        ].join(','); // Ajouter une virgule entre chaque élément
      })
      .join('\n'); // Ajouter un saut de ligne à la fin de chaque ligne

    const blob = new Blob([csvData], { type: 'text/csv' });
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'transactions.csv');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  }
}