/**
 * TabSystemComponent - Sistema de Abas Configuráveis
 * 
 * 📚 DOCUMENTAÇÃO COMPLETA: ./SUB_TABS_SYSTEM.md
 * 
 * Sistema genérico de abas que suporta:
 * - Sub-abas configuráveis dinamicamente
 * - Presets pré-definidos por entidade
 * - API genérica para qualquer domínio
 * - Prevenção de abas duplicadas
 * - Lazy loading de componentes
 * 
 * Exemplo de uso:
 * ```typescript
 * await tabSystemService.openTabWithPreset('driver', 'withDocs', driverData);
 * await tabSystemService.openTabWithSubTabs('vehicle', vehicleData, ['dados', 'documentos']);
 * ```
 */
import { Component, Input, Output, EventEmitter, OnInit, OnDestroy, ViewChild, QueryList, ViewChildren, Inject, Optional, HostListener } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { Subscription } from 'rxjs';

import { TabSystemService } from './services/tab-system.service';
import { TabItem, TabSystemState, TabSystemConfig, TabSystemEvents } from './interfaces/tab-system.interface';
import { Logger } from '../../services/logger/logger.service';
import { DataTableComponent } from '../data-table/data-table.component';
import { GenericTabFormComponent } from '../generic-tab-form/generic-tab-form.component';
import { DomainDashboardComponent } from '../domain-dashboard/domain-dashboard.component';
import { TollparkingDashboardComponent } from '../../../domain/tollparking/dashboard/tollparking-dashboard.component';
import { TabFormConfig } from '../../interfaces/generic-tab-form.interface';

// import { AddressFormComponent, AddressData } from '../address-form/address-form.component';

