"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { KeyRound, Loader2 } from "lucide-react";
import { z } from "zod";
import { PasswordField } from "@/components/ui/password-field";
import { PasswordStrengthMeter } from "@/components/ui/password-strength-meter";
import { authErrorMessage, useChangePassword } from "@/hooks/use-auth";

const changePasswordSchema = z.object({
  currentPassword: z.string().min(1, "Enter your current password"),
  newPassword: z
    .string()
    .min(10, "Must be at least 10 characters")
    .refine((v) => /[a-zA-Z]/.test(v) && /\d/.test(v), {
      message: "Must contain at least one letter and one digit",
    }),
});

type ChangePasswordForm = z.infer<typeof changePasswordSchema>;

export default function ChangePasswordPage() {
  const router = useRouter();
  const changePassword = useChangePassword();
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<ChangePasswordForm>({ resolver: zodResolver(changePasswordSchema) });

  const onSubmit = handleSubmit(async (values) => {
    try {
      await changePassword.mutateAsync({
        current_password: values.currentPassword,
        new_password: values.newPassword,
      });
      router.replace("/dashboard");
    } catch {
      // Surfaced via changePassword.isError below.
    }
  });

  return (
    <main className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-12">
      <div className="w-full max-w-sm animate-fade-in overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
        <div className="h-1.5 bg-gradient-to-r from-brand-500 via-brand-600 to-brand-700" />
        <div className="p-8">
          <div className="flex items-center gap-3">
            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-brand-50 text-brand-600">
              <KeyRound className="h-4.5 w-4.5" aria-hidden />
            </span>
            <div>
              <h1 className="text-xl font-semibold text-slate-900">Change your password</h1>
              <p className="text-sm text-slate-600">
                An admin requires a new password before you can continue.
              </p>
            </div>
          </div>

          <form onSubmit={onSubmit} className="mt-6 space-y-4" noValidate>
            <PasswordField
              label="Current password"
              autoComplete="current-password"
              {...register("currentPassword")}
              error={errors.currentPassword?.message}
            />
            <div>
              <PasswordField
                label="New password"
                autoComplete="new-password"
                hint="At least 10 characters, with a letter and a digit."
                {...register("newPassword")}
                error={errors.newPassword?.message}
              />
              <PasswordStrengthMeter password={watch("newPassword") ?? ""} />
            </div>

            {changePassword.isError && (
              <p className="animate-fade-in text-sm text-red-600" role="alert">
                {authErrorMessage(changePassword.error)}
              </p>
            )}

            <button
              type="submit"
              disabled={changePassword.isPending}
              className="focus-ring inline-flex w-full items-center justify-center gap-2 rounded-md bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition-colors duration-200 hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-60"
            >
              {changePassword.isPending && <Loader2 className="h-4 w-4 animate-spin" aria-hidden />}
              {changePassword.isPending ? "Updating…" : "Update password"}
            </button>
          </form>
        </div>
      </div>
    </main>
  );
}