import { prisma } from "@/lib/prisma";
import type { Metadata } from "next";

type Props = {
  params: Promise<{ serial: string }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { serial } = await params;
  return {
    title: `Certificate Verification — ${serial}`,
    description: `Verify a Falah Academy (UK) course certificate with serial number ${serial}.`,
  };
}

export default async function VerifyCertificatePage({ params }: Props) {
  const { serial } = await params;

  const certificate = await prisma.learnCertificate.findUnique({
    where: { serialNumber: serial },
    include: {
      course: {
        select: { title: true },
      },
    },
  });

  // ── Not found state ──────────────────────────────────
  if (!certificate) {
    return (
      <div className="min-h-dvh bg-[#0a0a0f] flex flex-col items-center justify-center px-6">
        <div className="bg-[#111118] border border-gray-800/60 rounded-3xl p-8 max-w-md w-full text-center">
          {/* Shield cross icon */}
          <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-red-900/20 border-2 border-red-800/40 flex items-center justify-center">
            <svg
              className="w-10 h-10 text-red-400"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
              />
            </svg>
          </div>

          <h1 className="text-2xl font-bold text-white mb-2">
            Certificate Not Found
          </h1>
          <p className="text-gray-500 text-sm mb-6">
            No certificate with serial number{" "}
            <span className="text-gray-300 font-mono">{serial}</span> exists in
            our records.
          </p>

          <div className="bg-gray-900/40 border border-gray-800/40 rounded-xl px-4 py-3">
            <p className="text-xs text-gray-600">
              If you believe this is an error, please contact{" "}
              <span className="text-gray-400">support@falahacademy.uk</span>
            </p>
          </div>
        </div>
      </div>
    );
  }

  const isValid = !certificate.revoked;

  // ── Certificate found ────────────────────────────────
  return (
    <div className="min-h-dvh bg-[#0a0a0f] flex flex-col items-center justify-center px-6 py-8">
      <div className="max-w-md w-full">
        {/* ── Branding header ─────────────────────────────── */}
        <div className="text-center mb-6">
          <h1 className="text-lg font-bold text-white tracking-tight">
            Falah Academy <span className="text-[#D4AF37]">(UK)</span>
          </h1>
          <p className="text-xs text-gray-600 mt-0.5">
            Certificate Verification
          </p>
        </div>

        {/* ── Certificate card ────────────────────────────── */}
        <div
          className={`bg-[#111118] border-2 rounded-3xl p-6 ${
            isValid
              ? "border-[#D4AF37]/40 shadow-[0_0_30px_-5px_rgba(212,175,55,0.15)]"
              : "border-red-800/40"
          }`}
        >
          {/* VALID / INVALID badge */}
          <div className="flex justify-center mb-6">
            {isValid ? (
              <div className="inline-flex items-center gap-2 bg-emerald-900/30 border border-emerald-700/40 rounded-full px-5 py-1.5">
                <svg
                  className="w-5 h-5 text-emerald-400"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  strokeWidth={2.5}
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
                  />
                </svg>
                <span className="text-sm font-bold text-emerald-400 tracking-wider uppercase">
                  Valid
                </span>
              </div>
            ) : (
              <div className="inline-flex items-center gap-2 bg-red-900/30 border border-red-700/40 rounded-full px-5 py-1.5">
                <svg
                  className="w-5 h-5 text-red-400"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  strokeWidth={2.5}
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
                <span className="text-sm font-bold text-red-400 tracking-wider uppercase">
                  Invalid
                </span>
              </div>
            )}
          </div>

          {/* Serial number */}
          <div className="text-center mb-6">
            <p className="text-[10px] text-gray-600 uppercase tracking-widest mb-1">
              Serial Number
            </p>
            <p className="text-sm font-mono font-semibold text-gray-200 bg-gray-900/50 rounded-lg px-3 py-2 inline-block border border-gray-800/40">
              {certificate.serialNumber}
            </p>
          </div>

          {/* Divider */}
          <div className="border-t border-gray-800/60 mb-5" />

          {/* Details grid */}
          <div className="space-y-3">
            {/* Recipient name */}
            <div className="flex items-start gap-3">
              <svg
                className="w-5 h-5 text-gray-600 shrink-0 mt-0.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={1.5}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                />
              </svg>
              <div>
                <p className="text-[10px] text-gray-600 uppercase tracking-widest">
                  Recipient
                </p>
                <p className="text-sm font-semibold text-white">
                  {certificate.userName}
                </p>
              </div>
            </div>

            {/* Course title */}
            <div className="flex items-start gap-3">
              <svg
                className="w-5 h-5 text-gray-600 shrink-0 mt-0.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={1.5}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
                />
              </svg>
              <div>
                <p className="text-[10px] text-gray-600 uppercase tracking-widest">
                  Course
                </p>
                <p className="text-sm font-semibold text-white">
                  {certificate.course.title}
                </p>
              </div>
            </div>

            {/* Issue date */}
            <div className="flex items-start gap-3">
              <svg
                className="w-5 h-5 text-gray-600 shrink-0 mt-0.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={1.5}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                />
              </svg>
              <div>
                <p className="text-[10px] text-gray-600 uppercase tracking-widest">
                  Issue Date
                </p>
                <p className="text-sm font-semibold text-white">
                  {new Date(certificate.issuedAt).toLocaleDateString("en-GB", {
                    day: "numeric",
                    month: "long",
                    year: "numeric",
                  })}
                </p>
              </div>
            </div>

            {/* Modules completed */}
            <div className="flex items-start gap-3">
              <svg
                className="w-5 h-5 text-gray-600 shrink-0 mt-0.5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={1.5}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
                />
              </svg>
              <div>
                <p className="text-[10px] text-gray-600 uppercase tracking-widest">
                  Modules Completed
                </p>
                <p className="text-sm font-semibold text-white">
                  {certificate.moduleCount}
                </p>
              </div>
            </div>

            {/* Score (optional) */}
            {certificate.score !== null && (
              <div className="flex items-start gap-3">
                <svg
                  className="w-5 h-5 text-gray-600 shrink-0 mt-0.5"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  strokeWidth={1.5}
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
                  />
                </svg>
                <div>
                  <p className="text-[10px] text-gray-600 uppercase tracking-widest">
                    Score
                  </p>
                  <p className="text-sm font-semibold text-white">
                    {certificate.score}%
                  </p>
                </div>
              </div>
            )}
          </div>

          {/* Revocation notice */}
          {certificate.revoked && certificate.revokedAt && (
            <div className="mt-5 bg-red-900/15 border border-red-800/30 rounded-xl px-4 py-3">
              <p className="text-xs text-red-400">
                This certificate was revoked on{" "}
                {new Date(certificate.revokedAt).toLocaleDateString("en-GB", {
                  day: "numeric",
                  month: "long",
                  year: "numeric",
                })}
                .
              </p>
            </div>
          )}
        </div>

        {/* ── Footer ──────────────────────────────────────── */}
        <div className="text-center mt-6">
          <p className="text-[10px] text-gray-700">
            &copy; {new Date().getFullYear()} Falah Academy (UK). All rights
            reserved.
          </p>
        </div>
      </div>
    </div>
  );
}