@Component({
  selector: 'app-tab-system',
  standalone: true,
  imports: [CommonModule, DataTableComponent, FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatButtonModule, MatIconModule, GenericTabFormComponent, DomainDashboardComponent, TollparkingDashboardComponent],
  providers: [TabSystemService],
  template: `
    <div class="custom-tab-system-container">
      
      <!-- Tab Headers -->
      <div class="tab-headers">
        <div 
          *ngFor="let tab of state.tabs; let i = index"
          class="tab-header"
          [class.active]="i === state.selectedTabIndex"
          [class.loading]="tab.isLoading"
          [class.modified]="hasUnsavedChanges(tab)"
          (click)="selectTab(i)">
          
          <!-- Loading Spinner -->
          <div *ngIf="tab.isLoading" class="tab-spinner">
            <div class="spinner"></div>
          </div>
          
          <!-- Tab Icon -->
          <i *ngIf="!tab.isLoading" 
             class="tab-icon {{ getTabIcon(tab.type) }}"
             [class.modified]="hasUnsavedChanges(tab)">
          </i>
          
          <!-- Tab Title -->
          <span class="tab-title" [class.modified]="hasUnsavedChanges(tab)">
            {{ getFormattedTabTitle(tab) }}
            <span *ngIf="hasUnsavedChanges(tab)" class="modified-indicator">*</span>
          </span>
          
          <!-- Close Button -->
          <button 
            *ngIf="!isMainTab(tab)"
            class="tab-close-button"
            [title]="getCloseTooltip(tab)"
            (click)="closeTab(i, $event)"
            [disabled]="tab.isLoading">
            <i class="fas fa-times"></i>
          </button>
        </div>
      </div>
      
      <!-- Tab Content -->
      <div class="tab-content-container">
        <div 
          *ngFor="let tab of state.tabs; let i = index"
          class="tab-content"
          [class.active]="i === state.selectedTabIndex">
          
          <!-- Content for dashboard tab -->
          <div *ngIf="tab.type.endsWith('-dashboard')" class="dashboard-content">
            <!-- Custom Dashboard Component -->
            <div *ngIf="tab.data?.customComponent" class="custom-dashboard-wrapper">
              <ng-container [ngSwitch]="tab.data.customComponent.name">
                <!-- TollparkingDashboardComponent -->
                <app-tollparking-dashboard 
                  *ngSwitchCase="'tollparking-dashboard'"
                  [entities]="tab.data.entities || []"
                  [totalItems]="tab.data.totalItems || 0"
                  [isLoading]="tab.data.isLoading || false">
                </app-tollparking-dashboard>
                
                <!-- Legacy support for class names -->
                <app-tollparking-dashboard 
                  *ngSwitchCase="'TollparkingDashboardComponent'"
                  [entities]="tab.data.entities || []"
                  [totalItems]="tab.data.totalItems || 0"
                  [isLoading]="tab.data.isLoading || false">
                </app-tollparking-dashboard>
                
                <!-- Alternative case for minified names -->
                <app-tollparking-dashboard 
                  *ngSwitchCase="'_TollparkingDashboardComponent'"
                  [entities]="tab.data.entities || []"
                  [totalItems]="tab.data.totalItems || 0"
                  [isLoading]="tab.data.isLoading || false">
                </app-tollparking-dashboard>
                
                <!-- Default fallback for unknown custom components -->
                <div *ngSwitchDefault class="unknown-component-error">
                  <i class="fas fa-exclamation-triangle"></i>
                  <h3>Componente Personalizado Não Reconhecido</h3>
                  <p>Componente: {{ tab.data.customComponent.name || 'Desconhecido' }}</p>
                  <p>Verifique se o componente está importado e registrado corretamente.</p>
                  <div style="margin-top: 16px; padding: 12px; background: var(--surface); border-radius: 8px; font-family: monospace; font-size: 12px;">
                    <strong>Debug Info:</strong><br>
                    customComponent: {{ tab.data.customComponent | json }}
                  </div>
                </div>
              </ng-container>
            </div>
            
            <!-- Default Dashboard Component -->
            <app-domain-dashboard
              *ngIf="!tab.data?.customComponent"
              [title]="tab.title"
              [kpis]="tab.data?.kpis || []"
              [charts]="tab.data?.charts || []"
              [recentItems]="tab.data?.recentItems || []"
              [config]="tab.data?.dashboardConfig">
            </app-domain-dashboard>
          </div>

          <!-- Content for list tab -->
          <div *ngIf="tab.type.endsWith('-list')" class="list-content">
            <app-data-table
              [config]="tab.data?.tableConfig"
              [data]="tab.data?.items || tab.data?.drivers || tab.data?.financialCategories || []"
              [tableId]="tab.type.replace('-list', '')"
              [loading]="tab.data?.isLoading || false"
              [currentPage]="tab.data?.currentPage || 1"
              [totalDataItems]="tab.data?.totalItems || 0"
              [domainConfig]="tab.data?.domainConfig"
              [bulkActions]="tab.data?.bulkActions || []"
              (sortChange)="onTableEvent('sort', $event)"
              (pageChange)="onTableEvent('page', $event)"
              (filterChange)="onTableEvent('filter', $event)"
              (columnsChange)="onTableEvent('columnsChange', $event)"
              (actionClick)="onTableEvent('actionClick', $event)"
              (advancedFiltersChanged)="onTableEvent('advancedFiltersChanged', $event)"
              (rowSelectionChanged)="onTableEvent('rowSelectionChanged', $event)"
              [serverSidePagination]="tab.data?.domainConfig?.serverSidePagination ?? true">
            </app-data-table>
          </div>
          
          <!-- Content for individual item details -->
          <div *ngIf="!tab.type.endsWith('-list') && !tab.type.endsWith('-dashboard')" class="item-edit-content">
            <!-- Debug info para identificar problemas -->
            <div *ngIf="showDebugInfo" class="debug-tab-info" style="background: #f0f0f0; padding: 10px; margin: 10px; border-radius: 4px;">
              <h4>🔍 DEBUG - Tab Info:</h4>
              <p><strong>Type:</strong> {{ tab.type }}</p>
              <p><strong>Custom Component:</strong> {{ tab.customComponent || 'Nenhum' }}</p>
              <p><strong>Has formConfig:</strong> {{ !!tab.data?.formConfig }}</p>
              <p><strong>Show Address Form:</strong> {{ tab.customComponent === 'address-form' }}</p>
              <p><strong>Show Generic Form:</strong> {{ tab.data?.formConfig && !tab.customComponent }}</p>
              <p><strong>Show Fallback:</strong> {{ !tab.data?.formConfig && !tab.customComponent }}</p>
            </div>
            
            <!-- Componente de Endereço Customizado -->
            <!-- <div *ngIf="tab.customComponent === 'address-form'" class="address-form-wrapper">
              <div *ngIf="showDebugInfo" style="background: #e8f5e8; padding: 8px; margin-bottom: 10px; border-radius: 4px;">
                ✅ Renderizando AddressFormComponent
              </div>
              <app-address-form
                [initialData]="tab.data"
                [title]="tab.componentConfig?.title || 'Endereço'"
                [isReadonly]="tab.componentConfig?.readonly || false"
                [showSaveButton]="tab.componentConfig?.showSaveButton !== false"
                [showCancelButton]="tab.componentConfig?.showCancelButton !== false"
                (save)="onAddressSave(tab, $event)"
                (cancel)="onAddressCancel(tab)"
                (dataChange)="onAddressDataChange(tab, $event)"
                (cepSearched)="onAddressCepSearched(tab, $event)">
              </app-address-form>
            </div> -->
            
            <!-- Formulário Genérico -->
            <div *ngIf="tab.data?.formConfig && !tab.customComponent" class="generic-form-wrapper">
              <div *ngIf="showDebugInfo" style="background: #e8f5e8; padding: 8px; margin-bottom: 10px; border-radius: 4px;">
                ✅ Renderizando GenericTabFormComponent
              </div>
              <app-generic-tab-form
                [config]="tab.data.formConfig"
                [initialData]="tab.data"
                [tabItem]="tab"
                [isLoading]="tab.isLoading || false"
                (formSubmit)="onGenericFormSubmit(tab, $event)"
                (formCancel)="onGenericFormCancel(tab)"
                (formChange)="onGenericFormChange(tab, $event)">
              </app-generic-tab-form>
            </div>
            
            <!-- Fallback para abas sem configuração de formulário -->
            <div *ngIf="!tab.data?.formConfig && !tab.customComponent" class="no-form-config">
              <div *ngIf="showDebugInfo" style="background: #ffe8e8; padding: 8px; margin-bottom: 10px; border-radius: 4px;">
                ⚠️ Renderizando Fallback (Nenhuma configuração encontrada)
              </div>
              <div class="no-config-message">
                <i class="fas fa-exclamation-triangle"></i>
                <h3>Configuração de formulário não encontrada</h3>
                <p>Esta aba não possui uma configuração de formulário válida.</p>
                <p><strong>Tipo:</strong> {{ tab.type }}</p>
                <p><strong>Dados:</strong></p>
                <pre>{{ tab.data | json }}</pre>
              </div>
            </div>
          </div>
          
          <!-- ng-content for custom projections -->
          <ng-content [ngProjectAs]="'[tab-content-' + i + ']'"></ng-content>
        </div>
        
        <!-- Empty State -->
        <div *ngIf="state.tabs.length === 0" class="empty-state">
          <i class="fas fa-folder-open empty-icon"></i>
          <h3>Nenhuma aba aberta</h3>
          <p>Adicione itens para começar a editá-los em abas.</p>
        </div>
      </div>
      
      <!-- Debug Info -->
      <div *ngIf="showDebugInfo" class="debug-info">
        <h4>Debug Info:</h4>
        <p>Abas abertas: {{ state.tabs.length }} / {{ state.maxTabs }}</p>
        <p>Aba selecionada: {{ state.selectedTabIndex }}</p>
        <p>Mudanças não salvas: {{ hasAnyUnsavedChanges() ? 'Sim' : 'Não' }}</p>
      </div>
      
    </div>
  `,
  styles: [`
    /*
     * SISTEMA DE TRAVA PARA HEADER
     * ============================
     * 
     * Este sistema garante que o conteúdo das abas nunca ultrapasse o header fixo.
     * 
     * Estrutura:
     * - Header fixo: height: 60px, z-index: 100
     * - Tab System: max-height: calc(100vh - 80px), z-index: 10
     * - Tab Headers: position: sticky, z-index: 15
     * - Tab Content: overflow-y: auto, scroll controlado
     * 
     * A altura é calculada como:
     * 100vh (altura da tela) - 80px (60px header + 20px margem de segurança)
     */

    .custom-tab-system-container {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 8px;
      background: var(--background);
      position: relative;
      z-index: 10;
    }

    /* Tab Headers */
    .tab-headers {
      display: flex;
      background: var(--surface);
      border-bottom: 1px solid var(--divider);
      overflow-x: auto;
      flex-shrink: 0;
      position: sticky;
      top: 0;
      z-index: 15;
    }

    .tab-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      cursor: pointer;
      border-right: 1px solid var(--divider);
      background: var(--surface);
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: 500;
      transition: all 0.2s ease;
      white-space: nowrap;
      position: relative;
      min-width: 120px;
      max-width: 200px;

      &:hover {
        background: var(--hover-bg);
        color: var(--text-primary);
      }

      &.active {
        background: var(--background);
        color: var(--text-primary);
        border-bottom: 2px solid var(--idt-primary-color);
        font-weight: 600;
      }

      &.loading {
        opacity: 0.7;
        pointer-events: none;
      }

      &.modified {
        // background: rgba(var(--idt-warning-rgb), 0.1);
        border-bottom-color: var(--idt-warning);
        
        &.active {
          background: var(--background);
          box-shadow: inset 0 -2px 0 var(--idt-warning);
        }
      }
    }

    /* Tab Icons */
    .tab-icon {
      font-size: 16px;
      flex-shrink: 0;
      // color: var(--text-secondary);
      transition: color 0.2s ease;

      &.modified {
        color: var(--idt-warning);
      }
    }

    .tab-header.active .tab-icon {
      color: var(--idt-primary-color);
    }

    /* Tab Title */
    .tab-title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &.modified {
        color: var(--idt-warning-shade);
      }

      .modified-indicator {
        color: var(--idt-warning);
        font-weight: bold;
        margin-left: 4px;
      }
    }

    .tab-header.active .tab-title {
      // color: var(--idt-primary-color);
    }

    /* Tab Title for main tabs in light theme */
    .tab-header.active .tab-title {
      color: var(--text-color);
    }

    /* Override for dark theme */
    .dark-theme .tab-header.active .tab-title {
      color: var(--text-primary);
    }

    /* Loading Spinner */
    .tab-spinner {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
    }

    .spinner {
      width: 12px;
      height: 12px;
      border: 2px solid var(--hover-bg);
      border-top: 2px solid var(--idt-primary-color);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* Close Button */
    .tab-close-button {
      background: none;
      border: none;
      padding: 4px;
      cursor: pointer;
      border-radius: 4px;
      color: var(--text-secondary);
      font-size: 12px;
      transition: all 0.2s ease;
      opacity: 0.7;

      &:hover {
        background: rgba(var(--idt-danger-rgb), 0.1);
        color: var(--idt-danger);
        opacity: 1;
      }

      &:disabled {
        opacity: 0.3;
        cursor: not-allowed;
      }
    }

    /* Tab Content */
    .tab-content-container {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    .tab-content {
      flex: 1;
      min-height: 0;
      display: none;
    }

    .tab-content.active {
      display: flex;
      flex-direction: column;
    }

    .dashboard-content {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .custom-dashboard-wrapper {
      height: 100%;
      width: 100%;
    }

    .unknown-component-error {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      padding: 40px;
      text-align: center;
      color: var(--text-secondary);

      i {
        font-size: 48px;
        color: var(--idt-warning);
        margin-bottom: 16px;
      }

      h3 {
        margin: 0 0 12px 0;
        color: var(--text-primary);
        font-size: 18px;
      }

      p {
        margin: 4px 0;
        font-size: 14px;
        max-width: 400px;
      }
    }

    .list-content {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    
    .item-edit-content {
      height: 100%;
      overflow-y: auto;
      padding: 1rem;
    }
    
    .generic-form-wrapper {
      height: 100%;
    }

    /* Empty State */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: var(--text-secondary);
      text-align: center;
      padding: 40px;

      .empty-icon {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
      }

      h3 {
        margin: 0 0 8px 0;
        font-size: 18px;
        font-weight: 500;
      }

      p {
        margin: 0;
        font-size: 14px;
        max-width: 300px;
      }
    }

    /* Default Tab Content */
    .default-tab-content {
      h3 {
        margin: 0 0 16px 0;
        color: var(--text-primary);
      }

      p {
        margin: 0 0 16px 0;
        color: var(--text-secondary);
      }

      pre {
        background-color: var(--surface);
        border: 1px solid var(--divider);
        border-radius: 4px;
        padding: 12px;
        font-size: 12px;
        overflow: auto;
        max-height: 300px;
      }
    }

    /* Debug Info */
    .debug-info {
      background-color: var(--surface);
      border-top: 1px solid var(--divider);
      padding: 12px;
      font-size: 12px;

      h4 {
        margin: 0 0 8px 0;
        font-size: 14px;
        color: var(--text-primary);
      }

      p {
        margin: 4px 0;
        color: var(--text-secondary);
      }
    }

    /* Responsivity */
    @media (max-width: 768px) {
      .custom-tab-system-container {
        /* TRAVA PARA HEADER - Manter altura dinâmica em mobile */
        max-height: 100%;
      }

      .tab-content-container {
        /* TRAVA PARA HEADER - Altura dinâmica em mobile */
        min-height: 0;
      }

      .tab-header {
        min-width: 100px;
        max-width: 150px;
        padding: 10px 12px;
        font-size: 13px;
      }

      .tab-content {
        padding: 0px;
      }
    }

    /* Scrollbar for tab headers */
    .tab-headers::-webkit-scrollbar {
      height: 4px;
    }

    .tab-headers::-webkit-scrollbar-track {
      background: var(--surface);
    }

    .tab-headers::-webkit-scrollbar-thumb {
      background: var(--text-secondary);
      border-radius: 2px;
    }

    .tab-headers::-webkit-scrollbar-thumb:hover {
      background: var(--text-primary);
    }

    /* Generic list and item styles */
    .list-content {
      height: 100%;
      padding: 0;
      /* TRAVA PARA HEADER - Overflow controlado para tabela */
      overflow: visible;
      display: flex;
      flex-direction: column;
    }

    .item-edit-content {
      height: 100%;
      padding: 0;
      /* TRAVA PARA HEADER - Scroll vertical para formulários longos */
      overflow-y: auto;
      overflow-x: hidden;
    }

    /* Fallback para abas sem configuração */
    .no-form-config {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
    }

    .no-config-message {
      text-align: center;
      max-width: 500px;
      padding: 32px;
      background: var(--surface);
      border: 1px solid var(--divider);
      border-radius: 8px;
      
      i {
        font-size: 48px;
        color: var(--idt-warning);
        margin-bottom: 16px;
        display: block;
      }
      
      h3 {
        margin: 0 0 12px 0;
        color: var(--text-primary);
        font-size: 18px;
      }
      
      p {
        margin: 8px 0;
        color: var(--text-secondary);
        font-size: 14px;
      }
      
      pre {
        background: var(--background);
        border: 1px solid var(--divider);
        border-radius: 4px;
        padding: 12px;
        font-size: 12px;
        overflow: auto;
        max-height: 200px;
        text-align: left;
        margin-top: 16px;
      }
    }

    .item-form-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 16px;
    }

    .item-form {
      max-width: 800px;
      margin: 0 auto;

      h3 {
        margin: 0 0 24px 0;
        color: var(--text-primary);
        font-size: 24px;
        font-weight: 600;
      }
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 16px;
      margin-bottom: 32px;

      mat-form-field {
        width: 100%;
      }
    }

    .form-actions {
      display: flex;
      gap: 16px;
      justify-content: flex-end;
      padding-top: 16px;
      border-top: 1px solid var(--divider);

      button {
        min-width: 120px;
        display: flex;
        align-items: center;
        gap: 8px;
      }
    }

    /* Drivers specific styles */
    .drivers-list-content {
      height: 100%;
      padding: 0;
      /* TRAVA PARA HEADER - Overflow controlado para tabela */
      overflow: visible;
      display: flex;
      flex-direction: column;
    }

    .driver-edit-content {
      height: 100%;
      padding: 0;
      /* TRAVA PARA HEADER - Scroll vertical para formulários longos */
      overflow-y: auto;
      overflow-x: hidden;
    }

    .driver-form-container {
      max-width: 800px;
      margin: 0 auto;
      padding: 16px;
    }

    .loading-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px;
      color: var(--text-secondary);
    }

    /* Spinner customizado */
    .custom-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid var(--surface);
      border-top: 4px solid var(--idt-primary-color);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 16px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* Estilos genéricos para detalhes de itens */
    .item-details {
      .detail-section {
        margin-bottom: 32px;
        background: var(--background);
        border: 1px solid var(--divider);
        border-radius: 8px;
        padding: 24px;

        h4 {
          margin: 0 0 16px 0;
          color: var(--text-primary);
          font-size: 18px;
          font-weight: 600;
          border-bottom: 2px solid var(--idt-primary-color);
          padding-bottom: 8px;
        }

        .detail-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 16px;

          .detail-item {
            display: flex;
            flex-direction: column;

            label {
              font-weight: 600;
              color: var(--text-primary);
              margin-bottom: 4px;
              font-size: 14px;
            }

            span {
              color: var(--text-secondary);
              padding: 8px 12px;
              background: var(--surface);
              border-radius: 4px;
              border: 1px solid var(--hover-bg);
            }
          }
        }
      }
    }

    /* Responsividade genérica */
    @media (max-width: 768px) {
      .item-form-container {
        padding: 8px;
      }

      .item-details .detail-section .detail-grid {
        grid-template-columns: 1fr;
      }
    }
  `]
})
export class TabSystemComponent implements OnInit, OnDestroy {
  @Input() config?: Partial<TabSystemConfig>;
  @Input() events?: TabSystemEvents;
  @Input() showDebugInfo: boolean = false;
  @Input() hasExternalContent: boolean = false;
  
