// screens-kyc.jsx — KYC review queue for ops admins.
// Mounted under app.jsx Screen map as `kyc`; nav entry in shell.jsx under g_user.
// Calls /api/admin/kyc (list) + /api/admin/kyc/{user_id}/{approve|reject}.

const _kycAdminFetch  = window.NebulaAdmin.adminFetch;
const _kycUseAdminPoll = window.NebulaAdmin.useAdminPoll;

function KYCScreen({ t, push }) {
  const [status, setStatus] = React.useState('pending'); // pending | approved | rejected | ''
  const [tick, setTick] = React.useState(0);
  const [data] = _kycUseAdminPoll(`/api/admin/kyc?status=${status}&_=${tick}`, 10000);
  const items = (data && data.items) || [];

  const counts = {
    pending:  items.filter(i => i.status === 'pending').length,
    approved: items.filter(i => i.status === 'approved').length,
    rejected: items.filter(i => i.status === 'rejected').length,
    all:      items.length,
  };

  const act = async (userID, kind) => {
    try {
      let body = '{}';
      if (kind === 'reject') {
        const reason = window.prompt(t.tx('驳回原因？','Reject reason?')) || '';
        if (!reason) return;
        body = JSON.stringify({ reason });
      }
      await _kycAdminFetch(`/api/admin/kyc/${userID}/${kind}`, { method: 'POST', body });
      push(kind === 'approve' ? t.tx('已通过','Approved') : t.tx('已驳回','Rejected'));
      setTick(Date.now());
    } catch (e) {
      push(`${t.tx('操作失败：','Failed: ')}${(e && e.body && e.body.error) || (e && e.message) || 'unknown'}`);
    }
  };

  const idTypeLabel = (k) => ({
    cn_id:          t.tx('身份证','CN ID'),
    passport:       t.tx('护照','Passport'),
    driver_license: t.tx('驾驶证','Driver license'),
  }[k] || k);

  const sBadge = (s) => ({ pending: 'warning', approved: 'info', rejected: 'danger' }[s] || 'outline');

  return (
    <div className="stack">
      <div className="page-h">
        <div>
          <h1>{t.p_kyc}</h1>
          <div className="sub">{t.tx('实名审核 · 待审 / 已通过 / 已驳回','Real-name verification queue')}</div>
        </div>
        <div className="actions">
          <button className="btn btn-sm" onClick={() => setTick(Date.now())}><Icons.refresh /> {t.refresh}</button>
        </div>
      </div>

      <div className="tabs">
        {[
          ['pending',  `${t.tx('待审','Pending')} ${counts.pending}`],
          ['approved', `${t.tx('已通过','Approved')} ${counts.approved}`],
          ['rejected', `${t.tx('已驳回','Rejected')} ${counts.rejected}`],
          ['',         t.tx('全部','All')],
        ].map(([k, l]) => (
          <div key={k || 'all'} className={'tab' + (status === k ? ' active' : '')} onClick={() => setStatus(k)}>{l}</div>
        ))}
      </div>

      <div className="card">
        <div className="tbl-scroll">
        <table className="tbl tbl-stack">
          <thead><tr>
            <th>{t.tx('用户','User')}</th>
            <th>{t.tx('姓名','Real Name')}</th>
            <th>{t.tx('证件类型','ID Type')}</th>
            <th>{t.tx('证件号 / 手机','ID / Phone')}</th>
            <th>{t.tx('提交时间','Submitted')}</th>
            <th>{t.status}</th>
            <th>{t.tx('审核人 / 原因','Reviewer / Reason')}</th>
            <th></th>
          </tr></thead>
          <tbody>
            {items.length === 0 ? (
              <tr><td colSpan={8} className="muted" style={{ textAlign: 'center', padding: 24 }}>{t.tx('暂无记录','No records')}</td></tr>
            ) : items.map((r) => (
              <tr key={r.user_id}>
                <td data-label={t.tx('用户','User')}>
                  <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                    <Avatar name={r.real_name || r.user_id} size={20} />
                    <div className="text-mono" style={{ fontSize: 11 }}>{r.user_id}</div>
                  </div>
                </td>
                <td data-label={t.tx('姓名','Real Name')} style={{ fontSize: 13, fontWeight: 500 }}>{r.real_name}</td>
                <td data-label={t.tx('证件类型','ID Type')}><span className="badge outline">{idTypeLabel(r.id_type)}</span></td>
                <td data-label={t.tx('证件号 / 手机','ID / Phone')}>
                  <div className="text-mono" style={{ fontSize: 11 }}>{r.id_number}</div>
                  <div className="text-faint text-mono" style={{ fontSize: 10 }}>{r.phone}</div>
                </td>
                <td data-label={t.tx('提交时间','Submitted')} className="text-mono muted" style={{ fontSize: 11 }}>{r.submitted_at ? new Date(r.submitted_at).toLocaleString('zh-CN', { hour12: false }) : '—'}</td>
                <td data-label={t.status}><span className={'badge ' + sBadge(r.status)}>{r.status}</span></td>
                <td data-label={t.tx('审核人 / 原因','Reviewer / Reason')}>
                  {r.reviewer && <div style={{ fontSize: 12 }}>{r.reviewer}</div>}
                  {r.reject_reason && <div className="text-faint" style={{ fontSize: 10 }}>{r.reject_reason}</div>}
                  {!r.reviewer && !r.reject_reason && <span className="text-faint" style={{ fontSize: 10 }}>—</span>}
                </td>
                <td data-label={t.tx('操作','Actions')} className="tbl-actions">
                  {r.status === 'pending' ? <>
                    <button className="btn btn-xs btn-ghost" onClick={() => act(r.user_id, 'reject')}>{t.reject}</button>
                    <button className="btn btn-xs btn-pri" onClick={() => act(r.user_id, 'approve')}>{t.approve}</button>
                  </> : <span className="text-faint" style={{ fontSize: 10 }}>—</span>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        </div>
      </div>
    </div>
  );
}

window.KYCScreen = KYCScreen;