import { Component, ChangeDetectorRef } from "@angular/core";
import { CommonModule, DatePipe, CurrencyPipe } from "@angular/common";

import { TitleService } from "../../shared/services/theme/title.service";
import { HeaderActionsService } from "../../shared/services/header-actions.service";
import { FinesService } from "./fines.service";
import { Fines } from "./fines.interface";

import { TabSystemComponent } from "../../shared/components/tab-system/tab-system.component";
import { BaseDomainComponent, DomainConfig } from "../../shared/components/base-domain/base-domain.component";
import { TabFormConfig } from "../../shared/interfaces/generic-tab-form.interface";
import { TabFormConfigService } from "../../shared/components/tab-system/services/tab-form-config.service";
import { ConfirmationService } from "../../shared/services/confirmation/confirmation.service";
import { DateRangeShortcuts } from "../../shared/utils/date-range.utils";
import { DriversService } from "../drivers/drivers.service";
import { VehiclesService } from "../vehicles/vehicles.service";


/**
 * 🎯 FinesComponent - Gestão de Multas
 * 
 * ✨ Implementa BaseDomainComponent + Registry Pattern
 * 🚀 Auto-registro de configurações para escalabilidade infinita!
 * 
 * 🆕 V2.0 Features:
 * - FooterConfig: Configuração avançada de rodapé

 * - BulkActions: Ações em lote configuradas
 * - DateRangeUtils: Integração automática
 */
@Component({
  selector: 'app-fines',
  standalone: true,
  imports: [CommonModule, TabSystemComponent],
  providers: [DatePipe, CurrencyPipe],
  templateUrl: './fines.component.html',
  styleUrl: './fines.component.scss'
})
export class FinesComponent extends BaseDomainComponent<Fines> {

  constructor(
    private finesService: FinesService,
    titleService: TitleService,
    headerActionsService: HeaderActionsService,
    cdr: ChangeDetectorRef,
    private datePipe: DatePipe,
    private currencyPipe: CurrencyPipe,
    private tabFormConfigService: TabFormConfigService,
    private confirmationService: ConfirmationService,
    private driversService: DriversService,
    private vehiclesService: VehiclesService
  ) {
    super(titleService, headerActionsService, cdr, finesService);
    this.registerFormConfig();
  }

  private registerFormConfig(): void {
    this.tabFormConfigService.registerFormConfig('fines', () => this.getFormConfig());
  }

