const { Dialog: TDialog, Input: TInput, Select: TSelect, Radio: TRadio, Button: TBtn } = window.OctanexDesignSystem_0e3b75;

const METHODS = [
  { value: 'sbp', label: 'сбп' },
  { value: 'card', label: 'карта' },
  { value: 'usdt', label: 'usdt trc-20' },
];

function TopUp({ open, onClose, onPaid, payerId }) {
  const [method, setMethod] = React.useState('sbp');
  const [amount, setAmount] = React.useState('2000');
  const [country, setCountry] = React.useState('cis');
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const n = parseInt(amount.replace(/\D/g, ''), 10) || 0;
  const pay = async () => {
    if (n < 100) { setErr('минимум 100 ₽'); return; }
    setErr(''); setBusy(true);
    try {
      // сумму, метод и страну считает/принимает сервер; аккаунт — по сессии, не по payerId
      const res = await window.api.topup({ method, amount: n, country, payerId });
      if (res.payUrl) window.open(res.payUrl, '_blank', 'noopener'); // страница оплаты (сейчас — заглушка)
      onPaid({ amount: n, method: METHODS.find((m) => m.value === method).label });
    } catch (e) {
      setErr(e.message === 'min_amount_100' ? 'минимум 100 ₽' : 'ошибка, попробуйте ещё');
      setBusy(false);
    }
  };
  return (
    <TDialog open={open} onClose={onClose} path="пополнение" title="пополнить баланс"
      footer={<React.Fragment>
        <TBtn variant="secondary" onClick={onClose}>отмена</TBtn>
        <TBtn onClick={pay} loading={busy}>к оплате</TBtn>
      </React.Fragment>}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        <div className="ox-field">
          <span className="ox-label">метод</span>
          <div style={{ display: 'flex', gap: 18, paddingTop: 2 }}>
            {METHODS.map((m) => (
              <TRadio key={m.value} name="method" value={m.value} checked={method === m.value} onChange={setMethod} label={m.label} />
            ))}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          <TInput label="сумма" mono prefix="₽" value={amount} onChange={setAmount} error={err} hint={err ? undefined : 'минимум 100 ₽'} />
          <TSelect label="страна" value={country} onChange={setCountry} options={[
            { value: 'cis', label: 'снг' },
            { value: 'eu', label: 'европа' },
            { value: 'us', label: 'сша' },
          ]} />
        </div>
        <TInput label="id плательщика" mono value={payerId || ''} onChange={() => {}} readOnly hint="ваш id аккаунта (из сессии) — передаётся платёжке; сменить нельзя" />
      </div>
    </TDialog>
  );
}

Object.assign(window, { TopUp });