/* ===== Pago na Hora — Onboarding flow ===== */

function Onboarding({ onDone, goLanding }) {
  const [step, setStep] = useState(0);
  const [role, setRole] = useState(null);
  const [form, setForm] = useState({ name: '', org: '', doc: '', email: '', pixType: 'CPF', pixKey: '', team: 'so-eu', volume: '' });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const isPJ = role === 'pj';
  const steps = ['Perfil', 'Conta', 'Entidade', 'Pronto'];
  const total = steps.length;

  const next = () => setStep(s => Math.min(s + 1, total - 1));
  const back = () => (step === 0 ? goLanding() : setStep(s => s - 1));

  const canNext = () => {
    if (step === 0) return !!role;
    if (step === 1) return form.name.trim() && form.email.trim();
    if (step === 2) return isPJ ? form.org.trim() : form.pixKey.trim();
    return true;
  };

  return (
    <div className="ob">
      <div className="ob-top">
        <a className="logo" href="https://pagonahora.com/" style={{ cursor: 'pointer' }}><BrandMark /> Pago <span className="thin">na Hora</span></a>
        <div className="steps">
          <span style={{ color: 'var(--blue-600)' }}>{step + 1}</span> / {total} · {steps[step]}
        </div>
      </div>

      <div className="ob-body">
        <div className="ob-card">
          <div className="ob-prog">
            {steps.map((_, i) => <i key={i} className={i <= step ? 'on' : ''} />)}
          </div>

          {step === 0 && (
            <div>
              <h2>Qual entidade você quer cadastrar primeiro?</h2>
              <p className="lead">Você pode adicionar outras entidades depois. Cada uma pode pagar, receber, assinar contratos e guardar documentos.</p>
              <div className="choice">
                <button className={'opt' + (role === 'pj' ? ' sel' : '')} onClick={() => setRole('pj')}>
                  <span className="ic" style={{ background: 'var(--blue-50)' }}><Icon name="building" size={24} color="var(--blue-600)" /></span>
                  <span style={{ flex: 1 }}>
                    <span className="t">Organização</span>
                    <span className="d">Para LTDA, associação, condomínio ou operação com múltiplos usuários.</span>
                  </span>
                  <span className="rd"></span>
                </button>
                <button className={'opt' + (role === 'pf' ? ' sel' : '')} onClick={() => setRole('pf')}>
                  <span className="ic" style={{ background: 'var(--green-tint)' }}><Icon name="user" size={24} color="var(--green-600)" /></span>
                  <span style={{ flex: 1 }}>
                    <span className="t">Pessoa física ou MEI</span>
                    <span className="d">Para enviar ou receber pagamentos, assinar contratos e guardar comprovantes.</span>
                  </span>
                  <span className="rd"></span>
                </button>
              </div>
            </div>
          )}

          {step === 1 && (
            <div>
              <h2>Vamos criar sua conta</h2>
              <p className="lead">{isPJ ? 'Dados de quem vai administrar essa entidade.' : 'Seus dados para assinar contratos, pagar e receber.'}</p>
              <div className="field">
                <label>Seu nome completo</label>
                <input value={form.name} onChange={e => set('name', e.target.value)} placeholder="Ex: Marina Alves" />
              </div>
              <div className="field">
                <label>E-mail</label>
                <input value={form.email} onChange={e => set('email', e.target.value)} placeholder="voce@email.com" />
              </div>
              <div className="field">
                <label>Celular</label>
                <input value={form.phone} onChange={e => set('phone', e.target.value)} placeholder="(11) 90000-0000" />
                <div className="hint">Usamos para avisar de contratos e pagamentos.</div>
              </div>
            </div>
          )}

          {step === 2 && isPJ && (
            <div>
              <h2>Sobre a entidade</h2>
              <p className="lead">Aparece nos contratos, notas e comprovantes dessa entidade.</p>
              <div className="field">
                <label>Nome da entidade</label>
                <input value={form.org} onChange={e => set('org', e.target.value)} placeholder="Ex: Estúdio Norte Ltda." />
              </div>
              <div className="field">
                <label>CNPJ</label>
                <input value={form.doc} onChange={e => set('doc', e.target.value)} placeholder="00.000.000/0001-00" />
              </div>
              <div className="field">
                <label>Quantos acordos financeiros você costuma gerenciar por mês?</label>
                <select value={form.volume} onChange={e => set('volume', e.target.value)}>
                  <option value="">Selecione</option>
                  <option>1 a 5 acordos</option>
                  <option>6 a 20 acordos</option>
                  <option>21 a 50 acordos</option>
                  <option>Mais de 50</option>
                </select>
              </div>
            </div>
          )}

          {step === 2 && !isPJ && (
            <div>
              <h2>Para onde vai o seu Pix?</h2>
              <p className="lead">Cadastre a chave em que você quer receber. Pode mudar quando quiser.</p>
              <div className="field">
                <label>CPF / CNPJ</label>
                <input value={form.doc} onChange={e => set('doc', e.target.value)} placeholder="000.000.000-00" />
              </div>
              <div className="field-row">
                <div className="field" style={{ marginTop: 18 }}>
                  <label>Tipo de chave Pix</label>
                  <select value={form.pixType} onChange={e => set('pixType', e.target.value)}>
                    <option>CPF</option><option>CNPJ</option><option>Celular</option><option>E-mail</option><option>Aleatória</option>
                  </select>
                </div>
                <div className="field" style={{ marginTop: 18 }}>
                  <label>Chave Pix</label>
                  <input value={form.pixKey} onChange={e => set('pixKey', e.target.value)} placeholder="Sua chave" />
                </div>
              </div>
              <div className="field">
                <label>Você atua como</label>
                <div className="choice" style={{ gridTemplateColumns: '1fr 1fr', display: 'grid', gap: 10, marginTop: 8 }}>
                  {['PF', 'MEI'].map(k => (
                    <button key={k} className={'opt' + (form.team === k ? ' sel' : '')} style={{ padding: 14 }} onClick={() => set('team', k)}>
                      <span className="t" style={{ fontSize: 15 }}>{k === 'PF' ? 'Pessoa Física' : 'MEI'}</span>
                      <span className="rd" style={{ marginLeft: 'auto' }}></span>
                    </button>
                  ))}
                </div>
              </div>
            </div>
          )}

          {step === 3 && (
            <div style={{ textAlign: 'center', paddingTop: 8 }}>
              <div className="bigcheck"><Icon name="check" size={40} color="var(--green)" sw={3} /></div>
              <h2 style={{ marginTop: 18 }}>Tudo pronto, {form.name.split(' ')[0] || 'tudo certo'}!</h2>
              <p className="lead" style={{ maxWidth: 420, margin: '10px auto 0' }}>
                {isPJ
                  ? 'Sua entidade está criada. Vamos te levar ao painel para criar o primeiro acordo, contrato e pagamento.'
                  : 'Sua entidade está criada e sua chave Pix cadastrada. Veja seus valores a receber no painel.'}
              </p>
              <div className="panel" style={{ textAlign: 'left', marginTop: 26, padding: '4px 20px' }}>
                <div className="kv"><span className="k">Perfil</span><span className="v">{isPJ ? 'Entidade · organização' : 'Entidade individual (' + form.team + ')'}</span></div>
                <div className="kv"><span className="k">Conta</span><span className="v">{form.name || '—'}</span></div>
                {isPJ
                  ? <div className="kv"><span className="k">Entidade</span><span className="v">{form.org || '—'}</span></div>
                  : <div className="kv"><span className="k">Chave Pix</span><span className="v">{form.pixType}{form.pixKey ? ' · ' + form.pixKey : ''}</span></div>}
              </div>
            </div>
          )}

          <div className="ob-actions">
            <button className="btn btn-ghost" onClick={back}>
              <Icon name="arrowL" size={16} /> {step === 0 ? 'Site' : 'Voltar'}
            </button>
            {step < total - 1
              ? <button className="btn btn-primary grow" disabled={!canNext()} style={{ opacity: canNext() ? 1 : .5, cursor: canNext() ? 'pointer' : 'not-allowed' }} onClick={next}>Continuar <Icon name="arrowR" size={16} /></button>
              : <button className="btn btn-primary grow" onClick={() => onDone(isPJ ? 'pj' : 'pf')}>Ir para o painel <Icon name="arrowR" size={16} /></button>}
          </div>
        </div>
      </div>
    </div>
  );
}

window.Onboarding = Onboarding;