'use client';

import { useEffect, useState, useTransition } from 'react';
import {
  createPayment,
  getPaymentStatus,
  type CheckoutPayment,
} from '../actions/payment';

/**
 * The checkout page never imports @gpmpay/sdk — only the typed result of a
 * server action. That is what keeps the API token on the server.
 */
export default function CheckoutPage() {
  const [payment, setPayment] = useState<CheckoutPayment | null>(null);
  const [status, setStatus] = useState<string>('PENDING');
  const [isPending, startTransition] = useTransition();

  function start() {
    startTransition(async () => {
      setPayment(await createPayment('cart-1', 50_000));
    });
  }

  // Optional convenience: nudge the UI when payment lands. Fulfilment itself
  // still happens in the webhook handler — never rely on the browser for that.
  useEffect(() => {
    if (!payment || status === 'PAID') return;
    const timer = setInterval(async () => {
      const next = await getPaymentStatus(payment.code);
      setStatus(next.status);
      if (next.status !== 'PENDING') clearInterval(timer);
    }, 5000);
    return () => clearInterval(timer);
  }, [payment, status]);

  if (!payment) {
    return (
      <button onClick={start} disabled={isPending}>
        {isPending ? 'Đang tạo mã…' : 'Thanh toán 50.000 ₫'}
      </button>
    );
  }

  if (status === 'PAID') return <p>✅ Đã nhận được thanh toán. Cảm ơn bạn!</p>;

  return (
    <div>
      <h1>Quét mã để thanh toán</h1>

      <img src={payment.qrImageUrl} alt="VietQR" width={280} height={280} />

      <dl>
        <dt>Số tiền</dt>
        <dd>{payment.amount.toLocaleString('vi-VN')} ₫</dd>

        {/* The single most important field on this page. */}
        <dt>Nội dung chuyển khoản</dt>
        <dd>
          <code>{payment.transferContent}</code>
          <button onClick={() => navigator.clipboard.writeText(payment.transferContent)}>
            Sao chép
          </button>
        </dd>

        <dt>Tài khoản nhận</dt>
        <dd>
          {payment.bankName} — {payment.accountNumber} ({payment.accountName})
        </dd>
      </dl>

      <p>
        Chuyển khoản đúng số tiền và <strong>đúng nội dung</strong> ở trên. Nếu
        nội dung sai, hệ thống không thể tự đối soát đơn của bạn.
      </p>
    </div>
  );
}