"use client";
import { FormButton, FormInput } from "@/app/components/form/forms";
import InputPassword from "@/app/components/form/inputpassword";
import AuthBanner from "@/app/components/banner/authbanner";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function OtpVerification() {
  const router = useRouter();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [otp, setOtp] = useState("");
  const [error, setError] = useState("");
  const [errorGloabl, setErrorGlobal] = useState("");
  const [errorOtp, setErrorOtp] = useState("");
  const [success, setSuccess] = useState("");
  const [m, setM] = useState("");

  useEffect(() => {
    const storedData = localStorage.getItem("email");
    if (storedData) {
      setEmail(storedData);
    }
  }, []);

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

    // Basic validation
    if (!otp) {
      setErrorOtp("OTP is required");
      return;
    }
    if (!password) {
      setError("Password is required");
      return;
    }

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

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

      const data = await response.json();
    
      if (response.ok) {
        setM(data.message);
        if (m == "Invalid OTP") {
          setErrorGlobal(data.message);
        } else {
          setErrorGlobal("");
          setSuccess(data.message);
        }
        setOtp("");
        setPassword("");
        setTimeout(() => {
          router.push("/auth/login");
        }, 2000);
      } 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="">
                <button
                  id="btn_reset_pass_back"
                  type="button"
                  className="btn-text-link"
                  onClick={router.back}
                >
                  Go back
                </button>
              </div>
              <div className="mt-10 flex flex-1 justify-between align-middle">
                <h1>Reset password</h1>
              </div>
              <p className="mt-2 w-xs text-sm text-gray-950">
                Now you can enter new password.
              </p>
            </div>
            {success && <p className="text-green-500">{success}</p>}
            {errorGloabl && <p className="text-red-500">{errorGloabl}</p>}
            <div className="mt-8">
              <form onSubmit={handleSignup} autoComplete="off">
                <FormInput
                  id="otp"
                  name="otp"
                  label="otp"
                  require={true}
                  value={otp}
                  onChange={(e: any) => setOtp(e.target.value)}
                />
                {errorOtp && <p className="text-red-500">{errorOtp}</p>}
                <InputPassword
                  id="password_reset"
                  name="password"
                  label="Password"
                  require={true}
                  value={password}
                  onChange={(e: any) => setPassword(e.target.value)}
                />
                {error && <p className="text-red-500">{error}</p>}
                <FormButton
                  id="btn_reset_password"
                  label="Save New Password"
                  type="submit"
                  color="gray"
                  hairline="amber"
                  disabled={false}
                />
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}