/* global React, Bubble, DocFrame, Btn */
// Пополнение баланса доксов (ДЕМО, без реальной оплаты). Визуал из макета s9.

window.SCENARIOS = window.SCENARIOS || {};

const PACKS = [
  { d: 1000, price: '3 000', per: '3,00', disc: null },
  { d: 5000, price: '13 500', per: '2,70', disc: '10%' },
  { d: 10000, price: '25 500', per: '2,55', disc: '15%' },
  { d: 50000, price: '105 000', per: '2,10', disc: '30%', best: true },
];

function TopUp({ ctx }) {
  const [sel, setSel] = React.useState(2);
  const [stage, setStage] = React.useState('pick'); // pick | pay | done
  const p = PACKS[sel];

  const pay = () => {
    setStage('done');
    ctx.addBalance(p.d);
    ctx.setDoc(
      <DocFrame title="оплачено (демо)" sub={`+${p.d.toLocaleString('ru-RU')} доксов`}>
        <div className="docp" style={{ fontFamily: 'inherit', fontSize: 12 }}>
          <div className="bdg" style={{ background: '#d4ecdb', borderColor: '#1f6b3a' }}>зачислено ✓</div>
          <h1 style={{ fontSize: 16 }}>Демо-оплата пакета доксов</h1>
          <div className="cprow"><span className="k">Пакет</span><span className="v">{p.d.toLocaleString('ru-RU')} доксов</span></div>
          <div className="cprow"><span className="k">Сумма</span><span className="v">{p.price} ₽{p.disc ? ' · скидка ' + p.disc : ''}</span></div>
          <div className="cprow"><span className="k">Статус</span><span className="v" style={{ color: '#1f6b3a' }}>демо · реальная оплата не производилась</span></div>
        </div>
      </DocFrame>
    );
  };

  if (stage === 'done') {
    return <Bubble><span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
      <span style={{ fontSize: 24, color: '#1f6b3a' }}>✓</span>
      <span>Баланс пополнен на <b>{p.d.toLocaleString('ru-RU')} доксов</b> (демо). Реальная оплата не производилась.</span>
    </span></Bubble>;
  }

  return (
    <>
      <Bubble>Выберите пакет — чем больше объём, тем ниже цена за докс. Это демо-флоу: карта не списывается.</Bubble>
      <div className="topup">
        {PACKS.map((x, i) => (
          <div key={i} className={`tp ${i === sel ? 'on' : ''}`} onClick={() => setSel(i)}>
            {x.disc ? <div className={`tp-disc ${x.best ? 'best' : ''}`}>−{x.disc}{x.best ? ' · выгодно' : ''}</div> : null}
            <div className="tp-d">{x.d.toLocaleString('ru-RU')}<span>доксов</span></div>
            <div className="tp-price">{x.price} ₽</div>
            <div className="tp-per">≈ {x.per} ₽ / докс</div>
          </div>
        ))}
      </div>
      <div className="acost"><span className="v">выбрано: {p.d.toLocaleString('ru-RU')} доксов · {p.price} ₽</span>{p.disc ? <span className="ok">· скидка {p.disc}</span> : null}</div>

      {stage === 'pay' ? (
        <div className="paycard">
          <div className="pc-f"><div className="pc-l">Номер карты</div><div className="pc-i">2200 •••• •••• 4417</div></div>
          <div className="pc-row">
            <div className="pc-f"><div className="pc-l">Срок</div><div className="pc-i">09 / 28</div></div>
            <div className="pc-f"><div className="pc-l">CVC</div><div className="pc-i">•••</div></div>
          </div>
          <div className="pc-secure">🔒 демо · данные карты не передаются, оплата не производится</div>
          <div className="acta">
            <Btn kind="primary" onClick={pay}>Оплатить {p.price} ₽ (демо) →</Btn>
            <Btn kind="dashed" onClick={() => setStage('pick')}>Назад к пакетам</Btn>
          </div>
        </div>
      ) : (
        <div className="acta">
          <Btn kind="primary" onClick={() => setStage('pay')}>Оплатить картой →</Btn>
          <Btn kind="dashed" onClick={() => { ctx.you('Скачать счёт для оплаты'); ctx.ai(`Счёт на ${p.price} ₽ за ${p.d.toLocaleString('ru-RU')} доксов сформирован (демо).`); }}>Скачать счёт</Btn>
        </div>
      )}
    </>
  );
}

window.SCENARIOS.topup = function (ctx) {
  ctx.setDoc(
    <DocFrame title="пакеты доксов" sub="чем больше — тем дешевле докс">
      <div className="docp empty"><div className="ph"><div className="picon">⬨</div><div className="pt">докс списывается за каждый созданный или проверенный документ</div></div></div>
    </DocFrame>
  );
  ctx.aiNode(<TopUp ctx={ctx} />);
};