"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import AuthCard from "./AuthCard";
import { PasswordIcon, EyeIcon } from "./icons";
import { useAppDispatch, useAppSelector } from "@/state/hooks";
import { resetPasswordAdmin } from "@/state/auth";

type ResetFormValues = {
  newPassword: string;
  confirmPassword: string;
};

export default function ResetPasswordScreen() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const dispatch = useAppDispatch();
  const { resetSessionToken: stateToken, resetStatus, error: reduxError } = useAppSelector(
    (state) => state.auth
  );

  const tokenFromUrl = searchParams.get("token");
  const resetSessionToken = stateToken || tokenFromUrl || "";

  const [showNewPassword, setShowNewPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<ResetFormValues>();

  const newPassword = watch("newPassword");

  const onSubmit = async (data: ResetFormValues) => {
    if (!resetSessionToken) {
      toast.error("Reset session has expired or is invalid. Please request a new verification code.");
      router.push("/forgot-password");
      return;
    }

    try {
      const resultAction = await dispatch(
        resetPasswordAdmin({
          resetSessionToken,
          newPassword: data.newPassword,
          confirmPassword: data.confirmPassword,
        })
      );

      if (resetPasswordAdmin.fulfilled.match(resultAction)) {
        toast.success(
          resultAction.payload.message || "Password reset successful! Please log in."
        );
        router.push("/login");
      } else if (resetPasswordAdmin.rejected.match(resultAction)) {
        const errorMsg =
          (resultAction.payload as { message?: string })?.message ||
          "Failed to reset password";
        toast.error(errorMsg);
      }
    } catch (err: unknown) {
      toast.error((err as Error)?.message || "Failed to reset password");
    }
  };

  const loading = resetStatus === "loading";

  return (
    <AuthCard
      title="Reset Your Password"
      subtitle="Create a new password to regain access."
      footer={
        <>
          Remember your password?{" "}
          <Link href="/login" className="font-medium text-[#1D4ED8] hover:underline">
            Log in
          </Link>
        </>
      }
    >
      <form
        method="post"
        action="#"
        onSubmit={(e) => {
          e.preventDefault();
          handleSubmit(onSubmit)(e);
        }}
      >
        <div className="min-h-[220px] space-y-4">
          {!resetSessionToken && (
            <div className="rounded-lg bg-amber-50 p-3 border border-amber-200 text-[12px] text-amber-800">
              Session token not detected. If you came here directly, please{" "}
              <Link href="/forgot-password" className="font-semibold underline">
                request a code first
              </Link>
              .
            </div>
          )}

          <div>
            <label className="mb-1.5 block text-[14px] font-medium leading-[22px] tracking-[0.01em] text-[#4E616A]">
              New Password
            </label>
            <div
              className={`flex h-[54px] items-center gap-2 rounded-lg border bg-white px-4 focus-within:border-[#1657D9] ${
                errors.newPassword ? "border-red-500" : "border-[#D0D5DD]"
              }`}
            >
              <PasswordIcon />
              <input
                type={showNewPassword ? "text" : "password"}
                placeholder="••••••••"
                className="min-w-0 flex-1 border-0 bg-transparent text-[13px] text-[#101828] outline-none placeholder:text-[#98A2B3]"
                {...register("newPassword", {
                  required: "Password is required",
                  minLength: { value: 8, message: "Min 8 characters" },
                  pattern: {
                    value: /^(?=.*[A-Za-z])(?=.*\d).+$/,
                    message: "Must include at least 1 letter and 1 number",
                  },
                })}
              />
              <button
                type="button"
                onClick={() => setShowNewPassword((prev) => !prev)}
                className="flex h-5 w-5 items-center justify-center cursor-pointer"
                aria-label={showNewPassword ? "Hide password" : "Show password"}
              >
                <EyeIcon open={!showNewPassword} />
              </button>
            </div>
            {errors.newPassword && (
              <p className="mt-1 text-[11px] text-red-500">{errors.newPassword.message}</p>
            )}
          </div>

          <div>
            <label className="mb-1.5 block text-[14px] font-medium leading-[22px] tracking-[0.01em] text-[#4E616A]">
              Confirm Password
            </label>
            <div
              className={`flex h-[54px] items-center gap-2 rounded-lg border bg-white px-4 focus-within:border-[#1657D9] ${
                errors.confirmPassword ? "border-red-500" : "border-[#D0D5DD]"
              }`}
            >
              <PasswordIcon />
              <input
                type={showConfirmPassword ? "text" : "password"}
                placeholder="••••••••"
                className="min-w-0 flex-1 border-0 bg-transparent text-[13px] text-[#101828] outline-none placeholder:text-[#98A2B3]"
                {...register("confirmPassword", {
                  required: "Please confirm your password",
                  validate: (value) =>
                    value === newPassword || "Passwords do not match",
                })}
              />
              <button
                type="button"
                onClick={() => setShowConfirmPassword((prev) => !prev)}
                className="flex h-5 w-5 items-center justify-center cursor-pointer"
                aria-label={showConfirmPassword ? "Hide password" : "Show password"}
              >
                <EyeIcon open={!showConfirmPassword} />
              </button>
            </div>
            {errors.confirmPassword && (
              <p className="mt-1 text-[11px] text-red-500">
                {errors.confirmPassword.message}
              </p>
            )}
          </div>

          {reduxError && (
            <p className="text-[12px] font-medium text-red-600 bg-red-50 p-2.5 rounded-lg border border-red-200">
              {reduxError}
            </p>
          )}
        </div>

        <button
          type="submit"
          disabled={loading || !resetSessionToken}
          className="mt-8 h-10 w-full rounded-lg bg-[#1D4ED8] text-[14px] font-medium text-white transition-colors hover:bg-[#1E40AF] disabled:opacity-60 cursor-pointer"
        >
          {loading ? "Resetting..." : "Reset Password"}
        </button>
      </form>
    </AuthCard>
  );
}