"use client";

import React, { useState, useEffect } from "react";
import { Checkbox, Toast } from "antd-mobile";
import { useSearchParams } from "next/navigation";
import { useRouter } from "next/navigation";
import { getCookie } from "cookies-next";

export default function Pay() {
  const searchParams = useSearchParams();
  const router = useRouter();

  useEffect(() => {
    const handleEvent = async () => {
      const clickId = getCookie("clickid");
      await fetch("/event/v2/conversion", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          event_type: "game_addiction",
          context: {
            ad: {
              callback: clickId,
            },
          },
          timestamp: new Date().getTime(),
        }),
      });
    };
    handleEvent();
  }, []);

  const [time, setTime] = useState(30 * 60 * 100);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => {
        if (prevTime <= 1) {
          clearInterval(interval);
          return 0;
        }
        return prevTime - 1;
      });
    }, 10);

    return () => clearInterval(interval);
  }, []);

  const formatTime = (time) => {
    const minutes = String(Math.floor((time / (100 * 60)) % 60)).padStart(
      2,
      "0"
    );
    const seconds = String(Math.floor((time / 100) % 60)).padStart(2, "0");
    const centiseconds = String(time % 100).padStart(2, "0");
    return {
      minutes: minutes,
      seconds: seconds,
      centiseconds: centiseconds,
    };
  };

  const [payType, setPayType] = useState("alipay_h5");

  const createOreder = async (tpye) => {
    const clickId = getCookie("clickid");
    const id = searchParams.get("id");
    const b_did = localStorage.getItem("b_did");

    // 获取当前URL
    var currentUrl = window.location.href;
    // 解析URL
    var url = new URL(currentUrl);
    // 获取根目录
    var rootDirectory = url.protocol + "//" + url.hostname + "/";

    const response = await fetch("/outer/vas/create_order", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        b_did: b_did,
        raven_qid: parseInt(id, 10),
        product_id: "outer_raven",
        pay_type: tpye,
        from: "outer_raven",
        raven_callback: clickId,
        return_url: `${rootDirectory}iqtest/result?id=${id}`,
      }),
    });
    const data = await response.json();
    if (data.ret === -1) {
      Toast.show({
        content: data.msg,
      });
      return;
    }
    router.push(data.data.alipay_h5_param_str);
  };

  return (
    <section className="flex flex-col flex-1 bg-[url('/svg/background.svg')] max-w-screen-sm w-full p-4">
      <div className="flex flex-col items-center bg-white rounded-2xl overflow-hidden">
        <div className="flex items-center justify-center py-4 bg-yellow-200 w-full border-b-2 border-dashed border-black">
          <h1 className="text-2xl text-black font-bold">
            恭喜，您的智商报告已生成
          </h1>
        </div>
        <div className="flex flex-col p-4">
          <div className="flex flex-row flex-wrap gap-y-2 mt-2 mb-4">
            {[
              "综合智力分数",
              "针对性智力总结",
              "多维度智力分析",
              "职业发展方向",
              "智力练习建议",
              "学习方式指导",
            ].map((item) => (
              <div key={item} className="flex flex-row items-center basis-1/2">
                <img className="w-6" src="/svg/checked.svg" alt="" />
                <p className="text-base font-semibold">{item}</p>
              </div>
            ))}
          </div>
          <p className="text-base">
            本测评由<span className="text-purple-400">专业心理测评团队</span>
            精心设计，每人仅限测一次，内容全面涵盖智力分析的各个方面。目前已有
            <span className="text-purple-400">153,759</span>
            人参与测试，好评率高达
            <span className="text-purple-400">98.64%！</span>
          </p>
          <hr className="my-4 w-full" />
          <div className="flex flex-row justify-between">
            <p className="line-through text-gray-400 text-base">原价：¥30</p>
            <p className="font-semibold text-base">限时优惠倒计时</p>
          </div>
          <div className="flex flex-row justify-between">
            <div className="flex flex-row gap-2 items-center">
              <p className="bg-purple-500 p-1 rounded text-white text-xs">
                优惠价
              </p>
              <p className="text-purple-500 text-lg font-bold">¥19.9</p>
            </div>
            <p className="font-semibold text-base text-purple-500">
              <span className="inline-block min-w-6 text-center">
                {formatTime(time).minutes}
              </span>
              <span className="w-4">:</span>
              <span className="inline-block min-w-6 text-center">
                {formatTime(time).seconds}
              </span>
              <span className="w-4">:</span>
              <span className="inline-block min-w-6 text-center">
                {formatTime(time).centiseconds}
              </span>
            </p>
          </div>
          <hr className="my-4 w-full" />
          <div className="flex flex-col gap-4">
            {/* <div
              onClick={() => setPayType("wechat_pay")}
              className="flex flex-row justify-between items-center"
            >
              <div className="flex flex-row gap-4">
                <img className="w-6" src="/svg/wechatpay.svg" alt="" />
                <p className="text-base">微信支付</p>
              </div>
              <Checkbox checked={payType === "wechat_pay"} />
            </div> */}
            <div
              onClick={() => setPayType("alipay_h5")}
              className="flex flex-row justify-between items-center"
            >
              <div className="flex flex-row gap-4">
                <img className="w-6" src="/svg/alipay.svg" alt="" />
                <p className="text-base">支付宝</p>
              </div>
              <Checkbox checked={payType === "alipay_h5"} />
            </div>
          </div>
          <div
            onClick={() => createOreder("alipay_h5")}
            className="cursor-pointer flex items-center justify-center w-full py-2 border-2 border-black rounded-full bg-yellow-200 mt-8"
          >
            <p className="text-2xl font-bold">立即解锁您的智商报告</p>
          </div>
        </div>
      </div>
      <div className="flex flex-col mt-8 gap-8">
        <div className="flex flex-col bg-white rounded-2xl w-full p-4 gap-4">
          <div className="flex items-center justify-center bg-purple-500 py-2 px-8 rounded-full text-white text-2xl font-medium">
            <img className="w-6 mr-2" src="/svg/locked.svg" alt="" />
            解锁后即可查看
          </div>
          <div className="flex flex-col items-center">
            <h1 className="text-black text-4xl font-bold">
              <span className="blur">130</span>
              <span className="text-base font-normal">分</span>
            </h1>
            <svg viewBox="0 0 3099 1024" width="100" height="50">
              <path
                d="M2216.658824 518.023529c-337.317647-48.188235-674.635294 12.047059-1005.929412 96.376471-397.552941 102.4-783.058824 234.917647-1174.588236 349.364706 6.023529 0 42.164706 6.023529 48.188236 6.023529l114.447059 18.070589c42.164706 6.023529 120.470588 36.141176 162.635294 24.094117 367.435294-108.423529 728.847059-228.894118 1096.282353-331.294117 313.223529-84.329412 668.611765-174.682353 987.858823-126.494118 54.211765 6.023529 54.211765 6.023529 0 0l-228.894117-36.141177z m807.152941-415.623529C2782.870588 60.235294 2553.976471 36.141176 2307.011765 54.211765c-252.988235 18.070588-505.976471 66.258824-752.941177 114.447059C1102.305882 259.011765 662.588235 379.482353 216.847059 487.905882c12.047059 0 42.164706 6.023529 48.188235 6.02353l114.447059 18.070588c42.164706 6.023529 120.470588 36.141176 162.635294 24.094118C945.694118 439.717647 1343.247059 331.294118 1746.823529 240.941176c234.917647-48.188235 469.835294-96.376471 704.752942-120.470588 108.423529-12.047059 210.823529-24.094118 319.247058-24.094117h144.564706c24.094118 0 48.188235 0 66.258824 6.023529h42.164706c6.023529 6.023529 12.047059 6.023529 18.070588 6.023529l42.164706 6.02353c54.211765 6.023529-54.211765-12.047059-60.235294-12.047059z"
                fill="#FF595B"
              ></path>
            </svg>
            <h2 className="text-black text-2xl font-bold my-4">
              您的智商处于<span className="blur">优秀</span>
            </h2>
            <div className="bg-blue-100 rounded-lg p-4 relative">
              <h2 className="text-xl font-bold text-blue-900">总体评价</h2>
              <p className="text-blue-900 text-base blur-sm">
                您的智力水平在人群中处于优秀范围，具备良好的学习能力和适应能力。您能够应对各种复杂任务，并在多数情况下表现出色。您的思维敏捷，理解能力强，是团队中的佼佼者，常常能够在工作中提出切实可行的解决方案。
              </p>
              <div className="absolute bottom-0 left-0 w-full h-full flex flex-row items-center justify-center">
                <div className="flex flex-row items-center justify-center bg-purple-400 px-4 py-2 rounded-full">
                  <img className="w-6 mr-2" src="/svg/locked.svg" alt="" />
                  <p className="text-white text-base">解锁后即可查看</p>
                </div>
              </div>
            </div>
            <div className="flex flex-col bg-blue-100 rounded-lg p-4 gap-2 mt-4 relative">
              <h2 className="text-xl font-bold text-blue-900">综合建议</h2>
              <div className="absolute z-20 bottom-0 left-0 w-full h-full flex flex-row items-center justify-center">
                <div className="flex flex-row items-center justify-center bg-purple-400 px-4 py-2 rounded-full">
                  <img className="w-6 mr-2" src="/svg/locked.svg" alt="" />
                  <p className="text-white text-base">解锁后即可查看</p>
                </div>
              </div>
              <p className="text-blue-900 text-base blur-sm">
                <strong>1、</strong>
                深化自己的专业知识，成为特定领域的专家。通过不断学习和实践，提升自己的专业素养和竞争力，争取在所在领域取得突出的成就。
              </p>
              <p className="text-blue-900 text-base blur-sm">
                <strong>2、</strong>
                培养自己的创造力和批判性思维，以便在解决问题时提出新颖的观点。学会从不同角度思考问题，寻求创新的解决方案，不断挑战自己的思维边界。
              </p>
              <p className="text-blue-900 text-base blur-sm">
                <strong>3、</strong>
                考虑从事需要良好智力和分析能力的职业，如金融分析、法律或管理咨询。在这些领域中，您可以发挥自己的优势，实现个人价值，为社会的发展做出贡献。
              </p>
            </div>
            <div className="flex flex-col bg-blue-100 rounded-lg p-4 gap-2 mt-4">
              <p className="text-blue-900 text-base">
                除了总体得分情况外，我们还考察了五个维度的能力水平：知觉辨别、类同比较、比较推理、系列关系推理、抽象思维。以下是您在这五个维度的分数分布情况，以及我们对您的提升建议。⬇️
                ⬇️ ⬇️
              </p>
            </div>
            <div className="flex flex-row items-center justify-center bg-purple-400 rounded-lg p-4 mt-4 w-full">
              <img className="w-6 mr-2" src="/svg/locked.svg" alt="" />
              <p className="text-white text-base">剩余2136字...</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}