"use client";

import { Loading } from "@/components/dashboard/loading";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTrigger,
} from "@/components/ui/dialog";
import { toast } from "@/components/ui/toaster";
// import { trpc } from "@/lib/trpc/client";
// import { PostHogEvent } from "@/providers/PostHogProvider";
// import { type Workspace } from "@aigxion/db";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import React, { useEffect, useState } from "react";

// import { getTenantId } from "@/lib/auth";
// import { db } from "@/lib/db";
import { ArrowLeft } from "lucide-react";
import Link from "next/link";
import { ChangePlanButton } from "./button";
import { PayInfo, PaymentInfo, PaymentOrder, payStaff, queryPayStatus, queryProductionList } from "@/lib/http/staff";
import { FadeIn } from "@/components/landing/fade-in";
import { cn } from "@/lib/utils";
import { Modal, QRCode, message } from "antd";
import Image from "next/image";
import { useTranslation } from "react-i18next";

type Props = {
  newPlan: "free" | "pro";
  // workspace: Workspace;
  tier: string;
};

interface ProductInfo {
  [key: string]: {
    id: number;
    name: string;
    href: string;
    price: number;
    description: string;
    buttonText: string;
    features: string[];
    footnotes: never[];
  };
}

const tiers: ProductInfo = {

  free: {
    id: 1,
    name: "月度计划",
    href: "/manage",
    price: 299,
    description: "启动下一个 API 所需的一切！",
    buttonText: "基础",
    features: [
      "100 个每月活动密钥",
      "每月 2500 次成功验证",
      "无限的API",
      "7天免费保留",
    ],
    footnotes: [],
  },

  pro: {
    id: 2,
    name: "季度计划",
    href: "/manage",
    price: 699,
    description: "对于那些有团队和更苛刻需求的人",
    buttonText: "Pro",
    features: [
      "250 每月 xxxxxxxx*",
      "150,000 成功 xxxxxxx 包括 **",
      "xxxxxxxx APIs",
      "与团队成员的工作空间",
      "90 天分析保留",
      "90 天审核日志保留",
    ],
    footnotes: [
      // " *  Additional active keys are billed at $0.10",
      // " ** Additional verifications are billed at $10 per 100,000",
    ],
  },

  custom: {
    id: 3,
    name: "年度计划",
    href: "/manage",
    price: 1299,
    description: "我们为有批量需求的人提供定制定价",
    buttonText: "Go",
    features: [
      "自定义验证限制",
      "自定义活动键限制",
      "自定义分析保留",
      "专用支持合同",
      "每个API的白名单IP",
    ],
    footnotes: [],
  },
};