  @Output() tabSelected = new EventEmitter<TabItem>();
  @Output() tabClosed = new EventEmitter<TabItem>();
  @Output() tabAdded = new EventEmitter<TabItem>();
  @Output() tableEvent = new EventEmitter<any>();

  @ViewChildren(GenericTabFormComponent) tabForms!: QueryList<GenericTabFormComponent>;

  state: TabSystemState = {
    tabs: [],
    selectedTabIndex: 0,
    maxTabs: 5,
    isLoading: false
  };

  private stateSubscription?: Subscription;
  private logger: Logger;
  isMobile: boolean = false; // ✅ Nova propriedade para detectar mobile

  constructor(
    public tabSystemService: TabSystemService
  ) {
    this.logger = new Logger('TabSystemComponent');
  }

  ngOnInit() {
    // Configurar o serviço com as configurações fornecidas
    if (this.config) {
      this.tabSystemService.configure(this.config, this.events);
    }

    // Inscrever-se nas mudanças de estado
    this.stateSubscription = this.tabSystemService.state$.subscribe(state => {
      this.state = state;
    });

    // ✅ Verificar se é mobile
    this.checkIfMobile();
  }

  ngOnDestroy() {
    if (this.stateSubscription) {
      this.stateSubscription.unsubscribe();
    }
  }

