"use client";
import { FormInput, FormButton } from "@/app/components/form/forms";
import { TextLink } from "@/app/components/button";
import AuthBanner from "@/app/components/banner/authbanner";
import { useState } from "react";
import { useRouter } from "next/navigation";
export default function ForgotPassword() {
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");
  const [success, setSuccess] = useState("");

  const handleSignup = async (e: any) => {
    e.preventDefault();

    // Basic validation
    if (!email) {
      setError("Email is required.");
      return;
    }

    setError("");
    setSuccess("");

    try {
      localStorage.setItem("email", email);
      const response = await fetch('/api/auth/forgot-password', {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });

      const data = await response.json();
    
      if (response.ok) {
        setSuccess(data.message);

        router.push("/auth/resetpassword");
      } else {
        if (data.success == false) {
          setError(data.message);
        }
      }
    } catch (err) {
      setError("Something went wrong. Please try again.");
    }
  };

  return (
    <>
      <div className="mob-noise relative">
        <AuthBanner />
        <div className="wrapper relative z-10">
          <div className="mx-auto flex w-full flex-col py-20 md:w-[40%]">
            <div className="flex flex-col">
              <div className="flex justify-between">
                <button
                  id="btn_forgot_pass"
                  type="button"
                  className="btn-text-link"
                  onClick={router.back}
                >
                  Go back
                </button>
                <TextLink
                  id="adasd222"
                  href="/auth/login"
                  label="Log in"
                  color="gray"
                />
              </div>
              <div className="mt-10">
                <h1>Forgot password</h1>
                <p className="mt-2 w-full text-sm text-gray-950">
                  No worries. We will send 6-digit code for reset your password.
                </p>
              </div>
            </div>
            {success && <p className="text-green-500">{success}</p>}
            <div className="mt-8">
              <form onSubmit={handleSignup} autoComplete="off">
                <FormInput
                  type="text"
                  id="email_forgotpassword"
                  label="Email"
                  require={false}
                  value={email}
                  onChange={(e: any) => setEmail(e.target.value)}
                />
                {error && <p className="text-red-500">{error}</p>}

                <FormButton
                  id="btn_verification_code"
                  label="Get verification code"
                  type="submit"
                  color="gray"
                  hairline="amber"
                  disabled={false}
                />
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}