  // ========================================
  // 🎯 CONFIGURAÇÃO DO DOMÍNIO FINES
  // ========================================
  protected override getDomainConfig(): DomainConfig {
    return {
      domain: 'fines',
      title: 'Multas',
      entityName: 'fines',
      pageSize: 500,
      subTabs: ['dados'],
      showDashboardTab: true, 
      filterConfig: {        
        fieldsSearchDefault: ['vehicleLicencePlates'],
        dateRangeFilter: true,
        companyFilter: false,
        dateFieldNames: {
          startField: 'start_date',  // ✅ NOVO: Campo customizado para data inicial
          endField: 'end_date'       // ✅ NOVO: Campo customizado para data final
        },
        // ✨ NOVOS: Filtros de data de vencimento para teste
        dueDateOneFilter: true,
        dueDateOneFieldNames: {
          label: 'Período de Vencimento',  // ✨ NOVO: Label customizado
          startField: 'due_date_start',
          endField: 'due_date_end'
        },        
      },
      dashboardConfig: {
        title: 'Dashboard de Multas',
        showKPIs: true,
        showCharts: true,
        showRecentItems: true,
      },
      columns: [        
        {
          field: "fine_value",
          header: "Valor",
          sortable: true,
          filterable: true,
          search: false,
          label: (value: any) => {
            if (!value) return '-';
            return `R$ ${Number(value).toLocaleString('pt-BR', { minimumFractionDigits: 2 })}`;
          },
          footer: {
            'field': 'value',
            'type': 'sum',
            'format': 'currency',
            'label': 'Total:',
            'precision': 2
          }
        },
        {
          field: "fine_date" ,
          header: "Emissão" ,
          sortable: true ,
          filterable: true ,
          search: false , 
          searchType: "date" ,
          label: (date: any) => this.datePipe.transform(date, "dd/MM/yyyy") || "-"
        },
        {
          field: "fine_dueDate",
          header: "Vencimento",
          sortable: true,
          filterable: true,
          search: false, 
          searchType: "date",
          label: (date: any) => this.datePipe.transform(date, "dd/MM/yyyy") || "-"          
        },
        { field: "vehicleLicensePlate", 
          searchField: "vehicleLicencePlates",
          header: "Veículo", 
          sortable: true, 
          filterable: true, 
          search: true, 
          searchType: "text",
        },
        { field: "vehicleModel", 
          searchField: "vehicleLicencePlates",
          header: "Veículo", 
          sortable: true, 
          filterable: true, 
          // search: true, 
          searchType: "text",
        },
        {
          field: "driverName",
          header: "Motorista",
          sortable: true,
          filterable: true,
          search: false,
          searchType: "text"
        },

        {
          field: "driverName",
          header: "Motorista",
          sortable: true,
          filterable: true,
          search: true,
          searchType: "text"
        },

        { 
          field: "status", 
          header: "Status", 
          sortable: true, 
          filterable: true,
          search: true,
          searchType: "select",
          allowHtml: true,
          searchOptions: [
            { value: 'pending', label: 'Pendente' },
            { value: 'open', label: 'Pendente' },
            { value: 'paid', label: 'Pago' },
            { value: 'approved', label: 'Aprovado para pagamento' },
            { value: 'cancelled', label: 'Cancelado' },
          ],
          label: (status: string) => {
            const statusConfig: { [key: string]: { label: string, class: string } } = {
              'pending': { label: 'Pendente', class: 'status-pending' },
              'open': { label: 'Pendente', class: 'status-pending' },
              'paid': { label: 'Pago', class: 'status-paid' },
              'approved': { label: 'Aprovado para pagamento', class: 'status-approved' },
              'cancelled': { label: 'Cancelado', class: 'status-cancelled' } ,              
            };
            
            const config = statusConfig[status?.toLowerCase()] || { label: status, class: 'status-unknown' };
            return `<span class="status-badge ${config.class}">${config.label}</span>`;
          }
        
        },
        {
          field: "description",
          header: "Descrição",
          filterField: "namesFramework",
          sortable: true,
          filterable: true,
          search: true,
          searchType: "text"
        },
        {
          field: "severity",
          header: "Severidade",
          sortable: true,
          filterable: true,
          search: false,
          searchType: "text",
          allowHtml: true,
          searchOptions: [
            { value: 'GRAVISSIMA', label: 'Gravíssima' },        
            { value: 'GRAVISSIMA_3X', label: 'Gravíssima 3x' },            
            { value: 'GRAVISSIMA_2X', label: 'Gravíssima 2x' },            
            { value: 'GRAVISSIMA_1X', label: 'Gravíssima 1x' },            
            { value: 'GRAVISSIMA_10X', label: 'Gravíssima 0x' },            
            { value: 'GRAVISSIMA_5X', label: 'Gravíssima 5x' },            
            { value: 'GRAVISSIMA_6X', label: 'Gravíssima 6x' },            
            { value: 'GRAVISSIMA_7X', label: 'Gravíssima 7x' },            
            { value: 'GRAVISSIMA_8X', label: 'Gravíssima 8x' },            
            { value: 'GRAVISSIMA_9X', label: 'Gravíssima 9x' },            
            { value: 'GRAVISSIMA_10X', label: 'Gravíssima 10x' },            
            { value: 'GRAVISSIMA_4X', label: 'Gravíssima 4x' },            
            { value: 'GRAVE', label: 'Grave' },
            { value: 'MEDIA', label: 'Média' },
            { value: 'LEVE', label: 'Leve' },
          ],
          label: (severity: string) => {
            const severityConfig: { [key: string]: { label: string, class: string } } = {
              'gravissima': { label: 'Gravíssima', class: 'status-gravissima' },
              'gravissima_3x': { label: 'Gravíssima 3x', class: 'status-gravissima-x' },
              'gravissima_2x': { label: 'Gravíssima 2x', class: 'status-gravissima-x' },
              'gravissima_1x': { label: 'Gravíssima 1x', class: 'status-gravissima-x' },
              'gravissima_10x': { label: 'Gravíssima 0x', class: 'status-gravissima-x' },
              'gravissima_5x': { label: 'Gravíssima 5x', class: 'status-gravissima-x' },
              'gravissima_6x': { label: 'Gravíssima 6x', class: 'status-gravissima-x' },
              'gravissima_7x': { label: 'Gravíssima 7x', class: 'status-gravissima-x' },
              'gravissima_8x': { label: 'Gravíssima 8x', class: 'status-gravissima-x' },
              'gravissima_9x': { label: 'Gravíssima 9x', class: 'status-gravissima-x' },
              'gravissima_4x': { label: 'Gravíssima 4x', class: 'status-gravissima-x' },
              'grave': { label: 'Grave', class: 'status-high' },
              'media': { label: 'Média', class: 'status-high' },
              'leve': { label: 'Leve', class: 'status-low' },

            };
            const config = severityConfig[severity?.toLowerCase()] || { label: severity, class: 'status-unknown' };
            return `<span class="status-badge ${config.class}">${config.label}</span>`;
          }
        },
        { 
          field: "organization", 
          header: "Organização", 
          sortable: true, 
          filterable: true,
          search: true,
          searchType: "select",
          allowHtml: true,
          searchOptions: [
            { value: 'Municipality', label: 'Municípal' },
            { value: 'State', label: 'Estadual' },
            { value: 'Federal', label: 'Federal' },
            { value: 'Company', label: 'Empresa' },
            { value: 'Other', label: 'Outro' },
          ],
          label: (status: string) => {
            const statusConfig: { [key: string]: { label: string, class: string } } = {
              'municipality': { label: 'Municípal', class: 'status-municipality' },
              'state': { label: 'Estadual', class: 'status-state' },
              'federal': { label: 'Federal', class: 'status-federal' },
              'company': { label: 'Empresa', class: 'status-company' },
              'other': { label: 'Outro', class: 'status-other' } ,              
            };
            
            const config = statusConfig[status?.toLowerCase()] || { label: status, class: 'status-unknown' };
            return `<span class="status-badge ${config.class}">${config.label}</span>`;
          }
        
        },
        {
          field: "aitNumber",
          header: "Auto de infração",
          sortable: true,
          filterable: true,
          search: false,
          searchType: "text"
        },
        {
          field: "codeFramework",
          header: "Código",
          sortable: true,
          filterable: true,
          search: false,
          searchType: "text"
        },
        // { 
        //   field: "id", 
        //   header: "Id", 
        //   sortable: true, 
        //   filterable: true, 
        //   search: false, 
        //   searchType: "number"
        // },
        // {
        //   field: "createdAt",
        //   header: "Criado em",
        //   sortable: true,
        //   filterable: true,
        //   search: false,
        //   searchType: "date",
        //   label: (date: any) => this.datePipe.transform(date, "dd/MM/yyyy HH:mm") || "-"
        // }
      ],
      bulkActions: [
      {
        id: 'delete-selected',
        label: 'Excluir Selecionados',
        icon: 'fas fa-trash',
        action: (selectedItems) => this.bulkDelete(selectedItems as [])
      },
      {
        id: 'export-selected',
        label: 'Exportar Selecionados',
        icon: 'fas fa-download',
        action: (selectedItems) => this.bulkExport(selectedItems as [])
      }
    ]
    };
  }