  @HostListener('window:resize', ['$event'])
  onResize() {
    this.checkIfMobile(); // ✅ Atualizar quando redimensionar
  }

  private checkIfMobile() {
    this.isMobile = window.innerWidth <= 768; // ✅ Detectar mobile
  }

  /* Métodos principais */
  async addTab(item: TabItem): Promise<boolean> {
    const success = await this.tabSystemService.addTab(item);
    if (success) {
      this.tabAdded.emit(item);
    }
    return success;
  }

  async closeTab(index: number, event?: Event): Promise<void> {
    if (event) {
      event.stopPropagation();
    }

    const tabToClose = this.state.tabs[index];
    if (tabToClose) {
      if (this.isMainTab(tabToClose)) {
        // this.logger.warn('Tentativa de fechar aba principal ignorada', { tab: tabToClose });
        return;
      }

      const success = await this.tabSystemService.removeTab(index);
      if (success) {
        this.tabClosed.emit(tabToClose);
      }
    }
  }

  selectTab(index: number): void {
    this.tabSystemService.selectTab(index);
    const selectedTab = this.state.tabs[index];
    if (selectedTab) {
      this.tabSelected.emit(selectedTab);
    }
  }

  /* Métodos utilitários */
  hasUnsavedChanges(tab: TabItem): boolean {
    return tab.isModified || false;
  }

