'use client';
import Link from "next/link";
import { IoIosWarning } from "react-icons/io";
import Loader from "@/components/common/Loader";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

const AccessDenied = () => {
  const [isNavigating, setIsNavigating] = useState(false);
  const router = useRouter();

  // Handle navigation with loading state
  const handleNavigation = (href: string) => {
    setIsNavigating(true);
    router.push(href);
  };

  // Clean up loading state if component unmounts during navigation
  useEffect(() => {
    return () => {
      setIsNavigating(false);
    };
  }, []);

  if (isNavigating) {
    return <Loader />;
  }

  return (
    <main>
      <section
        className="grid min-h-screen place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8"
        aria-labelledby="access-denied-heading"
        role="alert"
      >
        <div className="text-center">
          <p className="text-base font-semibold text-darkBlue">403</p>
          <h1
            id="access-denied-heading"
            className="flex items-center justify-center gap-2 mt-4 text-balance text-5xl font-semibold tracking-tight text-gray-900 sm:text-7xl"
          >
            Access Denied
            <span aria-hidden="true">
              <IoIosWarning className="text-yellow-500" />
            </span>
          </h1>
          <p className="mt-6 text-pretty text-lg font-medium text-gray-500 sm:text-xl/8">
            Sorry, you&apos;re not allowed to access this page.
          </p>

          <nav className="mt-10 flex items-center justify-center gap-x-6">
            <Link
              href="/"
              onClick={() => handleNavigation("/")}
              className="rounded-md bg-primary hover:bg-secondary px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-liteBlue focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-darkBlue"
              aria-label="Go back to home page"
            >
              Go back home
            </Link>
            <Link
              href="/login"
              onClick={() => handleNavigation("/login")}
              className="text-sm font-semibold text-gray-900 hover:text-darkBlue focus:text-darkBlue"
              aria-label="Login as admin"
            >
              Login as Admin <span aria-hidden="true">&rarr;</span>
            </Link>
          </nav>
        </div>
      </section>
    </main>
  );
};

export default AccessDenied;