import Link from "next/link";
import { Home, Lock, ArrowLeft, ShieldAlert } from "lucide-react";
import { Button } from "@/components/ui/button";
import { auth } from "@/auth";

export default async function NotFound() {
  const session = await auth();
  const isAuthenticated = session?.user != null;

  return (
    <div className="absolute left-0 top-0 z-[1000] flex h-screen w-full flex-col items-center justify-center bg-gradient-to-b from-slate-50 to-slate-100 px-4 text-center">
      <div className="max-w-3xl">
        {/* Fancy 404 with Shield */}
        <div className="relative mb-8">
          <div className="text-9xl font-bold tracking-tighter text-blue-100">
            404
          </div>
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="text-3xl font-bold text-slate-800 md:text-4xl">
              Access Denied
            </div>
          </div>
        </div>

        {/* Security-themed Illustration */}
        <div className="mb-8 flex justify-center">
          <div className="relative h-64 w-64">
            {/* Shield Background */}
            <div className="absolute left-1/2 top-1/2 h-48 w-40 -translate-x-1/2 -translate-y-1/2">
              <div className="relative h-full w-full">
                {/* Main Shield */}
                <div className="absolute inset-0 rounded-2xl border-2 border-blue-600 bg-white shadow-lg">
                  <div className="absolute inset-x-0 top-0 h-1/2 rounded-t-2xl bg-gradient-to-b from-blue-50"></div>
                </div>

                {/* Lock Icon */}
                <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
                  <Lock className="h-16 w-16 text-blue-600" strokeWidth={1.5} />
                </div>

                {/* Alert Icon */}
                <div className="absolute -right-4 -top-4 animate-bounce">
                  <ShieldAlert className="h-10 w-10 text-blue-600" />
                </div>
              </div>
            </div>

            {/* Animated Elements */}
            <div className="absolute -left-2 bottom-10 animate-pulse text-2xl font-bold text-blue-600">
              !
            </div>
            <div
              className="absolute -right-2 top-10 animate-pulse text-2xl font-bold text-blue-600"
              style={{ animationDelay: "0.5s" }}
            >
              !
            </div>
          </div>
        </div>

        {/* Message */}
        <p className="mb-8 text-lg text-slate-600">
          {isAuthenticated
            ? "The requested page could not be found. You might not have sufficient permissions or the resource may have been moved."
            : "The requested page could not be found. Please sign in or create an account to access all features."}
        </p>

        {/* Action Links */}
        <div className="mb-10">
          <h3 className="mb-4 text-xl font-semibold text-slate-800">
            Quick Access
          </h3>
          <div className="flex flex-wrap justify-center gap-4">
            {!isAuthenticated ? (
              <>
                <Link href="/auth/login">
                  <Button variant="outline" className="flex items-center gap-2">
                    <Lock className="h-4 w-4" />
                    Sign In
                  </Button>
                </Link>
                <Link href="/auth/register">
                  <Button variant="outline" className="flex items-center gap-2">
                    <ShieldAlert className="h-4 w-4" />
                    Create Account
                  </Button>
                </Link>
              </>
            ) : (
              <>
                <Link href="/settings">
                  <Button variant="outline" className="flex items-center gap-2">
                    <Lock className="h-4 w-4" />
                    Settings
                  </Button>
                </Link>
                {session.user.role !== "USER" && (
                  <Link
                    href={
                      session.user.role === "ADMIN" ? "/admin" : "/moderator"
                    }
                  >
                    <Button
                      variant="outline"
                      className="flex items-center gap-2"
                    >
                      <ShieldAlert className="h-4 w-4" />
                      Dashboard
                    </Button>
                  </Link>
                )}
              </>
            )}
          </div>
        </div>

        {/* Navigation Buttons */}
        <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
          <Link href="/">
            <Button size="lg" className="gap-2 bg-blue-600 hover:bg-blue-700">
              <Home className="h-5 w-5" />
              Return Home
            </Button>
          </Link>
        </div>
      </div>
    </div>
  );
}