  getTabIcon(type: string): string {
    // Mapeamento de tipos para ícones
    const iconMap: { [key: string]: string } = {
      // Dashboards
      'drivers-dashboard': 'fas fa-chart-bar',
      'vehicles-dashboard': 'fas fa-chart-bar',
      'users-dashboard': 'fas fa-chart-bar',
      'clients-dashboard': 'fas fa-chart-bar',
      'companies-dashboard': 'fas fa-chart-bar',
      'products-dashboard': 'fas fa-chart-bar',
      // Lists
      'drivers-list': 'fas fa-users',
      'old-vehicles-list': 'fas fa-car',
      'vehicles-list': 'fas fa-car',
      'users-list': 'fas fa-users-cog',
      'clients-list': 'fas fa-handshake',
      'companies-list': 'fas fa-building',
      'products-list': 'fas fa-box',
      // Individual items
      'driver': 'fas fa-user',
      'driver-address': 'fas fa-map-marker-alt',
      'vehicle': 'fas fa-car',
      'user': 'fas fa-user-cog',
      'client': 'fas fa-handshake',
      'company': 'fas fa-building',
      'product': 'fas fa-box'
    };

    return iconMap[type] || 'fas fa-file-alt';
  }

  getCloseTooltip(tab: TabItem): string {
    return tab.isModified ? 
      `Fechar "${tab.title}" (mudanças não salvas)` : 
      `Fechar "${tab.title}"`;
  }

  hasProjectedContent(): boolean {
    // Implementar lógica se necessário
    return false;
  }

  isMainTab(tab: TabItem): boolean {
    // Abas principais são aquelas que terminam com '-list' (listas)
    return tab.type.endsWith('-list');
  }

  hasAnyUnsavedChanges(): boolean {
    return this.tabSystemService.hasUnsavedChanges();
  }

  /* Métodos públicos para compatibilidade */
  getTabs(): TabItem[] {
    return this.state.tabs;
  }

  getSelectedTab(): TabItem | null {
    return this.tabSystemService.getSelectedTab();
  }

  async closeAllTabs(): Promise<void> {
    await this.closeAllSecondaryTabs();
  }

  async closeAllSecondaryTabs(): Promise<void> {
    const tabsToClose: number[] = [];
    
    this.state.tabs.forEach((tab, index) => {
      if (!this.isMainTab(tab)) {
        tabsToClose.push(index);
      }
    });

    for (let i = tabsToClose.length - 1; i >= 0; i--) {
      const index = tabsToClose[i];
      await this.closeTab(index);
    }

    // this.logger.log(`Fechadas ${tabsToClose.length} abas secundárias`);
  }

  getCurrentSelectedIndex(): number {
    return this.state.selectedTabIndex;
  }

  onTableEvent(event: string, data: any): void {
    // Emitir eventos da tabela para o componente pai através dos eventos das abas
    // this.logger.debug('Evento da tabela:', { event, data });
    
    // Emitir evento para o componente pai
    this.tableEvent.emit({ event, data });
  }

