import Link from "next/link";
import {
  Github,
  Shield,
  KeyRound,
  Heart,
  Info,
  Code,
  Settings,
  Users,
  Lock,
  Mail,
  ExternalLink,
} from "lucide-react";
import { auth } from "@/auth";

export default async function Footer() {
  const session = await auth();
  const isAuthenticated = session?.user != null;
  const currentYear = new Date().getFullYear();

  return (
    <footer className="relative w-full border-t border-slate-200 bg-gradient-to-b from-slate-50 to-slate-100 py-8 sm:py-12">
      {/* Decorative Elements */}
      <div className="absolute left-0 top-0 h-1 w-full bg-gradient-to-r from-blue-500 via-indigo-600 to-blue-700"></div>
      <div className="absolute left-0 top-1 h-px w-full bg-white/50"></div>

      <div className="container mx-auto px-4 sm:px-6">
        <div className="grid grid-cols-1 gap-8 lg:grid-cols-12 lg:gap-12">
          {/* Brand Section */}
          <div className="lg:col-span-4">
            <div className="mb-4 flex items-center sm:mb-6">
              <div className="mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-blue-600 text-white shadow-md">
                <Lock className="h-5 w-5" />
              </div>
              <h3 className="text-xl font-bold tracking-tight text-slate-800">
                Auth JS Boiler
              </h3>
            </div>

            <p className="mb-6 text-sm text-slate-600 sm:text-base">
              {isAuthenticated
                ? `Welcome back, ${session?.user?.name || "User"}! Thank you for trusting our secure authentication platform.`
                : "A complete authentication solution with email verification, password reset, and role-based access control for modern web applications."}
            </p>

            <div className="flex space-x-4">
              <Link
                href="https://github.com/Mohamed-gp"
                className="group flex h-9 w-9 items-center justify-center rounded-full bg-slate-200 text-slate-600 transition-all duration-200 hover:bg-slate-800 hover:text-white hover:shadow-lg sm:h-10 sm:w-10"
                target="_blank"
                rel="noopener noreferrer"
              >
                <Github className="h-4 w-4 transition-transform group-hover:scale-110 sm:h-5 sm:w-5" />
                <span className="sr-only">GitHub</span>
              </Link>

              <Link
                href="mailto:mohamedterba6@gmail.com"
                className="group flex h-9 w-9 items-center justify-center rounded-full bg-slate-200 text-slate-600 transition-all duration-200 hover:bg-red-500 hover:text-white hover:shadow-lg sm:h-10 sm:w-10"
              >
                <Mail className="h-4 w-4 transition-transform group-hover:scale-110 sm:h-5 sm:w-5" />
                <span className="sr-only">Email</span>
              </Link>
            </div>
          </div>

          {/* Navigation Sections */}
          <div className="lg:col-span-8">
            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
              {/* Authentication Links */}
              {isAuthenticated ? (
                <div>
                  <h4 className="mb-3 font-semibold text-slate-800 after:ml-2 after:inline-block after:h-1.5 after:w-1.5 after:rounded-full after:bg-blue-600 sm:mb-4 sm:after:h-2 sm:after:w-2">
                    User Menu
                  </h4>
                  <ul className="space-y-2.5 sm:space-y-3">
                    <li>
                      <Link
                        href="/settings"
                        className="group flex items-center gap-2 text-sm text-slate-600 transition-colors duration-200 hover:text-blue-600"
                      >
                        <Settings className="h-4 w-4 transition-transform duration-200 group-hover:rotate-12" />
                        <span className="border-b border-transparent transition-colors group-hover:border-blue-600">
                          Settings
                        </span>
                      </Link>
                    </li>
                    {session?.user?.role !== "USER" && (
                      <li>
                        <Link
                          href={
                            session?.user?.role === "ADMIN"
                              ? "/admin"
                              : "/moderator"
                          }
                          className="group flex items-center gap-2 text-sm text-slate-600 transition-colors duration-200 hover:text-blue-600"
                        >
                          <Users className="h-4 w-4 transition-transform duration-200 group-hover:scale-110" />
                          <span className="border-b border-transparent transition-colors group-hover:border-blue-600">
                            Dashboard
                          </span>
                        </Link>
                      </li>
                    )}
                  </ul>
                </div>
              ) : (
                <div>
                  <h4 className="mb-3 font-semibold text-slate-800 after:ml-2 after:inline-block after:h-1.5 after:w-1.5 after:rounded-full after:bg-blue-600 sm:mb-4 sm:after:h-2 sm:after:w-2">
                    Get Started
                  </h4>
                  <ul className="space-y-2.5 sm:space-y-3">
                    <li>
                      <Link
                        href="/auth/login"
                        className="group flex items-center gap-2 text-sm text-slate-600 transition-colors duration-200 hover:text-blue-600"
                      >
                        <KeyRound className="h-4 w-4 transition-transform duration-200 group-hover:scale-110" />
                        <span className="border-b border-transparent transition-colors group-hover:border-blue-600">
                          Sign In
                        </span>
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/auth/register"
                        className="group flex items-center gap-2 text-sm text-slate-600 transition-colors duration-200 hover:text-blue-600"
                      >
                        <Shield className="h-4 w-4 transition-transform duration-200 group-hover:scale-110" />
                        <span className="border-b border-transparent transition-colors group-hover:border-blue-600">
                          Create Account
                        </span>
                      </Link>
                    </li>
                    <li>
                      <Link
                        href="/auth/forgot-password"
                        className="group flex items-center gap-2 text-sm text-slate-600 transition-colors duration-200 hover:text-blue-600"
                      >
                        <Info className="h-4 w-4 transition-transform duration-200 group-hover:rotate-12" />
                        <span className="border-b border-transparent transition-colors group-hover:border-blue-600">
                          Reset Password
                        </span>
                      </Link>
                    </li>
                  </ul>
                </div>
              )}

              {/* Resources */}
              <div>
                <h4 className="mb-3 font-semibold text-slate-800 after:ml-2 after:inline-block after:h-1.5 after:w-1.5 after:rounded-full after:bg-blue-600 sm:mb-4 sm:after:h-2 sm:after:w-2">
                  Resources
                </h4>
                <ul className="space-y-2.5 sm:space-y-3">
                  <li>
                    <Link
                      href="https://github.com/Mohamed-gp/auth-js-boiler#readme"
                      className="group flex items-center gap-2 text-sm text-slate-600 transition-colors duration-200 hover:text-blue-600"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <Code className="h-4 w-4 transition-transform duration-200 group-hover:scale-110" />
                      <span className="border-b border-transparent transition-colors group-hover:border-blue-600">
                        Documentation
                      </span>
                      <ExternalLink className="ml-0.5 h-3 w-3 opacity-70" />
                    </Link>
                  </li>
                  <li>
                    <Link
                      href="/support"
                      className="group flex items-center gap-2 text-sm text-slate-600 transition-colors duration-200 hover:text-blue-600"
                    >
                      <Info className="h-4 w-4 transition-transform duration-200 group-hover:rotate-12" />
                      <span className="border-b border-transparent transition-colors group-hover:border-blue-600">
                        Support
                      </span>
                    </Link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        {/* Bottom Section with Copyright */}
        <div className="mt-8 flex flex-col items-center justify-between space-y-4 border-t border-slate-200 pt-6 text-center sm:mt-12 sm:pt-8 lg:flex-row lg:space-y-0 lg:text-left">
          <p className="text-xs text-slate-500 sm:text-sm">
            &copy; {currentYear} Auth JS Boiler. All rights reserved.
          </p>

          <div className="flex items-center justify-center space-x-1 text-xs text-slate-500 sm:text-sm">
            <span>Made with</span>
            <Heart className="h-3 w-3 animate-pulse text-red-500 sm:h-4 sm:w-4" />
            <span>
              by{" "}
              <Link
                href="https://github.com/Mohamed-gp"
                className="font-medium text-slate-700 transition-colors hover:text-blue-600"
                target="_blank"
                rel="noopener noreferrer"
              >
                Mohamed
              </Link>
            </span>
          </div>
        </div>
      </div>
    </footer>
  );
}