// Investment confirmation flow — modal with 4 steps
function ConfirmModal({ oppId, amount, onClose, onSuccess }) {
  const { t, lang } = useT();
  const [step, setStep] = useState(0);
  const [accepted, setAccepted] = useState(false);
  const [signing, setSigning] = useState(false);
  const [signed, setSigned] = useState(false);
  const [paying, setPaying] = useState(false);

  const opp = window.DIVIDIS_DATA.opportunities.find(o => o.id === oppId);
  if (!opp) return null;

  const fee = amount * 0.01;
  const total = amount;
  const ref = `DIV-${new Date().getFullYear()}-${String(Math.floor(Math.random() * 10000)).padStart(4, '0')}`;

  const steps = [t('conf_step1'), t('conf_step2'), t('conf_step3'), t('conf_step4')];

  const sign = () => {
    setSigning(true);
    setTimeout(() => {
      setSigning(false);
      setSigned(true);
      setTimeout(() => setStep(2), 400);
    }, 1400);
  };

  const pay = () => {
    setPaying(true);
    setTimeout(() => {
      setPaying(false);
      setStep(3);
      onSuccess && onSuccess(ref);
    }, 1800);
  };

  return (
    <div className="modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={{ maxWidth: 580 }}>
        <div className="conf-head">
          <div>
            <div className="eyebrow">{t('conf_title')}</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 6, letterSpacing: '-0.02em' }}>{opp.issuer}</div>
          </div>
          <button className="modal-close" onClick={onClose}><Icon name="x" size={16} /></button>
        </div>

        {/* Stepper */}
        <div className="stepper">
          {steps.map((s, i) => (
            <React.Fragment key={i}>
              <div className={`step ${i === step ? 'active' : ''} ${i < step ? 'done' : ''}`}>
                <div className="step-circ">{i < step ? <Icon name="check" size={12} color="#062817" /> : i + 1}</div>
                <div className="step-l">{s}</div>
              </div>
              {i < steps.length - 1 && <div className={`step-line ${i < step ? 'done' : ''}`}></div>}
            </React.Fragment>
          ))}
        </div>

        <div className="conf-body">
          {step === 0 && (
            <>
              <div className="conf-summary">
                <div className="conf-row">
                  <span>{t('det_summary_capital')}</span>
                  <span className="num">{fmtEUR(amount)}</span>
                </div>
                <div className="conf-row">
                  <span>{t('det_term_yield')}</span>
                  <span className="num" style={{ color: 'var(--emerald-2)' }}>{opp.yield ? `${opp.yield.toFixed(1)}%` : opp.yieldRange}</span>
                </div>
                <div className="conf-row">
                  <span>{t('det_term_term')}</span>
                  <span>{termLabel(opp, t)}</span>
                </div>
                <div className="conf-row">
                  <span>{t('det_summary_fee')}</span>
                  <span className="num">{fmtEUR(fee)}</span>
                </div>
                <div className="conf-row total">
                  <span>{t('det_summary_total')}</span>
                  <span className="num">{fmtEUR(total)}</span>
                </div>
              </div>

              <label className="conf-check">
                <input type="checkbox" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} />
                <span>{t('conf_terms')}</span>
              </label>

              <button className="btn btn-primary btn-lg" style={{ width: '100%', marginTop: 18 }} disabled={!accepted} onClick={() => setStep(1)}>
                {t('det_continue')}
              </button>
            </>
          )}

          {step === 1 && (
            <div style={{ textAlign: 'center', padding: '20px 0' }}>
              <div className="sign-illus">
                {signed ? (
                  <Icon name="check" size={28} color="var(--emerald-2)" />
                ) : signing ? (
                  <span className="spinner" style={{ width: 28, height: 28, borderWidth: 3 }} />
                ) : (
                  <Icon name="pen" size={28} color="var(--text-2)" />
                )}
              </div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginBottom: 8, letterSpacing: '-0.02em' }}>
                {signed ? t('conf_signed') : signing ? t('conf_processing') : (lang === 'es' ? 'Firma electrónica' : 'Electronic signature')}
              </div>
              <div style={{ fontSize: 13, color: 'var(--text-3)', marginBottom: 24, maxWidth: 380, margin: '0 auto 24px' }}>
                {lang === 'es'
                  ? 'Recibirás un código por SMS al +34 ··· ··· 482. La firma queda registrada conforme al Reglamento eIDAS.'
                  : 'You\'ll receive an SMS code at +34 ··· ··· 482. Signature recorded per eIDAS Regulation.'}
              </div>
              {!signed && !signing && (
                <button className="btn btn-primary btn-lg" style={{ width: '100%' }} onClick={sign}>
                  {t('conf_btn_sign')}
                </button>
              )}
            </div>
          )}

          {step === 2 && (
            <div>
              <div className="pay-method">
                <div className="pay-row selected">
                  <Icon name="card" size={18} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{lang === 'es' ? 'Cuenta SEPA verificada' : 'Verified SEPA account'}</div>
                    <div className="num" style={{ fontSize: 11, color: 'var(--text-3)' }}>ES12 ···· ···· 4892</div>
                  </div>
                  <Icon name="check" size={14} color="var(--emerald-2)" />
                </div>
              </div>
              <div className="conf-summary">
                <div className="conf-row total">
                  <span>{t('det_summary_total')}</span>
                  <span className="num" style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--text)' }}>{fmtEUR(total)}</span>
                </div>
              </div>
              <button className="btn btn-primary btn-lg" style={{ width: '100%', marginTop: 18 }} onClick={pay} disabled={paying}>
                {paying ? <><span className="spinner" style={{ width: 14, height: 14, borderWidth: 2 }} /> {t('conf_processing')}</> : t('conf_btn_pay')}
              </button>
            </div>
          )}

          {step === 3 && (
            <div style={{ textAlign: 'center', padding: '12px 0 8px' }}>
              <div className="success-icon"><Icon name="check" size={30} color="#062817" /></div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 26, letterSpacing: '-0.025em', marginBottom: 10 }}>{t('conf_done')}</div>
              <div style={{ color: 'var(--text-2)', fontSize: 13, lineHeight: 1.6, maxWidth: 400, margin: '0 auto 22px' }}>{t('conf_done_sub')}</div>
              <div className="conf-ref">
                <span style={{ color: 'var(--text-3)' }}>{t('conf_ref')}</span>
                <span className="num" style={{ color: 'var(--emerald-2)' }}>{ref}</span>
              </div>
              <button className="btn btn-primary btn-lg" style={{ width: '100%', marginTop: 22 }} onClick={onClose}>
                {t('conf_view_pf')}
              </button>
            </div>
          )}
        </div>

        <style>{`
          .conf-head {
            display: flex; justify-content: space-between; align-items: flex-start;
            padding: 24px 28px 16px;
            border-bottom: 1px solid var(--line);
          }
          .modal-close {
            background: transparent; border: 1px solid var(--line-2);
            width: 30px; height: 30px;
            border-radius: 8px;
            color: var(--text-3); display: flex; align-items: center; justify-content: center;
            cursor: pointer;
          }
          .modal-close:hover { background: var(--surface-2); color: var(--text); }
          .stepper {
            display: flex; align-items: center;
            padding: 18px 28px;
            border-bottom: 1px solid var(--line);
            gap: 6px;
          }
          .step { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
          .step-circ {
            width: 22px; height: 22px;
            border-radius: 50%;
            border: 1px solid var(--line-3);
            display: flex; align-items: center; justify-content: center;
            font-size: 11px; font-weight: 600;
            color: var(--text-3);
            background: var(--bg-1);
          }
          .step.active .step-circ { background: var(--emerald); color: #062817; border-color: var(--emerald); }
          .step.done .step-circ { background: var(--emerald); color: #062817; border-color: var(--emerald); }
          .step-l { font-size: 12px; color: var(--text-3); }
          .step.active .step-l { color: var(--text); font-weight: 500; }
          .step.done .step-l { color: var(--text-2); }
          .step-line { flex: 1; height: 1px; background: var(--line-2); margin: 0 4px; }
          .step-line.done { background: var(--emerald); }

          .conf-body { padding: 24px 28px 28px; }
          .conf-summary {
            background: var(--bg-1);
            border-radius: 10px;
            padding: 14px 18px;
            margin-bottom: 16px;
          }
          .conf-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; color: var(--text-2); }
          .conf-row.total { border-top: 1px solid var(--line-2); margin-top: 6px; padding-top: 12px; color: var(--text); font-weight: 500; font-size: 14px; }
          .conf-check {
            display: flex; gap: 10px; align-items: flex-start;
            padding: 14px;
            background: var(--bg-1);
            border-radius: 10px;
            font-size: 12px; color: var(--text-2); line-height: 1.5;
            cursor: pointer;
          }
          .conf-check input { margin-top: 2px; accent-color: var(--emerald); }
          .sign-illus {
            width: 64px; height: 64px;
            margin: 0 auto 18px;
            background: var(--emerald-glow);
            border: 1px solid var(--emerald-line);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
          }
          .pay-method { margin-bottom: 16px; }
          .pay-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-1); }
          .pay-row.selected { border-color: var(--emerald-line); background: var(--emerald-glow); }
          .success-icon {
            width: 72px; height: 72px;
            margin: 0 auto 22px;
            background: var(--emerald);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            animation: popIn 0.4s cubic-bezier(0.16,1,0.3,1);
          }
          .conf-ref {
            display: inline-flex; gap: 10px; align-items: center;
            font-family: var(--mono); font-size: 12px;
            background: var(--emerald-glow);
            border: 1px solid var(--emerald-line);
            padding: 8px 14px; border-radius: 6px;
          }
        `}</style>
      </div>
    </div>
  );
}

window.ConfirmModal = ConfirmModal;