const { useEffect, useMemo, useState } = React;

const product = {
  name: "雪场预约测试券",
  eyebrow: "Sandbox Booking Pass",
  price: "¥1",
  currency: "人民币",
  description: "用于验证预约资料与 Stripe 沙盒付款流程。每次购买对应一个测试预约名额。"
};

function todayString() {
  const now = new Date();
  const local = new Date(now.getTime() - now.getTimezoneOffset() * 60_000);
  return local.toISOString().slice(0, 10);
}

function SandboxShop() {
  const [form, setForm] = useState({ name: "", email: "", bookingDate: todayString() });
  const [checkout, setCheckout] = useState({ status: "idle", message: "" });
  const minDate = useMemo(() => todayString(), []);

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const payment = params.get("payment");
    const sessionId = params.get("session_id");

    if (payment === "cancelled") {
      setCheckout({ status: "cancelled", message: "付款已取消，没有产生扣款。" });
      return;
    }

    if (payment !== "success" || !sessionId) return;
    setCheckout({ status: "loading", message: "正在确认测试付款…" });
    fetch(`/api/checkout-session?session_id=${encodeURIComponent(sessionId)}`, { headers: { accept: "application/json" } })
      .then(async (response) => {
        const data = await response.json();
        if (!response.ok) throw new Error(data.error || "无法确认付款结果");
        if (data.paymentStatus === "paid") {
          setCheckout({ status: "paid", message: `预约成功 · ${data.orderId || "测试订单已付款"}` });
        } else {
          setCheckout({ status: "pending", message: "付款正在处理中，请稍后刷新。" });
        }
      })
      .catch((error) => setCheckout({ status: "error", message: error.message }));
  }, []);

  const update = (key, value) => setForm((current) => ({ ...current, [key]: value }));

  const startCheckout = async (event) => {
    event.preventDefault();
    if (checkout.status === "loading") return;
    setCheckout({ status: "loading", message: "正在前往 Stripe 安全付款…" });

    try {
      const response = await fetch("/api/create-shop-checkout-session", {
        method: "POST",
        headers: { "content-type": "application/json", accept: "application/json" },
        body: JSON.stringify(form)
      });
      const data = await response.json();
      if (!response.ok || !data.url) throw new Error(data.error || "暂时无法进入付款页面");
      window.location.assign(data.url);
    } catch (error) {
      setCheckout({ status: "error", message: error instanceof Error ? error.message : "暂时无法进入付款页面" });
    }
  };

  return (
    <main className="shop-shell">
      <header className="shop-header">
        <a className="shop-brand" href="/shop" aria-label="预约商城首页">
          <span>K</span>
          <strong>KINSEN</strong>
        </a>
        <div className="sandbox-badge"><i></i> 沙盒环境</div>
      </header>

      <section className="shop-intro">
        <p>Reservation Store · Test Mode</p>
        <h1>先预约，<br />再出发。</h1>
        <span>这是独立测试商城，不会使用正式站订单。</span>
      </section>

      <section className="shop-grid" aria-label="预约商品与结账">
        <article className="booking-ticket">
          <div className="ticket-main">
            <div className="ticket-topline">
              <span>{product.eyebrow}</span>
              <b>ONE DAY</b>
            </div>
            <div className="ticket-mountain" aria-hidden="true">
              <span></span><span></span><span></span>
            </div>
            <h2>{product.name}</h2>
            <p>{product.description}</p>
            <ul>
              <li>1 个测试预约名额</li>
              <li>Stripe 沙盒结账</li>
              <li>付款后自动确认</li>
            </ul>
          </div>
          <div className="ticket-stub">
            <small>{product.currency}</small>
            <strong>{product.price}</strong>
            <span>TEST PASS</span>
          </div>
        </article>

        <form className="booking-form" onSubmit={startCheckout}>
          <div>
            <p className="form-step">Complete reservation</p>
            <h2>填写预约信息</h2>
          </div>

          <label>
            预约人姓名
            <input value={form.name} onChange={(event) => update("name", event.target.value)} placeholder="王女士" autoComplete="name" required />
          </label>
          <label>
            接收确认的邮箱
            <input value={form.email} onChange={(event) => update("email", event.target.value)} type="email" placeholder="name@example.com" autoComplete="email" required />
          </label>
          <label>
            预约日期
            <input value={form.bookingDate} onChange={(event) => update("bookingDate", event.target.value)} type="date" min={minDate} required />
          </label>

          {checkout.message && (
            <div className={`shop-message ${checkout.status}`} role="status" aria-live="polite">
              {checkout.message}
            </div>
          )}

          <button className="checkout-button" type="submit" disabled={checkout.status === "loading"}>
            <span>{checkout.status === "loading" ? "处理中…" : "支付 ¥1 并预约"}</span>
            <b aria-hidden="true">→</b>
          </button>
          <p className="secure-note"><span aria-hidden="true">◆</span> 由 Stripe Checkout 安全处理测试付款</p>
        </form>
      </section>
    </main>
  );
}

ReactDOM.createRoot(document.getElementById("shop-root")).render(<SandboxShop />);