import { useEffect, useState } from "react";
import { useParams } from 'next/navigation';
import useNavigate from '@/hooks/useNavigate';
import { toast } from "react-toastify";
import { verifyEmail } from "../../services/authService";
import { assetPath } from "../../utils/assetPath";
import Link from "next/link";

const VerifyEmail = () => {
    const { token } = useParams();
    const navigate = useNavigate();
    const [loading, setLoading] = useState(true);
    const [email, setEmail] = useState("");

    useEffect(() => {
        document.body.classList.add("loginbner");
        return () => {
            document.body.classList.remove("loginbner");
        };
    }, []);

    useEffect(() => {
        if (token) {
            verifyEmail(token)
                .then((response) => {
                    setEmail(response?.data?.email || "");
                    toast.success("Email verified successfully!");
                    setLoading(false);
                })
                .catch(() => {
                    toast.error("Invalid or expired verification link!");
                    setLoading(false);
                });
        }
    }, [token]);

    return (
        <div className="loginpnel">
            <form className="loginform" autoComplete="off">
                <div className="loginlgo">
                    <img
                        src={assetPath("/assets/images/jury_intel_logo.png")}
                        alt="logo"
                    />
                </div>

                <div className="loginfrminr">

                    {!loading ? (
                        <>
                            <div className="frmdata">
                                <h3>Hi {email || "User"},</h3>
                            </div>

                            <div className="frmdata">
                                <p>
                                    <span style={{ color: "green" }}>Your account has been successfully verified!</span> <br />
                                    You can now reset your password and log in to access all features.
                                </p>
                                <p>
                                    For security, make sure your new password is strong and unique. <br />
                                    Use a combination of uppercase, lowercase, numbers, and special characters.
                                </p>
                                <p>
                                    <strong>Next Steps:</strong> <br />
                                    1. Click the "Reset Password" button below. <br />
                                    2. Choose a secure new password. <br />
                                    3. Log in and explore your account!
                                </p>
                            </div>

                            <div className="frmdatabtn">
                                <input
                                    type="submit"
                                    value="Reset Password"
                                    onClick={() =>
                                        navigate(`/auth/forget-password`)
                                    }
                                />
                            </div>
                        </>
                    ) : (
                        <div className="frmdata">
                            <p>Verifying your email...</p>
                        </div>
                    )}

                    <div className="frmdatalnks">
                        <span>
                            <Link href="/">Back to Home</Link>
                        </span>
                    </div>

                </div>
            </form>
        </div>
    );
};

export default VerifyEmail;
