import { Component, Input } from '@angular/core';
import { BaseFieldComponent, FieldConfig } from './base-field.component';

@Component({
  selector: 'app-password-field',
  template: `
    <div class="field-container">
      <label [for]="field.name" class="sq-form-label">
        <span class="label-text">{{ field.label }}</span>
        <span *ngIf="field.required" class="required-indicator">*</span>
      </label>
      <div class="password-input-container">
        <input
          [id]="field.name"
          [type]="isPasswordVisible ? 'text' : 'password'"
          class="sq-form-input password-input"
          [placeholder]="field.placeholder || 'Enter ' + field.label.toLowerCase()"
          [value]="value"
          (input)="onChange($event.target.value)"
          [required]="field.required"
          [attr.minlength]="field.minLength"
          [attr.maxlength]="field.maxLength"
          [readonly]="field.readonly"
          [disabled]="field.disabled"
        />
        <button 
          type="button"
          class="password-toggle"
          (click)="togglePasswordVisibility()"
          [attr.aria-label]="isPasswordVisible ? 'Hide password' : 'Show password'"
          [title]="isPasswordVisible ? 'Hide password' : 'Show password'"
        >
          <clr-icon [attr.shape]="isPasswordVisible ? 'eye-hide' : 'eye'"></clr-icon>
        </button>
      </div>
      <div class="password-strength" *ngIf="field.showStrengthIndicator && value" [ngClass]="getPasswordStrengthClass()">
        <div class="strength-meter">
          <div class="strength-bar" [ngClass]="getPasswordStrengthClass()"></div>
        </div>
        <span class="strength-label" [ngClass]="getPasswordStrengthClass()">{{ passwordStrengthLabel }}</span>
      </div>
      <div *ngIf="field.description" class="field-description">
        {{ field.description }}
      </div>
      <div *ngIf="field.errorMessage" class="sq-error-message">
        {{ field.errorMessage }}
      </div>
    </div>
  `
})
export class PasswordFieldComponent extends BaseFieldComponent {
  @Input() field: FieldConfig;
  @Input() value: string;
  
  isPasswordVisible = false;
  
  get passwordStrength(): number {
    if (!this.value) return 0;
    
    let strength = 0;
    if (this.value.length >= 8) strength += 25;
    if (/[A-Z]/.test(this.value)) strength += 25;
    if (/[0-9]/.test(this.value)) strength += 25;
    if (/[^A-Za-z0-9]/.test(this.value)) strength += 25;
    
    return strength;
  }
  
  get passwordStrengthLabel(): string {
    const strength = this.passwordStrength;
    if (strength < 25) return 'Very Weak';
    if (strength < 50) return 'Weak';
    if (strength < 75) return 'Medium';
    if (strength < 100) return 'Strong';
    return 'Very Strong';
  }
  
  getPasswordStrengthClass(): string {
    const strength = this.passwordStrength;
    if (strength < 25) return 'weak';
    if (strength < 50) return 'weak';
    if (strength < 75) return 'medium';
    return 'strong';
  }
  
  togglePasswordVisibility() {
    this.isPasswordVisible = !this.isPasswordVisible;
  }
}  