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 { RoutesService } from "./routes.service";
import { Route } from "./route.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 { PersonService } from "../../shared/services/person.service";
import { DriversService } from "../drivers/drivers.service";
import { CompanyService } from "../company/company.service";
import { DateRangeShortcuts } from "../../shared/utils/date-range.utils";
/**
 * 🎯 RoutesComponent - Gestão Completa de Rotas PraFrota
 * 
 * Componente principal para gerenciamento de rotas de transporte seguindo
 * o padrão BaseDomainComponent do PraFrota.
 * 
 * ✨ Integra com:
 * - Mercado Live Routes (First Mile, Line Haul, Last Mile)
 * - Shopee Routes
 * - Rotas customizadas
 * - Sistema de fallback para dados offline
 * 
 * 🚀 Funcionalidades:
 * - CRUD completo de rotas
 * - Rastreamento em tempo real
 * - Gestão de paradas e entregas
 * - Controle de custos e receitas
 * - Integração com motoristas e veículos
 */
@Component({
  selector: 'app-routes',
  standalone: true,
  imports: [CommonModule, TabSystemComponent],
  providers: [DatePipe],
  templateUrl: './routes.component.html',
  styleUrl: './routes.component.scss'
})
export class RoutesComponent extends BaseDomainComponent<Route> {

  constructor(
    private routesService: RoutesService,
    titleService: TitleService,
    headerActionsService: HeaderActionsService,
    cdr: ChangeDetectorRef,
    private datePipe: DatePipe,
    private tabFormConfigService: TabFormConfigService,
    private confirmationService: ConfirmationService,
    private personService: PersonService, // ✅ Injeção do PersonService para remote-select
    private driversService: DriversService, // ✅ Injeção do DriversService para remote-select
    private companyService: CompanyService,
  ) {
    super(titleService, headerActionsService, cdr, routesService);
    
    // 🚀 REGISTRAR configuração específica de rotas
    this.registerFormConfig();    
  }

  override ngOnInit(): void {
    super.ngOnInit();
    
    // 🎯 Adicionar ao window para fácil acesso no console
    (window as any).routesComponent = this;
    console.log('🎯 Componente disponível em: window.routesComponent');
    console.log('🎯 Para exportar dados, execute: window.routesComponent.exportDataToConsole()');
    
    // 🎯 EXECUTAR EXPORTAÇÃO AUTOMÁTICA APÓS 2 SEGUNDOS
    // setTimeout(() => {
      // console.log('🎯 Executando exportação automática dos dados...');
      // this.exportDataToConsole();
    // }, 2000);
  }
 
  /**
   * 🎯 Registra a configuração de formulário específica para rotas
   */
  private registerFormConfig(): void {
    this.tabFormConfigService.registerFormConfig('route', () => this.getFormConfig());
  }

