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 { FinancialCategoriesService } from "./financial-categories.service";
import { FinancialCategory, FinancialCategoryType } from "./financial-category.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';

/**
 * 🎯 FinancialCategoriesComponent - Gestão de Categorias Financeiras
 * 
 * Componente para gerenciamento completo de categorias financeiras seguindo
 * o padrão escalável ERP do PraFrota.
 * 
 * ✨ Baseado no template perfeito dos drivers!
 * 
 * 🚀 Funcionalidades:
 * - CRUD completo de categorias
 * - Sistema de subcategorias
 * - Tipagem (receita, despesa, investimento, transferência)
 * - Upload de documentos
 * - Sistema de cores e ícones
 * - Limites orçamentários
 */
@Component({
  selector: 'app-financial-categories',
  standalone: true,
  imports: [CommonModule, TabSystemComponent],
  providers: [DatePipe],
  templateUrl: './financial-categories.component.html',
  styleUrl: './financial-categories.component.scss'
})
export class FinancialCategoriesComponent extends BaseDomainComponent<FinancialCategory> {

  constructor(
    private financialCategoriesService: FinancialCategoriesService,
    titleService: TitleService,
    headerActionsService: HeaderActionsService,
    cdr: ChangeDetectorRef,
    private datePipe: DatePipe,
    private tabFormConfigService: TabFormConfigService,
    private confirmationService: ConfirmationService
  ) {
    // ✅ ARQUITETURA: FinancialCategoriesService passado diretamente
    super(titleService, headerActionsService, cdr, financialCategoriesService);
    
    // 🚀 REGISTRAR configuração específica de categorias financeiras
    this.registerFormConfig();
  }
 
  /**
   * 🎯 NOVO: Registra a configuração de formulário específica para categorias financeiras
   * Chamado no construtor para garantir que está disponível
   */
  private registerFormConfig(): void {
    this.tabFormConfigService.registerFormConfig('financial-category', () => this.getFormConfig());
  }

