"use client";

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

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

  useEffect(() => {
    const getId = async () => {
      const id = searchParams.get("id");
    };
    getId();
  }, []);

  const [time, setTime] = useState(30 * 60 * 100); // 30 minutes in centiseconds

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

    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("wechat_pay");

  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">256399</span>
            人测试，好评率高达
            <span className="text-purple-400">95.68%！</span>
          </p>
          <hr className="my-4 w-full" />
          <div className="flex flex-row justify-between">
            <p className="line-through text-gray-400 text-base">原价：¥138</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">¥138</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")}
              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"} />
            </div>
          </div>
          <div className="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">
        <img src="/images/unlock.png" alt="" />
        <img src="/images/safty.png" alt="" />
      </div>
    </section>
  );
}