  getGenderLabel(gender?: string): string {
    const genderMap: { [key: string]: string } = {
      'male': 'Masculino',
      'female': 'Feminino', 
      'other': 'Outro'
    };
    
    return genderMap[gender || ''] || '-';
  }

  onGenericFormSubmit(tab: TabItem, event: any): void {
    // Determinar se é criação ou atualização
    const isNewItem = tab.data?.id === 'new' || !tab.data?.id;

    // 🔧 NORMALIZAR DADOS antes de enviar
    const normalizedData = this.normalizeFormData(event);
    
    // 🚀 GENÉRICO: Emitir evento para o componente pai (domain) lidar com o salvamento
    this.tableEvent.emit({
      event: 'formSubmit',
      data: {
        tab,
        formData: normalizedData,
        isNewItem,
        onSuccess: (response: any) => this.onSaveSuccess(tab, response),
        onError: (error: any) => this.onSaveError(tab, error)
      }
    });
  }

  /**
   * Normaliza os dados do formulário para garantir consistência
   * Especialmente importante para campos como gender que devem estar em lowercase
   */
  private normalizeFormData(formData: any): any {
    if (!formData) return formData;
    
    const normalized = { ...formData };
    
    // 🎯 FIX: Garantir que gender sempre seja lowercase
    if (normalized.gender && typeof normalized.gender === 'string') {
    //   const originalGender = normalized.gender;
    //   normalized.gender = normalized.gender.toLowerCase();
      
    //   if (originalGender !== normalized.gender) {
    //     console.log('🔧 CORREÇÃO APLICADA - Gender normalizado:', {
    //       original: originalGender,
    //       normalized: normalized.gender
    //     });
    //   }
    }
    
    // Adicione outras normalizações aqui conforme necessário
    // Por exemplo: email sempre lowercase, trim em strings, etc.
    
    return normalized;
  }

  /**
   * 🚀 GENÉRICO: Callback de sucesso no salvamento
   */
  private onSaveSuccess(tab: TabItem, response: any): void {
    console.log('🎯 onSaveSuccess chamado:', { tab, response });
    
    // Buscar o componente de formulário para marcar como salvo
    const genericFormComponent = this.getGenericFormComponent(tab);
    if (genericFormComponent) {
      // Marcar formulário como salvo com sucesso
      genericFormComponent.markAsSavedSuccessfully();
      
      // Atualizar dados do formulário com a resposta
      if (response?.data) {
        genericFormComponent.updateFormData(response.data);
      } else if (response) {
        // Se response não tem .data, usar response diretamente
        genericFormComponent.updateFormData(response);
      }
    }
    
    // 🎯 NOVO: Atualizar título da aba com o nome atualizado
    const tabIndex = this.state.tabs.findIndex(t => t.id === tab.id);
    if (tabIndex !== -1) {
      const updatedTabs = [...this.state.tabs];
      const currentTab = updatedTabs[tabIndex];
      
      // Extrair dados da resposta
      const savedData = response?.data || response;
      
      // Atualizar dados da aba
      updatedTabs[tabIndex] = {
        ...currentTab,
        data: { 
          ...currentTab.data, 
          ...savedData,
          // Garantir que o ID seja atualizado se for item novo
          id: savedData?.id || currentTab.data.id
        },
        isModified: false // Marcar como não modificado após salvar
      };
      
      // 🎯 ATUALIZAR TÍTULO DA ABA com o nome atualizado
      if (savedData?.name) {
        const entityName = this.getEntityDisplayName(currentTab.type);
        const isNewItem = currentTab.data.id === 'new';
        
        if (isNewItem) {
          // Para item novo, criar título com o nome
          updatedTabs[tabIndex].title = `${entityName}: ${savedData.name}`;
          // Atualizar também o ID da aba para evitar duplicatas
          updatedTabs[tabIndex].id = `${currentTab.type}-${savedData.id}`;
        } else {
          // Para item existente, atualizar título com novo nome
          updatedTabs[tabIndex].title = `${entityName}: ${savedData.name}`;
        }
        
        console.log('🎯 Título da aba atualizado:', {
          oldTitle: currentTab.title,
          newTitle: updatedTabs[tabIndex].title,
          savedName: savedData.name
        });
      }
      
      // Aplicar mudanças no estado
      this.tabSystemService['stateSubject'].next({
        ...this.state,
        tabs: updatedTabs
      });
      
      console.log('✅ Estado da aba atualizado com sucesso');
    }
  }

  /**
   * Obtém nome de exibição para tipo de entidade
   */
  private getEntityDisplayName(entityType: string): string {
    const displayNames: { [key: string]: string } = {
      'driver': 'Motorista',
      'vehicle': 'Veículo',
      'user': 'Usuário',
      'client': 'Cliente',
      'company': 'Empresa',
      'product': 'Produto',
      'order': 'Pedido',
      'invoice': 'Fatura',
      'route': 'Rota'
    };
    
    return displayNames[entityType] || entityType.charAt(0).toUpperCase() + entityType.slice(1);
  }

