Jyotisha/frontend/src/components/onboarding-redeem-paywall.tsx

"use client";

import { Gift, X } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import type { FormEvent } from "react";
import { keepFocusWithin } from "@/lib/focus-trap";
import { notifyBalanceChanged, redeemErrorMessage } from "@/lib/membership";

type OnboardingRedeemPaywallProps = {
  credits: number;
  onClose: () => void;
  onCreditsChanged: (credits: number) => void;
  onOpenBilling: () => void;
};

export function OnboardingRedeemPaywall({
  credits,
  onClose,
  onCreditsChanged,
  onOpenBilling,
}: OnboardingRedeemPaywallProps) {
  const [code, setCode] = useState("");
  const [error, setError] = useState("");
  const [message, setMessage] = useState("");
  const [pending, setPending] = useState(false);
  const [unlocked, setUnlocked] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    const returnTarget = document.activeElement instanceof HTMLElement ? document.activeElement : null;
    const focusFrame = window.requestAnimationFrame(() => inputRef.current?.focus());
    return () => {
      window.cancelAnimationFrame(focusFrame);
      window.requestAnimationFrame(() => returnTarget?.focus());
    };
  }, []);

  function close() {
    if (!pending) onClose();
  }

  async function redeem(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const trimmedCode = code.trim();
    if (!trimmedCode || pending || unlocked) return;
    setPending(true);
    setError("");
    setMessage("");
    try {
      const response = await fetch("/api/redeem", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ code: trimmedCode }),
      });
      const payload = await response.json().catch(() => null);
      if (response.status === 401) {
        window.location.assign("/login");
        return;
      }
      if (!response.ok) throw new Error(redeemErrorMessage(response.status, payload));
      const result = payload as { awardedCredits?: number; credits: number; message?: string };
      const awarded = typeof result.awardedCredits === "number" ? result.awardedCredits : result.credits;
      onCreditsChanged(result.credits);
      setCode("");
      setUnlocked(true);
      setMessage(result.message || `已到账 ${awarded} 点，现在可以开始完整咨询。`);
      notifyBalanceChanged(result.credits);
    } catch (caught) {
      setError(caught instanceof Error ? caught.message : "兑换失败，请稍后重试");
    } finally {
      setPending(false);
    }
  }

  return (
    <div className="account-modal-overlay" onMouseDown={close}>
      <section
        className="account-modal paywall-modal"
        role="dialog"
        aria-modal="true"
        aria-labelledby="onboarding-paywall-title"
        onMouseDown={(event) => event.stopPropagation()}
        onKeyDown={(event) => {
          if (event.key === "Escape") close();
          else keepFocusWithin(event.nativeEvent, event.currentTarget);
        }}
      >
        <header className="account-modal-header">
          <h2 id="onboarding-paywall-title">解锁完整咨询</h2>
          <button className="dialog-close" aria-label="关闭" type="button" onClick={close} disabled={pending}>
            <X aria-hidden="true" />
          </button>
        </header>
        <div className="paywall-intro">
          <span className="paywall-mark" aria-hidden="true"><Gift /></span>
          <p><b>入门问题已经准备好。</b>填写兑换码，解锁后续咨询、生时校正与完整解读。</p>
        </div>
        <div className="redeem-balance">
          <span>当前可用点数</span>
          <strong>{credits} 点</strong>
        </div>
        <form className="redeem-form account-redeem-form" onSubmit={redeem}>
          <label htmlFor="onboarding-redeem-code">兑换码</label>
          <div>
            <input
              id="onboarding-redeem-code"
              ref={inputRef}
              autoComplete="off"
              value={code}
              onChange={(event) => {
                setCode(event.target.value);
                setError("");
                setMessage("");
                setUnlocked(false);
              }}
              placeholder="输入完整兑换码"
            />
            <button className="button-primary" type="submit" disabled={!code.trim() || pending || unlocked}>
              {pending ? "兑换中" : unlocked ? "已解锁" : "兑换并继续"}
            </button>
          </div>
          {error && <p className="form-error" role="alert">{error}</p>}
          {message && <p className="form-success" role="status">{message}</p>}
        </form>
        <div className="paywall-footer">
          <span>{unlocked ? "点数已到账，可以继续选择问题。" : "还没有兑换码？"}</span>
          {unlocked ? (
            <button className="button-primary" type="button" onClick={close}>开始咨询</button>
          ) : (
            <button className="button-secondary" type="button" onClick={onOpenBilling}>查看套餐与会员</button>
          )}
        </div>
      </section>
    </div>
  );
}