// HelperMatch Admin — 獎金發放記錄 (Referral bonus payout log)
// Super-admin-only record-keeping: mark manual payments done, notify candidates.

const PM_META = {
  EWALLET_DANA:      { label: 'DANA',      color: '#118EEA' },
  EWALLET_GCASH:     { label: 'GCash',     color: '#0063D1' },
  EWALLET_MOMO:      { label: 'Momo',      color: '#A50064' },
  EWALLET_PROMPTPAY: { label: 'PromptPay', color: '#002776' },
  EWALLET_OVO:       { label: 'OVO',       color: '#4C2A84' },
  BANK_ACCOUNT:      { label: '銀行帳號',  color: '#475467' },
};

const NATION_FLAG = { ID:'🇮🇩', PH:'🇵🇭', VN:'🇻🇳', TH:'🇹🇭' };

// ---------- Bonus status badge ----------
const BonusStatus = ({ status }) => {
  const m = {
    HOLD:    { label:'HOLD 觀察中', c:'neutral'  },
    PAYABLE: { label:'可發放',      c:'warn'     },
    PAID:    { label:'已發放',      c:'success'  },
    FAILED:  { label:'失敗',        c:'danger'   },
    VOID:    { label:'作廢',        c:'neutral'  },
  }[status] || { label:status, c:'neutral' };
  return <span className={`a-badge a-badge-${m.c}`}>{m.label}</span>;
};

