import { useParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { CheckCircle2, XCircle } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { queryKeys } from "@/hooks/queries/keys";
import { verificationService } from "@/services/verification.service";

export default function ScoreVerification() {
  const { verificationHash } = useParams<{ verificationHash: string }>();
  const hash = verificationHash ?? "";

  const { data, isLoading, isError } = useQuery({
    queryKey: queryKeys.verification.verify(hash),
    queryFn: () => verificationService.verify(hash),
    enabled: !!hash,
    retry: false,
  });

  const valid = data?.valid === true;

  return (
    <div className="min-h-screen flex items-center justify-center p-6 bg-muted/40">
      <Card className="w-full max-w-md border shadow-md">
        <CardContent className="pt-8 pb-8 space-y-6">
          <div className="text-center font-semibold tracking-tight text-lg">EnCoach</div>
          {isLoading ? (
            <p className="text-center text-muted-foreground text-sm">Verifying…</p>
          ) : isError || !valid ? (
            <div className="flex flex-col items-center gap-3 text-center">
              <XCircle className="h-14 w-14 text-destructive" />
              <p className="text-sm text-muted-foreground">This verification code is invalid or has expired.</p>
            </div>
          ) : (
            <div className="flex flex-col items-center gap-4 text-center">
              <CheckCircle2 className="h-14 w-14 text-green-600" />
              <div className="space-y-1">
                <p className="font-medium text-lg">{data.student_name}</p>
                <p className="text-sm text-muted-foreground capitalize">{data.exam_type}</p>
                <p className="text-2xl font-bold">{data.overall_score}</p>
                <p className="text-xs text-muted-foreground">
                  Issued {data.issued_at ? new Date(data.issued_at).toLocaleDateString() : "—"}
                </p>
              </div>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}