import { createFileRoute, Link } from "@tanstack/react-router";
import { BadgeCheck, ShieldX } from "lucide-react";

import { PageShell } from "@/components/page-shell";
import { Button } from "@/components/ui/button";
import { verifyCertificate } from "@/lib/certificates.functions";

export const Route = createFileRoute("/verify/$number")({
  loader: async ({ params }) => ({
    record: await verifyCertificate({ data: { number: params.number } }),
  }),
  head: ({ params }) => ({
    meta: [
      { title: `Verify certificate ${params.number} | UZIA Academy` },
      {
        name: "description",
        content: `Public verification record for UZIA Academy certificate ${params.number}.`,
      },
      { property: "og:title", content: `UZIA certificate ${params.number}` },
      { property: "og:description", content: "Public UZIA Academy certificate verification." },
    ],
  }),
  errorComponent: VerifyError,
  component: VerifyPage,
});

function VerifyError() {
  return (
    <PageShell>
      <div className="mx-auto max-w-xl px-4 py-24 text-center">
        <h1 className="text-3xl">We couldn't check that number</h1>
        <Button asChild className="mt-6 rounded-full">
          <Link to="/certificates">Try the verification tool</Link>
        </Button>
      </div>
    </PageShell>
  );
}

function VerifyPage() {
  const { record } = Route.useLoaderData();
  const { number } = Route.useParams();

  return (
    <PageShell>
      <section className="mx-auto w-full max-w-2xl px-4 py-20">
        {record ? (
          <div className="overflow-hidden rounded-3xl border border-border bg-card shadow-lift">
            <div className="bg-sunset p-8 text-primary-foreground">
              <BadgeCheck className="size-9 text-gold" />
              <h1 className="mt-4 text-3xl">Valid UZIA certificate</h1>
              <p className="mt-2 text-sm opacity-90">{record.certificate_number}</p>
            </div>
            <dl className="grid gap-5 p-8 sm:grid-cols-2">
              {[
                ["Awarded to", record.learner_name],
                ["Business", record.business_name ?? "—"],
                ["Programme", record.course_title],
                ["Credential level", record.credential_level],
                ["Certificate type", record.certificate_type],
                ["Learning hours", `${record.learning_hours} hours`],
                ["Issued", new Date(record.issued_at).toLocaleDateString()],
              ].map(([k, v]) => (
                <div key={k}>
                  <dt className="text-xs uppercase tracking-wider text-muted-foreground">{k}</dt>
                  <dd className="mt-1 text-sm font-semibold">{v}</dd>
                </div>
              ))}
            </dl>
          </div>
        ) : (
          <div className="rounded-3xl border border-destructive/40 bg-destructive/5 p-10 text-center">
            <ShieldX className="mx-auto size-9 text-destructive" />
            <h1 className="mt-4 text-3xl">No certificate found</h1>
            <p className="mt-3 text-sm text-muted-foreground">
              {number} does not match any certificate issued by UZIA Academy.
            </p>
            <Button asChild className="mt-6 rounded-full">
              <Link to="/certificates">Search another number</Link>
            </Button>
          </div>
        )}
      </section>
    </PageShell>
  );
}