"use client";

import Link from "next/link";
import { useState } from "react";
import AuthShell, {
  buttonPrimaryClass,
  inputClass,
  labelClass,
} from "@/shared/AuthShell";
import { useForgotPasswordMutation } from "@/services/auth-service";
import { getApiErrorMessage } from "@/utils/apiError";

export default function ForgotPasswordPage() {
  const [email, setEmail] = useState("");
  const [forgot, { isLoading }] = useForgotPasswordMutation();
  const [done, setDone] = useState(false);
  const [errorMsg, setErrorMsg] = useState("");

  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setErrorMsg("");
    try {
      await forgot({ email }).unwrap();
      setDone(true);
    } catch (err) {
      setErrorMsg(getApiErrorMessage(err));
    }
  };

  return (
    <AuthShell
      title="Reset Password"
      subtitle="We'll send a reset link to your inbox"
      footer={
        <Link href="/admin/login" className="text-[#d6ac63] underline-offset-2 hover:underline">
          Back to sign in
        </Link>
      }
    >
      {done ? (
        <p className="text-sm text-black text-center font-light">
          If that email exists, a password reset link has been sent. Please check
          your inbox.
        </p>
      ) : (
        <form onSubmit={onSubmit} noValidate className="space-y-5">
          <div>
            <label htmlFor="email" className={labelClass}>
              Email
            </label>
            <input
              id="email"
              type="email"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className={inputClass}
            />
          </div>
          {errorMsg ? <p className="text-sm text-red-500">{errorMsg}</p> : null}
          <button type="submit" disabled={isLoading} className={buttonPrimaryClass}>
            {isLoading ? "Sending…" : "Send reset link"}
          </button>
        </form>
      )}
    </AuthShell>
  );
}