  // ========================================
  // 🎯 CONFIGURAÇÃO DO DOMÍNIO
  // ========================================
  // ========================================
  // 🔧 DEBUG TEMPORÁRIO
  // ========================================
  // new Date().toISOString().split('T')[0]
  protected override getDomainConfig(): DomainConfig {
    return {
      domain: 'route',
      title: 'Rotas',
      entityName: 'rota',
      subTabs: ['dados', 'paradas', 'custos', 'documentos', 'historico'],
      pageSize: 1000,
      filterConfig: {

        defaultFilters: [
          {
            field: 'status',
            operator: 'in', 
            value: ['PENDING', 'INPROGRESS','DELIVERED', 'DELAYED', 'CANCELLED']
          },
          {
            field: 'start_date',
            operator: 'gte',
            value:  DateRangeShortcuts.today().date_start
          },
          {
            field: 'end_date',
            operator: 'lte',
            value:  DateRangeShortcuts.today().date_end
          }
        ],
        
        fieldsSearchDefault: ['licensePlates'],
        dateRangeFilter: true,
        dateFieldNames: {
          startField: 'start_date',
          endField: 'end_date'
        },
        companyFilter: true,
        searchConfig: {
          minSearchLength: 4,           // ✨ Só pesquisar após 3 caracteres
          debounceTime: 400,           // ✨ Aguardar 500ms após parar de digitar
          preserveSearchOnDataChange: true  // ✨ Não apagar o campo quando dados chegam
        }
      },
      columns: [
        { field: "routeNumber", header: "Número", sortable: true, filterable: true },
        { 
          field: "type", 
          header: "Tipo", 
          sortable: true, 
          filterable: true,
          label: (value: any) => {
            const typeLabels: { [key: string]: string } = {
              'FIRSTMILE': '🚛 First Mile',
              'LINEHAUL': '🚚 Line Haul',
              'LASTMILE': '📦 Last Mile',
              'CUSTOM': '🎯 Personalizada'
            };
            return typeLabels[value] || value;
          }
        },
        { 
          field: "status", 
          header: "Status", 
          sortable: true, 
          filterable: true,
          allowHtml: true,
          search: true,
          searchType: "select",
          searchOptions: [
            { value: 'PENDING', label: 'Pendente' },
            { value: 'INPROGRESS', label: 'Em Andamento' },
            // { value: 'COMPLETED', label: 'Completado' },
            { value: 'DELIVERED', label: 'Concluída' },
            { value: 'DELAYED', label: 'Atrasada' },
            { value: 'CANCELLED', label: 'Cancelada' },
            { value: 'PLANNED', label: 'Planejada' },
            // { value: 'NOTFOUND', label: 'Não Encontrada' },
          ],
          label: (status: any) => {
            if (!status.toLowerCase()) return '<span class="status-badge status-unknown">Não informado</span>';
            
            const statusConfig: { [key: string]: { label: string, class: string } } = {
              'pending': { label: 'Pendente', class: 'status-pending' },
              'inprogress': { label: 'Em Andamento', class: 'status-in_transit' },
              // 'completed': { label: 'Completado', class: 'status-delivered' },
              'delivered': { label: 'Concluída', class: 'status-delivered' },
              'delayed': { label: 'Atrasada', class: 'status-delayed' },
              'cancelled': { label: 'Cancelada', class: 'status-cancelled' },
              'planned': { label: 'Planejada', class: 'status-planned' }
            };
            
            const config = statusConfig[status.toLowerCase()] || { label: status, class: 'status-unknown' };
            return `<span class="status-badge ${config.class}">${config.label}</span>`;
          }
        },
        { 
          field: "priority", 
          header: "Prioridade", 
          sortable: true, 
          filterable: true,
          allowHtml: true,
          label: (value: any) => {
            const priorityConfig: { [key: string]: { label: string, class: string, icon: string } } = {
              'low': { 
                label: 'Baixa', 
                class: 'priority-low-text', 
                icon: '⬇️' 
              },
              'normal': { 
                label: 'Normal', 
                class: 'priority-normal-text', 
                icon: '➡️' 
              },
              'high': { 
                label: 'Alta', 
                class: 'priority-high-badge', 
                icon: '🔥' 
              },
              'urgent': { 
                label: 'Urgente', 
                class: 'priority-urgent-badge', 
                icon: '🚨' 
              }
            };
            const config = priorityConfig[value.toLowerCase()] || { 
              label: value, 
              class: 'priority-unknown-text', 
              icon: '❓' 
            };
            return `<span class="${config.class}">${config.icon} ${config.label}</span>`;
          }
        },
        {
          field: "vehicleFleetType",
          header: "Tipo de Frota",
          sortable: true,
          filterable: true, 
          search: false,
          searchType: "select",
          allowHtml: true,
          searchOptions: [
            { value: 'RENTAL', label: 'Rentals' },
            { value: 'CORPORATE', label: 'Corporativo' },
            { value: 'AGGREGATE', label: 'Agregado' },
            { value: 'FIXED_RENTAL', label: 'Frota Fixa - Locação' },
            { value: 'FIXED_DAILY', label: 'Frota Fixa - Diarista' },
            { value: 'OTHER', label: 'Outro' }
          ],
          label: (value: any) => {
            if (!value) return '<span class="status-badge status-unknown">Não informado</span>';
            
            const statusConfig: { [key: string]: { label: string, class: string } } = {
              'rental': { label: 'Rentals', class: 'status-rental' },
              'corporate': { label: 'Corporativo', class: 'status-corporate' },
              'aggregate': { label: 'Agregado', class: 'status-aggregate' },
              'fixed_rental': { label: 'Frota Fixa - Locação', class: 'status-fixed-rental' },
              'fixed_daily': { label: 'Frota Fixa - Diarista', class: 'status-fixed-daily' },
              'other': { label: 'Outro', class: 'status-other' }             
            };                             
            const config = statusConfig[value.toLowerCase()] || { label: value, class: 'status-unknown' };
            return `<span class="status-badge ${config.class}">${config.label}</span>`;
          }
        },
        { 
          field: "companyName", 
          header: "Empresa", 
          sortable: true, 
          filterable: true,
          allowHtml: true,
          label: (value: any, row: any) => {
            if (!value) return '<span class="company-not-informed">Empresa não informada</span>';
            
            const companyName = value;
            const iconLogo = row?.icon_logo;
            
            // Se tem logo, usar imagem
            if (iconLogo) {
              return `
                <div class="company-container">
                  <img 
                    src="${iconLogo}" 
                    alt="${companyName}" 
                    class="company-logo"
                    onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
                  />
                  <div class="company-initials-fallback">
                    ${companyName.substring(0, 2).toUpperCase()}
                  </div>
                  <span class="company-name">${companyName}</span>
                </div>
              `;
            } else {
              // Se não tem logo, usar iniciais
              const initials = companyName.substring(0, 2).toUpperCase();
              const colors = [
                'linear-gradient(45deg, #007bff, #0056b3)',
                'linear-gradient(45deg, #28a745, #1e7e34)', 
                'linear-gradient(45deg, #fd7e14, #e55a00)',
                'linear-gradient(45deg, #6f42c1, #59359a)',
                'linear-gradient(45deg, #e83e8c, #d91a72)',
                'linear-gradient(45deg, #20c997, #17a085)'
              ];
              const colorIndex = companyName.length % colors.length;
              const bgColor = colors[colorIndex];
              
              return `
                <div class="company-container">
                  <div class="company-initials" style="background: ${bgColor};">
                    ${initials}
                  </div>
                  <span class="company-name">${companyName}</span>
                </div>
              `;
            }
          }
        },

        { field: "customerName", header: "Cliente", sortable: true, filterable: true },

        {
          field: "vehicleModel",
          header: "Veículo",
          sortable: true,
          filterable: true,
          allowHtml: true,
          label: (value: any, row: any) => {
            const vehicleModel = value || 'Não informado';
            const vehicleTypeCustomer = row?.vehicleTypeCustomer || 'Não informado';
            
            return `
              <div class="vehicle-container" style="display: flex; flex-direction: column; align-items: flex-start; gap: 4px;">
                <div class="vehicle-model" style="font-weight: 500; font-size: 14px; color: #495057;">
                  🚛 ${vehicleModel}
                </div>
                <div class="vehicle-type-customer" style="font-size: 12px; color: #6c757d; font-style: italic;">
                  🏷️ ${vehicleTypeCustomer}
                </div>
              </div>
            `;
          }
        },
        

        { 
          field: "contractName", 
          header: "Contrato", 
          sortable: true, 
          filterable: true,
          allowHtml: true,
          label: (value: any, row: any) => {
            if (!value) return '<span style="color: #6c757d;">📄 Não informado</span>';
            
            const contractId = row?.contractId || '';
            
            return `
              <div class="contract-info" style="display: flex; flex-direction: column; gap: 2px;">
                <div class="contract-name" style="font-weight: 500; font-size: 14px;">
                  📄 ${value}
                </div>
                <div class="contract-id" style="font-size: 11px; color: #6c757d; font-family: monospace;">
                  ID: ${contractId}
                </div>
              </div>
            `;
          }
        },
        { 
          field: "freightTableName", 
          header: "Tabela de Preços", 
          sortable: true, 
          filterable: true,
          allowHtml: true,
          label: (value: any, row: any) => {
            if (!value) return '<span style="color: #6c757d;">💰 Não informada</span>';
            
            const tableId = row?.freightTableId || '';
            
            // Definir ícone baseado no tipo de tabela
            let icon = '💰';
            if (value.includes('Premium') || value.includes('Express')) {
              icon = '⭐';
            } else if (value.includes('Emergencial')) {
              icon = '🚨';
            } else if (value.includes('Medicamentos')) {
              icon = '💊';
            } else if (value.includes('Eletrônicos')) {
              icon = '📱';
            } else if (value.includes('Perecíveis')) {
              icon = '🧊';
            } else if (value.includes('Interestadual')) {
              icon = '🛣️';
            } else if (value.includes('E-commerce')) {
              icon = '🛣️';
            } else if (value.includes('Alimentício')) {
              icon = '🍎';
            } else if (value.includes('Vestuário')) {
              icon = '👕';
            } else if (value.includes('Roupas')) {
              icon = '�';
            } else if (value.includes('Livros')) {
              icon = '📚';
            } else if (value.includes('Casa e Jardim')) {
              icon = '🏠';
            } else if (value.includes('Esportes')) {
              icon = '⚽';
            } else if (value.includes('Automotivo')) {
              icon = '🚗';
            } else if (value.includes('Brinquedos')) {
              icon = '🎉';
            } else if (value.includes('Cosméticos')) {
              icon = '💄';
            } else if (value.includes('Casa e Decoração')) {
              icon = '🏠';
            } else if (value.includes('Alimentos Perecíveis')) {
              icon = '🧊';
            } else if (value.includes('Alimentos Não Perecíveis')) {
              icon = '🍎';
            } else if (value.includes('Roupas e Acessórios')) {
              icon = '👕';
            } else if (value.includes('Livros e Papelaria')) {
              icon = '📚';
            } else if (value.includes('Diversos')) {
              icon = '🔍';
            }
            
            
            return `
              <div class="freight-table-info" style="display: flex; flex-direction: column; gap: 2px;">
                <div class="table-name" style="font-weight: 500; font-size: 14px;">
                  ${icon} ${value}
                </div>
                <div class="table-id" style="font-size: 11px; color: #6c757d; font-family: monospace;">
                  ID: ${tableId}
                </div>
              </div>
            `;
          }
        },
        { field: "origin.address", header: "Origem", sortable: false, filterable: true },
        { field: "destination.address", header: "Destino", sortable: false, filterable: true },
        { field: "hasAmbulance", 
          header: "Help", 
          sortable: false, 
          filterable: true,
          allowHtml: true,
          label: (value: any) => {
            if (value) {
              return `<span class="status-badge status-true">🚑 Sim</span>`;
            } else {
              return `<span class="status-badge status-false">❌ Não</span>`;
            }
          }
        },
        {
          field: "scheduledDeparture",
          header: "Partida Programada",
          sortable: true,
          filterable: false,
          label: (date: any) => this.datePipe.transform(date, "dd/MM/yyyy HH:mm") || "-"
        },
        {
          field: "scheduledArrival",
          header: "Chegada Programada",
          sortable: true,
          filterable: false,
          label: (date: any) => this.datePipe.transform(date, "dd/MM/yyyy HH:mm") || "-"
        },
        { field: "vehiclePlate", 
          header: "Veículo", 
          search: true,
          searchType: "text",
          sortable: true, 
          filterable: true 
        },       
        {
          field: "locationName",
          header: "Local de Operação",
          filterField: "locationIds",
          search: true,
          searchType: "remote-select",
          sortable: true,
          filterable: true,
          allowHtml: true,
          remoteConfig: { // ✅ NOVO: Configuração para remote-select
            service: this.personService,
            searchField: 'name',
            displayField: 'name',
            valueField: 'id',
            labelField: 'locationName',
            modalTitle: 'Selecione os locais de alocação',
            placeholder: 'Digite o nome do local de alocação...',
            multiple: true, // ✅ SEMPRE múltiplo para filtros
            maxResults: 50 // ✅ Mais resultados para filtros
          },
          label: (value: any, row: any) => {
            const locationName = value || 'Não informado';
            const locationNameCustomer = row?.locationNameCustomer || 'Não informado';
            
            return `
              <div class="location-container" style="display: flex; flex-direction: column; align-items: flex-start; gap: 4px;">
                <div class="location-cadastrada" style="font-weight: 500; font-size: 14px; color: #495057;">
                  📍 ${locationName}
                </div>
                <div class="location-operacao" style="font-size: 12px; color: #6c757d; font-style: italic;">
                  🏢 ${locationNameCustomer}
                </div>
              </div>
            `;
          }
        },

        {
          field: "driverName",
          header: "Motorista",
          sortable: true,
          filterable: true,
          allowHtml: true,
          filterField: "driverIds",
          search: true,
          searchType: "remote-select",
          remoteConfig: { // ✅ NOVO: Configuração para remote-select
            label: '',
            service: this.driversService,
            searchField: 'name',
            displayField: 'name',
            valueField: 'id',
            labelField: 'driverName',
            modalTitle: 'Selecione os motoristas',
            placeholder: 'Digite o nome do motorista...',
            multiple: true, // ✅ SEMPRE múltiplo para filtros
            maxResults: 50 // ✅ Mais resultados para filtros
          },
          label: (value: any, row: any) => {
            if (!value) return '<span style="color: #6c757d;">👤 Não informado</span>';
            
            const rating = row?.driverRating || 0;
            const driverName = value;
            
            // Função para gerar estrelas
            const generateStars = (rating: number): string => {
              const fullStars = Math.floor(rating);
              const hasHalfStar = rating % 1 >= 0.5;
              const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
              
              let stars = '';
              
              // Estrelas cheias
              for (let i = 0; i < fullStars; i++) {
                stars += '⭐';
              }
              
              // Meia estrela (se necessário)
              if (hasHalfStar) {
                stars += '⭐';
              }
              
              // Estrelas vazias
              for (let i = 0; i < emptyStars; i++) {
                stars += '☆';
              }
              
              return stars;
            };
            
            // Definir cor baseada no rating
            let ratingColor = '#6c757d';
            let ratingText = '';
            
            if (rating >= 4.5) {
              ratingColor = '#28a745'; // Verde
              ratingText = 'Excelente';
            } else if (rating >= 3.5) {
              ratingColor = '#fd7e14'; // Laranja
              ratingText = 'Bom';
            } else if (rating >= 2.5) {
              ratingColor = '#ffc107'; // Amarelo
              ratingText = 'Regular';
            } else if (rating >= 1.5) {
              ratingColor = '#dc3545'; // Vermelho
              ratingText = 'Ruim';
            } else if (rating > 0) {
              ratingColor = '#6f42c1'; // Roxo
              ratingText = 'Péssimo';
            }
            
                         if (rating > 0) {
               const stars = generateStars(rating);
               return `
                 <div class="driver-rating-container" style="display: flex; flex-direction: column; align-items: flex-start; gap: 4px;">
                   <div class="driver-name-text" style="font-weight: 500; font-size: 14px;">👤 ${driverName}</div>
                   <div style="display: flex; align-items: center; gap: 6px;">
                     <div class="stars-display" style="font-size: 13px; line-height: 1;">${stars}</div>
                     <div class="rating-classification" style="color: ${ratingColor}; font-size: 11px; font-weight: 600;">
                       ${rating.toFixed(1)} • ${ratingText}
                     </div>
                   </div>
                 </div>
               `;
             } else {
               return `
                 <div class="driver-rating-container" style="display: flex; flex-direction: column; align-items: flex-start; gap: 4px;">
                   <div class="driver-name-text" style="font-weight: 500; font-size: 14px;">👤 ${driverName}</div>
                   <div class="no-rating-text" style="font-size: 11px; font-style: italic;">Sem avaliação</div>
                 </div>
               `;
             }
          }
        },
        {
          field: "totalValue",
          header: "Valor Total",
          sortable: true,
          filterable: false,
          label: (value: any) => {
            if (!value || value === 0) return 'R$ 0,00';
            return new Intl.NumberFormat('pt-BR', {
              style: 'currency',
              currency: 'BRL'
            }).format(value);
          }
        },
        {
          field: "paidValue",
          header: "Valor Pago",
          sortable: true,
          filterable: false,
          allowHtml: true,
          label: (value: any, row: any) => {
            if (!value || value === 0) return '<span style="color: #6c757d;">R$ 0,00</span>';
            
            const formattedValue = new Intl.NumberFormat('pt-BR', {
              style: 'currency',
              currency: 'BRL'
            }).format(value);
            
            // Verificar se é diferente do valor total
            const totalValue = row?.totalValue || 0; 
            const isDifferent = Math.abs(value - totalValue) > 1; // Diferença maior que R$ 1,00
            
            if (isDifferent) {
              const isHigher = value > totalValue;
              const diffValue = Math.abs(value - totalValue);
              const formattedDiff = new Intl.NumberFormat('pt-BR', {
                style: 'currency',
                currency: 'BRL'
              }).format(diffValue);
              
              if (isHigher) {
                // Valor pago MAIOR que o total (verde/positivo)
                return `<span style="color: #28a745; font-weight: 600;">
                  💰 ${formattedValue}
                  <br><small style="opacity: 0.8; color: #28a745;">Excedeu +${formattedDiff}</small>
                </span>`;
              } else {
                // Valor pago MENOR que o total (vermelho/negativo) 
                return `<span style="color: #dc3545; font-weight: 600;">
                  🚨 ${formattedValue}
                  <br><small style="opacity: 0.8; color: #dc3545;">Faltou -${formattedDiff}</small>
                </span>`;
              }
            }
            
            // Valor igual ao total (sem ícone, cor normal)
            return formattedValue;
          }
        },
        { 
          field: "productType", 
          header: "Tipo de Produto", 
          sortable: true, 
          filterable: true,
          label: (value: any) => {
            if (!value) value = 'E-commerce';
            const productTypeIcons: { [key: string]: string } = {
              'Medicamentos': '💊 Medicamentos',
              'Eletrônicos': '📱 Eletrônicos',
              'Alimentos': '🍎 Alimentos',
              'E-commerce': '🛒 E-commerce',
              'Interestadual': '🛣️ Interestadual',
              'Roupas': '👕 Roupas',
              'Livros': '📚 Livros',
              'Casa e Jardim': '🏠 Casa e Jardim',
              'Esportes': '⚽ Esportes',
              'Automotivo': '🚗 Automotivo',
              'Brinquedos': '🎉 Brinquedos',
              'Cosméticos': '💄 Cosméticos',
              'Casa e Decoração': '🏠 Casa e Decoração',
              'Alimentos Perecíveis': '🧊 Alimentos Perecíveis',
              'Alimentos Não Perecíveis': '🍎 Alimentos Não Perecíveis',
              'Roupas e Acessórios': '👕 Roupas e Acessórios',
              'Livros e Papelaria': '📚 Livros e Papelaria',
              'Diversos': '🔍 Diversos'
              };
            return productTypeIcons[value] || value;
          }
        },
        {
          field: "volume",
          header: "Pacotes",
          sortable: true,
          filterable: true,
          label: (value: any) => value ? `${value} un.` : '-'
        },
        {
          field: "totalDistance",
          header: "Distância Total",
          sortable: true,
          filterable: true,
          label: (value: any) => value ? `${value} km` : '-'
        },
        
        {
          field: "cargoValue",
          header: "Valor da Carga",
          sortable: true,
          filterable: false,
          allowHtml: true,
          label: (value: any) => {
            if (!value || value === 0) return '<span class="cargo-value-empty">Não informado</span>';
            
            const formattedValue = new Intl.NumberFormat('pt-BR', {
              style: 'currency',
              currency: 'BRL'
            }).format(value);
            
            // Categorizar por valor para visual
            let valueClass = 'cargo-value-normal';
            let icon = '📦';
            
            if (value >= 50000) {
              valueClass = 'cargo-value-high';
              icon = '💎'; // Carga de alto valor
            } else if (value >= 20000) {
              valueClass = 'cargo-value-medium';
              icon = '📋'; // Carga de valor médio
            } else if (value >= 5000) {
              valueClass = 'cargo-value-normal';
              icon = '📦'; // Carga de valor normal
            } else {
              valueClass = 'cargo-value-low';
              icon = '📄'; // Carga de baixo valor
            }
            
            return `<span class="${valueClass}">${icon} ${formattedValue}</span>`;
          }
        },
        {
          field: "weight",
          header: "Peso",
          sortable: true,
          filterable: false,
          allowHtml: true,
          label: (value: any) => {
            if (!value || value === 0) return '<span class="weight-empty">Não informado</span>';
            
            const weightKg = Number(value);
            let weightClass = 'weight-normal';
            let icon = '⚖️';
            let displayValue = '';
            
            // Categorizar por peso para visual
            if (weightKg >= 1000) {
              weightClass = 'weight-heavy';
              icon = '🏋️';
              displayValue = `${(weightKg / 1000).toFixed(1)}t`; // Converter para toneladas
            } else if (weightKg >= 500) {
              weightClass = 'weight-medium';
              icon = '📦';
              displayValue = `${weightKg.toFixed(1)}kg`;
            } else if (weightKg >= 100) {
              weightClass = 'weight-normal';
              icon = '⚖️';
              displayValue = `${weightKg.toFixed(1)}kg`;
            } else {
              weightClass = 'weight-light';
              icon = '🪶';
              displayValue = `${weightKg.toFixed(1)}kg`;
            }
            
            return `<span class="${weightClass}">${icon} ${displayValue}</span>`;
          }
        },
        {
          field: "kmDivergence",
          header: "Divergência de KM",
          sortable: true,
          filterable: false,
          allowHtml: true,
          label: (value: any, row: any) => {
            if (!row) {
              return '<span style="color: #dc3545;">❌ Sem dados</span>';
            }
            
            const planned = Number(row.plannedKm) || 0;
            const actual = Number(row.actualKm) || 0;
            
            if (planned > 0 && actual > 0) {
              const diff = actual - planned;
              const diffAbs = Math.abs(diff);
              
              if (diff === 0) {
                return '<span style="color: #28a745; font-weight: 600;">⚡ Exato (0km)</span>';
              } else if (diff > 0) {
                // Positivo - Acima do planejado (amarelo/laranja)
                return `<span style="color: #fd7e14; font-weight: 600;">
                  📈 +${diffAbs}km
                  <br><small style="opacity: 0.8;">P:${planned} → A:${actual}</small>
                </span>`;
              } else {
                // Negativo - Abaixo do planejado (vermelho)
                return `<span style="color: #dc3545; font-weight: 600;">
                  📉 -${diffAbs}km
                  <br><small style="opacity: 0.8;">P:${planned} → A:${actual}</small>
                </span>`;
              }
            }
            
            return `<span style="color: #6c757d;">⚠️ P:${planned} A:${actual}</span>`;
          }
        },
        {
          field: "timeDivergence",
          header: "Divergência de Tempo",
          sortable: true,
          filterable: false,
          allowHtml: true,
          label: (value: any, row: any) => {
            if (!row) {
              return '<span style="color: #dc3545;">❌ Row nulo</span>';
            }
            
            const planned = Number(row.plannedDuration) || 0;
            const actual = Number(row.actualDurationComplete) || 0;
            
            if (planned > 0 && actual > 0) {
              const diff = actual - planned; // em minutos
              const diffAbs = Math.abs(diff);
              const hours = Math.floor(diffAbs / 60);
              const minutes = diffAbs % 60;
              
              if (diff === 0) {
                return '<span style="color: #28a745; font-weight: 600;">⚡ No tempo exato</span>';
              }
              
              const timeStr = hours > 0 ? `${hours}h${minutes}m` : `${minutes}m`;
              
              if (diff > 0) {
                // Positivo - Demorou mais que o planejado (amarelo/laranja)
                return `<span style="color: #fd7e14; font-weight: 600;">
                  ⏰ +${timeStr}
                  <br><small style="opacity: 0.8;">Atrasou ${timeStr}</small>
                </span>`;
              } else {
                // Negativo - Terminou antes do planejado (verde)
                return `<span style="color: #28a745; font-weight: 600;">
                  ⚡ -${timeStr}
                  <br><small style="opacity: 0.8;">Adiantou ${timeStr}</small>
                </span>`;
              }
            }
            
            return `<span style="color: #6c757d;">⚠️ P:${planned}min A:${actual}min</span>`;
          }
        }
      ]
    };
  }

