import { Observable } from 'rxjs';
import { ImagesIncludeId } from './image.interface';
import { RemoteSelectConfig } from '../components/remote-select/interfaces/remote-select.interface';
import { CheckboxGroup } from '../components/checkbox-grouped/checkbox-grouped.component';
import { PendingDocument } from '../components/pdf-uploader/pdf-uploader.component';

export interface TabFormField {
  key: string;
  label: string;
  type:
    | 'text'
    | 'number'
    | 'select'
    | 'multi-select'
    | 'date'
    | 'checkbox'
    | 'checkbox-grouped'
    | 'textarea'
    | 'textarea-input'
    | 'select-api'
    | 'send-image'
    | 'send-pdf'
    | 'email'
    | 'tel'
    | 'password'
    | 'slide-toggle'
    | 'remote-select'
    | 'kilometer-input'
    | 'color-input'
    | 'currency-input'
    | 'password-input';
  required?: boolean;
  options?: { value: any; label: string }[];
  returnObjectSelected?: boolean;
  validators?: any[];
  defaultValue?: any;
  mask?: string;
  placeholder?: string;
  uppercase?: boolean;
  disabled?: boolean;
  readOnly?: boolean;
  helpText?: string;
  showStrengthIndicator?: boolean;
  allowToggleVisibility?: boolean;
  imageConfiguration?: {
    maxImages?: number;
    maxSizeMb?: number;
    allowedTypes?: string[];
    existingImages?: number[];
  };
  pdfConfiguration?: {
    maxDocuments?: number;
    maxSizeMb?: number;
    allowedTypes?: string[];
    existingDocuments?: any[];
    pendingDocuments?: PendingDocument[];
  };
  // Additional image field properties
  multiple?: boolean;
  max?: number;
  min?: number;
  accept?: string;
  maxSize?: number;
  minSize?: number;
  fetchApi?: (search: string) => Observable<{ value: any; label: string }[]>;
  checkBoxList?: { id: string; name: string; value: boolean }[];
  // 🎯 NOVO: Configuração para checkbox agrupado
  groups?: CheckboxGroup[];
  onValueChange?: (value: any, formGroup?: any) => void;
  // Remote Select configuration
  remoteConfig?: RemoteSelectConfig;
  // 🎯 NOVO: Campo de label customizado para mapeamento automático
  labelField?: string; // Ex: 'companyName', 'driverName', 'vehicle_license_plate'
  // Hide label and use only floating placeholder
  hideLabel?: boolean;
  // Format options for number/kilometer inputs
  formatOptions?: {
    locale?: string;
    useGrouping?: boolean;
    suffix?: string;
  };
  // Textarea input specific options
  rows?: number;
  autoResize?: boolean;
  showCharCounter?: boolean;
  resizable?: boolean;
  // 🎯 NOVA: Propriedade para campos calculados
  compute?: (model: any) => any;
  // 🎯 NOVA: Dependências para campos computados (campos que afetam o cálculo)
  computeDependencies?: string[];
  // 🎯 NOVA: Configuração para campos condicionais
  conditional?: {
    field: string; // Campo que controla a visibilidade
    value: any; // Valor que o campo deve ter para mostrar este campo
    operator?: 'equals' | 'not-equals' | 'in' | 'not-in'; // Operador de comparação (padrão: equals)
  };
}

export interface SubTabConfig {
  id: string;
  label: string;
  icon: string;
  component?: 'address' | 'documents' | 'fines' | 'custom' | 'fields' | 'dynamic';
  enabled?: boolean;
  order?: number;
  data?: any;
  requiredFields?: string[]; // Campos obrigatórios desta aba
  // 🚀 SISTEMA DINÂMICO DE COMPONENTES
  templateType?: 'fields' | 'component' | 'custom'; // Tipo de renderização
  fields?: TabFormField[]; // Campos específicos desta aba
  customTemplate?: string; // Nome do template customizado
  componentSelector?: string; // Seletor do componente Angular
  comingSoon?: boolean; // Se deve mostrar "em desenvolvimento"
  // 🎯 NOVO: Configuração dinâmica de componentes
  dynamicComponent?: {
    selector: string; // Nome do componente (ex: 'app-address-form')
    inputs?: { [key: string]: any }; // Props do componente
    outputs?: { [key: string]: string }; // Eventos do componente -> métodos do form
    dataBinding?: {
      getInitialData?: string | (() => any); // Nome do método para dados iniciais OU função direta
      onDataChange?: string; // Nome do método para mudanças
    };
  };
  // 🎯 NOVA: Data Binding para campos de imagem
  dataBinding?: {
    getInitialData?: () => Observable<any> | any; // Para buscar dados iniciais
    onDataChange?: (data: any) => void; // Para mudanças
  };
}

export interface TabFormConfig {
  title?: string;
  titleFallback?: string; // 🎯 NOVO: Fallback para título quando placeholders estão vazios
  fields: TabFormField[];
  submitLabel?: string;
  cancelLabel?: string;
  showCancelButton?: boolean;
  uppercase?: boolean;
  entityType?: string; // Para identificar o tipo de entidade (driver, vehicle, etc.)
  subTabs?: SubTabConfig[]; // ✨ Nova configuração de sub-abas
  sideCard?: any; // 🎨 Configuração do SideCard
}

export interface TabFormData {
  [key: string]: any;
}

export interface TabFormImageData {
  images: ImagesIncludeId[];
  files: File[];
}

export interface TabFormValidationEvent {
  valid: boolean;
  data: TabFormData;
}

export interface EntityPresetConfig {
  [presetName: string]: () => TabFormConfig;
}

export interface EntityFormConfiguration {
  entityType: string;
  baseConfig: TabFormConfig;
  subTabs?: SubTabConfig[];
  presets?: EntityPresetConfig;
}

export interface GenericFormConfigOptions {
  entityType: string;
  enabledSubTabs?: string[];
  baseFields?: TabFormField[];
  customSubTabs?: SubTabConfig[];
} 