  /**
   * 🚀 GENÉRICO: Callback de erro no salvamento
   */
  private onSaveError(tab: TabItem, error: any): void {
    console.error('❌ Erro ao salvar dados:', error);
    console.log('🔍 [DEBUG] onSaveError chamado para tab:', tab.id, tab.type);
    
    // Buscar o componente de formulário para resetar estado de submitting
    const genericFormComponent = this.getGenericFormComponent(tab);
    console.log('🔍 [DEBUG] genericFormComponent encontrado:', !!genericFormComponent);
    
    if (genericFormComponent) {
      console.log('🔄 [DEBUG] Resetando isSubmitting para false');
      genericFormComponent.setSubmitting(false);
    } else {
      console.warn('⚠️ [DEBUG] Componente de formulário não encontrado para resetar isSubmitting');
    }
    
    // Aqui você pode mostrar mensagem de erro para o usuário
    // Por exemplo: this.showErrorMessage('Erro ao salvar dados. Tente novamente.');
  }

  private getGenericFormComponent(tab: TabItem): GenericTabFormComponent | null {
    console.log('🔍 [DEBUG] Buscando GenericFormComponent para tab:', tab.id, tab.type);
    console.log('🔍 [DEBUG] tabForms disponível:', !!this.tabForms);
    console.log('🔍 [DEBUG] tabForms length:', this.tabForms?.length || 0);
    console.log('🔍 [DEBUG] state.tabs length:', this.state.tabs.length);
    
    if (!this.tabForms) {
      console.warn('⚠️ [DEBUG] tabForms não disponível');
      return null;
    }

    // 🎯 NOVA ESTRATÉGIA: Buscar pela aba ativa atual (que deve ser a do formulário)
    const activeTabIndex = this.state.selectedTabIndex;
    const activeTab = this.state.tabs[activeTabIndex];
    
    console.log('🔍 [DEBUG] Aba ativa:', {
      activeTabIndex,
      activeTabId: activeTab?.id,
      activeTabType: activeTab?.type,
      targetTabId: tab.id,
      targetTabType: tab.type,
      isActiveTabTarget: activeTab?.id === tab.id && activeTab?.type === tab.type
    });

    // Se a aba ativa é a que estamos procurando, pegar o último componente de formulário
    if (activeTab?.id === tab.id && activeTab?.type === tab.type) {
      const lastFormComponent = this.tabForms.last;
      console.log('🔍 [DEBUG] Usando último FormComponent (aba ativa):', !!lastFormComponent);
      return lastFormComponent || null;
    }

    // Fallback: busca original por índice
    const formComponent = this.tabForms.find((form, index) => {
      const currentTab = this.state.tabs[index];
      console.log(`🔍 [DEBUG] Fallback - Comparando tab[${index}]:`, {
        currentTab: currentTab?.id,
        targetTab: tab.id,
        match: currentTab && currentTab.id === tab.id && currentTab.type === tab.type
      });
      return currentTab && currentTab.id === tab.id && currentTab.type === tab.type;
    });

    console.log('🔍 [DEBUG] FormComponent encontrado (fallback):', !!formComponent);
    return formComponent || null;
  }

  onGenericFormCancel(tab: TabItem): void {
    // Implemente a lógica para cancelar o formulário
    // this.logger.debug('Formulário cancelado:', { tab });
  }

  onGenericFormChange(tab: TabItem, event: any): void {
    // 🚨 PROTEÇÃO CRÍTICA: Se está em modo de edição, NÃO fazer NADA
    const genericFormComponent = this.getGenericFormComponent(tab);
    if (genericFormComponent && (genericFormComponent as any).isEditMode) {
      return; // ✅ SAIR IMEDIATAMENTE, sem fazer nada
    }
    
    // Evitar loops infinitos verificando se realmente há mudanças
    if (!event || !event.data) {
      return;
    }
    
    // Verificar se o formulário foi modificado comparando com dados originais
    const formData = event.data;
    const originalData = tab.data;
    
    // Verificar se há mudanças comparando campos importantes (excluindo dados técnicos)
    let isModified = false;
    
    if (formData && originalData) {
      // Para novos itens (id === 'new'), considera modificado se há dados preenchidos
      if (originalData.id === 'new') {
        isModified = this.hasFormDataChanges(formData);
      } else {
        // Para itens existentes, compara com dados originais
        isModified = this.hasDataChanges(formData, originalData);
      }
    }
    
    // Encontrar o índice da aba
    const tabIndex = this.state.tabs.findIndex(t => t.id === tab.id && t.type === tab.type);
    
    if (tabIndex !== -1) {
      // Só atualizar se o estado realmente mudou
      const currentTab = this.state.tabs[tabIndex];
      
      if (currentTab.isModified !== isModified) {
        this.tabSystemService.setTabModified(tabIndex, isModified);
      }
    }
  }

  /**
   * Verifica se há dados preenchidos no formulário (para novos itens)
   */
  private hasFormDataChanges(formData: any): boolean {
    if (!formData) return false;
    
    // Campos que consideramos como "dados preenchidos"
    const significantFields = ['name', 'email', 'phone', 'cpf', 'cnpj'];
    
    return significantFields.some(field => {
      const value = formData[field];
      return value && value.toString().trim().length > 0;
    });
  }

  /**
   * Compara dados do formulário com dados originais
   */
  private hasDataChanges(formData: any, originalData: any): boolean {
    if (!formData || !originalData) return false;
    
    // Lista de campos para ignorar na comparação
    const fieldsToIgnore = ['formConfig', 'id', 'isLoading', 'isModified'];
    
    // Obter todas as chaves dos dois objetos
    const formKeys = Object.keys(formData);
    const originalKeys = Object.keys(originalData).filter(key => !fieldsToIgnore.includes(key));
    
    // Verificar se há chaves diferentes ou valores diferentes
    for (const key of formKeys) {
      if (fieldsToIgnore.includes(key)) continue;
      
      const formValue = formData[key];
      const originalValue = originalData[key];
      
      // Normalizar valores para comparação (converter null/undefined para string vazia)
      const normalizedFormValue = this.normalizeValue(formValue);
      const normalizedOriginalValue = this.normalizeValue(originalValue);
      
      if (normalizedFormValue !== normalizedOriginalValue) {
        // this.logger.debug('Mudança detectada:', { 
        //   field: key, 
        //   original: normalizedOriginalValue, 
        //   current: normalizedFormValue 
        // });
        return true;
      }
    }
    
    return false;
  }

