"use client";
import * as React from "react";
import { Eye, EyeOff } from "lucide-react";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

export function PasswordInput({ className, ...props }: React.InputHTMLAttributes<HTMLInputElement>) {
  const [show, setShow] = React.useState(false);
  return (
    <div className="relative">
      <Input type={show ? "text" : "password"} className={cn("pr-10", className)} {...props} />
      <button type="button" onClick={() => setShow((s) => !s)} className="absolute inset-y-0 right-0 flex w-10 items-center justify-center text-fg-subtle hover:text-fg" aria-label={show ? "Hide password" : "Show password"} tabIndex={-1}>
        {show ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
      </button>
    </div>
  );
}

export const PASSWORD_RULES = [
  { id: "len", label: "At least 10 characters", test: (p: string) => p.length >= 10 },
  { id: "case", label: "Upper and lower case letters", test: (p: string) => /[a-z]/.test(p) && /[A-Z]/.test(p) },
  { id: "num", label: "A number or symbol", test: (p: string) => /[\d\W_]/.test(p) },
];

export function PasswordRequirements({ password }: { password: string }) {
  return (
    <ul className="mt-2 grid gap-1 text-[12px]" aria-live="polite">
      {PASSWORD_RULES.map((r) => {
        const ok = r.test(password);
        return (
          <li key={r.id} className={cn("flex items-center gap-2 transition-colors", ok ? "text-success" : "text-fg-subtle")}>
            <span className={cn("inline-block size-1.5 rounded-full", ok ? "bg-success" : "bg-border-strong")} aria-hidden />
            {r.label}
          </li>
        );
      })}
    </ul>
  );
}

export function passwordStrong(p: string): boolean {
  return PASSWORD_RULES.every((r) => r.test(p));
}