  // ========================================
  // 📋 CONFIGURAÇÃO COMPLETA DO FORMULÁRIO
  // ========================================
  getFormConfig(): TabFormConfig {
    return {
      title: 'Dados da Multa',
      entityType: 'fines',
      fields: [],
      submitLabel: 'Salvar Multa',
      showCancelButton: true,
      subTabs: [
        {
          id: 'dados',
          label: 'Dados Básicos',
          icon: 'fa-info-circle',
          enabled: true,
          order: 1,
          templateType: 'fields',
          requiredFields: ['name', 'fine_number', 'fine_value', 'fine_date', 'driverId', 'status'],
          fields: [

            {
              key: 'aitNumber',
              label: 'Auto de infração',
              type: 'text',
              required: true,
              disabled: true,
              placeholder: 'Digite o número da multa'
            },
            {
              key: 'fine_value',
              label: 'Valor da Multa',
              type: 'number',
              required: false,
              disabled: true,
              placeholder: 'Digite o valor da multa',                            
            },
            {
              key: 'fine_date',
              label: 'Data da Multa',
              type: 'date',
              required: true,
              disabled: true,
              placeholder: 'Selecione a data da multa'
            },
            {
              key:'vehicleId',
              label: '',
              type: 'remote-select',
              labelField: 'vehicleLicensePlate', // ✅ Campo para mostrar o valor selecionado
              required: false,
              disabled: true,
              remoteConfig: {
                service: this.vehiclesService,
                searchField: 'license_plate',
                displayField: 'license_plate',
                valueField: 'id',
                placeholder: 'Digite a placa do veículo...'
              }
            },
            {
              key: 'driverId',
              label: '',
              labelField: 'driverName',
              type: 'remote-select',
              disabled: false,
              remoteConfig: {
                service: this.driversService,
                searchField: 'name',
                displayField: 'name',
                valueField: 'id',
                placeholder: 'Digite o nome do motorista...',
              }
            },
            {
              key: 'organization',
              label: 'Organização',
              type: 'select',
              required: false,
              disabled: true,
              placeholder: 'Selecione a organização',
              options: [
                { value: '', label: 'Selecione uma organização' },
                { value: 'Municipality', label: 'Municípal' },
                { value: 'State', label: 'Estadual' },
                { value: 'Federal', label: 'Federal' },
                { value: 'Company', label: 'Empresa' },
                { value: 'other', label: 'Outro' }
              ]
            },
            {
              key: 'severity',
              label: 'Severidade',
              type: 'select',
              required: true,
              disabled: true,
              placeholder: 'Selecione a severidade',
              options: [
                { value: '', label: 'Selecione uma severidade' },
                { value: 'GRAVISSIMA', label: 'Gravíssima' },            
                { value: 'MÉDIA', label: 'Média' },
                { value: 'GRAVISSIMA_1X', label: 'Gravíssima 1x' },
                { value: 'GRAVISSIMA_2X', label: 'Gravíssima 2x' },
                { value: 'GRAVISSIMA_3X', label: 'Gravíssima 3x' },
                { value: 'GRAVISSIMA_4X', label: 'Gravíssima 4x' },
                { value: 'GRAVISSIMA_5X', label: 'Gravíssima 5x' },
                { value: 'GRAVISSIMA_6X', label: 'Gravíssima 6x' },
                { value: 'GRAVISSIMA_7X', label: 'Gravíssima 7x' },
                { value: 'GRAVISSIMA_8X', label: 'Gravíssima 8x' },
                { value: 'GRAVISSIMA_9X', label: 'Gravíssima 9x' },
                { value: 'GRAVISSIMA_10X', label: 'Gravíssima 10x' },
                { value: 'GRAVE', label: 'Grave' },
                { value: 'LEVE', label: 'Leve' },
              ]            
            },      
            {
              key: 'status',
              label: 'Status',
              type: 'select',
              required: true,
              placeholder: 'Selecione o status',
              options: [
                { value: '', label: 'Selecione um status' },
                { value: 'Pending', label: 'Pendente' },
                { value: 'Open', label: 'Pendente' },
                { value: 'Paid', label: 'Pago' },
                { value: 'Approved', label: 'Aprovado para pagamento' },
                { value: 'Cancelled', label: 'Cancelado' }
              ]
            },
            {
              key: 'description',
              label: 'Descrição/Observações',
              type: 'textarea-input',
              required: false,
              disabled: true,
              placeholder: 'Digite observações sobre a multa',
              rows: 4
            }
          ]
        }
      ]
    };
  }

  
  // ========================================
  // ⚡ BULK ACTIONS V2.0
  // ========================================

  async bulkDelete(selectedItems: Fines[]) {
    const confirmed = await this.confirmationService.confirm({
      title: 'Confirmar exclusão',
      message: `Tem certeza que deseja excluir ${selectedItems.length} ${selectedItems.length === 1 ? 'item' : 'itens'}?`,
      confirmText: 'Excluir'
    });
    
    if (confirmed) {
      // Implementar lógica de exclusão em lote
      console.log('Excluindo itens:', selectedItems);
    }
  }

  async bulkExport(selectedItems: Fines[]) {
    // Implementar lógica de exportação
    console.log('Exportando itens:', selectedItems);
  }

  
}