import './styles.css';

// Form validation and interactions
class SignInForm {
  private form: HTMLFormElement;
  private emailInput: HTMLInputElement;
  private passwordInput: HTMLInputElement;
  private signInButton: HTMLButtonElement;
  private passwordToggle: HTMLButtonElement;
  private isPasswordVisible = false;

  constructor() {
    this.form = document.getElementById('signInForm') as HTMLFormElement;
    this.emailInput = document.getElementById('email') as HTMLInputElement;
    this.passwordInput = document.getElementById('password') as HTMLInputElement;
    this.signInButton = document.querySelector('.sign-in-button') as HTMLButtonElement;
    this.passwordToggle = document.getElementById('passwordToggle') as HTMLButtonElement;

    this.initializeEventListeners();
    this.validateForm(); // Initial validation
  }

  private initializeEventListeners(): void {
    // Form validation on input
    this.emailInput.addEventListener('input', () => this.validateForm());
    this.passwordInput.addEventListener('input', () => this.validateForm());

    // Password toggle functionality
    this.passwordToggle.addEventListener('click', () => this.togglePasswordVisibility());

    // Form submission
    this.form.addEventListener('submit', (e) => this.handleSubmit(e));

    // Add input focus effects
    for (const input of [this.emailInput, this.passwordInput]) {
      input.addEventListener('focus', () => this.handleInputFocus(input));
      input.addEventListener('blur', () => this.handleInputBlur(input));
    }
  }

  private validateForm(): void {
    const isEmailValid = this.isValidEmail(this.emailInput.value);
    const isPasswordValid = this.passwordInput.value.length > 0;

    const isFormValid = isEmailValid && isPasswordValid;

    this.signInButton.disabled = !isFormValid;

    // Update input styling based on validation
    this.updateInputValidation(this.emailInput, isEmailValid || this.emailInput.value === '');
    this.updateInputValidation(this.passwordInput, isPasswordValid || this.passwordInput.value === '');
  }

  private isValidEmail(email: string): boolean {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }

  private updateInputValidation(input: HTMLInputElement, isValid: boolean): void {
    if (isValid) {
      input.style.borderColor = '#52c41a';
    } else {
      input.style.borderColor = '#ff4d4f';
    }
  }

  private handleInputFocus(input: HTMLInputElement): void {
    input.style.borderColor = '#40a9ff';
    input.style.boxShadow = '0 0 0 2px rgba(24, 144, 255, 0.2)';
  }

  private handleInputBlur(input: HTMLInputElement): void {
    input.style.boxShadow = 'none';
    this.validateForm(); // Re-validate on blur
  }

  private togglePasswordVisibility(): void {
    this.isPasswordVisible = !this.isPasswordVisible;

    if (this.isPasswordVisible) {
      this.passwordInput.type = 'text';
      this.passwordToggle.innerHTML = '<img src="https://ext.same-assets.com/2998084494/2349082922.svg" alt="Hide password" width="14" height="14">';
    } else {
      this.passwordInput.type = 'password';
      this.passwordToggle.innerHTML = '<img src="https://ext.same-assets.com/2998084494/2734204647.svg" alt="Show password" width="14" height="14">';
    }
  }

  private handleSubmit(e: Event): void {
    e.preventDefault();

    // Show loading state
    this.signInButton.textContent = 'Signing In...';
    this.signInButton.disabled = true;

    // Simulate API call
    setTimeout(() => {
      alert('This is a demo. Sign in functionality would be implemented here.');
      this.signInButton.textContent = 'Sign In';
      this.validateForm(); // Re-enable button if form is valid
    }, 1500);
  }
}

// Handle responsive layout
function handleResponsiveLayout(): void {
  // Any responsive layout adjustments can be added here
}

// Initialize the application
document.addEventListener('DOMContentLoaded', () => {
  new SignInForm();
  handleResponsiveLayout();

  // Handle window resize for responsive layout
  window.addEventListener('resize', () => {
    handleResponsiveLayout();
  });
});

// Add some smooth scroll behavior and polyfills
document.documentElement.style.scrollBehavior = 'smooth';