"use client";

import { useEffect, useState } from "react";
import { FiArrowLeft, FiCheckCircle } from "react-icons/fi";
import toast from "react-hot-toast";

export default function SuccessPage() {
  const [closeAttempted, setCloseAttempted] = useState(false);

  // 页面加载时的动画效果
  useEffect(() => {
    const timer = setTimeout(() => {
      const successIcon = document.getElementById("success-icon");
      if (successIcon) {
        successIcon.classList.add("scale-100");
        successIcon.classList.remove("scale-0");
      }
    }, 100);

    return () => clearTimeout(timer);
  }, []);

  // 尝试关闭页面
  const handleClose = () => {
    try {
      window.close();

      // 设置一个短暂的延迟，检查页面是否仍然打开
      setTimeout(() => {
        // 如果页面仍然打开，说明关闭失败
        if (document.visibilityState !== "hidden") {
          setCloseAttempted(true);
          // 显示toast提示
          toast.error("请手动关闭此页面并返回应用", {
            icon: "👋",
            duration: 5000,
            style: {
              background: "#333",
              color: "#fff",
              borderRadius: "8px",
            },
          });
        }
      }, 300);
    } catch (error) {
      console.error("关闭页面失败:", error);
      setCloseAttempted(true);
      toast.error("请手动关闭此页面返回应用");
    }
  };

  return (
    <div
      className="flex flex-col items-center justify-center min-h-screen px-4 py-12"
      style={{ backgroundColor: "#07050A" }}
    >
      <div className="w-full max-w-md p-8 mx-auto bg-[#17161A] rounded-xl shadow-lg border border-gray-800">
        <div className="flex flex-col items-center">
          <div
            id="success-icon"
            className="p-3 bg-green-900/30 rounded-full transition-transform duration-500 ease-in-out transform scale-0"
          >
            <FiCheckCircle className="w-16 h-16 text-green-400" />
          </div>

          <h2 className="mt-6 text-2xl font-bold text-center text-white">
            支付成功
          </h2>

          <p className="mt-4 text-lg text-center text-gray-300">
            请关闭当前页面返回应用
          </p>

          <button
            onClick={handleClose}
            className="flex items-center justify-center w-full mt-8 px-4 py-3 text-white bg-[#FF669E] rounded-md hover:bg-[#FF4A8E] transition-colors"
          >
            <FiArrowLeft className="w-5 h-5 mr-2" />
            关闭页面
          </button>
        </div>
      </div>
    </div>
  );
}