// ---------- Payouts page ----------
const PayoutsPageReal = () => {
  const { t } = (window.useI18n ? window.useI18n() : { t: (k)=>k });
  const toast = useToast();
  const [tab, setTab] = uS('PAYABLE');
  const [q, setQ] = uS('');
  const [curFilter, setCurFilter] = uS('');
  const [openId, setOpenId] = uS(null);
  const [bulkMark, setBulkMark] = uS(false);
  const [payouts, setPayouts] = uS(() => ADMIN.payouts.map(p => ({ ...p })));
  const [selected, setSelected] = uS(() => new Set());

  // ---- KPI ----
  const kpi = uM(() => {
    const payable = payouts.filter(p => p.status === 'PAYABLE');
    const paid30  = payouts.filter(p => p.status === 'PAID' && p.paidAt && (ADMIN.now - p.paidAt) < 30*86400000);
    const hold    = payouts.filter(p => p.status === 'HOLD');
    const failed  = payouts.filter(p => p.status === 'FAILED');
    return {
      payable: { count: payable.length, usd: payable.reduce((s,p)=>s+p.amountUsdCents,0) },
      paid30:  { count: paid30.length,  usd: paid30.reduce((s,p)=>s+p.amountUsdCents,0) },
      hold:    { count: hold.length,    usd: hold.reduce((s,p)=>s+p.amountUsdCents,0) },
      failed:  { count: failed.length },
    };
  }, [payouts]);

  // ---- Tabs ----
  const tabs = [
    { k:'PAYABLE', label:'待發放',     count: payouts.filter(p => p.status === 'PAYABLE').length },
    { k:'HOLD',    label:'觀察中',     count: payouts.filter(p => p.status === 'HOLD').length },
    { k:'PAID',    label:'已發放',     count: payouts.filter(p => p.status === 'PAID').length },
    { k:'FAILED',  label:'失敗',       count: payouts.filter(p => p.status === 'FAILED').length },
    { k:'ALL',     label:'全部',       count: payouts.length },
  ];

  // ---- Filtered list ----
  const list = uM(() => {
    let xs = payouts.slice();
    if (tab !== 'ALL') xs = xs.filter(p => p.status === tab);
    if (curFilter) xs = xs.filter(p => p.localCurrency === curFilter);
    if (q) {
      const s = q.toLowerCase();
      xs = xs.filter(p => {
        const r = ADMIN.referrals.find(x => x.id === p.referralId);
        const c = r && ADMIN.candidates.find(x => x.id === r.referrerId);
        return (p.id + ' ' + (c?.name || '') + ' ' + (r?.code || '')).toLowerCase().includes(s);
      });
    }
    xs.sort((a,b) => {
      if (a.status === 'PAYABLE' && b.status !== 'PAYABLE') return -1;
      if (b.status === 'PAYABLE' && a.status !== 'PAYABLE') return 1;
      return (b.paidAt?.getTime() || 0) - (a.paidAt?.getTime() || 0);
    });
    return xs;
  }, [payouts, tab, q, curFilter]);

  // selection lives in PAYABLE only
  const selectableIds = list.filter(p => p.status === 'PAYABLE').map(p => p.id);
  const allSelected = selectableIds.length > 0 && selectableIds.every(id => selected.has(id));
  const toggleAll = () => setSelected(s => {
    const n = new Set(s);
    if (allSelected) selectableIds.forEach(id => n.delete(id));
    else selectableIds.forEach(id => n.add(id));
    return n;
  });
  const toggle = (id) => setSelected(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });

  // ---- Mark paid / failed ----
  const markPaid = (ids, { method, reference, notify }) => {
    setPayouts(xs => xs.map(p => ids.includes(p.id)
      ? { ...p, status:'PAID', paidAt: new Date(), externalTxId: reference, paymentMethod: method, notifiedAt: notify ? new Date() : null }
      : p));
    ids.forEach(id => pushLog('PAYOUT_MARK_PAID', 'ReferralPayout', id, { method, reference, notified: !!notify }));
    toast.success(`${ids.length} 筆已標記為已發放${notify ? ' · 已通知候選人' : ''}`);
    setSelected(new Set());
    setBulkMark(false);
    setOpenId(null);
  };
  const markFailed = (ids, reason) => {
    setPayouts(xs => xs.map(p => ids.includes(p.id) ? { ...p, status:'FAILED', failedReason: reason } : p));
    ids.forEach(id => pushLog('PAYOUT_MARK_FAILED', 'ReferralPayout', id, { reason }));
    toast.danger(`${ids.length} 筆標記為失敗`);
    setOpenId(null);
  };

  const opened = openId ? payouts.find(p => p.id === openId) : null;

  return (
    <div className="a-page a-page-wide">
      <div className="a-page-header">
        <div>
          <h1 className="a-page-title">{t('admin.payouts.title')} <span style={{fontSize:11,fontWeight:700,padding:'2px 6px',borderRadius:3,background:'rgba(232,133,106,0.15)',color:'var(--a-primary)',letterSpacing:'0.04em',marginLeft:6,verticalAlign:'middle'}}>★ SUPER</span></h1>
          <p className="a-page-sub">{t('admin.payouts.subtitle')}</p>
        </div>
      </div>

      {/* Info strip */}
      <div style={{padding:'12px 16px',background:'var(--a-info-bg)',border:'1px solid var(--a-info-line)',borderRadius:8,marginBottom:20,display:'flex',alignItems:'flex-start',gap:12}}>
        <AIcon name="info" size={16} style={{color:'var(--a-info)',marginTop:2}}/>
        <div className="fs-13" style={{color:'var(--a-info-text)',lineHeight:1.55}}>
          <b>發放流程：</b>（1）於外部金流工具（Wise、Xendit、銀行轉帳）完成匯款 →（2）回到此頁選擇對應 Payout →（3）填入外部交易 ID 並送出通知 →（4）系統寫入稽核紀錄並推播給候選人。
          <span className="text-muted"> 本頁不直接接入付款 API，避免誤觸。</span>
        </div>
      </div>

      {/* KPI */}
      <div className="grid-4 mb-20">
        <div className="a-stat" style={{borderColor:'var(--a-warn-line)',background:'var(--a-warn-bg)'}}>
          <div className="a-stat-label" style={{color:'var(--a-warn-text)'}}><AIcon name="wallet" size={13}/> 待發放</div>
          <div className="a-stat-value" style={{color:'var(--a-warn-text)'}}>{kpi.payable.count}</div>
          <div className="a-stat-delta" style={{color:'var(--a-warn-text)',opacity:0.85}}>總計 <b>{FMT.usd(kpi.payable.usd)}</b></div>
        </div>
        <div className="a-stat">
          <div className="a-stat-label">觀察中 (HOLD)</div>
          <div className="a-stat-value">{kpi.hold.count}</div>
          <div className="a-stat-delta">{FMT.usd(kpi.hold.usd)} 鎖定中</div>
        </div>
        <div className="a-stat" style={{borderColor:'var(--a-success-line)',background:'var(--a-success-bg)'}}>
          <div className="a-stat-label" style={{color:'var(--a-success)'}}><AIcon name="checkCircle" size={13}/> 30 天已發放</div>
          <div className="a-stat-value" style={{color:'var(--a-success)'}}>{kpi.paid30.count}</div>
          <div className="a-stat-delta" style={{color:'var(--a-success)',opacity:0.85}}>{FMT.usd(kpi.paid30.usd)}</div>
        </div>
        <div className="a-stat" style={kpi.failed.count > 0 ? {borderColor:'var(--a-danger-line)',background:'var(--a-danger-bg)'} : {}}>
          <div className="a-stat-label" style={kpi.failed.count > 0 ? {color:'var(--a-danger)'} : {}}><AIcon name="alert" size={13}/> 失敗待處理</div>
          <div className="a-stat-value" style={kpi.failed.count > 0 ? {color:'var(--a-danger)'} : {}}>{kpi.failed.count}</div>
          <div className="a-stat-delta" style={kpi.failed.count > 0 ? {color:'var(--a-danger)',opacity:0.85} : {}}>需重新匯款</div>
        </div>
      </div>

      {/* Table card */}
      <div className="a-card">
        <div className="a-tabs" style={{margin:'0 0 -1px',padding:'0 14px'}}>
          {tabs.map(t => (
            <button key={t.k} className={`a-tab ${tab === t.k ? 'active' : ''}`} onClick={()=>{ setTab(t.k); setSelected(new Set()); }}>
              {t.label}<span className="a-tab-count">{t.count}</span>
            </button>
          ))}
        </div>

        <div className="a-table-toolbar">
          <div className="a-input-group" style={{width:260}}>
            <span className="a-input-group-prefix"><AIcon name="search" size={14}/></span>
            <input className="a-input" value={q} onChange={e=>setQ(e.target.value)} placeholder="搜尋 Referrer / 代碼 / Payout ID…"/>
          </div>
          <select className="a-select" style={{width:130}} value={curFilter} onChange={e=>setCurFilter(e.target.value)}>
            <option value="">所有幣別</option>
            <option value="IDR">🇮🇩 IDR</option>
            <option value="PHP">🇵🇭 PHP</option>
            <option value="VND">🇻🇳 VND</option>
            <option value="THB">🇹🇭 THB</option>
          </select>
          {tab === 'PAYABLE' && selected.size > 0 && (
            <button className="a-btn a-btn-primary" onClick={()=>setBulkMark(true)}>
              <AIcon name="checkCircle" size={13}/> 批次標記 {selected.size} 筆為已發放
            </button>
          )}
          <span className="ml-auto text-muted fs-13">共 {list.length} 筆</span>
        </div>

        {list.length === 0 ? <AEmpty icon="wallet" title="無符合條件的紀錄"/> : (
          <table className="a-table">
            <thead><tr>
              {tab === 'PAYABLE' && (
                <th style={{width:36}}>
                  <input type="checkbox" checked={allSelected} onChange={toggleAll} style={{accentColor:'var(--a-primary)'}}/>
                </th>
              )}
              <th>Referrer</th>
              <th style={{width:130}}>USD</th>
              <th style={{width:170}}>本地金額 (參考)</th>
              <th style={{width:150}}>付款方式</th>
              <th style={{width:120}}>狀態</th>
              <th style={{width:160}}>時間</th>
              <th style={{width:30}}></th>
            </tr></thead>
            <tbody>
              {list.map(p => {
                const r  = ADMIN.referrals.find(x => x.id === p.referralId);
                const er = r && ADMIN.candidates.find(x => x.id === r.referrerId);
                const pm = ADMIN.payoutMethods.find(x => x.candidateId === r?.referrerId);
                return (
                  <tr key={p.id} className="clickable" onClick={()=>setOpenId(p.id)}
                    style={p.status === 'FAILED' ? {background:'rgba(204,83,51,0.03)'} : {}}>
                    {tab === 'PAYABLE' && (
                      <td onClick={e=>e.stopPropagation()}>
                        <input type="checkbox" checked={selected.has(p.id)} onChange={()=>toggle(p.id)} style={{accentColor:'var(--a-primary)'}}/>
                      </td>
                    )}
                    <td>{er ? <CandidateCell c={er}/> : <Mono>{p.referralId}</Mono>}</td>
                    <td className="fw-700 fs-14">{FMT.usd(p.amountUsdCents)}</td>
                    <td className="text-muted fs-13">
                      {NATION_FLAG[er?.nationality]} {FMT.local(p.amountLocalCents, p.localCurrency)}
                    </td>
                    <td>
                      {pm ? (
                        <span className="fs-12 fw-600" style={{color: PM_META[pm.methodType]?.color || 'var(--a-ink)'}}>
                          {PM_META[pm.methodType]?.label || pm.methodType}
                        </span>
                      ) : <span className="a-badge a-badge-danger" style={{fontSize:10}}>未設</span>}
                    </td>
                    <td><BonusStatus status={p.status}/></td>
                    <td className="text-muted fs-12">
                      {p.paidAt ? FMT.rel(p.paidAt)
                        : p.holdEndAt ? `HOLD 至 ${FMT.rel(p.holdEndAt)}`
                        : p.failedReason ? '失敗 · 需處理'
                        : '—'}
                    </td>
                    <td><AIcon name="chevRight" size={13} className="text-faint"/></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>

      {opened && <PayoutDrawer p={opened} onClose={()=>setOpenId(null)} onMarkPaid={markPaid} onMarkFailed={markFailed}/>}
      {bulkMark && <BulkMarkPaidModal ids={[...selected]} payouts={payouts} onClose={()=>setBulkMark(false)} onConfirm={markPaid}/>}
    </div>
  );
};

// ========================================================================
// Drawer — view a single payout + actions
// ========================================================================
const PayoutDrawer = ({ p, onClose, onMarkPaid, onMarkFailed }) => {
  const r  = ADMIN.referrals.find(x => x.id === p.referralId);
  const er = r && ADMIN.candidates.find(x => x.id === r.referrerId);
  const re = r && ADMIN.candidates.find(x => x.id === r.refereeId);
  const pm = r && ADMIN.payoutMethods.find(x => x.candidateId === r.referrerId);
  const [showPaid, setShowPaid] = uS(false);
  const [showFail, setShowFail] = uS(false);

  const canAct = p.status === 'PAYABLE';

  return (
    <ADrawer open={true} onClose={onClose} size="lg" title={
      <div style={{display:'flex',alignItems:'center',gap:10}}>
        <AIcon name="wallet" size={16}/>
        <span>獎金發放</span>
        <Mono style={{fontSize:11,opacity:0.6}}>{p.id}</Mono>
      </div>
    }>
      {/* Amount hero */}
      <div style={{padding:20,background:'var(--a-paper-2)',border:'1px solid var(--a-line)',borderRadius:10,marginBottom:20}}>
        <div className="fs-11 fw-600 text-muted mb-6" style={{letterSpacing:'0.06em',textTransform:'uppercase'}}>發放金額 (USD)</div>
        <div style={{fontSize:34,fontWeight:700,letterSpacing:'-0.02em'}}>{FMT.usd(p.amountUsdCents)}</div>
        <div className="text-muted fs-13 mt-4">
          {NATION_FLAG[er?.nationality]} 參考本地金額 {FMT.local(p.amountLocalCents, p.localCurrency)}
          <span className="text-faint fs-12" style={{marginLeft:8}}>（參考值 · 以 USD 為準）</span>
        </div>
        <div className="mt-12"><BonusStatus status={p.status}/></div>
      </div>

      {/* Referrer + payment method */}
      <div className="grid-2 mb-20">
        <div className="a-card" style={{padding:14}}>
          <div className="fs-11 fw-600 text-muted mb-8" style={{letterSpacing:'0.06em',textTransform:'uppercase'}}>Referrer（收款人）</div>
          {er ? <CandidateCell c={er}/> : <span className="text-faint">—</span>}
          {r && (
            <div className="mt-10 fs-12 text-muted">
              Referral Code: <Mono>{r.code}</Mono>
              {re && <> · 推薦 <a href={`#/candidates/${re.id}`} style={{color:'var(--a-primary)',fontWeight:500}}>{re.name}</a></>}
            </div>
          )}
        </div>
        <div className="a-card" style={{padding:14}}>
          <div className="fs-11 fw-600 text-muted mb-8" style={{letterSpacing:'0.06em',textTransform:'uppercase'}}>付款方式</div>
          {pm ? (
            <>
              <div className="fw-700 fs-14" style={{color: PM_META[pm.methodType]?.color || 'var(--a-ink)'}}>
                {PM_META[pm.methodType]?.label || pm.methodType}
              </div>
              <div className="fs-13 mt-4">{pm.accountName}</div>
              <div className="text-muted fs-12 mt-2">
                {pm.ewalletPhone && <Mono>{pm.ewalletPhone}</Mono>}
                {pm.bankAccountNum && <><Mono>{pm.bankAccountNum}</Mono> · {pm.bankName}</>}
              </div>
              {!pm.kycVerified && (
                <div className="mt-8" style={{padding:'6px 10px',background:'var(--a-warn-bg)',border:'1px solid var(--a-warn-line)',borderRadius:6,fontSize:12,color:'var(--a-warn-text)'}}>
                  <AIcon name="alert" size={12}/> KYC 未完成{pm.kycNote ? ` · ${pm.kycNote}` : ''}
                </div>
              )}
            </>
          ) : (
            <div className="fs-13" style={{color:'var(--a-danger)'}}>
              <AIcon name="alert" size={13}/> 候選人尚未設定付款方式，無法匯款。
            </div>
          )}
        </div>
      </div>

      {/* Gate / timeline summary */}
      {r && (
        <>
          <h3 className="fs-13 fw-600 mb-10" style={{letterSpacing:'0.04em',textTransform:'uppercase',color:'var(--a-ink-muted)'}}>Referral 時序</h3>
          <dl className="a-dl">
            {/* New 4-step flow — sign up → resume → approved → HOLD ends.
                Labels match admin-referrals.jsx GatesTimeline. */}
            <dt>1 · 註冊</dt><dd>{r.refereeSignupAt ? r.refereeSignupAt.toLocaleDateString('zh-TW') : '—'}</dd>
            <dt>2 · 完成履歷</dt><dd>{r.resumeSubmittedAt ? r.resumeSubmittedAt.toLocaleDateString('zh-TW') : '—'}</dd>
            <dt>3 · 通過審核</dt><dd>{r.approvedAt ? r.approvedAt.toLocaleDateString('zh-TW') : '—'}</dd>
            <dt>4 · HOLD 結束</dt><dd>{r.holdEndAt ? r.holdEndAt.toLocaleDateString('zh-TW') : '—'}</dd>
            <dt>已發放</dt><dd>{p.paidAt ? p.paidAt.toLocaleString('zh-TW', { hour12:false }) : '—'}</dd>
            {p.externalTxId && <><dt>外部交易 ID</dt><dd><Mono>{p.externalTxId}</Mono></dd></>}
            {p.paymentMethod && <><dt>發放管道</dt><dd>{p.paymentMethod}</dd></>}
            {p.notifiedAt && <><dt>候選人通知</dt><dd className="text-muted">已於 {FMT.rel(p.notifiedAt)} 推播</dd></>}
            {p.failedReason && <><dt>失敗原因</dt><dd style={{color:'var(--a-danger)'}}>{p.failedReason}</dd></>}
          </dl>
        </>
      )}

      {/* Actions */}
      {canAct && (
        <div style={{marginTop:22,paddingTop:16,borderTop:'1px solid var(--a-line)',display:'flex',gap:8}}>
          <button className="a-btn a-btn-primary" disabled={!pm || !pm.kycVerified} onClick={()=>setShowPaid(true)}>
            <AIcon name="checkCircle" size={13}/> 標記為已發放
          </button>
          <button className="a-btn a-btn-danger" onClick={()=>setShowFail(true)}>
            <AIcon name="xCircle" size={13}/> 標記為失敗
          </button>
          {(!pm || !pm.kycVerified) && (
            <span className="fs-12 text-muted" style={{alignSelf:'center',marginLeft:'auto'}}>
              {!pm ? '候選人未設付款方式' : 'KYC 未完成'} · 無法發放
            </span>
          )}
        </div>
      )}

      {showPaid && <MarkPaidModal ids={[p.id]} usdCents={p.amountUsdCents} methodLabel={pm && PM_META[pm.methodType]?.label} onClose={()=>setShowPaid(false)} onConfirm={onMarkPaid}/>}
      {showFail && <MarkFailedModal ids={[p.id]} onClose={()=>setShowFail(false)} onConfirm={onMarkFailed}/>}
    </ADrawer>
  );
};

// ========================================================================
// MarkPaidModal — records manual payment + notifies candidate
// ========================================================================
const PAYMENT_METHODS = [
  { v:'Wise',         label:'Wise 跨境匯款' },
  { v:'Xendit',       label:'Xendit 批次' },
  { v:'Bank Transfer',label:'銀行轉帳 (手動)' },
  { v:'DANA',         label:'DANA 電子錢包' },
  { v:'GCash',        label:'GCash 電子錢包' },
  { v:'Other',        label:'其他' },
];

const MarkPaidModal = ({ ids, usdCents, methodLabel, onClose, onConfirm }) => {
  const [method, setMethod] = uS('Wise');
  const [reference, setReference] = uS('');
  const [notify, setNotify] = uS(true);
  const ok = reference.trim().length >= 4;

  return (
    <AModal open={true} onClose={onClose} width={500} title="標記為已發放"
      icon={<span style={{color:'var(--a-success)'}}><AIcon name="checkCircle" size={20}/></span>}
      footer={<>
        <button className="a-btn a-btn-ghost" onClick={onClose}>取消</button>
        <button className="a-btn a-btn-success-solid" disabled={!ok} onClick={()=>onConfirm(ids, { method, reference: reference.trim(), notify })}>
          <AIcon name="check" size={13}/> 確認記錄
        </button>
      </>}>
      <div style={{padding:14,background:'var(--a-paper-2)',borderRadius:8,border:'1px solid var(--a-line)',marginBottom:16}}>
        <div className="fs-12 text-muted mb-4">即將標記 {ids.length} 筆 · 共 <b>{FMT.usd(usdCents || 0)}</b></div>
        <div className="fs-13" style={{color:'var(--a-ink-soft)'}}>
          此動作僅為 <b>紀錄</b>。請先於外部金流工具（{methodLabel || 'Wise / 銀行'}）完成實際匯款後再登記。
        </div>
      </div>

      <label className="a-label">發放管道 *</label>
      <select className="a-select mb-14" style={{width:'100%'}} value={method} onChange={e=>setMethod(e.target.value)}>
        {PAYMENT_METHODS.map(m => <option key={m.v} value={m.v}>{m.label}</option>)}
      </select>

      <label className="a-label">外部交易 / 回執編號 *</label>
      <input className="a-input" value={reference} onChange={e=>setReference(e.target.value)} placeholder="例：wise_7e8f9a1b / xendit_disb_xxx / 銀行水單號"/>
      <div className="fs-12 text-muted mt-6">稽核用，無法修改。請複製金流工具顯示的交易編號。</div>

      <label style={{display:'flex',alignItems:'center',gap:10,marginTop:18,padding:'10px 12px',border:'1px solid var(--a-line)',borderRadius:8,cursor:'pointer',background:notify?'var(--a-success-bg)':'var(--a-paper)'}}>
        <input type="checkbox" checked={notify} onChange={e=>setNotify(e.target.checked)} style={{accentColor:'var(--a-success)',width:16,height:16}}/>
        <div style={{flex:1}}>
          <div className="fs-13 fw-600">發放後通知候選人</div>
          <div className="fs-12 text-muted">透過站內通知 + email 告知發放金額與外部交易編號</div>
        </div>
        <AIcon name="bell" size={14} className="text-muted"/>
      </label>
    </AModal>
  );
};

const BulkMarkPaidModal = ({ ids, payouts, onClose, onConfirm }) => {
  const items = payouts.filter(p => ids.includes(p.id));
  const totalUsd = items.reduce((s,p) => s + p.amountUsdCents, 0);
  return <MarkPaidModal ids={ids} usdCents={totalUsd} onClose={onClose} onConfirm={onConfirm}/>;
};

const MarkFailedModal = ({ ids, onClose, onConfirm }) => {
  const [reason, setReason] = uS('');
  const presets = ['帳號錯誤，匯款退回','KYC 驗證失敗','候選人要求延後','收款方 AML 阻擋'];
  return (
    <AModal open={true} onClose={onClose} width={460} title="標記為失敗"
      icon={<span style={{color:'var(--a-danger)'}}><AIcon name="xCircle" size={20}/></span>}
      footer={<>
        <button className="a-btn a-btn-ghost" onClick={onClose}>取消</button>
        <button className="a-btn a-btn-danger-solid" disabled={reason.trim().length < 4} onClick={()=>onConfirm(ids, reason.trim())}>確認</button>
      </>}>
      <p className="fs-14 mb-12">標記後此筆獎金轉為 <b>FAILED</b>，候選人會看到失敗通知。稍後可重新觸發發放。</p>
      <label className="a-label">失敗原因 *</label>
      <div className="flex flex-wrap gap-6 mb-10">
        {presets.map(p => <button key={p} className="a-btn a-btn-sm a-btn-default" onClick={()=>setReason(p)}>{p}</button>)}
      </div>
      <textarea className="a-textarea" rows={3} value={reason} onChange={e=>setReason(e.target.value)} placeholder="請說明原因…"/>
    </AModal>
  );
};

Object.assign(window, { PayoutsPageReal, BonusStatus });