import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { and, eq, gt, isNull } from "drizzle-orm";
import { KeyRound, AlertTriangle } from "lucide-react";
import { Container } from "@/components/Container";
import { db } from "@/lib/db/client";
import { passwordResetTokens } from "@/lib/db/schema";
import { hashResetToken } from "@/lib/auth/reset-token";
import { ResetPasswordForm } from "./ResetPasswordForm";

export const metadata: Metadata = {
  title: "Reset password",
  description: "Set a new password for your OrthoGlobe account.",
  robots: { index: false, follow: false },
};

export default async function ResetPasswordPage({
  params,
}: {
  params: Promise<{ token: string }>;
}) {
  const { token } = await params;
  const tokenHash = hashResetToken(token);
  const [row] = await db
    .select()
    .from(passwordResetTokens)
    .where(
      and(
        eq(passwordResetTokens.tokenHash, tokenHash),
        isNull(passwordResetTokens.usedAt),
        gt(passwordResetTokens.expiresAt, new Date()),
      ),
    )
    .limit(1);

  const valid = Boolean(row);

  return (
    <section className="bg-white pt-10 pb-16 md:pt-14 md:pb-24">
      <Container>
        <div className="mx-auto w-full max-w-md">
          <div className="flex flex-col items-center text-center">
            <Link href="/" aria-label="OrthoGlobe home" className="inline-flex">
              <Image
                src="/brand/orthoglobe-logo-512.webp"
                alt="OrthoGlobe"
                width={512}
                height={512}
                priority
                className="h-24 w-auto md:h-28"
              />
            </Link>
            <div className="mt-6 inline-flex items-center gap-2 rounded-full border border-[var(--color-line)] bg-[var(--color-mist)] px-3 py-1 text-[11px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
              <KeyRound className="h-3 w-3" aria-hidden />
              Password reset
            </div>
            <h1 className="mt-4 font-display text-[32px] md:text-[40px] font-extrabold leading-[1.1] tracking-[-0.02em] text-[var(--color-ink)]">
              {valid ? "Choose a new password" : "Link expired"}
            </h1>
          </div>

          <div className="mt-8 rounded-2xl border border-[var(--color-line)] bg-white p-6 shadow-sm md:p-8">
            {valid ? (
              <>
                <p className="mb-5 text-[13px] leading-relaxed text-[var(--color-slate)]">
                  Use at least 10 characters, including uppercase, lowercase,
                  and a number.
                </p>
                <ResetPasswordForm token={token} />
              </>
            ) : (
              <div className="flex items-start gap-3 rounded-md border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
                <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0" aria-hidden />
                <div>
                  <p className="font-semibold">
                    This reset link is invalid or has already been used.
                  </p>
                  <p className="mt-1">
                    Request a fresh link from the{" "}
                    <Link
                      href="/forgot-password"
                      className="font-semibold text-[var(--color-blue)] hover:underline"
                    >
                      forgot password page
                    </Link>
                    .
                  </p>
                </div>
              </div>
            )}
          </div>
        </div>
      </Container>
    </section>
  );
}
