"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { usePayStatusPoll } from "@/app/lib/usePayStatusPoll";

export default function PaidPage() {
  const [status, setStatus] = useState<"pending" | "success" | "fail">("pending");
  const [fromUrl, setFromUrl] = useState<string | null>(null);

  usePayStatusPoll(() => setStatus("success"));

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const paid = params.get("paid");
    const fail = params.get("fail");
    const from = params.get("from");
    if (paid === "1") setStatus("success");
    else if (fail === "1") setStatus("fail");
    if (from) setFromUrl(decodeURIComponent(from));
  }, []);

  if (status === "pending") {
    return (
      <div className="flex min-h-screen flex-col items-center justify-center bg-[#f0f4f8] px-4">
        <div className="w-full max-w-md rounded-2xl bg-white p-10 text-center shadow-lg">
          <div className="mx-auto mb-5 flex h-16 w-16 animate-spin items-center justify-center rounded-full border-4 border-sky-200 border-t-sky-500" />
          <h2 className="text-xl font-bold text-slate-800">支付结果确认中</h2>
          <p className="mt-3 text-sm text-slate-500">
            正在查询支付状态，请稍候…
            <br />
            （支付完成后将自动跳转）
          </p>
        </div>
      </div>
    );
  }

  if (status === "success") {
    return (
      <div className="flex min-h-screen flex-col items-center justify-center bg-[#f0f4f8] px-4">
        <div className="w-full max-w-md rounded-2xl bg-white p-10 text-center shadow-lg">
          <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-emerald-50 text-5xl">
            ✅
          </div>
          <h2 className="text-2xl font-bold text-slate-800">支付成功</h2>
          <p className="mt-3 text-slate-500">感谢您的支持，VIP 权益已开通</p>
          <Link
            href="/"
            className="mt-8 inline-flex items-center gap-2 rounded-full bg-sky-500 px-8 py-3 font-semibold text-white transition-colors hover:bg-sky-600"
          >
            ← 返回首页
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-[#f0f4f8] px-4">
      <div className="w-full max-w-md rounded-2xl bg-white p-10 text-center shadow-lg">
        <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-amber-50 text-5xl">
          ⚠️
        </div>
        <h2 className="text-2xl font-bold text-slate-800">支付未完成</h2>
        <p className="mt-3 text-slate-500">支付已取消或未成功，请重试</p>
        <Link
          href="/"
          className="mt-8 inline-flex items-center gap-2 rounded-full border-2 border-slate-300 px-8 py-3 font-semibold text-slate-700 transition-colors hover:border-slate-400 hover:bg-slate-50"
        >
          ← 返回首页
        </Link>
      </div>
    </div>
  );
}