/* ===== 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: '', password: '', team: 'PF', volume: '' });
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState('');

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

  // Builds the signup payload from the collected form and creates the account.
  // Stores the session and hands the MeResponse back to the parent via onDone.
  const finish = async () => {
    if (busy) return;
    setError('');
    setBusy(true);
    try {
      const accountName = isPJ ? form.org.trim() : form.name.trim();
      const payload = {
        name: form.name.trim(),
        email: form.email.trim(),
        password: form.password,
        account_type: isPJ ? 'pj' : 'pf',
        account_name: accountName,
      };
      if (form.doc.trim()) payload.doc = form.doc.trim();

      const res = await PNH.api.auth.signup(payload);
      PNH.session.setSession({ token: res.token, account_id: res.account_id, me: res });

      let me = res;
      try {
        me = await PNH.api.auth.me();
        PNH.session.setSession({ me });
      } catch (e) {
        // Use the signup payload if /auth/me fails; the account already exists.
      }
      onDone(me);
    } catch (err) {
      setError(err.detail || err.message || 'Não foi possível criar a conta.');
      setBusy(false);
    }
  };

  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() && form.password.length >= 8;
    if (step === 2) return isPJ ? form.org.trim() : form.doc.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>Senha</label>
                <input type="password" autoComplete="new-password" value={form.password} onChange={e => set('password', e.target.value)} placeholder="Mínimo de 8 caracteres" />
                <div className="hint">Use ao menos 8 caracteres.</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>Sobre você</h2>
              <p className="lead">Esses dados aparecem nos seus contratos, pagamentos e comprovantes. Você cadastra a chave Pix depois, na hora de receber.</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" style={{ marginTop: 18 }}>
                <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. Veja seus contratos, pagamentos e 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">CPF / CNPJ</span><span className="v">{form.doc || '—'}</span></div>}
              </div>
            </div>
          )}

          {error && (
            <div className="panel" style={{ marginTop: 18, padding: '12px 14px', borderColor: '#C8453F', background: '#FDF1F0', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <Icon name="x" size={16} color="#C8453F" />
              <span style={{ color: '#9A2E29', fontSize: 13.5, fontWeight: 600, lineHeight: 1.4 }}>{error}</span>
            </div>
          )}

          <div className="ob-actions">
            <button className="btn btn-ghost" onClick={back} disabled={busy}>
              <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" disabled={busy} style={{ opacity: busy ? .5 : 1, cursor: busy ? 'not-allowed' : 'pointer' }} onClick={finish}>{busy ? 'Criando conta…' : 'Ir para o painel'} <Icon name="arrowR" size={16} /></button>}
          </div>

          <p className="lead" style={{ fontSize: 14, marginTop: 18, textAlign: 'center' }}>
            Já tem conta? <a href="#login" style={{ color: 'var(--blue-600)', fontWeight: 700 }}>Entrar</a>
          </p>
        </div>
      </div>
    </div>
  );
}

window.Onboarding = Onboarding;