import { type FormEvent, useMemo, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { confirmForgotPassword } from "../api/auth";

function useQueryParams() {
  const location = useLocation();
  return useMemo(() => new URLSearchParams(location.search), [location.search]);
}

const GENERIC_RESET_ERROR = "Invalid or expired reset link.";

export default function ResetPasswordPage() {
  const navigate = useNavigate();
  const params = useQueryParams();

  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [pending, setPending] = useState(false);
  const [success, setSuccess] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const uid = params.get("uid") || "";
  const token = params.get("token") || "";

  const passwordError =
    !newPassword
      ? "New password is required."
      : newPassword.length < 12
      ? "Password must be at least 12 characters."
      : "";
  const confirmError =
    !confirmPassword
      ? "Please confirm your password."
      : confirmPassword !== newPassword
      ? "Passwords do not match."
      : "";

  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    setError(null);

    if (!uid || !token) {
      setError(GENERIC_RESET_ERROR);
      return;
    }
    if (passwordError || confirmError) {
      setError(passwordError || confirmError);
      return;
    }

    setPending(true);
    try {
      await confirmForgotPassword({
        uid,
        token,
        newPassword,
      });
      setSuccess("Password reset successful. You can sign in now.");
      setTimeout(() => navigate("/login", { replace: true }), 1000);
    } catch (err: any) {
      if (err?.code === "INVALID_OR_EXPIRED_RESET_LINK" || err?.status === 400) {
        setError(GENERIC_RESET_ERROR);
      } else {
        setError(err?.message || "Unable to reset password.");
      }
    } finally {
      setPending(false);
    }
  }

  return (
    <div className="flex justify-center py-16 px-4">
      <div className="card w-full max-w-md">
        <h1 className="section-title mb-2">Reset Password</h1>
        <p className="muted mb-6">Set a new password for your account.</p>

        {!uid || !token ? <div className="alert alert-error mb-4">{GENERIC_RESET_ERROR}</div> : null}
        {error ? <div className="alert alert-error mb-4">{error}</div> : null}
        {success ? <div className="alert mb-4">{success}</div> : null}

        <form className="stack gap-4" onSubmit={handleSubmit}>
          <label className="stack gap-1">
            <span className="text-sm font-medium">New password</span>
            <input
              className="input"
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              autoComplete="new-password"
              required
            />
          </label>
          <label className="stack gap-1">
            <span className="text-sm font-medium">Confirm password</span>
            <input
              className="input"
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              autoComplete="new-password"
              required
            />
          </label>
          <button className="btn primary" type="submit" disabled={pending || !uid || !token}>
            {pending ? "Resetting..." : "Reset password"}
          </button>
        </form>

        <p className="muted text-sm mt-6 text-center">
          <Link className="link" to="/forgot-password">Request a new reset link</Link>
        </p>
      </div>
    </div>
  );
}