  // ========================================
  // 🎯 CONFIGURAÇÃO DO DOMÍNIO
  // ========================================
  protected override getDomainConfig(): DomainConfig {
    return {
      domain: 'financial-category',
      title: 'Categorias Financeiras',
      entityName: 'categoria financeira',
      subTabs: ['dados', 'photos', 'documents', 'subcategories'],
      columns: [
        { field: "id", header: "Id", sortable: true, filterable: true },
        { field: "name", header: "Nome", sortable: true, filterable: true },
        { field: "code", header: "Código", sortable: true, filterable: true },
        {
          field: "type",
          header: "Tipo",
          sortable: true,
          filterable: true,
          allowHtml: true,
          label: (value: any) => {
            if (!value) return '-';
            
            const typeLabels: { [key: string]: { label: string, class: string } } = {
              'fixed': { label: 'Fixa', class: '' },
              'variable': { label: 'Variável', class: '' },
              'UNDEFINED': { label: 'Indeterminado', class: '' },
            };
            
            const typeConfig = typeLabels[value.toLowerCase()] || { label: value, class: 'type-default' };
            return `<span class="category-type-badge ${typeConfig.class}">${typeConfig.label}</span>`;
          }
        },
        {
            field: "classification",
            header: "Classificação",
            sortable: true,
            filterable: true,
            allowHtml: true,
            label: (value: any) => {
              if (!value) return '-';
              
              const typeLabels: { [key: string]: { label: string, class: string } } = {
                'revenue': { label: 'Receita', class: 'type-income' },
                'expense': { label: 'Despesa', class: 'type-expense' },
                'investment': { label: 'Investimento', class: 'type-investment' },
                'transfer': { label: 'Transferência', class: 'type-transfer' }
              };
              
              const typeConfig = typeLabels[value.toLowerCase()] || { label: value, class: 'type-default' };
              return `<span class="category-type-badge ${typeConfig.class}">${typeConfig.label}</span>`;
            }
          },

        {
          field: "description",
          header: "Descrição",
          sortable: true,
          filterable: true,
          label: (value: any) => {
            if (!value) return '-';
            return value.length > 50 ? value.substring(0, 50) + '...' : value;
          }
        },
        {
          field: "budget_limit",
          header: "Limite Orçamentário",
          sortable: true,
          filterable: true,
          label: (value: any) => {
            if (!value || value === 0) return '-';
            return new Intl.NumberFormat('pt-BR', {
              style: 'currency',
              currency: 'BRL'
            }).format(value);
          }
        },
        {
          field: "is_active",
          header: "Status",
          sortable: true,
          filterable: true,
          allowHtml: true,
          label: (value: any) => {
            const isActive = value === true || value === 'true' || value === 1;
            const statusClass = isActive ? 'status-active' : 'status-inactive';
            const statusLabel = isActive ? 'Ativo' : 'Inativo';
            return `<span class="status-badge ${statusClass}">${statusLabel}</span>`;
          }
        },
        // {
        //   field: "color",
        //   header: "Cor",
        //   sortable: false,
        //   filterable: false,
        //   allowHtml: true,
        //   label: (value: any) => {
        //     if (!value) return '-';
        //     return `<div class="color-indicator" style="background-color: ${value}; width: 20px; height: 20px; border-radius: 50%; display: inline-block;"></div>`;
        //   }
        // },
        {
          field: "parent_category_id",
          header: "Categoria Pai",
          sortable: true,
          filterable: true,
          label: (value: any) => {
            return value ? 'Subcategoria' : 'Categoria Principal';
          }
        },
        {
          field: "createdAt",
          header: "Data de Criação",
          sortable: true,
          filterable: true,
          label: (date: any) => this.datePipe.transform(date, "dd/MM/yyyy HH:mm") || "-"
        }
      ],
      // ✨ Configuração do Side Card - Resumo da Categoria Financeira
      sideCard: {
        enabled: true,
        title: "Resumo da Categoria",
        position: "right",
        width: "400px",
        component: "summary",
        data: {
          imageField: "photoIds",
          displayFields: [
            {
              key: "classification",
              label: "Classificação",
              type: "text",
              allowHtml: true,
              format: (value: any) => {
                if (!value) return '-';
                
                const typeLabels: { [key: string]: { label: string, class: string } } = {
                  'revenue': { label: 'Receita', class: 'type-income' },
                  'expense': { label: 'Despesa', class: 'type-expense' },
                  'investment': { label: 'Investimento', class: 'type-investment' },
                  'transfer': { label: 'Transferência', class: 'type-transfer' }
                };
                
                const typeConfig = typeLabels[value.toLowerCase()] || { label: value, class: 'type-default' };
                return `<span class="category-type-badge ${typeConfig.class}">${typeConfig.label}</span>`;
              }
            },
            {
              key: "dre_position",
              label: "Posição DRE",
              type: "text", 
              allowHtml: true,
              format: (value: any) => {
                if (!value) return '-';
                
                const dreLabels: { [key: string]: { label: string, class: string } } = {
                  'variable': { label: 'Variável', class: 'dre-variable' },
                  'fixed': { label: 'Fixo', class: 'dre-fixed' },
                  'undefined': { label: 'Indefinido', class: 'dre-undefined' }
                };
                
                const dreConfig = dreLabels[value.toLowerCase()] || { label: value, class: 'dre-undefined' };
                return `<span class="dre-position-badge ${dreConfig.class}">${dreConfig.label}</span>`;
              }
            },
            {
              key: "description",
              label: "Descrição",
              type: "text",
              format: (value: any) => {
                if (!value) return '-';
                return value.length > 100 ? value.substring(0, 100) + '...' : value;
              }
            },
            {
              key: "budget_limit",
              label: "Limite Orçamentário",
              type: "currency"
            },
            {
              key: "is_active",
              label: "Status",
              type: "status"
            },
            {
              key: "createdAt",
              label: "Criado em",
              type: "text",
              format: "date"
            }
          ],
          statusField: "is_active",  
          statusConfig: {
            "true": {
              label: "Em atividade",
              color: "#d4edda",
              textColor: "#155724",
              icon: "fa-check-circle"
            },
            "false": {
              label: "Inativo",
              color: "#f8d7da", 
              textColor: "#721c24",
              icon: "fa-pause-circle"
            },
            "1": {
              label: "Em atividade",
              color: "#d4edda",
              textColor: "#155724", 
              icon: "fa-check-circle"
            },
            "0": {
              label: "Inativo",
              color: "#f8d7da",
              textColor: "#721c24",
              icon: "fa-pause-circle"
            }
          }
        }
        
      }
    };
  }

