Real-Time Email Validation Overview

type ValidationLevel = 'syntax' | 'domain' | 'mx' | 'smtp'

interface ValidationResult {
  level: ValidationLevel
  valid: boolean
  message: string
  suggestions?: string[]
}

class ProgressiveValidator {
  async validate(email: string, maxLevel: ValidationLevel = 'smtp'): Promise<ValidationResult[]> {
    const results: ValidationResult[] = []
    
    // Level 1: Syntax (instant, client-side)
    const syntaxResult = this.validateSyntax(email)
    results.push(syntaxResult)
    if (!syntaxResult.valid || maxLevel === 'syntax') return results
    
    // Level 2: Domain exists (fast, ~50ms)
    const domainResult = await this.validateDomain(email)
    results.push(domainResult)
    if (!domainResult.valid || maxLevel === 'domain') return results
    
    // Level 3: MX records (medium, ~200ms)
    const mxResult = await this.validateMX(email)
    results.push(mxResult)
    if (!mxResult.valid || maxLevel === 'mx') return results
    
    // Level 4: SMTP verification (slow, ~2s)
    const smtpResult = await this.validateSMTP(email)
    results.push(smtpResult)
    
    return results
  }
  
  private validateSyntax(email: string): ValidationResult {
    const regex = /^[^s@]+@[^s@]+.[^s@]+$/
    const valid = regex.test(email)
    
    return {
      level: 'syntax',
      valid,
      message: valid ? 'Valid format' : 'Invalid email format',
      suggestions: !valid ? this.suggestCorrections(email) : undefined
    }
  }
  
  private async validateDomain(email: string): Promise<ValidationResult> {
    const domain = email.split('@')[1]
    // Check if domain exists
    return {
      level: 'domain',
      valid: true,
      message: 'Domain exists'
    }
  }
  
  private async validateMX(email: string): Promise<ValidationResult> {
    // Check MX records
    return {
      level: 'mx',
      valid: true,
      message: 'Mail server configured'
    }
  }
  
  private async validateSMTP(email: string): Promise<ValidationResult> {
    // SMTP verification
    return {
      level: 'smtp',
      valid: true,
      message: 'Mailbox exists'
    }
  }
  
  private suggestCorrections(email: string): string[] {
    const common = ['gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com']
    const domain = email.split('@')[1] || ''
    
    return common
      .filter(c => this.levenshtein(domain, c) <= 2)
      .map(c => email.replace(domain, c))
  }
  
  private levenshtein(a: string, b: string): number {
    const matrix = []
    for (let i = 0; i <= b.length; i++) {
      matrix[i] = [i]
    }
    for (let j = 0; j <= a.length; j++) {
      matrix[0][j] = j
    }
    for (let i = 1; i <= b.length; i++) {
      for (let j = 1; j <= a.length; j++) {
        if (b.charAt(i - 1) === a.charAt(j - 1)) {
          matrix[i][j] = matrix[i - 1][j - 1]
        } else {
          matrix[i][j] = Math.min(
            matrix[i - 1][j - 1] + 1,
            matrix[i][j - 1] + 1,
            matrix[i - 1][j] + 1
          )
        }
      }
    }
    return matrix[b.length][a.length]
  }
}

class DebouncedValidator {
  private timeouts: Map<string, NodeJS.Timeout> = new Map()
  private cache: Map<string, ValidationResult[]> = new Map()
  
  validate(
    email: string,
    callback: (results: ValidationResult[]) => void,
    delay: number = 500
  ): void {
    // Check cache first
    const cached = this.cache.get(email)
    if (cached) {
      callback(cached)
      return
    }
    
    // Clear existing timeout for this field
    const existingTimeout = this.timeouts.get('email')
    if (existingTimeout) {
      clearTimeout(existingTimeout)
    }
    
    // Set new timeout
    const timeout = setTimeout(async () => {
      const validator = new ProgressiveValidator()
      const results = await validator.validate(email, 'domain')
      
      this.cache.set(email, results)
      callback(results)
    }, delay)
    
    this.timeouts.set('email', timeout)
  }
}

interface FeedbackConfig {
  showInline: boolean
  showIcon: boolean
  suggestCorrections: boolean
  validationDelay: number
}

class ValidationUI {
  private config: FeedbackConfig = {
    showInline: true,
    showIcon: true,
    suggestCorrections: true,
    validationDelay: 500
  }
  
  displayFeedback(input: HTMLInputElement, results: ValidationResult[]): void {
    const latestResult = results[results.length - 1]
    
    // Update input styling
    input.classList.remove('valid', 'invalid')
    input.classList.add(latestResult.valid ? 'valid' : 'invalid')
    
    // Show message
    const messageEl = document.getElementById(`${input.id}-feedback`)
    if (messageEl) {
      messageEl.textContent = latestResult.message
      messageEl.className = latestResult.valid ? 'success' : 'error'
    }
    
    // Show suggestions if available
    if (latestResult.suggestions && latestResult.suggestions.length > 0) {
      this.showSuggestions(input, latestResult.suggestions)
    }
  }
  
  private showSuggestions(input: HTMLInputElement, suggestions: string[]): void {
    // Create suggestion dropdown
    console.log('Suggestions:', suggestions)
  }
}

class EmailValidationAPI {
  private apiKey: string
  private endpoint: string
  
  constructor(apiKey: string) {
    this.apiKey = apiKey
    this.endpoint = 'https://api.cleariflow.com/v1/email/validate'
  }
  
  async validate(email: string): Promise<{
    valid: boolean
    deliverable: boolean
    disposable: boolean
    suggestions: string[]
  }> {
    const response = await fetch(`${this.endpoint}?email=${encodeURIComponent(email)}`, {
      headers: {
        'Authorization': `Bearer ${this.apiKey}`,
        'Content-Type': 'application/json'
      }
    })
    
    if (!response.ok) {
      throw new Error(`Validation failed: ${response.status}`)
    }
    
    return await response.json()
  }
}

class ValidationCache {
  private cache: Map<string, { result: any; expiry: number }> = new Map()
  private ttl: number = 300000 // 5 minutes
  
  get(email: string): any | null {
    const cached = this.cache.get(email)
    if (!cached || Date.now() > cached.expiry) return null
    return cached.result
  }
  
  set(email: string, result: any): void {
    this.cache.set(email, {
      result,
      expiry: Date.now() + this.ttl
    })
  }
}