"use client";

import React from "react";

export default function PayRedirectPage() {
    const [status, setStatus] = React.useState<string>("等待安全收银台跳转...");
    const [error, setError] = React.useState<string>("");

    React.useEffect(() => {
        const handleMessage = (event: MessageEvent) => {
            try {
                if (event.origin !== window.location.origin) return;
                const data = event.data || {};
                if (data?.type === "redirect-to-payment" && typeof data?.url === "string") {
                    setStatus("即将跳转到 Stripe 收银台...");
                    window.location.href = data.url as string;
                } else if (data?.type === "redirect-error") {
                    setError(typeof data?.message === "string" ? data.message : "创建支付失败，请关闭此页重试");
                }
            } catch {
                setError("处理跳转信息时发生错误，请关闭此页重试");
            }
        };

        window.addEventListener("message", handleMessage);
        // 超时兜底：若 15 秒内未收到跳转指令，提示用户
        const timeoutId = window.setTimeout(() => {
            setStatus("");
            setError("未收到跳转指令，可能网络异常或页面被拦截。请返回重试。");
        }, 15000);

        return () => {
            window.removeEventListener("message", handleMessage);
            window.clearTimeout(timeoutId);
        };
    }, []);

    return (
        <div data-alt="pay-redirect-page" className="min-h-screen w-full flex items-center justify-center bg-black text-white">
            <div data-alt="pay-redirect-card" className="max-w-md w-full p-6 rounded-xl border border-white/10 bg-white/5 backdrop-blur">
                <h1 className="text-lg font-semibold mb-2">正在准备跳转</h1>
                {status && <p className="text-sm text-white/80 mb-2">{status}</p>}
                {error && <p className="text-sm text-red-300">{error}</p>}
                {!error && (
                    <p className="text-xs text-white/60 mt-2">如长时间未跳转，请返回原页重试或检查网络。</p>
                )}
            </div>
        </div>
    );
}