  // ========================================
  // 🎯 CONFIGURAÇÃO DO FORMULÁRIO
  // ========================================
  getFormConfig(): TabFormConfig {
    return {
      title: 'Dados da Categoria Financeira',
      entityType: 'financial-category',
      submitLabel: 'Salvar Categoria',
      showCancelButton: true,
      fields: [      
      ],
             subTabs: [
                
                {
                    id: 'dados',
                    label: 'Dados da Categoria',
                    icon: 'fa-money',
                    enabled: true,
                    order: 1,
                    templateType: 'fields', // 🎯 Renderiza campos específicos
                    requiredFields: ['name', 'code'],
                    fields: [
                        {
                            key: 'name',
                            label: 'Nome da Categoria',
                            type: 'text',
                            required: true,
                            placeholder: 'Ex: Combustível, Manutenção, Vendas...'
                          },
                          {
                            key: 'code',
                            label: 'Código',
                            type: 'text',
                            placeholder: 'Ex: COMB001, MANUT002...'
                          },
                          {
                            key: 'description',
                            label: 'Descrição',
                            type: 'textarea',
                            placeholder: 'Descreva o propósito desta categoria...'
                          },
                          {
                            key: 'classification',
                            label: 'Classificação',
                            type: 'select',
                            required: true,                            
                            options: [
                              { value: 'Revenue', label: 'Receita' },
                              { value: 'Expense', label: 'Despesa' },
                              { value: 'Investment', label: 'Investimento' },
                              { value: 'Transfer', label: 'Transferência' }
                            ]
                          },
                          {
                            key: 'parentId',
                            label: 'Categoria Pai',
                            type: 'select',
                            placeholder: 'Deixe vazio para categoria principal',
                            options: [] // Será preenchido dinamicamente
                          },
                          {
                            key: 'budget_limit',
                            label: 'Limite Orçamentário (R$)',
                            type: 'number',
                            placeholder: '0.00'
                          },
                          // {
                          //   key: 'color',
                          //   label: 'Cor da Categoria',
                          //   type: 'text',
                          //   placeholder: '#3498db'
                          // },
                          {
                            key: 'icon',
                            label: 'Ícone',
                            type: 'text',
                            placeholder: 'Ex: fas fa-gas-pump, fas fa-wrench...'
                          },
                          {
                            key: 'is_active',
                            label: 'Categoria Ativa',
                            type: 'slide-toggle', 
                            defaultValue: true
                          },
                          {
                            key: 'notes',
                            label: 'Observações',
                            type: 'textarea',
                            placeholder: 'Observações adicionais...'
                          }
                    ]
                  },
         {
           id: 'photos',
           label: 'Fotos',
           icon: 'fas fa-camera',
           templateType: 'fields',
           fields: [
             {
               key: 'photoIds',
               label: 'Fotos da Categoria',
               type: 'send-image',
               imageConfiguration: {
                 maxImages: 5,
                 maxSizeMb: 5,
                 allowedTypes: ['image/jpeg', 'image/png', 'image/webp']
               }
             }
           ]
         },
         {
           id: 'documents',
           label: 'Documentos',
           icon: 'fas fa-file',
           templateType: 'fields',
           fields: [
             {
               key: 'documentIds',
               label: 'Documentos da Categoria',
               type: 'text',
               placeholder: 'Upload de documentos em desenvolvimento...'
             }
           ]
         },
         {
           id: 'subcategories',
           label: 'Subcategorias',
           icon: 'fas fa-list',
           templateType: 'component',
           dynamicComponent: {
             selector: 'app-data-table',
             inputs: {
               endpoint: 'FinancialCategor',
               columns: [
                 { field: 'name', header: 'Nome' },
                 { field: 'description', header: 'Descrição' },
                 { field: 'is_active', header: 'Status' }
               ]
             }
           }
         }
        ]
    };
  }

  // ========================================
  // 🎯 MÉTODOS AUXILIARES
  // ========================================
  
  /**
   * ✅ Dados padrão para nova categoria financeira
   */
  protected override getNewEntityData(): Partial<FinancialCategory> {
    return {
      name: '',
      type: FinancialCategoryType.EXPENSE,
      is_active: true,
      currency: 'BRL'
    };
  }

  /**
   * 🧪 Método de teste para o sistema de confirmação
   */
  async testConfirmationSystem(): Promise<void> {
    try {
      const confirmed = await this.confirmationService.confirm({
        title: 'Teste do Sistema de Confirmação',
        message: 'Este é um teste do sistema de confirmação para categorias financeiras. Deseja continuar?',
        confirmText: 'Sim, continuar',
        cancelText: 'Cancelar'
      });

      if (confirmed) {
        console.log('✅ Usuário confirmou a ação');
      } else {
        console.log('❌ Usuário cancelou a ação');
      }
    } catch (error) {
      console.error('❌ Erro no sistema de confirmação:', error);
    }
  }

  /**
   * 🔧 Manipulador de mudanças de dados de teste
   */
  onTestDataChange(data: any): void {
    console.log('📊 Dados de teste mudaram:', data);
  }

  /**
   * 🔧 Manipulador de eventos de teste
   */
  onTestEvent(message: string): void {
    console.log('🎯 Evento de teste:', message);
  }
} 