import { useLogin } from "@privy-io/react-auth";
import { PrivyClient } from "@privy-io/server-auth";
import { GetServerSideProps } from "next";
import Head from "next/head";
import { useRouter } from "next/router";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCube, faRocket } from "@fortawesome/free-solid-svg-icons";

export const getServerSideProps: GetServerSideProps = async ({ req }) => {
  const cookieAuthToken = req.cookies["privy-token"];
  if (!cookieAuthToken) return { props: {} };

  const PRIVY_APP_ID = process.env.NEXT_PUBLIC_PRIVY_APP_ID;
  const PRIVY_APP_SECRET = process.env.PRIVY_APP_SECRET;
  const client = new PrivyClient(PRIVY_APP_ID!, PRIVY_APP_SECRET!);

  try {
    const claims = await client.verifyAuthToken(cookieAuthToken);
    console.log({ claims });

    return {
      props: {},
      redirect: { destination: "/dashboard", permanent: false },
    };
  } catch (error) {
    return { props: {} };
  }
};

export default function LoginPage() {
  const router = useRouter();
  const { login } = useLogin({
    onComplete: () => router.push("/dashboard"),
  });

  return (
    <>
      <Head>
        <title>Login · W3B Games</title>
      </Head>

      <main className="flex min-h-screen w-full bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
        <div className="flex flex-1 p-6 justify-center items-center w-full h-screen">
          <div className="text-center w-full">
            <div className="mb-10 h-96 flex justify-center">
              <FontAwesomeIcon icon={faCube} className="text-6xl text-cyan-400 animate-pulse" />
            </div>
            <h1 className="text-4xl sm:text-5xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">
              Welcome to W3B Game Dashboard
            </h1>
            <p className="text-lg sm:text-xl mb-8 text-gray-300">
              Embark on a Web3 adventure like no other
            </p>
            <div className="mt-6 flex justify-center">
              <button
                className="bg-gradient-to-r from-purple-500 to-cyan-500 hover:from-purple-600 hover:to-cyan-600 py-3 px-8 text-white rounded-full text-lg font-semibold transition duration-300 ease-in-out transform hover:scale-105 flex items-center shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5"
                onClick={login}
              >
                <FontAwesomeIcon icon={faRocket} className="mr-4 w-8" />
                Login to Dashboard
              </button>
            </div>
          </div>
        </div>
      </main>
    </>
  );
}
