import { sendVerificationEmail } from "@features/auth/api/auth.api.js";
import { useMutation } from "@tanstack/react-query";
import { MailCheck } from "lucide-react";
import { Navigate, useLocation, useNavigate } from "react-router-dom";

function VerifyEmailRoute() {
  const navigate = useNavigate();
  const { state } = useLocation();
  const email = state?.email;

  const { mutate, isPending, isError, isSuccess, error } = useMutation({
    mutationFn: () => sendVerificationEmail(email),
  });

  if (!email) return <Navigate to="/login" replace />;

  return (
    <>
      <div className="flex flex-col items-center text-center gap-4">
        <div className="w-12 h-12 rounded-full bg-accent-subtle flex items-center justify-center text-accent">
          <MailCheck size={22} strokeWidth={1.75} />
        </div>
        <div>
          <h2 className="text-2xl font-semibold leading-[1.1] tracking-[-0.03em] text-fg">
            Check your inbox
          </h2>
          <p className="mt-2.5 text-sm leading-[1.55] text-fg-secondary">
            We sent a link to <span className="text-fg font-medium">{email}</span>. Click it to
            verify your account.
          </p>
        </div>
      </div>

      {isError && (
        <div className="text-[12px] text-error-fg font-mono tracking-[-0.005em]">
          {error?.message || "Failed to resend."}
        </div>
      )}
      {isSuccess && (
        <div className="text-[12px] text-accent font-mono tracking-[-0.005em]">
          Verification email sent.
        </div>
      )}

      <button
        type="button"
        onClick={() => mutate()}
        disabled={isPending}
        className="w-full h-12 px-5 border border-line rounded-md font-sans text-[15px] font-medium tracking-[-0.005em] text-fg bg-transparent cursor-pointer hover:bg-hover transition-colors duration-fast disabled:opacity-40 disabled:cursor-not-allowed"
      >
        {isPending ? "Sending…" : "Resend verification email"}
      </button>

      <button
        type="button"
        onClick={() => navigate("/login")}
        className="bg-transparent border-0 p-0 text-[13px] text-fg-secondary cursor-pointer hover:text-fg transition-colors duration-fast text-center font-sans"
      >
        ← Back to sign in
      </button>
    </>
  );
}

window.VerifyEmailRoute = VerifyEmailRoute;