import type { MetaFunction } from "@remix-run/node";
import { useNavigate, useSearchParams } from "@remix-run/react";
import { CheckCircle2, XCircle } from "lucide-react";
import { Button } from "../components/ui/button";
import ProfilePagesHeader from "../components/ProfilePagesHeader";

export const meta: MetaFunction = () => {
  return [
    { title: "نتیجه پرداخت - ویترون" },
    { name: "description", content: "نتیجه پرداخت و تراکنش شما در ویترون. بررسی وضعیت پرداخت، کد پیگیری و اطلاعات تراکنش مالی." },
    { name: "keywords", content: "نتیجه پرداخت، تراکنش، کد پیگیری، پرداخت موفق، پرداخت ناموفق، ویترون" },
    { name: "robots", content: "noindex, follow" },
    { property: "og:title", content: "نتیجه پرداخت - ویترون" },
    { property: "og:description", content: "نتیجه پرداخت و تراکنش شما در ویترون. بررسی وضعیت پرداخت، کد پیگیری و اطلاعات تراکنش مالی." },
    { property: "og:type", content: "website" },
    { name: "twitter:card", content: "summary" },
    { name: "twitter:title", content: "نتیجه پرداخت - ویترون" },
    { name: "twitter:description", content: "نتیجه پرداخت و تراکنش شما در ویترون. بررسی وضعیت پرداخت، کد پیگیری و اطلاعات تراکنش مالی." },
  ];
};

export default function PaymentResult() {
  const [searchParams] = useSearchParams();
  const status = searchParams.get("status");
  const refId = searchParams.get("ref_id");
  const reason = searchParams.get("reason");
  const navigate = useNavigate();

  return (
    <div className="flex flex-col gap-6 w-full items-center lg:max-w-[640px] lg:mx-auto lg:pt-6">
      <ProfilePagesHeader title="نتیجه پرداخت" />
      <div className="flex flex-col gap-6 items-center mt-[100px] px-4">
        {status === "success" ? (
          <>
            <CheckCircle2 className="text-primary size-16" />
            <p className="text-B16 text-center">پرداخت با موفقیت انجام شد</p>
            <div className="flex flex-col items-center gap-1">
              <p className="text-R14 text-GRAY">کد پیگیری:</p>
              <p className="text-B16">{refId}</p>
            </div>
          </>
        ) : (
          <>
            <XCircle className="text-RED size-16" />
            <p className="text-B16 text-center">پرداخت ناموفق</p>
            <p className="text-R14 text-GRAY text-center">
              {reason ||
                "متاسفانه مشکلی در پرداخت پیش آمده است. لطفا دوباره تلاش کنید."}
            </p>
          </>
        )}
        <Button
          className="w-full"
          size={"xl"}
          variant="dark"
          onClick={() => navigate("/profile/wallet")}
        >
          بازگشت به کیف پول
        </Button>
      </div>
    </div>
  );
}