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

@Component({
  selector: 'app-password-input',
  standalone: true,
  imports: [CommonModule, FormsModule],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => PasswordInputComponent),
      multi: true
    }
  ],
  template: `
    <div class="flex flex-col gap-1 w-full relative">
      <div class="relative w-full">
        <input
          [type]="showPassword ? 'text' : 'password'"
          [placeholder]="placeholder"
          [disabled]="disabled"
          [(ngModel)]="value"
          (ngModelChange)="onModelChange($event)"
          (blur)="onModelTouched()"
          class="w-full bg-[var(--color-surface-container-lowest)] text-[var(--color-on-surface)] 
                 placeholder:text-[var(--color-outline-variant)] border border-[color-mix(in_srgb,var(--color-outline-variant)_30%,transparent)]
                 rounded-sm px-3 py-2 font-jetbrains text-sm focus:outline-none focus:border-[var(--color-primary)] transition-colors"
        />
        <button
          type="button"
          (click)="togglePassword()"
          class="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--color-outline-variant)] hover:text-[var(--color-on-surface)] transition-colors"
        >
          <!-- Heroicon Eye/EyeSlash simple svg -->
          @if (!showPassword) {
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
              <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
            </svg>
          }
          @if (showPassword) {
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
            </svg>
          }
        </button>
      </div>
      
      @if (showIndicator) {
        <div class="flex gap-1 mt-1">
          <div class="h-1 flex-1 rounded-full transition-all duration-300" [ngClass]="strengthScore >= 1 ? 'bg-red-500' : 'bg-[var(--color-surface-container-highest)]'"></div>
          <div class="h-1 flex-1 rounded-full transition-all duration-300" [ngClass]="strengthScore >= 2 ? 'bg-yellow-500' : 'bg-[var(--color-surface-container-highest)]'"></div>
          <div class="h-1 flex-1 rounded-full transition-all duration-300" [ngClass]="strengthScore >= 3 ? 'bg-green-500' : 'bg-[var(--color-surface-container-highest)]'"></div>
          @if (strengthScore > 0) {
            <span class="text-xs text-[var(--color-outline-variant)] ml-2 uppercase font-jetbrains">
              {{ strengthLabel }}
            </span>
          }
        </div>
      }
    </div>
  `
})
export class PasswordInputComponent implements ControlValueAccessor {
  @Input() placeholder = 'Password';
  @Input() showIndicator = true;
  @Input() disabled = false;
  
  showPassword = false;
  value = '';
  strengthScore = 0;
  strengthLabel = '';
  
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  onChange = (_val: string) => { /* default noop */ };
  onTouched = () => { /* default noop */ };

  togglePassword() {
    this.showPassword = !this.showPassword;
  }

  onModelChange(val: string) {
    this.value = val;
    this.calculateStrength(val);
    this.onChange(val);
  }

  onModelTouched() {
    this.onTouched();
  }

  writeValue(val: string): void {
    if (val !== undefined) {
      this.value = val;
      this.calculateStrength(val);
    }
  }

  registerOnChange(fn: (val: string) => void): void {
    this.onChange = fn;
  }

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

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

  private calculateStrength(password: string) {
    if (!password) {
      this.strengthScore = 0;
      this.strengthLabel = '';
      return;
    }
    
    let score = 0;
    if (password.length >= 8) score++;
    if (/[A-Z]/.test(password) && /[0-9]/.test(password)) score++;
    if (/[^A-Za-z0-9]/.test(password)) score++;
    
    this.strengthScore = Math.min(score, 3);
    if (this.strengthScore === 1) this.strengthLabel = 'weak';
    else if (this.strengthScore === 2) this.strengthLabel = 'fair';
    else if (this.strengthScore >= 3) this.strengthLabel = 'strong';
  }
}