  // ========================================
  // 🎯 CONFIGURAÇÃO DO FORMULÁRIO
  // ========================================
  getFormConfig(): TabFormConfig {
    return {
      title: 'Dados da Rota',
      entityType: 'route',
      fields: [],
      submitLabel: 'Salvar Rota',
      showCancelButton: true,
      // ✨ Configuração do Side Card - Resumo da Rota
      sideCard: {
        enabled: true,
        title: "Resumo da Rota",
        position: "right",
        width: "400px",
        component: "summary",
        hiddenOnSubTabs: ['paradas'], 
        data: {
          displayFields: [
            {
              key: "routeNumber",
              label: "Número da Rota",
              type: "text"
            },
            {
              key: "totalDistance",
              label: "Distância Total",
              type: "text",
              format: "distance"
            },
            {
              key: "estimatedDuration",
              label: "Duração Estimada",
              type: "text",
              format: "duration"
            },
            {
              key: "totalValue",
              label: "Valor Total",
              type: "currency"
            },
            {
              key: "status",
              label: "Status Atual",
              type: "status"
            }
          ],
          statusConfig: {
            "pending": {
              label: "Pendente",
              color: "#f59e0b",
              icon: "fa-clock"
            },
            "inprogress": {
              label: "Em Andamento",
              color: "#3b82f6",
              icon: "fa-route"
            },
            "completed": {
              label: "Concluída",
              color: "#10b981",
              icon: "fa-check-circle"
            },
            "delivered": {
              label: "Concluída",
              color: "#10b981",
              icon: "fa-check-circle"
            },            
            "delayed": {
              label: "Atrasada",
              color: "#ef4444",
              icon: "fa-exclamation-triangle"
            },
            "cancelled": {
              label: "Cancelada",
              color: "#6b7280",
              icon: "fa-times-circle"
            }
          }
        }
      },
      subTabs: [
        {
          id: 'dados',
          label: 'Dados da Rota',
          icon: 'fa-route',
          enabled: true,
          order: 1,
          templateType: 'fields',
          requiredFields: ['routeNumber', 'type', 'origin', 'destination'],
          fields: [
            {
              key: 'routeNumber',
              label: 'Número da Rota',
              type: 'text',
              required: true,
              disabled: true,
              placeholder: 'Ex: RT-2024-001'
            },
            {
              key: 'documentDate',
              label: 'Data do Documento',
              type: 'date',
              required: true,
              disabled: true,              
            },
            {
              key: 'companyId',
              label: '',
              labelField: 'companyName',
              type: 'remote-select',
              remoteConfig: {
                service: this.companyService,
                searchField: 'name',
                displayField: 'name',
                valueField: 'id',
                placeholder: 'Digite o nome da empresa...',
              }
            }, 
            {
              key: 'type',
              label: 'Tipo de Rota',
              type: 'select',
              required: true,
              options: [
                { value: 'FIRSTMILE', label: '🚛 First Mile' },
                { value: 'LINEHAUL', label: '🚚 Line Haul' },
                { value: 'LASTMILE', label: '📦 Last Mile' },
                { value: 'CUSTOM', label: '🎯 Personalizada' }
              ]
            },
            {
              key: 'status',
              label: 'Status',
              type: 'select',
              required: false,
              disabled: true,
              options: [
                { value: 'PENDING', label: 'Pendente' },
                { value: 'INPROGRESS', label: 'Em Andamento' },
                { value: 'COMPLETED', label: 'Completado' },
                { value: 'DELIVERED', label: 'Concluída' },
                { value: 'DELAYED', label: 'Atrasada' },
                { value: 'CANCELLED', label: 'Cancelada' },
                { value: 'PLANNED', label: 'Planejada' },
                // { value: 'NOTFOUND', label: 'Não Encontrada' },
              ]
            },
            {
              key: 'priority',
              label: 'Prioridade',
              type: 'select',
              required: true,
              disabled: true,
              options: [
                { value: 'LOW', label: '⬇️ Baixa' },
                { value: 'NORMAL', label: '➡️ Normal' },
                { value: 'HIGH', label: '⬆️ Alta' },
                { value: 'URGENT', label: '🚨 Urgente' }
              ]
            },
            {
              key: 'origin.address',
              label: 'Endereço de Origem',
              type: 'text',
              required: true,
              disabled: true,
              placeholder: 'Endereço completo de origem'
            },
            {
              key: 'destination.address',
              label: 'Endereço de Destino',
              type: 'text',
              required: true,
              disabled: true,
              placeholder: 'Endereço completo de destino'
            },
              
            {
              key: 'customer_name',
              label: 'Cliente',
              type: 'text',
              required: true,
              disabled: true,
              placeholder: 'Cliente'
            },
            {
              key: 'contractName',
              label: 'Contrato',
              type: 'select',
              disabled: true,
              required: false,
              options: [
                { value: 'Contrato E-commerce Básico', label: '📄 Contrato E-commerce Básico' },
                { value: 'Contrato Premium Marketplace', label: '📄 Contrato Premium Marketplace' },
                { value: 'Contrato Farmácia Nacional', label: '📄 Contrato Farmácia Nacional' },
                { value: 'Contrato Eletrônicos Express', label: '📄 Contrato Eletrônicos Express' },
                { value: 'Contrato Alimentício Regional', label: '📄 Contrato Alimentício Regional' },
                { value: 'Contrato Vestuário SP/RJ', label: '📄 Contrato Vestuário SP/RJ' },
                { value: 'Contrato First Mile Especial', label: '📄 Contrato First Mile Especial' },
                { value: 'Contrato Line Haul Nacional', label: '📄 Contrato Line Haul Nacional' },
                { value: 'Contrato Last Mile Urbano', label: '📄 Contrato Last Mile Urbano' },
                { value: 'Contrato Express Domingo', label: '📄 Contrato Express Domingo' }
              ]
            },
            {
              key: 'freightTableName',
              label: 'Tabela de Preços',
              type: 'select',
              required: false,
              disabled: true,
              options: [
                { value: 'Tabela Básica Urbana', label: '💰 Tabela Básica Urbana' },
                { value: 'Tabela Premium Express', label: '⭐ Tabela Premium Express' },
                { value: 'Tabela Interestadual', label: '🛣️ Tabela Interestadual' },
                { value: 'Tabela E-commerce Plus', label: '💰 Tabela E-commerce Plus' },
                { value: 'Tabela Medicamentos', label: '💊 Tabela Medicamentos' },
                { value: 'Tabela Perecíveis', label: '🧊 Tabela Perecíveis' },
                { value: 'Tabela Eletrônicos', label: '📱 Tabela Eletrônicos' },
                { value: 'Tabela Peso/Volume', label: '💰 Tabela Peso/Volume' },
                { value: 'Tabela Emergencial', label: '🚨 Tabela Emergencial' },
                { value: 'Tabela Promocional', label: '💰 Tabela Promocional' },
                { value: 'Tabela Diversos', label: '🔍 Tabela Diversos' },
                { value: 'Tabela Alimentício', label: '🍎 Tabela Alimentício' },
                { value: 'Tabela Vestuário', label: '👕 Tabela Vestuário' },
                { value: 'Tabela First Mile', label: '🛣️ Tabela First Mile' },
                { value: 'Tabela Line Haul', label: '🚚 Tabela Line Haul' },
                { value: 'Tabela Last Mile', label: '📦 Tabela Last Mile' },
                { value: 'Tabela Express Domingo', label: '🛣️ Tabela Express Domingo' }
              ]
            },
            {
              key: 'scheduledDeparture',
              label: 'Partida Programada',
              type: 'date',
              disabled: true,
              required: true
            },
            {
              key: 'scheduledArrival',
              label: 'Chegada Programada',
              type: 'date',
              disabled: true,
              required: false
            },
            {
              key: 'vehiclePlate',
              label: 'Placa do Veículo',
              type: 'text',
              required: false,
              disabled: true,
              placeholder: 'Ex: ABC-1234'
            },
            {
              key: 'driverName',
              label: 'Nome do Motorista',
              type: 'text',
              required: false,
              disabled: true,
              placeholder: 'Nome completo do motorista'
            },
            {
              key: 'vehicleFleetType',
              label: 'Tipo de Frota',
              type: 'select',
              required: false,
              options: [            
                { value: 'RENTAL', label: 'Rentals' },
                { value: 'CORPORATE', label: 'Corporativo' },
                { value: 'AGGREGATE', label: 'Agregado' },
                { value: 'FIXED_RENTAL', label: 'Frota Fixa - Locação' },
                { value: 'FIXED_DAILY', label: 'Frota Fixa - Diarista' },
                { value: 'OTHER', label: 'Outro' }
              ]
            },
            {
              key: 'productType',
              label: 'Tipo de Produto',
              type: 'select',
              required: false,
              disabled: true,
              options: [
                { value: 'Medicamentos', label: '💊 Medicamentos' },
                { value: 'Eletrônicos', label: '📱 Eletrônicos' },
                { value: 'Alimentos', label: '🍎 Alimentos' },
                { value: 'Roupas', label: '👕 Roupas' },
                { value: 'Livros', label: '📚 Livros' },
                { value: 'Casa e Jardim', label: '🏠 Casa e Jardim' },
                { value: 'Esportes', label: '⚽ Esportes' },
                { value: 'Automotivo', label: '🚗 Automotivo' },
                { value: 'Brinquedos', label: '🎉 Brinquedos' },
                { value: 'Cosméticos', label: '💄 Cosméticos' },
                { value: 'Casa e Decoração', label: '🏠 Casa e Decoração' },
                { value: 'Alimentos Perecíveis', label: '🧊 Alimentos Perecíveis' },
                { value: 'Alimentos Não Perecíveis', label: '🍎 Alimentos Não Perecíveis' },
                { value: 'Roupas e Acessórios', label: '👕 Roupas e Acessórios' },
                { value: 'Livros e Papelaria', label: '📚 Livros e Papelaria' },
                { value: 'Diversos', label: '🔍 Diversos' },
                { value: 'ecommerce', label: '🛒 Ecommerce' },
                { value: 'Interestadual', label: '🛣️ Interestadual' },
                { value: 'Roupas', label: '👕 Roupas' },
                { value: 'Livros', label: '📚 Livros' },
                { value: 'Casa e Jardim', label: '🏠 Casa e Jardim' },
                { value: 'Esportes', label: '⚽ Esportes' },
                { value: 'Automotivo', label: '🚗 Automotivo' },
                { value: 'Brinquedos', label: '🎉 Brinquedos' },
                { value: 'Cosméticos', label: '💄 Cosméticos' },
                { value: 'Casa e Decoração', label: '🏠 Casa e Decoração' },
                { value: 'Alimentos Perecíveis', label: '🧊 Alimentos Perecíveis' },
                { value: 'Alimentos Não Perecíveis', label: '🍎 Alimentos Não Perecíveis' },
                { value: 'Roupas e Acessórios', label: '👕 Roupas e Acessórios' },
                { value: 'Livros e Papelaria', label: '📚 Livros e Papelaria' },
                { value: 'Diversos', label: '🔍 Diversos' },
                { value: 'Interestadual', label: '🛣️ Interestadual' },
                { value: 'Roupas', label: '👕 Roupas' },
                { value: 'Livros', label: '📚 Livros' },
                { value: 'Casa e Jardim', label: '🏠 Casa e Jardim' },
                { value: 'Esportes', label: '⚽ Esportes' },
                { value: 'Automotivo', label: '🚗 Automotivo' },
                { value: 'Brinquedos', label: '🎉 Brinquedos' },
                { value: 'Cosméticos', label: '💄 Cosméticos' },
                { value: 'Casa e Decoração', label: '🏠 Casa e Decoração' },
                { value: 'Alimentos Perecíveis', label: '🧊 Alimentos Perecíveis' },
                { value: 'Alimentos Não Perecíveis', label: '🍎 Alimentos Não Perecíveis' },
                { value: 'Roupas e Acessórios', label: '👕 Roupas e Acessórios' },
                { value: 'Livros e Papelaria', label: '📚 Livros e Papelaria' },
              ]
            },
            {
              key: 'volume',
              label: 'Quantidade de Pacotes',
              type: 'number',
              required: false,
              disabled: true,
              placeholder: '0'
            },
            {
              key: 'totalValue',
              label: 'Valor Total',
              type: 'number',
              disabled: true,
              required: false,
              placeholder: '0.00'
            }
          ]
        },
        // {
        //   id: 'localizacao',
        //   label: 'Localização',
        //   icon: 'fa-map-marker-alt',
        //   enabled: true,
        //   order: 2,
        //   templateType: 'component',
        //   requiredFields: [],
        //   dynamicComponent: {
        //     selector: 'app-route-location-tracker',
        //     inputs: {},
        //     outputs: {},
        //     dataBinding: {
        //       getInitialData: () => this.getRouteLocationData()
        //     }
        //   }
        // },
        {
          id: 'paradas',
          label: 'Paradas',
          icon: 'fa-map-pin',
          enabled: true,
          order: 3,
          templateType: 'component',
          requiredFields: [],
          dynamicComponent: {
            selector: 'app-route-steps',
            inputs: {},
            outputs: {},
            dataBinding: {
              getInitialData: () => this.getRouteStopsData()
            }
          }
        },

        
        {
          id: 'custos',
          label: 'Custos',
          icon: 'fa-calculator',
          enabled: true,
          order: 4,
          templateType: 'custom',
          comingSoon: true,
          requiredFields: []
        },
        {
          id: 'documentos',
          label: 'Documentos',
          icon: 'fa-file-alt',
          enabled: true,
          order: 5,
          templateType: 'custom',
          comingSoon: true,
          requiredFields: []
        },
        {
          id: 'historico',
          label: 'Histórico',
          icon: 'fa-history',
          enabled: true,
          order: 6,
          templateType: 'custom',
          comingSoon: true,
          requiredFields: []
        }
      ]
    };
  }

