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

import { TitleService } from "../../shared/services/theme/title.service";
import { HeaderActionsService } from "../../shared/services/header-actions.service";
import { PersonService } from "./person.service";
import { Person } from "./person.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";

/**
 * 🎯 PersonComponent - Gestão de Pessoas
 * 
 * ✨ Implementa BaseDomainComponent + Registry Pattern
 * 🚀 Auto-registro de configurações para escalabilidade infinita!
 */
@Component({
  selector: 'app-person',
  standalone: true,
  imports: [CommonModule, TabSystemComponent],
  providers: [DatePipe],
  templateUrl: './person.component.html',
  styleUrl: './person.component.scss'
})
export class PersonComponent extends BaseDomainComponent<Person> {

  constructor(
    private personService: PersonService,
    titleService: TitleService,
    headerActionsService: HeaderActionsService,
    cdr: ChangeDetectorRef,
    private datePipe: DatePipe,
    private tabFormConfigService: TabFormConfigService
  ) {
    super(titleService, headerActionsService, cdr, personService);
    this.registerFormConfig();
  }

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

  protected override getDomainConfig(): DomainConfig {
    return {
      domain: 'person',
      title: 'Pessoas',
      entityName: 'registro',
      pageSize: 500,
      subTabs: ['dados'],
      filterConfig: {
        dateRangeFilter: false,
        companyFilter: false,
      },
      columns: [
        { field: "id", header: "Id", sortable: true, filterable: true, search: true, searchType: "number" },
        { field: "code", header: "Código", sortable: true, filterable: true, search: true, searchType: "text" },
        { field: "name", header: "Nome", sortable: true, filterable: true, search: true, searchType: "text" },
        { field: "cpf", 
          header: "CPF", 
          sortable: true, 
          filterable: true, 
          search: true, 
          searchType: "text" ,
          format: "cpf",
          
        },
        { field: "cnpj", header: "CNPJ", sortable: true, filterable: true, search: true, searchType: "text" },
        { field: "email", header: "Email", sortable: true, filterable: true, search: false, searchType: "text" },
        { field: "phone", header: "Telefone", sortable: true, filterable: true, search: false, searchType: "text" },
        { field: "birth_date", header: "Data de Nascimento", sortable: true, filterable: false, search: false, searchType: "date" },
        // { field: "gender", header: "Gênero", sortable: true, filterable: true, search: false, searchType: "text" },
        // {
        //   field: "status",
        //   header: "Status",
        //   sortable: true,
        //   filterable: true,
        //   allowHtml: true,
        //   search: true,
        //   searchType: "select",
        //   searchOptions: [
        //     { value: 'active', label: 'Ativo' },
        //     { value: 'inactive', label: 'Inativo' }
        //   ],
        //   label: (value: any) => {
        //     const statusConfig: { [key: string]: { label: string, class: string } } = {
        //       'active': { label: 'Ativo', class: 'status-active' },
        //       'inactive': { label: 'Inativo', class: 'status-inactive' }
        //     };
        //     const config = statusConfig[value?.toLowerCase()] || { label: value, class: 'status-unknown' };
        //     return `<span class="status-badge ${config.class}">${config.label}</span>`;
        //   }
        // },
        {
          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") || "-"
        }
      ]
    };
  }

  getFormConfig(): TabFormConfig {
    return {
      title: 'Dados do Person',
      entityType: 'person',
      fields: [],
      submitLabel: 'Salvar Person',
      showCancelButton: true,
      subTabs: [
        {
          id: 'dados',
          label: 'Dados Básicos',
          icon: 'fa-info-circle',
          enabled: true,
          order: 1,
          templateType: 'fields',
          requiredFields: ['name'],
          fields: [
            {
              key: 'code',
              label: 'Código',
              type: 'text',
              required: true,
              placeholder: 'Digite o código'
            },            
            {
              key: 'name',
              label: 'Nome',
              type: 'text',
              required: true,
              placeholder: 'Digite o nome'
            },
           
            // {
            //   key: 'status',
            //   label: 'Status',
            //   type: 'select',
            //   required: true,
            //   options: [
            //     { value: 'active', label: 'Ativo' },
            //     { value: 'inactive', label: 'Inativo' }
            //   ]
            // }
          ]
        }
      ]
    };
  }

  protected override getNewEntityData(): Partial<Person> {
    return {
      name: '',
      status: 'active',
      
      
    };
  }
}