pargar/frontend/src/app/c/[id]/page.tsx

"use client";

import { useQuery } from "@tanstack/react-query";
import { useParams } from "next/navigation";
import { Loader2 } from "lucide-react";
import { CertificateCard } from "@/components/certificate-card";
import { NotFoundState, notFoundSentence } from "@/components/not-found-state";
import { http, toUserError } from "@/lib/api";
import { useAuth } from "@/lib/auth-store";
import type { Certificate } from "@/lib/types";

type PublicCertResponse = {
  certificate: { publicId: string; fullName: string; issuedAt: string };
  course: string;
};

export default function CertificatePage() {
  const params = useParams<{ id: string }>();
  const publicId = params?.id ?? "";
  const authUser = useAuth((s) => s.user);

  const { data, isLoading, error } = useQuery({
    queryKey: ["certificate", publicId],
    queryFn: () => http.get<PublicCertResponse>(`/api/certificates/${publicId}`),
    enabled: !!publicId,
    meta: { silentError: true },
  });

  const { data: mine } = useQuery({
    queryKey: ["me", "certificate"],
    queryFn: () => http.get<{ certificate: Certificate | null }>("/api/me/certificate"),
    enabled: !!authUser,
  });

  const isOwner = !!authUser && mine?.certificate?.publicId === publicId;

  if (isLoading) {
    return (
      <div className="flex min-h-[60vh] items-center justify-center">
        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
      </div>
    );
  }

  if (error || !data?.certificate) {
    return (
      <NotFoundState
        title="گواهینامه پیدا نشد"
        description={notFoundSentence(
          error ? toUserError(error, "") : "",
          "این گواهینامه در سامانه نیست.",
          "گواهینامه پیدا نشد",
        )}
        href="/"
        actionLabel="بازگشت به خانه"
      />
    );
  }

  const cert = data.certificate;

  return (
    <CertificateCard
      cert={{
        publicId: cert.publicId,
        fullName: cert.fullName,
        issuedAt: cert.issuedAt,
        course: data.course,
      }}
      showOwnerLinks={isOwner}
    />
  );
}