import Link from "next/link";
import { createCheckoutOrder } from "@/services/order.service";

export default async function CheckoutPage({
  searchParams,
}: {
  searchParams: Promise<{ plan?: string; slug?: string }>;
}) {
  const { plan: rawPlan = "pro", slug = "unknown-app" } = await searchParams;
  const plan = rawPlan === "free" || rawPlan === "pro" || rawPlan === "ultra" ? rawPlan : "pro";
  const order = await createCheckoutOrder(plan, slug);

  return (
    <div className="space-y-6 py-8">
      <section className="card-glass">
        <p className="text-xs text-cyan-300">支付确认（占位）</p>
        <h1 className="mt-1 text-3xl font-bold">订单确认</h1>
        <p className="mt-2 text-sm text-slate-300">计划：{order.plan.toUpperCase()} · 资源：{order.slug}</p>
      </section>

      <section className="grid gap-4 md:grid-cols-2">
        <div className="card-glass space-y-2 text-sm">
          <p>订单号：{order.id}</p>
          <p>支付金额：¥{order.amount}</p>
          <p>支付方式：PayJS（预留）</p>
          <p className="text-slate-400">后续可接支付二维码、轮询支付状态与回调签名校验。</p>
        </div>
        <div className="card-glass grid place-items-center">
          <div className="grid h-44 w-44 place-items-center rounded-2xl border border-dashed border-cyan-300/40 text-xs text-slate-400">
            支付二维码占位
          </div>
        </div>
      </section>

      <section className="card-glass flex flex-wrap gap-2">
        <Link href={`/orders/${order.id}?status=pending&plan=${order.plan}&slug=${order.slug}`} className="cta-main">
          我已支付，查看订单状态
        </Link>
        <Link href="/pricing" className="cta-sub">返回套餐页</Link>
      </section>
    </div>
  );
}