  /**
   * Normaliza valores para comparação
   */
  private normalizeValue(value: any): string {
    if (value === null || value === undefined) return '';
    if (typeof value === 'string') return value.trim();
    return value.toString();
  }

  /**
   * Formata o título da tab para mobile
   * Remove o nome do domínio "Motorista:" quando for mobile e tab de edição
   * Exemplos:
   * - "Motorista: João Silva" -> "João Silva" (mobile + não é "Novo")
   * - "Novo Motorista" -> "Novo Motorista" (inalterado)
   */
  getFormattedTabTitle(tab: TabItem): string {
    const maxLength = 15;
    return tab.title.length > maxLength 
      ? tab.title.substring(0, maxLength) + '...' 
      : tab.title;
  }

  /**
   * Manipula o salvamento do formulário de endereço
   */
  // onAddressSave(tab: TabItem, addressData: AddressData): void {
  //   // Atualizar os dados da aba com os dados do endereço
  //   const updatedData = {
  //     ...tab.data,
  //     // Mapear os dados do endereço para o formato esperado
  //     address_cep: addressData.cep,
  //     address_uf: addressData.state,
  //     address_city: addressData.city,
  //     address_neighborhood: addressData.neighborhood,
  //     address_street: addressData.street,
  //     address_number: addressData.number,
  //     address_complement: addressData.complement
  //   };

  //   // Atualizar a aba com os novos dados
  //   const tabIndex = this.state.tabs.findIndex(t => t.id === tab.id);
  //   if (tabIndex !== -1) {
  //     this.tabSystemService.updateTab(tabIndex, updatedData);
      
  //     // Marcar como não modificado após salvar
  //     const currentState = this.tabSystemService.getCurrentState();
  //     const updatedTabs = [...currentState.tabs];
  //     updatedTabs[tabIndex] = {
  //       ...updatedTabs[tabIndex],
  //       isModified: false
  //     };
      
  //     this.tabSystemService['stateSubject'].next({
  //       ...currentState,
  //       tabs: updatedTabs
  //     });
  //   }

  //   // Se houver uma aba pai (driver), propagar os dados para ela
  //   if (tab.parentId) {
  //     this.propagateAddressDataToParent(tab.parentId, addressData);
  //   }
  // }

  /**
   * Manipula o cancelamento do formulário de endereço
   */
  // onAddressCancel(tab: TabItem): void {
  //   // Fechar a aba de endereço
  //   const tabIndex = this.state.tabs.findIndex(t => t.id === tab.id);
  //   if (tabIndex !== -1) {
  //     this.closeTab(tabIndex);
  //   }
  // }

  /**
   * Manipula mudanças nos dados do formulário de endereço
   */
  // onAddressDataChange(tab: TabItem, addressData: AddressData): void {
  //   // Marcar a aba como modificada quando houver mudanças
  //   const tabIndex = this.state.tabs.findIndex(t => t.id === tab.id);
  //   if (tabIndex !== -1) {
  //     const currentState = this.tabSystemService.getCurrentState();
  //     const updatedTabs = [...currentState.tabs];
  //     updatedTabs[tabIndex] = {
  //       ...updatedTabs[tabIndex],
  //       isModified: true,
  //       data: {
  //         ...updatedTabs[tabIndex].data,
  //         // Manter dados atualizados em tempo real
  //         address_cep: addressData.cep,
  //         address_uf: addressData.state,
  //         address_city: addressData.city,
  //         address_neighborhood: addressData.neighborhood,
  //         address_street: addressData.street,
  //         address_number: addressData.number,
  //         address_complement: addressData.complement
  //       }
  //     };
      
  //     this.tabSystemService['stateSubject'].next({
  //       ...currentState,
  //       tabs: updatedTabs
  //     });
  //   }
  // }

  /**
   * Manipula resultado de busca de CEP
   */
  onAddressCepSearched(tab: TabItem, cepResult: any): void {
    // Aqui você pode implementar lógica adicional quando um CEP é encontrado
    // Por exemplo, validações específicas, logs, etc.
    
    // O preenchimento automático já é feito pelo AddressFormComponent
    // Este método é para ações adicionais se necessário
  }

  /**
   * Propaga dados de endereço para a aba pai (ex: driver)
   */
  // private propagateAddressDataToParent(parentId: string | number, addressData: AddressData): void {
  //   // Encontrar a aba pai
  //   const parentTabIndex = this.state.tabs.findIndex(t => 
  //     t.id && t.id.toString().includes(parentId.toString()) && t.type === 'driver'
  //   );
    
  //   if (parentTabIndex !== -1) {
  //     // Atualizar dados da aba pai com dados de endereço
  //     const parentTab = this.state.tabs[parentTabIndex];
  //     const updatedParentData = {
  //       ...parentTab.data,
  //       address_cep: addressData.cep,
  //       address_uf: addressData.state,
  //       address_city: addressData.city,
  //       address_neighborhood: addressData.neighborhood,
  //       address_street: addressData.street,
  //       address_number: addressData.number,
  //       address_complement: addressData.complement
  //     };
      
  //     this.tabSystemService.updateTab(parentTabIndex, updatedParentData);
  //   }
  // }
} 