import { db } from "@/app/db/db";
import { verificationTokens } from "@/app/db/schema/users";
import { eq } from "drizzle-orm";
import crypto from "crypto";

import { Button } from "@/app/shadcn_components/ui/button";
import { Card } from "@/app/shadcn_components/ui/card";

import { ShieldCheck } from "lucide-react";

async function getEmailByToken(token: string) {
  const secret = process.env.NEXTAUTH_SECRET!;

  const hashedToken = crypto
    .createHash("sha256")
    .update(token + secret)
    .digest("hex");

  const record = await db
    .select()
    .from(verificationTokens)
    .where(eq(verificationTokens.token, hashedToken))
    .limit(1);

  if (!record.length) return null;

  return record[0].identifier;
}

export default async function VerifyPage({
  params,
}: {
  params: Promise<{ token: string }>;
}) {
  const { token } = await params;

  const email = await getEmailByToken(token);

  return (
    <div className="relative min-h-screen flex flex-col bg-gradient-to-b from-gray-50 to-white overflow-hidden">
      {/* Soft background brand glow */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        <div className="absolute -top-24 -left-24 w-[28rem] h-[28rem] bg-brandblue/10 rounded-full blur-3xl" />
        <div className="absolute bottom-0 right-0 w-[30rem] h-[30rem] bg-midblue/10 rounded-full blur-3xl" />
      </div>

      {/* Hero */}
      <div className="relative bg-gradient-to-r from-brandblue to-midblue text-white py-16 px-8">
        <div className="max-w-5xl mx-auto text-center">
          <h1 className="text-4xl font-bold mb-4">Sign in to Ara</h1>

          <p className="text-white/90 text-lg max-w-xl mx-auto">
            Continue securely to access your retrofit planning tools and
            property insights.
          </p>
        </div>
      </div>

      {/* Center content */}
      <div className="relative flex-1 flex items-center justify-center px-6">
        <div className="w-full max-w-md">
          <Card className="p-10 shadow-xl border border-gray-100 backdrop-blur-sm text-center space-y-6">
            {/* Security icon */}
            <div className="flex justify-center">
              <div className="bg-brandblue/10 p-3 rounded-full">
                <ShieldCheck className="w-7 h-7 text-brandblue" />
              </div>
            </div>

            {email ? (
              <>
                <h2 className="text-xl font-semibold text-brandblue">
                  Confirm sign-in
                </h2>

                <p className="text-sm text-gray-600 leading-relaxed">
                  Click below to securely sign in to your Ara account.
                </p>

                <form
                  action="/api/auth/callback/email"
                  method="GET"
                  className="pt-2"
                >
                  <input type="hidden" name="token" value={token} />
                  <input type="hidden" name="email" value={email} />

                  <Button
                    type="submit"
                    className="bg-brandbrown hover:bg-hoverblue w-full text-base py-3"
                  >
                    Continue to Ara
                  </Button>
                </form>

                <p className="text-xs text-gray-400">
                  This link expires after one hour.
                </p>
              </>
            ) : (
              <>
                <h2 className="text-xl font-semibold text-red-500">
                  Link expired
                </h2>

                <p className="text-sm text-gray-600">
                  This login link has already been used or has expired.
                </p>

                <Button
                  asChild
                  className="bg-brandbrown hover:bg-hoverblue w-full text-base py-3"
                >
                  <a href="/">Request new login link</a>
                </Button>
              </>
            )}
          </Card>
        </div>
      </div>

      {/* Footer */}
      <div className="pb-10 text-center text-xs text-gray-400 space-y-1">
        <p>Secure authentication powered by Ara</p>
        <p>© {new Date().getFullYear()} Domna Homes</p>
      </div>
    </div>
  );
}
