fake_shop/app/success/page.jsx

"use client";

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

// 创建一个客户端组件来处理搜索参数
function SuccessContent() {
  const [closeAttempted, setCloseAttempted] = useState(false);
  const searchParams = useSearchParams();
  const redirectUrl = searchParams.get("redirect_url");

  // 处理重定向
  useEffect(() => {
    if (redirectUrl) {
      // 添加一个小延迟，让成功动画有时间显示
      const redirectTimer = setTimeout(() => {
        window.location.href = redirectUrl;
      }, 1500);

      return () => clearTimeout(redirectTimer);
    }
  }, [redirectUrl]);

  // 页面加载时的动画效果
  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 = () => {
    // 如果有重定向URL，直接跳转
    if (redirectUrl) {
      window.location.href = redirectUrl;
      return;
    }

    try {
      // 检查历史记录状态
      const historyLength = window.history.length;
      console.log(`历史记录长度: ${historyLength}`);

      if (historyLength > 1) {
        console.log("检测到历史记录，尝试返回上一页");
        // 如果有历史记录，往前跳转两级
        window.history.go(-2);

        // 设置一个短暂的延迟，检查是否成功跳转
        setTimeout(() => {
          // 如果页面仍然存在，可能跳转失败，尝试其他方法
          if (document.visibilityState !== "hidden") {
            console.log("返回上一页可能失败，尝试返回一级");
            window.history.back();
          }
        }, 200);

        return;
      }

      console.log("无历史记录，尝试关闭窗口");
      // 如果没有历史记录，尝试关闭窗口
      // 尝试多种方法关闭窗口
      const isOpener = window.opener && !window.opener.closed;

      if (isOpener) {
        // 如果是从另一个窗口打开的，尝试通知父窗口
        try {
          // 只有在同源的情况下才能访问 opener
          window.opener.focus();
          console.log("尝试聚焦父窗口");
        } catch (e) {
          console.log("无法访问opener，可能是跨域限制", e);
        }
      }

      // 尝试关闭窗口
      console.log("尝试关闭窗口");
      const closingAttempt = window.close();
      console.log("关闭窗口结果:", closingAttempt);

      // 设置一个短暂的延迟，检查页面是否仍然打开
      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("请手动关闭此页面返回应用");
    }
  };

  // 获取关闭页面的提示文本
  const getCloseInstructions = () => {
    const hasHistory = window.history.length > 1;

    if (hasHistory) {
      return "将返回之前的页面";
    } else {
      return "请点击浏览器右上角的 × 关闭此页面";
    }
  };

  // 用于调试的历史记录信息
  const historyInfo = `历史记录长度: ${window.history.length}`;

  return (
    <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">
        {redirectUrl ? "即将返回应用..." : "请关闭当前页面返回应用"}
      </p>

      {closeAttempted && !redirectUrl && (
        <p className="mt-2 text-sm text-center text-gray-400">
          {getCloseInstructions()}
        </p>
      )}

      {process.env.NODE_ENV === "development" && (
        <p className="mt-2 text-xs text-center text-gray-500">{historyInfo}</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" />
        {redirectUrl
          ? "立即返回"
          : window.history.length > 1
          ? "返回上一页"
          : "关闭页面"}
      </button>
    </div>
  );
}

// 主页面组件，包含Suspense边界
export default function SuccessPage() {
  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">
        <Suspense
          fallback={<div className="text-white text-center">加载中...</div>}
        >
          <SuccessContent />
        </Suspense>
      </div>
    </div>
  );
}