  /**
   * 🎯 Dados iniciais para nova rota
   */
  protected override getNewEntityData(): Partial<Route> {
    return {
      routeNumber: `RT-${new Date().getFullYear()}-${String(Date.now()).slice(-6)}`,
      type: 'custom',
      status: 'pending',
      scheduledDeparture: new Date(),
      estimatedPackages: 0,
      totalValue: 0,
      createdAt: new Date(),
      updatedAt: new Date()
    };
  }

  /**
   * 🎯 Método para obter dados de localização da rota (usado pelo componente dinâmico)
   */
  getRouteLocationData(): any {
    // Usar selectedRows[0] ou entidades[0] como fallback para dados de exemplo
    const currentRoute = this.selectedRows?.[0] || this.entities?.[0];
    return {
      routeId: currentRoute?.Id,
      routeNumber: currentRoute?.routeNumber,
      type: currentRoute?.type,
      status: currentRoute?.status,
      origin: currentRoute?.origin,
      destination: currentRoute?.destination,
      currentLocation: currentRoute?.currentLocation,
      vehiclePlate: currentRoute?.vehiclePlate,
      driverName: currentRoute?.driverName,
      scheduledDeparture: currentRoute?.scheduledDeparture,
      scheduledArrival: currentRoute?.scheduledArrival
    };
  }

