"use client";

import Container from "@/components/elements/Container";
import { IAdvertising, IAdvertisingType } from "@/types/types";
import useAxios from "@/hooks/useAxios";
import React, { useEffect, useState } from "react";
import MainBillboardCard from "@/components/billboards/MainBillboardCard/MainBillboardCard";
import RoundedDiv from "@/components/elements/RoundedDiv";
import RoundedButton from "@/components/elements/RoundedButton";
import LocalePageShell from "@/components/i18n/LocalePageShell";
import { getBillboardDisplayTypeLabel } from "@/lib/billboards/displayTypeLabel";
import { useRouter } from "next/navigation";
import { useTranslation } from "react-i18next";

interface IBillboardProps {
  params: Promise<{ id: string }>;
}

function BillboardPayment({ params }: IBillboardProps) {
  const { t } = useTranslation("common");
  const resolvedParams = React.use(params);
  const router = useRouter();
  const { request } = useAxios();
  const { id } = resolvedParams;
  const [advertising, setAdvertising] = useState<IAdvertising>();
  const [typeList, setTypeList] = useState<IAdvertisingType[] | null>(null);
  const [price, setPrice] = useState("");

  useEffect(() => {
    const fetchAd = async () => {
      const response = await request<{ advertising: IAdvertising }>(
        "GET",
        `/advertising/get/web/${id}`
      );
      setAdvertising(response?.advertising);
    };
    const fetchStates = async () => {
      try {
        const response = await request<{
          advertisingTypes: IAdvertisingType[];
        }>("GET", "/advertising/types");
        setTypeList(response?.advertisingTypes || null);
      } catch (err) {
        console.log(err);
      }
    };
    fetchAd();
    fetchStates();
  }, [id, request]);

  const payHandler = async () => {
    try {
      const response = await request<{ authority?: string }>(
        "POST",
        "/advertising/initiate-payment-web",
        {
          item_name: advertising?.type,
          advertisingId: id,
          showDiscount: advertising?.showDiscount,
        }
      );

      if (advertising?.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);
    }
  };

  useEffect(() => {
    if (advertising?.type && typeList) {
      const foundType = typeList.find((item) => item.name === advertising.type);
      if (foundType) {
        setPrice(String(foundType.price));
      }
    }
  }, [advertising, typeList]);

  return (
    <LocalePageShell>
      <Container>
        <h6 className="font-bold md:text-xl text-lg text-center mt-2 line-clamp-2 mb-4 text-text-blue-light dark:text-text-blue-dark">
          {t("billboards.payment.title")}
        </h6>
        <div className="px-4 w-full text-sm md:text-md font-semibold mt-10">
          {advertising && <MainBillboardCard billboard={advertising} />}
          <div className="flex flex-col items-center gap-4 mt-4">
            <RoundedDiv className="p-2 w-full">
              {getBillboardDisplayTypeLabel(t, advertising?.type)}:{" "}
              {Number(price).toLocaleString()} {t("settings.toman")}
            </RoundedDiv>
            <RoundedDiv className="p-2 w-full">
              {t("billboards.payment.payableAmount", {
                amount: Number(price).toLocaleString(),
              })}
            </RoundedDiv>
            <RoundedButton
              variant="primary"
              onClick={payHandler}
              className="h-9 w-32"
            >
              {t("billboards.payment.title")}
            </RoundedButton>
          </div>
        </div>
      </Container>
    </LocalePageShell>
  );
}

export default BillboardPayment;
