"use client";

import { Suspense, useEffect } from "react";
import { useSearchParams } from "next/navigation";
import Link from "next/link";
import { Header } from "@/app/components";
import { PayButton } from "@/app/components/PayButton";

function PayContent() {
  const searchParams = useSearchParams();

  useEffect(() => {
    if (typeof window !== "undefined" && searchParams.get("test") === "ok") {
      localStorage.setItem("pay", "ok");
      window.location.href = "/pay/paid";
    }
  }, [searchParams]);

  if (searchParams.get("test") === "ok") {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <p className="text-[var(--muted-foreground)]">正在跳转...</p>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[var(--background)] text-[var(--foreground)]">
      <Header />
      <main className="flex min-h-[80vh] flex-col items-center justify-center px-4">
        <h1 className="mb-2 text-2xl font-bold">报名数字游民实战课</h1>
        <p className="mb-6 text-[var(--muted-foreground)]">
          ¥0.80 加入课程，解锁全部 21 节视频
        </p>
        <div className="mb-8 flex flex-col gap-3 sm:flex-row sm:gap-4">
          <PayButton size="lg" channel="alipay">支付宝支付</PayButton>
          <PayButton size="lg" channel="wxpay">微信支付</PayButton>
        </div>
        <p className="mb-4 text-xs text-[var(--muted-foreground)]">
          测试：<Link href="/pay?test=ok" className="text-[var(--accent)] underline">点击模拟支付成功</Link>
        </p>
        <Link href="/" className="text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]">
          返回首页
        </Link>
      </main>
    </div>
  );
}

export default function PayPage() {
  return (
    <Suspense fallback={
      <div className="flex min-h-screen items-center justify-center bg-[var(--background)]">
        <p className="text-[var(--muted-foreground)]">加载中...</p>
      </div>
    }>
      <PayContent />
    </Suspense>
  );
}