import { useQuery } from "@tanstack/react-query";
import { createFileRoute, Link } from "@tanstack/react-router";
import { useServerFn } from "@tanstack/react-start";
import { Award, ExternalLink } from "lucide-react";

import { AppShell } from "@/components/app-shell";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { CREDENTIAL_LEVELS } from "@/lib/assessment";
import { listMyCertificates } from "@/lib/certificates.functions";

export const Route = createFileRoute("/_authenticated/my-certificates")({
  head: () => ({
    meta: [
      { title: "My Certificates | UZIA Academy" },
      { name: "description", content: "Your issued UZIA credentials and their verification links." },
      { name: "robots", content: "noindex" },
    ],
  }),
  component: MyCertificates,
});

function MyCertificates() {
  const fetchCerts = useServerFn(listMyCertificates);
  const { data, isLoading } = useQuery({
    queryKey: ["my-certificates"],
    queryFn: () => fetchCerts(),
  });

  return (
    <AppShell
      title="My certificates"
      description="Every UZIA certificate you've earned, with a public verification link you can share with buyers, lenders and partners."
    >
      {isLoading ? (
        <Skeleton className="h-40 w-full" />
      ) : (data ?? []).length === 0 ? (
        <div className="rounded-3xl border border-border bg-surface p-10 text-center">
          <Award className="mx-auto size-8 text-primary" />
          <h2 className="mt-4 font-display text-xl font-bold">No certificates yet</h2>
          <p className="mx-auto mt-2 max-w-md text-sm text-muted-foreground">
            Complete every weekly module of a programme, then claim your certificate from the course
            page.
          </p>
          <Button asChild className="mt-6 rounded-full">
            <Link to="/courses">Browse programmes</Link>
          </Button>
        </div>
      ) : (
        <div className="grid gap-5 md:grid-cols-2">
          {(data ?? []).map((c) => (
            <div key={c.id} className="overflow-hidden rounded-3xl border border-border bg-card">
              <div className="bg-sunset p-6 text-primary-foreground">
                <Award className="size-6 text-gold" />
                <p className="mt-3 font-display text-lg font-bold">{c.course_title}</p>
                <p className="mt-1 text-xs opacity-90">{c.certificate_number}</p>
              </div>
              <div className="space-y-3 p-6">
                <div className="flex flex-wrap gap-2">
                  <Badge className="bg-gold text-gold-foreground">{c.credential_level}</Badge>
                  <Badge variant="outline">{c.learning_hours} hours</Badge>
                </div>
                <p className="text-sm text-muted-foreground">{c.certificate_type}</p>
                <p className="text-xs text-muted-foreground">
                  Issued {new Date(c.issued_at).toLocaleDateString()} to {c.learner_name}
                </p>
                <Button asChild variant="outline" size="sm" className="rounded-full">
                  <Link to="/verify/$number" params={{ number: c.certificate_number }}>
                    Verification page <ExternalLink className="ml-1.5 size-3.5" />
                  </Link>
                </Button>
              </div>
            </div>
          ))}
        </div>
      )}

      <div className="mt-12 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {CREDENTIAL_LEVELS.map((c) => (
          <div key={c.level} className="rounded-2xl border border-border bg-surface p-5">
            <p className="font-display text-sm font-bold text-primary">Level {c.level}</p>
            <p className="mt-1 text-sm font-semibold">{c.name}</p>
            <p className="mt-1.5 text-xs text-muted-foreground">{c.note}</p>
          </div>
        ))}
      </div>
    </AppShell>
  );
}