"use client";

import RoundedButton from "@/components/elements/RoundedButton";
import useAxios from "@/hooks/useAxios";
import Link from "next/link";
import { useRouter } from "next/navigation";
import React from "react";
import { useTranslation } from "react-i18next";

function MyBillboardStatusActions({
  status,
  reject_reason,
  _id,
  type,
  showDiscount,
  title,
}: {
  status?: string;
  reject_reason?: string;
  _id: string;
  type?: string;
  showDiscount?: boolean;
  title?: string;
}) {
  const { t } = useTranslation("common");
  const router = useRouter();
  const { request } = useAxios();
  const payHandler = async () => {
    try {
      const response = await request<{ authority?: string }>(
        "POST",
        "/advertising/initiate-payment-web",
        {
          item_name: type,
          advertisingId: _id,
          showDiscount: showDiscount,
        }
      );

      if (type === "free") {
        router.push("/settings/my-billboards");
      } else {
        const authority = response.authority;
        const paymentUrl = `https://www.zarinpal.com/pg/StartPay/${authority}`;
        router.push(paymentUrl);
      }
    } catch (error: unknown) {
      console.log(error);
    }
  };
  const republishHandler = async () => {
    try {
      const response = await request<{ authority?: string }>(
        "POST",
        "/advertising/republish-payment/web",
        {
          item_name: type,
          advertisingId: _id,
          showDiscount: showDiscount,
        }
      );

      if (type === "free") {
        router.push("/settings/my-billboards");
      } else {
        const authority = response.authority;
        const paymentUrl = `https://www.zarinpal.com/pg/StartPay/${authority}`;
        router.push(paymentUrl);
      }
    } catch (error: unknown) {
      console.log(error);
    }
  };
  return (
    <div className="flex flex-col items-center gap-4 text-center">
      {status == "rejected" ? (
        <span>
          {t("settings.billboards.rejectReason")}{" "}
          <span>{reject_reason}</span>
        </span>
      ) : (
        ""
      )}
      {status == "pre_payment" ? (
        <div className="mt-5 flex justify-center">
          <RoundedButton
            onClick={payHandler}
            variant="primary" className="w-24 h-9"
          >
            {t("settings.billboards.pay")}
          </RoundedButton>
        </div>
      ) : (
        ""
      )}
      {status == "pre_payment" || status == "paid" || status == "rejected" ? (
        <Link href={`/settings/my-billboards/edit/${_id}/${title}`}>
          <RoundedButton variant="primary" className="w-24 h-9">
            {t("settings.billboards.edit")}
          </RoundedButton>
        </Link>
      ) : (
        ""
      )}
      {status == "accepted" ? (
        <div
          onClick={republishHandler}
          className="mt-5 flex flex-col justify-center items-center gap-2"
        >
          <span>{t("settings.billboards.republishHint")}</span>
          <RoundedButton variant="primary" className="w-24 h-9">
            {t("settings.billboards.republish")}
          </RoundedButton>
        </div>
      ) : (
        ""
      )}
      {status == "expired" ? (
        <div onClick={republishHandler} className="mt-5 flex justify-center">
          <RoundedButton
            onClick={republishHandler}
            variant="primary" className="w-24 h-9"
          >
            {t("settings.billboards.republish")}
          </RoundedButton>
        </div>
      ) : (
        ""
      )}
    </div>
  );
}

export default MyBillboardStatusActions;
