import type { Metadata } from "next";
import Link from "next/link";
import { CheckCircle, XCircle, Mail } from "lucide-react";
import { db } from "@/lib/db";

export const metadata: Metadata = { title: "Verify Email" };

export default async function VerifyEmailPage({
  searchParams,
}: {
  searchParams: Promise<{ token?: string }>;
}) {
  const { token } = await searchParams;
  let status: "success" | "already" | "invalid" | "pending" = "pending";

  if (token) {
    const user = await db.user.findUnique({ where: { verifyToken: token } });
    if (!user) {
      status = "invalid";
    } else if (user.emailVerified) {
      status = "already";
    } else {
      await db.user.update({
        where: { id: user.id },
        data: { emailVerified: new Date(), verifyToken: null },
      });
      status = "success";
    }
  }

  return (
    <div className="min-h-screen bg-neutral-50 flex items-center justify-center py-12 px-4">
      <div className="w-full max-w-md text-center">
        {status === "success" && (
          <>
            <div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <CheckCircle size={32} className="text-emerald-600" />
            </div>
            <h1 className="text-2xl font-bold text-navy-800 mb-3">Email Verified!</h1>
            <p className="text-neutral-500 mb-8">
              Your account is now fully activated. You can log in and access all features.
            </p>
            <Link
              href="/login"
              className="inline-flex items-center justify-center px-6 py-3 bg-navy-700 text-white font-semibold rounded-xl hover:bg-navy-800 transition-colors"
            >
              Go to Login
            </Link>
          </>
        )}

        {status === "already" && (
          <>
            <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <CheckCircle size={32} className="text-blue-600" />
            </div>
            <h1 className="text-2xl font-bold text-navy-800 mb-3">Already Verified</h1>
            <p className="text-neutral-500 mb-8">
              Your email has already been verified. You can log in to your account.
            </p>
            <Link
              href="/login"
              className="inline-flex items-center justify-center px-6 py-3 bg-navy-700 text-white font-semibold rounded-xl hover:bg-navy-800 transition-colors"
            >
              Go to Login
            </Link>
          </>
        )}

        {(status === "invalid" || status === "pending") && (
          <>
            <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <XCircle size={32} className="text-red-500" />
            </div>
            <h1 className="text-2xl font-bold text-navy-800 mb-3">
              {status === "invalid" ? "Invalid or Expired Link" : "No Token Provided"}
            </h1>
            <p className="text-neutral-500 mb-8">
              This verification link is invalid or has expired. Please check your email for the latest
              verification link or contact support.
            </p>
            <div className="flex flex-col sm:flex-row gap-3 justify-center">
              <Link
                href="/login"
                className="inline-flex items-center justify-center px-6 py-3 bg-navy-700 text-white font-semibold rounded-xl hover:bg-navy-800 transition-colors"
              >
                Go to Login
              </Link>
              <Link
                href="/register"
                className="inline-flex items-center justify-center gap-2 px-6 py-3 border border-neutral-200 text-neutral-700 font-medium rounded-xl hover:bg-neutral-100 transition-colors"
              >
                <Mail size={16} /> Register Again
              </Link>
            </div>
          </>
        )}
      </div>
    </div>
  );
}