export const PlanCard: React.FC<Props> = ({ tier = "free", newPlan = "free" }) => {
  const router = useRouter();
  const [open, setOpen] = useState(false);

  const [isLoading, setIsLoading] = useState(false);
  const [payQrcode, setPayQrcode] = useState("");

  const path = usePathname()
  const { t, i18n } = useTranslation()

  const searchParams = useSearchParams()
  const staffId = searchParams.get('staffId')

  console.log("---PlanCard----", staffId, path)

  const isChatPage = path.includes('chat')



  useEffect(() => {
    // console.log("------------email", infoRef.current, userData.auth_token)

    async function initFunc() {
      const data = await queryProductionList()
      console.log(data)

    }
    initFunc()

  }, []);

  // const changePlan = trpc.workspace.changePlan.useMutation({
  //   onSuccess: (data, variables, _context) => {
  //     toast.success(data.title, {
  //       description: data.message,
  //     });
  //     PostHogEvent({
  //       name: "plan_changed",
  //       properties: { plan: variables.plan, workspace: variables.workspaceId },
  //     });
  //     setOpen(false);
  //     router.refresh();
  //   },
  //   onError: (error) => {
  //     toast.error(error.message);
  //   },
  // });



  async function pollOrder(orderId: string, interval: number, maxAttempts: number): Promise<PaymentOrder | null> {
    let attempts = 0;

    console.log("开始轮训订单", orderId)

    const poll = async (): Promise<PaymentOrder | null> => {

      try {
        // 发送订单查询请求，假设返回的数据结构为 Order
        const result = await queryPayStatus(orderId);
        const order = result.data as PaymentOrder;

        // 如果订单状态为已完成，或者达到最大尝试次数，则停止轮询并返回订单
        if (order.state >= 2 || attempts >= maxAttempts) {
          return order;
        }

        // 增加尝试次数
        attempts++;

        // 等待一段时间后继续轮询
        await new Promise(resolve => setTimeout(resolve, interval));

        // 递归调用自身，继续轮询
        return poll();
      } catch (error) {
        // 处理轮询过程中的错误
        console.error("Error occurred while polling order:", error);
        return null;
      }
    };

    return poll();
  }

  const isSamePlan = true;
  return (
    <div
      key={tier}
      className={
        "border border-border flex w-full flex-col justify-between rounded-lg bg-white dark:bg-black p-8 lg:w-1/3 xl:p-10 "
      }
    >
      <div className="flex items-center justify-between gap-x-4">
        <h2 id={tier} className={"text-content text-2xl font-semibold leading-8"}>
          {tiers[tier].name}
        </h2>
      </div>
      <p className="mt-4 min-h-[3rem] text-sm leading-6 text-content-subtle">
        {tiers[tier].description}
      </p>
      <p className="flex items-center mx-auto mt-6 gap-x-1">
        {typeof tiers[tier].price === "number" ? (
          <>
            <span className="text-4xl font-bold tracking-tight text-center text-content">
              {`${tiers[tier].price}`}
            </span>
            <span className="mx-auto text-sm font-semibold leading-6 text-center text-content-subtle">
              {"/month"}
            </span>
          </>
        ) : (
          <span className="mx-auto text-4xl font-bold tracking-tight text-center text-content">
            {tiers[tier].price}
          </span>
        )}
      </p>

      <div className="flex flex-col justify-between grow">
        <ul className="mt-8 space-y-3 text-sm leading-6 text-content-subtle xl:mt-10">
          {tiers[tier].features.map((feature) => (
            <li key={feature} className="flex gap-x-3">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                className="flex-none w-5 h-6 text-gray-700"
                aria-hidden="true"
              >
                <path
                  fill="currentColor"
                  fillRule="evenodd"
                  d="M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353l8.493-12.739a.75.75 0 0 1 1.04-.208Z"
                  clipRule="evenodd"
                />
              </svg>

              {feature}
            </li>
          ))}
        </ul>
        {tiers[tier].footnotes && (
          <ul className="mt-6 mb-8">
            {tiers[tier].footnotes.map((footnote, i) => (
              <li
                // biome-ignore lint/suspicious/noArrayIndexKey: I got nothing better right now
                key={`note-${i}`}
                className="flex text-xs text-content-subtle gap-x-3"
              >
                {footnote}
              </li>
            ))}
          </ul>
        )}
        {/* {tier === "custom" ? (
          <Link href="mailto:support@unkey.dev">
            <Button
              className="w-full col-span-1"
            // variant={workspace.plan === "enterprise" ? "disabled" : "primary"}
            // disabled={workspace.plan === "enterprise"}
            >

              Go
            </Button>
          </Link>
        ) : (
          <ChangePlanButton
            // workspace={workspace}
            newPlan={newPlan}
            label={tiers[tier].buttonText}
          />
        )} */}



        {/* <Button
          className="w-full col-span-1"
        // variant={workspace.plan === "enterprise" ? "disabled" : "primary"}
        // disabled={workspace.plan === "enterprise"}
        >

          Go
        </Button> */}

        {
          staffId && <Button
            disabled={isLoading}
            className="mt-4 "
            type="submit"

            onClick={async (e) => {
              e.preventDefault()
              setIsLoading(true)
              // setTimeout(() => {
              //   setOpen(true)
              //   setIsLoading(false)
              // }, 2000)
              if (!!Number(staffId)) {
                const result = await payStaff({
                  id: Number(staffId),
                  production_id: tiers[tier].id,
                  pay_type: "alipay",
                } as PayInfo)


                const typedData = result.data as PaymentInfo;


                console.log("----payStaff---", typedData)

                setPayQrcode(typedData.pay_url)

                setOpen(true)

                // 启动轮训
                setTimeout(async () => {
                  await pollOrder(typedData.trade_no, 2000, 60)

                  router.push(`/manage/staffs`);
                })


              } else {
                message.warning("无效员工ID")
              }


            }}
          >
            {isLoading ? <Loading /> : "Pay"}
          </Button>
        }

      </div>


      <Modal
        // title="Modal 1000px width"
        centered
        open={open}
        onOk={() => {
          if (setOpen) {
            setOpen(false)
          }
        }}
        onCancel={() => {
          setOpen(false)
        }}
        footer=""
        // width={"50%"}

        className={cn('min-w-[95%] lg:min-w-[700px] p-[20px]', "")}
      >

        <div className="mx-auto sm:max-w-2xl  min-h-[500px]  mb-[3rem] lg:mb-[5rem] rounded bg-[#fff]">

          <FadeIn >
            <h3 className='text-center px-6 sm:px-4 text-2xl font-bold py-[1.2rem]'>请使用支付宝进行支付</h3>

            {/* <div className='flex flex-row items-center justify-around  bg-[#F5F5F5] text-[#666666] mb-[2rem]'>
              <Link href="/xauth/login" >
                <Button className="h-8  " >Login</Button>
              </Link>
              <Link href="/xauth/login">
                <Button className="h-8" >Signup</Button>
              </Link>
              <Link href="/xauth/login">
                <Button className="h-8" >Download</Button>
              </Link>
            </div> */}

            {payQrcode && <div className="rounded bg-clip-border overflow-clip">
              {/* <figure
                className='w-full'
              ><Image fill={true} src={payQrcode} className='w-full' alt="Hero Image" /></figure> */}
              <QRCode
                value={payQrcode}
                size={200} // 二维码的大小
                style={{ margin: 'auto' }}
                imageSettings={{ // 二维码中间的logo图片
                  src: 'logoUrl',
                  height: 100,
                  width: 100,
                  excavate: true, // 中间图片所在的位置是否镂空
                }}
              />


              {/* <figure
                className="w-full min-h-[146px] lg:min-h-[246px] "
              // style={{ width: '100%', minHeight: "246px" }}
              >
                <img src={payQrcode} alt="Hero Image" style={{ width: '100%', marginBottom: '8px' }} />
              </figure> */}
            </div>}

          </FadeIn>
        </div>

      </Modal>
    </div>
  );
};