"use client";

import { useQuery } from "@tanstack/react-query";
import { Link, useSearch } from "@tanstack/react-router";
import { Badge } from "@workspace/ui/components/badge";
import { Button } from "@workspace/ui/components/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@workspace/ui/components/card";
import { Separator } from "@workspace/ui/components/separator";
import { Icon } from "@workspace/ui/composed/icon";
import {
  purchaseCheckout,
  queryPurchaseOrder,
} from "@workspace/ui/services/user/portal";
import { formatDate } from "@workspace/ui/utils/formatting";
import { useCountDown } from "ahooks";
import { addMinutes, format } from "date-fns";
import { QRCodeCanvas } from "qrcode.react";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { Display } from "@/components/display";
import { SubscribeBilling } from "@/sections/subscribe/billing";
import { SubscribeDetail } from "@/sections/subscribe/detail";
import StripePayment from "@/sections/user/payment/stripe";
import { useGlobalStore } from "@/stores/global";
import { setAuthorization } from "@/utils/common";

export default function Order() {
  const { t } = useTranslation("order");
  const { getUserInfo } = useGlobalStore();
  const [orderNo, setOrderNo] = useState<string>();
  const [enabled, setEnabled] = useState<boolean>(false);
  const search = useSearch({ from: "/(main)/purchasing/order/" });

  const { data } = useQuery({
    enabled,
    queryKey: ["queryPurchaseOrder", orderNo],
    queryFn: async () => {
      if (!orderNo) return;
      const params = localStorage.getItem(orderNo);
      const authParams = params ? JSON.parse(params) : {};
      const { data } = await queryPurchaseOrder({
        order_no: orderNo,
        ...authParams,
      });
      if (data?.data?.status !== 1) {
        setEnabled(false);
        if (data?.data?.token) {
          setAuthorization(data?.data?.token);
          await new Promise((resolve) => setTimeout(resolve, 100));
          await getUserInfo();
        }
      }
      return data?.data;
    },
    refetchInterval: 3000,
  });

  const { data: payment } = useQuery({
    enabled: !!orderNo && data?.status === 1,
    queryKey: ["purchaseCheckout", orderNo],
    queryFn: async () => {
      const { data } = await purchaseCheckout({
        orderNo: orderNo || "",
        returnUrl: window.location.href,
      });
      if (data.data?.type === "url" && data.data?.checkout_url) {
        window.open(data.data.checkout_url, "_blank");
      }
      return data?.data;
    },
  });

  useEffect(() => {
    if (search.order_no) {
      setOrderNo(search.order_no);
      setEnabled(true);
    }
  }, [search]);

  const [countDown, formattedRes] = useCountDown({
    targetDate:
      data &&
      format(addMinutes(data?.created_at, 15), "yyyy-MM-dd'T'HH:mm:ss.SSSxxx"),
  });

  const { hours, minutes, seconds } = formattedRes;

  const countdownDisplay =
    countDown > 0 ? (
      <>
        {hours.toString().length === 1 ? `0${hours}` : hours} :{" "}
        {minutes.toString().length === 1 ? `0${minutes}` : minutes} :{" "}
        {seconds.toString().length === 1 ? `0${seconds}` : seconds}
      </>
    ) : (
      t("timeExpired", "Time Expired")
    );

  return (
    <main className="container lg:mt-16">
      <div className="grid gap-4 xl:grid-cols-2">
        <Card className="order-2 xl:order-1">
          <CardHeader className="flex flex-row items-start bg-muted/50">
            <div className="grid gap-0.5">
              <CardTitle className="flex flex-col text-lg">
                {t("orderNumber", "Order Number")}
                <span>{data?.order_no}</span>
              </CardTitle>
              <CardDescription>
                {t("createdAt", "Created At")}: {formatDate(data?.created_at)}
              </CardDescription>
            </div>
          </CardHeader>
          <CardContent className="grid gap-3 p-6 text-sm">
            <div className="font-semibold">
              {t("paymentMethod", "Payment Method")}
            </div>
            <dl className="grid gap-3">
              <div className="flex items-center justify-between">
                <dt className="text-muted-foreground">
                  <Badge>{data?.payment.name || data?.payment.platform}</Badge>
                </dt>
              </div>
            </dl>
            <Separator />

            {data?.status && [1, 2].includes(data.status) && (
              <SubscribeDetail
                subscribe={{
                  ...data?.subscribe,
                  quantity: data?.quantity,
                }}
              />
            )}
            {data?.status === 3 && (
              <>
                <div className="font-semibold">
                  {t("resetTraffic", "Reset Traffic")}
                </div>
                <ul className="grid grid-cols-2 gap-3 *:flex *:items-center *:justify-between lg:grid-cols-1">
                  <li className="flex items-center justify-between">
                    <span className="line-clamp-2 flex-1 text-muted-foreground">
                      {t("resetPrice", "Reset Price")}
                    </span>
                    <span>
                      <Display type="currency" value={data.amount} />
                    </span>
                  </li>
                </ul>
              </>
            )}

            {data?.status === 4 && (
              <>
                <div className="font-semibold">
                  {t("balanceRecharge", "Balance Recharge")}
                </div>
                <ul className="grid grid-cols-2 gap-3 *:flex *:items-center *:justify-between lg:grid-cols-1">
                  <li className="flex items-center justify-between">
                    <span className="line-clamp-2 flex-1 text-muted-foreground">
                      {t("rechargeAmount", "Recharge Amount")}
                    </span>
                    <span>
                      <Display type="currency" value={data.amount} />
                    </span>
                  </li>
                </ul>
              </>
            )}
            <Separator />
            <SubscribeBilling
              order={{
                ...data,
                unit_price: data?.subscribe?.unit_price,
              }}
            />
          </CardContent>
        </Card>
        <Card className="order-1 flex flex-auto items-center justify-center xl:order-2">
          <CardContent className="py-16">
            {data?.status && [2, 5].includes(data?.status) && (
              <div className="flex flex-col items-center gap-8 text-center">
                <h3 className="font-bold text-2xl tracking-tight">
                  {t("paymentSuccess", "Payment Successful")}
                </h3>
                <Icon
                  className="text-7xl text-green-500"
                  icon="mdi:success-circle-outline"
                />
                <div className="flex gap-4">
                  <Button asChild>
                    <Link to="/dashboard">
                      {t("subscribeNow", "Subscribe Now")}
                    </Link>
                  </Button>
                  <Button variant="outline">
                    <Link to="/document">
                      {t("viewDocument", "View Document")}
                    </Link>
                  </Button>
                </div>
              </div>
            )}
            {data?.status === 1 && payment?.type === "url" && (
              <div className="flex flex-col items-center gap-8 text-center">
                <h3 className="font-bold text-2xl tracking-tight">
                  {t("waitingForPayment", "Waiting for Payment")}
                </h3>
                <p className="flex items-center font-bold text-3xl">
                  {countdownDisplay}
                </p>
                <Icon
                  className="text-7xl text-muted-foreground"
                  icon="mdi:access-time"
                />
                <div className="flex gap-4">
                  <Button
                    onClick={() => {
                      if (payment?.checkout_url) {
                        window.location.href = payment?.checkout_url;
                      }
                    }}
                  >
                    {t("goToPayment", "Go to Payment")}
                  </Button>
                  <Button variant="outline">
                    <Link search={{ id: 0 }} to="/">
                      {t("productList", "Product List")}
                    </Link>
                  </Button>
                </div>
              </div>
            )}

            {data?.status === 1 && payment?.type === "qr" && (
              <div className="flex flex-col items-center gap-8 text-center">
                <h3 className="font-bold text-2xl tracking-tight">
                  {t("scanToPay", "Scan to Pay")}
                </h3>
                <p className="flex items-center font-bold text-3xl">
                  {countdownDisplay}
                </p>
                <QRCodeCanvas
                  imageSettings={{
                    src: "/payment/alipay_f2f.svg",
                    width: 24,
                    height: 24,
                    excavate: true,
                  }}
                  size={208}
                  value={payment?.checkout_url || ""}
                />
                <div className="flex gap-4">
                  <Button asChild>
                    <Link to="/subscribe">
                      {t("productList", "Product List")}
                    </Link>
                  </Button>
                  <Button asChild variant="outline">
                    <Link to="/order">{t("orderList", "Order List")}</Link>
                  </Button>
                </div>
              </div>
            )}

            {data?.status === 1 && payment?.type === "stripe" && (
              <div className="flex flex-col items-center gap-8 text-center">
                <h3 className="font-bold text-2xl tracking-tight">
                  {t("waitingForPayment", "Waiting for Payment")}
                </h3>
                <p className="flex items-center font-bold text-3xl">
                  {countdownDisplay}
                </p>
                {payment.stripe && <StripePayment {...payment.stripe} />}
                {/* <div className='flex gap-4'>
               <Button asChild>
                  <Link to='/subscribe'>{t('productList')}</Link>
                </Button>
                <Button asChild variant='outline'>
                  <Link to='/order'>{t('orderList')}</Link>
                </Button>
              </div> */}
              </div>
            )}

            {data?.status && [3, 4].includes(data?.status) && (
              <div className="flex flex-col items-center gap-8 text-center">
                <h3 className="font-bold text-2xl tracking-tight">
                  {t("orderClosed", "Order Closed")}
                </h3>
                <Icon className="text-7xl text-red-500" icon="mdi:cancel" />
                <div className="flex gap-4">
                  <Button asChild>
                    <Link to="/subscribe">
                      {t("productList", "Product List")}
                    </Link>
                  </Button>
                  <Button asChild variant="outline">
                    <Link to="/order">{t("orderList", "Order List")}</Link>
                  </Button>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </main>
  );
}