"use client";

import { useEffect } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { CheckCircle2, XCircle, ArrowLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { useQueryClient } from "@tanstack/react-query";

export default function InvoiceResultPage() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const qc = useQueryClient();
  const status = searchParams.get("payment");
  const isSuccess = status === "success";

  useEffect(() => {
    if (isSuccess) {
      qc.invalidateQueries({ queryKey: ["tasks"] });
    }
  }, [isSuccess]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-background p-4">
      <Card className="w-full max-w-md border-border shadow-lg">
        <CardContent className="flex flex-col items-center gap-5 py-12 px-8 text-center">
          {isSuccess ? (
            <>
              <CheckCircle2 className="h-16 w-16 text-green-500" />
              <h1 className="text-2xl font-bold text-foreground">Payment Successful!</h1>
              <p className="text-muted-foreground text-sm">
                Your payment has been processed successfully. Thank you!
              </p>
            </>
          ) : (
            <>
              <XCircle className="h-16 w-16 text-destructive" />
              <h1 className="text-2xl font-bold text-foreground">Payment Cancelled</h1>
              <p className="text-muted-foreground text-sm">
                Your payment was cancelled. You can try again from your applications.
              </p>
            </>
          )}

          <Button
            onClick={() => router.push("/client/tasks")}
            className="mt-2 flex items-center gap-2"
            variant={isSuccess ? "default" : "outline"}
          >
            <ArrowLeft className="h-4 w-4" />
            Back to My Applications
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}