import {
  loadHelloPay,
  Elements,
  CardNumberElement,
  CardExpiryElement,
  CardCvcElement,
  CardholderNameElement,
  useHelloPay,
  useElements,
} from '@hello-pay/react';

// SDK のロードは module スコープで 1 回だけ（Stripe と同じ挙動）。
// SSR / Next.js でも安全に module top-level に置ける。
const helloPayPromise = loadHelloPay('pk_test_xxx');

export default function Checkout() {
  return (
    <Elements hellopay={helloPayPromise}>
      <PaymentForm />
    </Elements>
  );
}

function PaymentForm() {
  const hellopay = useHelloPay();
  const elements = useElements();

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!hellopay || !elements) return;

    const cardNumber = elements.getElement('cardNumber');
    const { token, card, error } = await hellopay.createToken(cardNumber);

    if (error) {
      // error.type は 'validation_error' | 'api_error' | 'config_error'
      showError(error.message);
      return;
    }
    // 以降は token / card が必ず non-null（Discriminated Union）
    await fetch('/api/charge', {
      method: 'POST',
      body: JSON.stringify({ token, last4: card.last4 }),
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <CardNumberElement />
      <CardExpiryElement />
      <CardCvcElement />
      <CardholderNameElement />
      <button type="submit">支払う</button>
    </form>
  );
}