/* ===== Pago na Hora — Novo pagamento / contrato wizard ===== */

function NewPayment({ onClose, onDone, preset }) {
  const [step, setStep] = useState(0);
  const [sel, setSel] = useState(preset ? [preset.id] : []);
  const [amounts, setAmounts] = useState({});
  const [withContract, setWithContract] = useState(true);
  const [template, setTemplate] = useState('t1');
  const [when, setWhen] = useState('agora');
  const [desc, setDesc] = useState('Serviços · Junho');

  const providers = PNH.providers;
  const toggle = id => setSel(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);
  const amtFor = pv => amounts[pv.id] != null ? amounts[pv.id] : pv.monthly;
  const selected = providers.filter(p => sel.includes(p.id));
  const total = selected.reduce((s, p) => s + amtFor(p), 0);
  const fee = selected.length * 1.9;

  const steps = ['Entidades', 'Detalhes', 'Revisão'];

  return (
    <div className="scrim" onClick={onClose} style={{ justifyContent: 'center', alignItems: 'flex-start', padding: '0' }}>
      <div onClick={e => e.stopPropagation()} style={{ width: '100%', maxWidth: 1100, height: '100%', background: 'var(--bg-soft)', overflowY: 'auto', animation: 'slideIn .26s' }}>
        {/* header */}
        <div style={{ position: 'sticky', top: 0, zIndex: 5, background: '#fff', borderBottom: '1px solid var(--line)', padding: '0 28px', height: 66, display: 'flex', alignItems: 'center', gap: 16 }}>
          <BrandMark size={30} />
          <div><div style={{ fontWeight: 800, fontSize: 16 }}>Novo pagamento</div></div>
          <div style={{ marginLeft: 24, display: 'flex', gap: 6 }}>
            {steps.map((s, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: i <= step ? 'var(--ink)' : 'var(--ink-3)', fontWeight: 700, fontSize: 13.5 }}>
                  <span style={{ width: 22, height: 22, borderRadius: '50%', display: 'grid', placeItems: 'center', fontSize: 12, background: i < step ? 'var(--green)' : i === step ? 'var(--blue-600)' : 'var(--bg-soft2)', color: i <= step ? '#fff' : 'var(--ink-3)' }}>
                    {i < step ? '✓' : i + 1}
                  </span>{s}
                </div>
                {i < steps.length - 1 && <span style={{ width: 24, height: 2, background: 'var(--line-2)' }}></span>}
              </div>
            ))}
          </div>
          <button className="closex" style={{ marginLeft: 'auto' }} onClick={onClose}><Icon name="x" size={18} /></button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 24, maxWidth: 1000, margin: '0 auto', padding: '28px 24px 60px' }}>
          {/* LEFT — step body */}
          <div>
            {step === 0 && (
              <div>
                <h2 style={{ fontSize: 24 }}>Quais entidades entram neste pagamento?</h2>
                <p className="sec" style={{ marginTop: 6, marginBottom: 20 }}>Selecione uma ou várias entidades para pagar de uma vez via Pix.</p>
                <div className="panel">
                  {providers.map(pv => (
                    <div key={pv.id} className="row click" style={{ display: 'grid', gridTemplateColumns: 'auto 1.7fr 0.7fr 1fr', alignItems: 'center', padding: '13px 18px', borderBottom: '1px solid var(--line)', cursor: 'pointer' }} onClick={() => toggle(pv.id)}>
                      <span className={'cbx' + (sel.includes(pv.id) ? ' on' : '')}>{sel.includes(pv.id) && <Icon name="check" size={12} color="#fff" sw={3} />}</span>
                      <div className="who" style={{ marginLeft: 12 }}><Avatar name={pv.name} size={36} /><div className="nm">{pv.name}<small>{pv.role}</small></div></div>
                      <div><KindTag kind={pv.kind} /></div>
                      <div className="amt" style={{ textAlign: 'right' }}>R$ {PNH.fmt(pv.monthly)}</div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {step === 1 && (
              <div>
                <h2 style={{ fontSize: 24 }}>Detalhes do pagamento</h2>
                <p className="sec" style={{ marginTop: 6, marginBottom: 20 }}>Ajuste valores, descrição e o que acompanha cada pagamento.</p>

                <div className="field" style={{ marginTop: 0 }}>
                  <label>Descrição (aparece no comprovante)</label>
                  <input value={desc} onChange={e => setDesc(e.target.value)} />
                </div>

                <div className="field">
                  <label>Valores por entidade</label>
                  <div className="panel" style={{ marginTop: 4 }}>
                    {selected.map(pv => (
                      <div key={pv.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', borderBottom: '1px solid var(--line)' }}>
                        <Avatar name={pv.name} size={32} />
                        <div className="nm" style={{ flex: 1, fontWeight: 700, fontSize: 14 }}>{pv.name}<small style={{ display: 'block', color: 'var(--ink-3)', fontWeight: 500, fontSize: 12 }}>{pv.pixType} · Pix</small></div>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 6, border: '1.5px solid var(--line-2)', borderRadius: 9, padding: '7px 11px', background: '#fff' }}>
                          <span className="sec" style={{ fontWeight: 700, fontSize: 13 }}>R$</span>
                          <input className="mono" value={amtFor(pv)} onChange={e => setAmounts(a => ({ ...a, [pv.id]: parseFloat(e.target.value) || 0 }))} style={{ border: 0, outline: 0, width: 80, fontSize: 14, fontWeight: 600, fontFamily: 'var(--mono)', textAlign: 'right' }} />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="field">
                  <label>Quando enviar</label>
                  <div className="choice" style={{ gridTemplateColumns: '1fr 1fr', display: 'grid', gap: 10, marginTop: 4 }}>
                    <button className={'opt' + (when === 'agora' ? ' sel' : '')} style={{ padding: 15 }} onClick={() => setWhen('agora')}>
                      <span className="ic" style={{ width: 38, height: 38, background: 'var(--green-tint)' }}><Icon name="bolt" size={18} color="var(--green)" /></span>
                      <span style={{ flex: 1 }}><span className="t" style={{ fontSize: 15 }}>Agora</span><span className="d">Pix na hora</span></span>
                      <span className="rd"></span>
                    </button>
                    <button className={'opt' + (when === 'agendar' ? ' sel' : '')} style={{ padding: 15 }} onClick={() => setWhen('agendar')}>
                      <span className="ic" style={{ width: 38, height: 38, background: 'var(--blue-50)' }}><Icon name="calendar" size={18} color="var(--blue-600)" /></span>
                      <span style={{ flex: 1 }}><span className="t" style={{ fontSize: 15 }}>Agendar</span><span className="d">Escolha a data</span></span>
                      <span className="rd"></span>
                    </button>
                  </div>
                </div>

                <div className="field">
                  <label style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <span className={'cbx' + (withContract ? ' on' : '')} onClick={() => setWithContract(v => !v)}>{withContract && <Icon name="check" size={12} color="#fff" sw={3} />}</span>
                    Gerar contrato junto do pagamento
                  </label>
                  {withContract && (
                    <select value={template} onChange={e => setTemplate(e.target.value)} style={{ marginTop: 6 }}>
                      {PNH.contractTemplates.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
                    </select>
                  )}
                </div>
              </div>
            )}

            {step === 2 && (
              <div>
                <h2 style={{ fontSize: 24 }}>Revise e confirme</h2>
                <p className="sec" style={{ marginTop: 6, marginBottom: 20 }}>{when === 'agora' ? 'Os Pix serão enviados imediatamente após confirmar.' : 'Os pagamentos serão agendados.'}</p>
                <div className="panel">
                  <div className="panel-head"><h3>{selected.length} {selected.length === 1 ? 'pagamento' : 'pagamentos'}</h3><div className="right"><span className="badge badge-blue">{withContract ? 'Com contrato' : 'Sem contrato'}</span></div></div>
                  {selected.map(pv => (
                    <div key={pv.id} className="row" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr', alignItems: 'center', padding: '13px 18px', borderBottom: '1px solid var(--line)' }}>
                      <div className="who"><Avatar name={pv.name} size={34} /><div className="nm">{pv.name}<small>{pv.pixType} · {pv.doc}</small></div></div>
                      <div className="sec" style={{ fontSize: 13 }}>{desc}</div>
                      <div className="amt" style={{ textAlign: 'right' }}>R$ {PNH.fmt(amtFor(pv))}</div>
                    </div>
                  ))}
                </div>
                <div className="panel" style={{ marginTop: 16, padding: 18, display: 'flex', gap: 12, alignItems: 'center', background: 'var(--blue-50)', borderColor: 'var(--blue-100)' }}>
                  <Icon name="shield" size={22} color="var(--blue-600)" />
                  <div className="sec" style={{ fontSize: 13.5, color: 'var(--ink-2)' }}>Cada parte recebe o comprovante automaticamente. Notas fiscais serão solicitadas quando necessário.</div>
                </div>
              </div>
            )}
          </div>

          {/* RIGHT — summary */}
          <div>
            <div className="summary">
              <div style={{ fontWeight: 800, fontSize: 15, marginBottom: 14 }}>Resumo</div>
              <div className="kv"><span className="k">Entidades</span><span className="v">{selected.length}</span></div>
              <div className="kv"><span className="k">Soma dos Pix</span><span className="v mono">R$ {PNH.fmt(total)}</span></div>
              <div className="kv"><span className="k">Tarifa ({selected.length} × R$ 1,90)</span><span className="v mono">R$ {PNH.fmt(fee)}</span></div>
              <div className="kv"><span className="k">Quando</span><span className="v">{when === 'agora' ? 'Imediato' : 'Agendado'}</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 14, paddingTop: 14, borderTop: '2px solid var(--line-2)' }}>
                <span style={{ fontWeight: 700 }}>Total</span>
                <span className="mono" style={{ fontWeight: 800, fontSize: 22 }}>R$ {PNH.fmt(total + fee)}</span>
              </div>

              <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {step < 2
                  ? <button className="btn btn-primary" disabled={selected.length === 0} style={{ opacity: selected.length ? 1 : .5, cursor: selected.length ? 'pointer' : 'not-allowed' }} onClick={() => setStep(s => s + 1)}>Continuar <Icon name="arrowR" size={16} /></button>
                  : <button className="btn btn-green" onClick={() => onDone({ count: selected.length, total: total + fee, when })}><Icon name="bolt" size={16} color="#fff" /> {when === 'agora' ? 'Pagar agora' : 'Agendar pagamentos'}</button>}
                {step > 0 && <button className="btn btn-ghost" onClick={() => setStep(s => s - 1)}><Icon name="arrowL" size={16} /> Voltar</button>}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* success overlay after paying */
function PaySuccess({ result, onClose }) {
  return (
    <div className="scrim" onClick={onClose} style={{ justifyContent: 'center', alignItems: 'center', padding: 24 }}>
      <div onClick={e => e.stopPropagation()} className="panel" style={{ width: 440, maxWidth: '94vw', padding: 32, textAlign: 'center', animation: 'slideIn .26s' }}>
        <div className="bigcheck"><Icon name="check" size={40} color="var(--green)" sw={3} /></div>
        <h2 style={{ fontSize: 26, marginTop: 16 }}>{result.when === 'agora' ? 'Pix enviado!' : 'Pagamentos agendados!'}</h2>
        <p className="sec" style={{ marginTop: 8 }}>
          {result.when === 'agora'
            ? `${result.count} ${result.count === 1 ? 'pagamento foi enviado' : 'pagamentos foram enviados'} via Pix.`
            : `${result.count} ${result.count === 1 ? 'pagamento agendado' : 'pagamentos agendados'} com sucesso.`}
        </p>
        <div className="panel" style={{ background: 'var(--bg-soft)', marginTop: 20, padding: '4px 18px' }}>
          <div className="kv"><span className="k">Total</span><span className="v mono">R$ {PNH.fmt(result.total)}</span></div>
          <div className="kv"><span className="k">Comprovantes</span><span className="v" style={{ color: 'var(--green-600)' }}>Enviados</span></div>
          <div className="kv"><span className="k">ID do lote</span><span className="v mono">LOTE-{Math.floor(Math.random() * 9000 + 1000)}</span></div>
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
          <button className="btn btn-ghost" style={{ flex: 1 }}><Icon name="download" size={15} /> Comprovantes</button>
          <button className="btn btn-primary" style={{ flex: 1 }} onClick={onClose}>Concluir</button>
        </div>
      </div>
    </div>
  );
}

window.NewPayment = NewPayment;
window.PaySuccess = PaySuccess;