openmonetis/components/ajustes/update-password-form.tsx

"use client";

import { updatePasswordAction } from "@/app/(dashboard)/ajustes/actions";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils/ui";
import { RiEyeLine, RiEyeOffLine, RiCheckLine, RiCloseLine, RiAlertLine } from "@remixicon/react";
import { useState, useTransition, useMemo } from "react";
import { toast } from "sonner";

interface PasswordValidation {
  hasLowercase: boolean;
  hasUppercase: boolean;
  hasNumber: boolean;
  hasSpecial: boolean;
  hasMinLength: boolean;
  hasMaxLength: boolean;
  isValid: boolean;
}

function validatePassword(password: string): PasswordValidation {
  const hasLowercase = /[a-z]/.test(password);
  const hasUppercase = /[A-Z]/.test(password);
  const hasNumber = /\d/.test(password);
  const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?`~]/.test(password);
  const hasMinLength = password.length >= 7;
  const hasMaxLength = password.length <= 23;

  return {
    hasLowercase,
    hasUppercase,
    hasNumber,
    hasSpecial,
    hasMinLength,
    hasMaxLength,
    isValid:
      hasLowercase &&
      hasUppercase &&
      hasNumber &&
      hasSpecial &&
      hasMinLength &&
      hasMaxLength,
  };
}

function PasswordRequirement({
  met,
  label,
}: {
  met: boolean;
  label: string;
}) {
  return (
    <div
      className={cn(
        "flex items-center gap-1.5 text-xs transition-colors",
        met ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground"
      )}
    >
      {met ? (
        <RiCheckLine className="h-3.5 w-3.5" />
      ) : (
        <RiCloseLine className="h-3.5 w-3.5" />
      )}
      <span>{label}</span>
    </div>
  );
}

type UpdatePasswordFormProps = {
  authProvider?: string; // 'google' | 'credential' | undefined
};

export function UpdatePasswordForm({ authProvider }: UpdatePasswordFormProps) {
  const [isPending, startTransition] = useTransition();
  const [currentPassword, setCurrentPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [showCurrentPassword, setShowCurrentPassword] = useState(false);
  const [showNewPassword, setShowNewPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

  // Verificar se o usuário usa login via Google
  const isGoogleAuth = authProvider === "google";

  // Validação em tempo real: senhas coincidem
  const passwordsMatch = useMemo(() => {
    if (!confirmPassword) return null; // Não mostrar erro se campo vazio
    return newPassword === confirmPassword;
  }, [newPassword, confirmPassword]);

  // Validação de requisitos da senha
  const passwordValidation = useMemo(
    () => validatePassword(newPassword),
    [newPassword]
  );

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    // Validação frontend antes de enviar
    if (!passwordValidation.isValid) {
      toast.error("A senha não atende aos requisitos de segurança");
      return;
    }

    if (newPassword !== confirmPassword) {
      toast.error("As senhas não coincidem");
      return;
    }

    startTransition(async () => {
      const result = await updatePasswordAction({
        currentPassword,
        newPassword,
        confirmPassword,
      });

      if (result.success) {
        toast.success(result.message);
        setCurrentPassword("");
        setNewPassword("");
        setConfirmPassword("");
      } else {
        toast.error(result.error);
      }
    });
  };

  // Se o usuário usa Google OAuth, mostrar aviso
  if (isGoogleAuth) {
    return (
      <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-900 dark:bg-amber-950/20">
        <div className="flex gap-3">
          <RiAlertLine className="h-5 w-5 text-amber-600 dark:text-amber-500 flex-shrink-0 mt-0.5" />
          <div>
            <h3 className="font-medium text-amber-900 dark:text-amber-400">
              Alteração de senha não disponível
            </h3>
            <p className="mt-1 text-sm text-amber-800 dark:text-amber-500">
              Você fez login usando sua conta do Google. A senha é gerenciada diretamente pelo Google
              e não pode ser alterada aqui. Para modificar sua senha, acesse as configurações de
              segurança da sua conta Google.
            </p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      {/* Senha atual */}
      <div className="space-y-2">
        <Label htmlFor="currentPassword">
          Senha atual <span className="text-destructive">*</span>
        </Label>
        <div className="relative">
          <Input
            id="currentPassword"
            type={showCurrentPassword ? "text" : "password"}
            value={currentPassword}
            onChange={(e) => setCurrentPassword(e.target.value)}
            disabled={isPending}
            placeholder="Digite sua senha atual"
            required
            aria-required="true"
            aria-describedby="current-password-help"
          />
          <button
            type="button"
            onClick={() => setShowCurrentPassword(!showCurrentPassword)}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
            aria-label={showCurrentPassword ? "Ocultar senha atual" : "Mostrar senha atual"}
          >
            {showCurrentPassword ? (
              <RiEyeOffLine size={20} />
            ) : (
              <RiEyeLine size={20} />
            )}
          </button>
        </div>
        <p id="current-password-help" className="text-xs text-muted-foreground">
          Por segurança, confirme sua senha atual antes de alterá-la
        </p>
      </div>

      {/* Nova senha */}
      <div className="space-y-2">
        <Label htmlFor="newPassword">
          Nova senha <span className="text-destructive">*</span>
        </Label>
        <div className="relative">
          <Input
            id="newPassword"
            type={showNewPassword ? "text" : "password"}
            value={newPassword}
            onChange={(e) => setNewPassword(e.target.value)}
            disabled={isPending}
            placeholder="Crie uma senha forte"
            required
            minLength={7}
            maxLength={23}
            aria-required="true"
            aria-describedby="new-password-help"
            aria-invalid={newPassword.length > 0 && !passwordValidation.isValid}
          />
          <button
            type="button"
            onClick={() => setShowNewPassword(!showNewPassword)}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
            aria-label={showNewPassword ? "Ocultar nova senha" : "Mostrar nova senha"}
          >
            {showNewPassword ? (
              <RiEyeOffLine size={20} />
            ) : (
              <RiEyeLine size={20} />
            )}
          </button>
        </div>
        {/* Indicadores de requisitos da senha */}
        {newPassword.length > 0 && (
          <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
            <PasswordRequirement
              met={passwordValidation.hasMinLength}
              label="Mínimo 7 caracteres"
            />
            <PasswordRequirement
              met={passwordValidation.hasMaxLength}
              label="Máximo 23 caracteres"
            />
            <PasswordRequirement
              met={passwordValidation.hasLowercase}
              label="Letra minúscula"
            />
            <PasswordRequirement
              met={passwordValidation.hasUppercase}
              label="Letra maiúscula"
            />
            <PasswordRequirement
              met={passwordValidation.hasNumber}
              label="Número"
            />
            <PasswordRequirement
              met={passwordValidation.hasSpecial}
              label="Caractere especial"
            />
          </div>
        )}
      </div>

      {/* Confirmar nova senha */}
      <div className="space-y-2">
        <Label htmlFor="confirmPassword">
          Confirmar nova senha <span className="text-destructive">*</span>
        </Label>
        <div className="relative">
          <Input
            id="confirmPassword"
            type={showConfirmPassword ? "text" : "password"}
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
            disabled={isPending}
            placeholder="Repita a senha"
            required
            minLength={6}
            aria-required="true"
            aria-describedby="confirm-password-help"
            aria-invalid={passwordsMatch === false}
            className={
              passwordsMatch === false
                ? "border-red-500 focus-visible:ring-red-500"
                : passwordsMatch === true
                ? "border-green-500 focus-visible:ring-green-500"
                : ""
            }
          />
          <button
            type="button"
            onClick={() => setShowConfirmPassword(!showConfirmPassword)}
            className="absolute right-10 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
            aria-label={showConfirmPassword ? "Ocultar confirmação de senha" : "Mostrar confirmação de senha"}
          >
            {showConfirmPassword ? (
              <RiEyeOffLine size={20} />
            ) : (
              <RiEyeLine size={20} />
            )}
          </button>
          {/* Indicador visual de match */}
          {passwordsMatch !== null && (
            <div className="absolute right-3 top-1/2 -translate-y-1/2">
              {passwordsMatch ? (
                <RiCheckLine className="h-5 w-5 text-green-500" aria-label="As senhas coincidem" />
              ) : (
                <RiCloseLine className="h-5 w-5 text-red-500" aria-label="As senhas não coincidem" />
              )}
            </div>
          )}
        </div>
        {/* Mensagem de erro em tempo real */}
        {passwordsMatch === false && (
          <p id="confirm-password-help" className="text-xs text-red-600 dark:text-red-400 flex items-center gap-1" role="alert">
            <RiCloseLine className="h-3.5 w-3.5" />
            As senhas não coincidem
          </p>
        )}
        {passwordsMatch === true && (
          <p id="confirm-password-help" className="text-xs text-green-600 dark:text-green-400 flex items-center gap-1">
            <RiCheckLine className="h-3.5 w-3.5" />
            As senhas coincidem
          </p>
        )}
      </div>

      <Button type="submit" disabled={isPending || passwordsMatch === false || (newPassword.length > 0 && !passwordValidation.isValid)}>
        {isPending ? "Atualizando..." : "Atualizar senha"}
      </Button>
    </form>
  );
}