"use client"

import { useState } from "react"
import { Input } from "@/components/ui/input"
import { Eye, EyeOff } from "lucide-react"
import { cn } from "@/lib/utils"

interface PasswordStrengthInputProps {
  value: string
  onChange: (value: string) => void
  placeholder?: string
  className?: string
  translations?: {
    veryWeak: string
    weak: string
    fair: string
    good: string
    strong: string
    lowercase: string
    uppercase: string
    number: string
    special: string
    minLength: string
  }
}

const defaultTranslations = {
  veryWeak: "Very Weak",
  weak: "Weak",
  fair: "Fair",
  good: "Good",
  strong: "Strong",
  lowercase: "Lowercase letter",
  uppercase: "Uppercase letter",
  number: "Number",
  special: "Special character",
  minLength: "At least 6 characters"
}

export function PasswordStrengthInput({ 
  value, 
  onChange, 
  placeholder, 
  className,
  translations = defaultTranslations 
}: PasswordStrengthInputProps) {
  const [showPassword, setShowPassword] = useState(false)

  const hasLower = /[a-z]/.test(value)
  const hasUpper = /[A-Z]/.test(value)
  const hasNumber = /\d/.test(value)
  const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(value)
  const hasMinLength = value.length >= 6

  const strength = [hasLower, hasUpper, hasNumber, hasSpecial, hasMinLength].filter(Boolean).length
  const strengthText = strength <= 1 ? translations.veryWeak : strength === 2 ? translations.weak : strength === 3 ? translations.fair : strength === 4 ? translations.good : translations.strong
  const strengthColor = strength <= 1 ? "bg-red-500" : strength === 2 ? "bg-red-400" : strength === 3 ? "bg-yellow-500" : strength === 4 ? "bg-blue-500" : "bg-green-500"

  return (
    <div className="space-y-2">
      <div className="relative">
        <Input
          type={showPassword ? "text" : "password"}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          className={cn("h-12 sm:h-14 text-base pr-12", className)}
        />
        <button
          type="button"
          onClick={() => setShowPassword(!showPassword)}
          className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500"
        >
          {showPassword ? <Eye className="w-5 h-5" /> : <EyeOff className="w-5 h-5" />}
        </button>
      </div>
      <div className="space-y-1">
        <div className="flex items-center justify-between">
          <span className="text-sm text-gray-600">Password Strength: {strengthText}</span>
          <div className="flex space-x-1">
            {[1, 2, 3, 4, 5].map((i) => (
              <div key={i} className={cn("w-2 h-2 rounded-full", i <= strength ? strengthColor : "bg-gray-300")} />
            ))}
          </div>
        </div>
        <div className="grid grid-cols-2 gap-1 text-xs">
          <div className={cn("flex items-center", hasLower ? "text-green-600" : "text-gray-400")}>
            <span className="mr-1">✓</span> {translations.lowercase}
          </div>
          <div className={cn("flex items-center", hasUpper ? "text-green-600" : "text-gray-400")}>
            <span className="mr-1">✓</span> {translations.uppercase}
          </div>
          <div className={cn("flex items-center", hasNumber ? "text-green-600" : "text-gray-400")}>
            <span className="mr-1">✓</span> {translations.number}
          </div>
          <div className={cn("flex items-center", hasSpecial ? "text-green-600" : "text-gray-400")}>
            <span className="mr-1">✓</span> {translations.special}
          </div>
          <div className={cn("flex items-center", hasMinLength ? "text-green-600" : "text-gray-400")}>
            <span className="mr-1">✓</span> {translations.minLength}
          </div>
        </div>
      </div>
    </div>
  )
}