"use client";
import Layout from "@/components/layout/Layout";
import Link from "next/link";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";

export default function ResetPassword() {
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [message, setMessage] = useState("");
  const [isValidReset, setIsValidReset] = useState(false);
  const router = useRouter();

  useEffect(() => {
    // Placeholder for token validation logic
    const checkResetToken = async () => {
      // Simulate token validation
      const isTokenValid = true; // Replace with actual validation logic

      if (isTokenValid) {
        setIsValidReset(true);
      } else {
        setMessage(
          "Invalid or expired reset link. Please request a new password reset."
        );
        setTimeout(() => router.push("/forgot-password"), 3000);
      }
    };

    checkResetToken();
  }, [router]);

  const handleResetPassword = async (e) => {
    e.preventDefault();

    if (newPassword !== confirmPassword) {
      setMessage("Passwords do not match.");
      return;
    }

    try {
      // Simulate password reset
      const isSuccess = true; // Replace with actual reset logic

      if (isSuccess) {
        setMessage("Password successfully reset. Redirecting to login...");
        setTimeout(() => router.push("/login"), 3000);
      } else {
        throw new Error("Password reset failed.");
      }
    } catch (error) {
      setMessage(`Error: ${error.message}`);
    }
  };

  if (!isValidReset) {
    return <p>{message}</p>;
  }
  return (
    <>
      <Layout headerStyle={6} footerStyle={3} transparent={false}>
        <section className="forgot__area-one">
          <div className="container">
            <div className="text-center mb-55">
              <h1 className="text-48-bold">Change Password</h1>
            </div>
            <div className="box-form-login">
              <div className="head-login">
                {message && <p className="text-16-semibold">{message}</p>}
                {!message && (
                  <p className="text-16-semibold">
                    Please enter your new password
                  </p>
                )}
                <div className="form-login form-forgot">
                  <form onSubmit={handleResetPassword}>
                    <div className="form-group">
                      <input
                        type="password"
                        className="form-control account"
                        placeholder="New Password"
                        value={newPassword}
                        onChange={(e) => setNewPassword(e.target.value)}
                        required
                      />
                    </div>
                    <div className="form-group">
                      <input
                        type="password"
                        className="form-control account"
                        placeholder="Confirm New Password"
                        value={confirmPassword}
                        onChange={(e) => setConfirmPassword(e.target.value)}
                        required
                      />
                    </div>
                    <div className="form-group">
                      <input
                        type="submit"
                        className="btn btn-login"
                        defaultValue="Reset password"
                      />
                    </div>
                  </form>
                  <p className="text-center">
                    <Link href="/contact" className="link-bold">
                      Contact Us
                    </Link>{" "}
                    if you encounter any problem
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </Layout>
    </>
  );
}