import {
  Component,
  Input,
  forwardRef,
  OnInit,
} from "@angular/core";
import {
  ControlValueAccessor,
  NG_VALUE_ACCESSOR,
  FormsModule,
  ReactiveFormsModule,
} from "@angular/forms";
import { CommonModule } from "@angular/common";

@Component({
  selector: "app-kilometer-input",
  standalone: true,
  templateUrl: "./kilometer-input.component.html",
  styleUrls: ["./kilometer-input.component.scss"],
  imports: [CommonModule, FormsModule, ReactiveFormsModule],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => KilometerInputComponent),
      multi: true,
    },
  ],
})
export class KilometerInputComponent implements ControlValueAccessor, OnInit {
  @Input() field!: {
    key: string;
    label: string;
    placeholder?: string;
    min?: number;
    disabled?: boolean;
    readOnly?: boolean;
    required?: boolean;
    formatOptions?: {
      locale?: string;
      useGrouping?: boolean;
      suffix?: string;
    };
  };

  displayValue: string = "";
  internalValue: number = 0; // Valor em metros (para o banco)
  disabled = false;
  isFocused = false;

  // Getter para verificar se há valor
  get hasValue(): boolean {
    return this.internalValue > 0 || this.displayValue.length > 0;
  }

  onChange: any = () => {};
  onTouched: any = () => {};

  ngOnInit() {
    // Configurações padrão
    if (!this.field.formatOptions) {
      this.field.formatOptions = {
        locale: 'pt-BR',
        useGrouping: true,
        suffix: ' km'
      };
    }
  }

  // ControlValueAccessor - Recebe valor do FormControl (em metros)
  writeValue(value: any): void {
    if (value !== null && value !== undefined) {
      this.internalValue = Number(value);
      // Converte metros para km para exibição
      const kmValue = Math.trunc(this.internalValue / 1000);
      this.displayValue = this.formatForDisplay(kmValue);
    } else {
      this.internalValue = 0;
      this.displayValue = "";
    }
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  // Formatação para exibição (com separadores brasileiros)
  private formatForDisplay(kmValue: number): string {
    if (!kmValue && kmValue !== 0) return "";
    
    const options = this.field.formatOptions;
    return Number(kmValue).toLocaleString(options?.locale || 'pt-BR', {
      useGrouping: options?.useGrouping !== false
    });
  }

  // Limpeza do valor (remove formatação)
  private cleanValue(value: string): number {
    if (!value) return 0;
    // Remove pontos, vírgulas e espaços
    const cleaned = value.toString().replace(/[.\s]/g, '').replace(',', '.');
    return Number(cleaned) || 0;
  }

  // Evento de input
  onInput(event: Event): void {
    const target = event.target as HTMLInputElement;
    const rawValue = target.value;
    
    // Limpa e converte para número (km)
    const kmValue = this.cleanValue(rawValue);
    
    // Converte km para metros para salvar
    this.internalValue = kmValue * 1000;
    
    // Atualiza o FormControl com valor em metros
    this.onChange(this.internalValue);
    
    // Não reformata durante a digitação para não atrapalhar o usuário
  }

  // Evento de foco
  onFocus(): void {
    this.isFocused = true;
    // No foco, mostra valor limpo para facilitar edição
    if (this.internalValue) {
      const kmValue = Math.trunc(this.internalValue / 1000);
      this.displayValue = kmValue.toString();
    }
  }

  // Evento de blur
  onBlur(): void {
    this.isFocused = false;
    this.onTouched();
    
    // No blur, aplica formatação completa
    if (this.internalValue) {
      const kmValue = Math.trunc(this.internalValue / 1000);
      this.displayValue = this.formatForDisplay(kmValue);
    }
  }

  // Validação de teclas (apenas números)
  onKeyPress(event: KeyboardEvent): void {
    const allowedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight'];
    
    if (!allowedKeys.includes(event.key)) {
      event.preventDefault();
    }
  }

  // Getter para o sufixo
  get suffix(): string {
    return this.field.formatOptions?.suffix || ' km';
  }
} 