dukang/apps/h5-shop/src/pages/RedeemConfirmPage.tsx

import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { request } from '../lib/api';

function formatAmount(n: number) {
  return n.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

type Preview = {
  amount: number;
  expireInSeconds: number;
  user?: { userNo?: string; phone?: string; nickname?: string };
  redeemType?: string;
  boundStoreId?: string | null;
};

export default function RedeemConfirmPage() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const [token, setToken] = useState('');
  const [msg, setMsg] = useState('');
  const [loading, setLoading] = useState(false);
  const [storeName, setStoreName] = useState('');
  const [preview, setPreview] = useState<Preview | null>(null);
  const [storeClosed, setStoreClosed] = useState(false);

  useEffect(() => {
    request<Record<string, unknown>>('SHOP_H5', '/shop/store')
      .then((s) => {
        setStoreName(String(s.name || '当前门店'));
        if (s.status && s.status !== 'OPEN') setStoreClosed(true);
      })
      .catch(() => setStoreName('当前门店'));
  }, []);

  useEffect(() => {
    const scanned = searchParams.get('token');
    if (scanned) setToken(scanned);
  }, [searchParams]);

  useEffect(() => {
    if (!token.trim()) {
      setPreview(null);
      return;
    }
    request<Preview>('SHOP_H5', '/shop/redeem/preview', {
      method: 'POST',
      body: JSON.stringify({ token }),
    })
      .then(setPreview)
      .catch((e) => {
        setPreview(null);
        setMsg(e instanceof Error ? e.message : '无法预览核销码');
      });
  }, [token]);

  async function confirm() {
    if (storeClosed) {
      setMsg('门店未营业，无法核销');
      return;
    }
    if (!token.trim()) {
      setMsg('请先扫码获取核销码');
      return;
    }
    setLoading(true);
    setMsg('');
    try {
      const result = await request<Record<string, unknown>>('SHOP_H5', '/shop/redeem/confirm', {
        method: 'POST',
        body: JSON.stringify({ token }),
      });
      sessionStorage.setItem('lastRedeemResult', JSON.stringify(result));
      navigate('/redeem/success', { state: { result, storeName } });
    } catch (e) {
      setMsg(e instanceof Error ? e.message : '核销失败');
    } finally {
      setLoading(false);
    }
  }

  const previewAmount = preview?.amount ?? 0;
  const userLabel = preview?.user?.nickname || preview?.user?.phone || preview?.user?.userNo || '待扫码确认';

  return (
    <div className="shop-redeem-page">
      <header className="shop-redeem-header">
        <button type="button" className="shop-redeem-back" onClick={() => navigate(-1)} aria-label="返回">
          <span className="material-symbols-outlined">arrow_back</span>
        </button>
        <h1 className="app-page-title">核销确认</h1>
      </header>

      <main className="shop-redeem-main">
        {storeClosed && (
          <p className="shop-redeem-error" style={{ marginBottom: 12 }}>门店当前未营业，无法核销</p>
        )}
        <section className="shop-redeem-card">
          <div className="shop-redeem-banner">
            <div className="shop-redeem-banner-icon">
              <span className="material-symbols-outlined shop-fill-icon">verified_user</span>
            </div>
            <div>
              <p className="shop-redeem-banner-label">当前登录核销门店</p>
              <h2 className="shop-redeem-banner-name">{storeName}</h2>
            </div>
          </div>

          <div className="shop-redeem-body">
            <div className="shop-redeem-user">
              <div className="shop-redeem-user-left">
                <span className="material-symbols-outlined">person</span>
                <span>下单用户</span>
              </div>
              <span className="headline-md" style={{ fontFamily: 'var(--font-headline)', fontWeight: 600 }}>
                {userLabel}
              </span>
            </div>

            <div className="shop-redeem-amount-section">
              <span className="shop-redeem-notch shop-redeem-notch--left" />
              <span className="shop-redeem-notch shop-redeem-notch--right" />
              <p className="shop-redeem-amount-label">核销金额</p>
              <div className="shop-redeem-amount">
                <span className="shop-redeem-amount-symbol">¥</span>
                <span className="shop-redeem-amount-value">{formatAmount(previewAmount)}</span>
              </div>
              <span className="shop-redeem-benefit">
                <span className="material-symbols-outlined shop-fill-icon" style={{ fontSize: 16, color: 'var(--color-aged-amber)' }}>
                  confirmation_number
                </span>
                好客权益 · {preview?.redeemType === 'COUPON' ? '单据核销' : '直接核销'}
              </span>
            </div>

            <div className="shop-redeem-details">
              <div className="shop-redeem-detail-row">
                <span>券编号</span>
                <span>{token ? `…${token.slice(-8)}` : '扫码后显示'}</span>
              </div>
              <div className="shop-redeem-detail-row">
                <span>有效期</span>
                <span>{preview ? `${preview.expireInSeconds} 秒` : '—'}</span>
              </div>
              {preview?.boundStoreId && (
                <div className="shop-redeem-detail-row">
                  <span>绑定门店</span>
                  <span>仅限指定门店</span>
                </div>
              )}
            </div>

            {msg && <p className="shop-redeem-error">{msg}</p>}

            <button
              type="button"
              className={`shop-redeem-confirm-btn${loading ? ' success' : ''}`}
              disabled={loading || storeClosed || !preview}
              onClick={confirm}
            >
              <span className="material-symbols-outlined shop-fill-icon">
                {loading ? 'sync' : 'check_circle'}
              </span>
              <span>{loading ? '正在核销...' : preview ? `确认核销 ¥${formatAmount(previewAmount)}` : '等待扫码'}</span>
            </button>

            <p className="shop-redeem-hint">请核对金额后点击确认</p>

            <details className="shop-redeem-dev">
              <summary>开发者选项 · 手动输入核销码</summary>
              <div className="shop-redeem-dev-body">
                <input
                  value={token}
                  onChange={(e) => setToken(e.target.value)}
                  placeholder="粘贴用户核销码"
                />
              </div>
            </details>
          </div>
        </section>

        <div className="shop-redeem-ornament">
          <span className="material-symbols-outlined" style={{ fontSize: 64, color: 'var(--color-heritage-red)' }}>
            wine_bar
          </span>
        </div>
      </main>
    </div>
  );
}