  /**
   * 🎯 Método para obter dados das paradas da rota (usado pelo RouteStopsComponent)
   */
  getRouteStopsData(): any { 
    console.log('🔍 [DEBUG] getRouteStopsData chamado');
    
    // Usar selectedRows[0] ou entidades[0] como fallback para dados de exemplo
    const currentRoute = this.selectedRows?.[0] || this.entities?.[0];
    console.log('🔍 [DEBUG] currentRoute:', currentRoute);
    
    const data = {
      routeId: currentRoute?.Id || 'route_1', // ✅ CORREÇÃO: Usar route_1 que existe no JSON
      routeNumber: currentRoute?.routeNumber || 'RT-2024-001',
      type: currentRoute?.type || 'lastMile',
      status: currentRoute?.status || 'pending',
      origin: currentRoute?.origin || {
        address: 'Centro de Distribuição - Av. Paulista, 1000',
        city: 'São Paulo',
        state: 'SP',
        coordinates: { lat: -23.5489, lng: -46.6388 }
      },
      destination: currentRoute?.destination || {
        address: 'Cliente Final - Rua Augusta, 500',
        city: 'São Paulo', 
        state: 'SP',
        coordinates: { lat: -23.5505, lng: -46.6333 }
      },
      vehiclePlate: currentRoute?.vehiclePlate || 'ABC-1234',
      driverName: currentRoute?.driverName || 'João Silva',
      scheduledDeparture: currentRoute?.scheduledDeparture || new Date(),
      scheduledArrival: currentRoute?.scheduledArrival || new Date(Date.now() + 4 * 60 * 60 * 1000)
    };

    console.log('🔍 [DEBUG] Dados da rota retornados:', data);
    return data; // ✅ BUG CORRIGIDO: Agora retorna os dados!
  }

}