// ============================================================
// FINAFAMILY — Onboarding Wizard (5 passos)
// ============================================================

const { useState: useStateOB } = React;

// ── Step progress indicator ────────────────────────────────
const OB_STEPS = [
  { num: 1, label: 'Sua Conta'  },
  { num: 2, label: 'Família'    },
  { num: 3, label: 'Rendas'     },
  { num: 4, label: 'Pagamentos' },
  { num: 5, label: 'Dia a Dia'  },
];

function OBProgress({ current }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 28 }}>
      {OB_STEPS.map((s, i) => {
        const done   = current > s.num;
        const active = current === s.num;
        return (
          <React.Fragment key={s.num}>
            {i > 0 && (
              <div style={{ height: 2, flex: 1, maxWidth: 36, background: done ? 'var(--accent)' : 'var(--border)', transition: 'background 350ms', margin: '0 4px' }} />
            )}
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5 }}>
              <div style={{
                width: 30, height: 30, borderRadius: '50%', flexShrink: 0,
                background: done || active ? 'var(--action-bg)' : 'var(--surface-2)',
                border: `2px solid ${done || active ? 'var(--accent)' : 'var(--border)'}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transition: 'all 300ms',
              }}>
                {done
                  ? <Icon name="Check" size={13} style={{ color: 'white' }} />
                  : <span style={{ fontSize: 12, fontWeight: 700, color: active ? 'white' : 'var(--text-3)' }}>{s.num}</span>
                }
              </div>
              <span style={{ fontSize: 10, fontWeight: active ? 700 : 400, color: ffReadableColor(active ? 'var(--accent)' : 'var(--text-3)'), whiteSpace: 'nowrap' }}>{s.label}</span>
            </div>
          </React.Fragment>
        );
      })}
    </div>
  );
}

// ── Step 1: Account ────────────────────────────────────────
function OBStepAccount({ account, set, error }) {
  return (
    <div>
      <div style={{ marginBottom: 22 }}>
        <div style={{ fontSize: 21, fontWeight: 800, color: 'var(--text-1)', letterSpacing: '-0.02em' }}>Crie sua conta</div>
        <div style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 5 }}>Você será o administrador principal da família</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <FormField label="Nome completo">
          <Input value={account.name} onChange={e => set('name', e.target.value)} placeholder="Ex: Carlos Silva" />
        </FormField>
        <FormField label="E-mail">
          <Input type="email" value={account.email} onChange={e => set('email', e.target.value)} placeholder="carlos@familia.com" />
        </FormField>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <FormField label="Senha" hint="Mínimo 8 caracteres">
            <Input type="password" value={account.password} onChange={e => set('password', e.target.value)} placeholder="Mínimo 8 caracteres" />
          </FormField>
          <FormField label="Confirmar senha">
            <Input type="password" value={account.confirm} onChange={e => set('confirm', e.target.value)} placeholder="Repita a senha" />
          </FormField>
        </div>
        {account.password.length > 0 && (
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {[
              { ok: account.password.length >= 8,           label: '8+ caracteres' },
              { ok: /[A-Z]/.test(account.password),          label: 'Maiúscula'    },
              { ok: /[0-9]/.test(account.password),          label: 'Número'       },
              { ok: account.password === account.confirm && account.confirm.length > 0, label: 'Coincidem' },
            ].map(r => (
              <div key={r.label} style={{ display: 'flex', alignItems: 'center', gap: 3, fontSize: 11, color: ffReadableColor(r.ok ? "var(--success)" : 'var(--text-3)'), background: r.ok ? "var(--success-bg)" : 'var(--surface-2)', borderRadius: 5, padding: '3px 7px' }}>
                <Icon name={r.ok ? 'Check' : 'X'} size={10} /> {r.label}
              </div>
            ))}
          </div>
        )}
        {error && (
          <div style={{ padding: '10px 14px', background: "var(--danger-bg)", border: '1px solid #FCA5A5', borderRadius: 10, fontSize: 13, color: ffReadableColor("var(--danger)") }}>{error}</div>
        )}
      </div>
    </div>
  );
}

// ── Step 2: Members ────────────────────────────────────────
function OBStepMembers({ masterMember, extras, setExtras }) {
  function addExtra(role) {
    setExtras(prev => [...prev, { name: '', role, email: '', password: '', showPass: false, _id: Date.now() }]);
  }
  function updExtra(idx, k, v) {
    setExtras(prev => prev.map((m, i) => i === idx ? { ...m, [k]: v } : m));
  }
  function delExtra(idx) {
    setExtras(prev => prev.filter((_, i) => i !== idx));
  }
  const hasMaster2 = extras.some(m => m.role === 'MASTER2');

  return (
    <div>
      <div style={{ marginBottom: 22 }}>
        <div style={{ fontSize: 21, fontWeight: 800, color: 'var(--text-1)', letterSpacing: '-0.02em' }}>Quem faz parte da família?</div>
        <div style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 5 }}>Adicione os membros que vão usar o Finafamily</div>
      </div>

      {/* Master 1 — non-removable */}
      {masterMember && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: 'var(--accent-tint)', border: '1px solid color-mix(in srgb, var(--accent) 24%, transparent)', borderRadius: 12, marginBottom: 10 }}>
          <Avatar member={masterMember} size={36} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-1)' }}>{masterMember.name}</div>
            <div style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 600 }}>Master 1 — Administrador</div>
          </div>
          <Icon name="ShieldCheck" size={16} style={{ color: 'var(--accent)' }} />
        </div>
      )}

      {/* Extra members */}
      {extras.map((m, idx) => (
        <div key={m._id} style={{ background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 12, padding: 14, marginBottom: 8 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
            <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em', opacity: 1 }}>
              {m.role === 'MASTER2' ? '👫 Cônjuge / Master 2' : '👶 Filho(a)'}
            </span>
            <button className="ff-button" onClick={() => delExtra(idx)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', padding: 2 }}>
              <Icon name="X" size={14} />
            </button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <FormField label="Nome completo">
              <Input value={m.name} onChange={e => updExtra(idx, 'name', e.target.value)} placeholder="Nome" />
            </FormField>
            <FormField label="E-mail (para login)">
              <Input type="email" value={m.email} onChange={e => updExtra(idx, 'email', e.target.value)} placeholder="email@exemplo.com" />
            </FormField>
            <FormField label="Senha de acesso">
              <Input type={m.showPass ? 'text' : 'password'} value={m.password} onChange={e => updExtra(idx, 'password', e.target.value)} placeholder="Mínimo 8 caracteres" />
            </FormField>
            <div style={{ display: 'flex', alignItems: 'flex-end', paddingBottom: 2 }}>
              <button className="ff-button"
                type="button"
                onClick={() => updExtra(idx, 'showPass', !m.showPass)}
                style={{ padding: '9px 12px', background: 'var(--surface-3)', border: '1px solid var(--border)', borderRadius: 10, color: 'var(--text-2)', fontSize: 12, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, width: '100%', justifyContent: 'center' }}
              >
                <Icon name={m.showPass ? 'EyeOff' : 'Eye'} size={13} />
                {m.showPass ? 'Ocultar' : 'Mostrar'} senha
              </button>
            </div>
          </div>
          {!m.email && !m.password && (
            <div style={{ marginTop: 8, fontSize: 11, color: 'var(--text-3)', background: 'var(--surface-3)', borderRadius: 8, padding: '6px 10px' }}>
              💡 Sem e-mail/senha, o acesso poderá ser configurado depois em <strong>Configurações → Membros</strong>
            </div>
          )}
        </div>
      ))}

      {/* Add buttons */}
      <div style={{ display: 'flex', gap: 8, marginTop: 6 }}>
        {!hasMaster2 && (
          <button className="ff-button" onClick={() => addExtra('MASTER2')} style={{ flex: 1, padding: '10px', background: 'var(--surface-2)', border: '1px dashed var(--border)', borderRadius: 10, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 12.5, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
            <Icon name="UserPlus" size={14} /> Adicionar cônjuge
          </button>
        )}
        <button className="ff-button" onClick={() => addExtra('CHILD')} style={{ flex: 1, padding: '10px', background: 'var(--surface-2)', border: '1px dashed var(--border)', borderRadius: 10, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 12.5, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
          <Icon name="Baby" size={14} /> Adicionar filho(a)
        </button>
      </div>
      <div style={{ marginTop: 12, fontSize: 12, color: 'var(--text-3)', textAlign: 'center' }}>
        Pode pular — adicione membros depois em Configurações
      </div>
    </div>
  );
}

// ── Step 3: Incomes ────────────────────────────────────────
function OBStepIncomes({ allMembers, incomes, setIncomes, incomeSources }) {
  function addInc(memberId) {
    setIncomes(prev => [...prev, { memberId, desc: '', value: '', source: incomeSources[0]?.key || 'salary', recurrence: 'monthly', _id: Date.now() }]);
  }
  function updInc(idx, k, v) {
    setIncomes(prev => prev.map((i, j) => j === idx ? { ...i, [k]: v } : i));
  }
  function delInc(idx) {
    setIncomes(prev => prev.filter((_, i) => i !== idx));
  }

  return (
    <div>
      <div style={{ marginBottom: 22 }}>
        <div style={{ fontSize: 21, fontWeight: 800, color: 'var(--text-1)', letterSpacing: '-0.02em' }}>Fontes de renda</div>
        <div style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 5 }}>Cadastre a renda mensal de cada membro</div>
      </div>

      {incomes.map((inc, idx) => {
        const member = allMembers.find(m => m.id === inc.memberId);
        return (
          <div key={inc._id} style={{ background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 12, padding: 14, marginBottom: 10 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                {member && <Avatar member={member} size={22} />}
                <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-2)' }}>{member?.name?.split(' ')[0] || 'Membro'}</span>
              </div>
              <button className="ff-button" onClick={() => delInc(idx)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', padding: 2 }}>
                <Icon name="X" size={14} />
              </button>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              <FormField label="Descrição">
                <Input value={inc.desc} onChange={e => updInc(idx, 'desc', e.target.value)} placeholder="Ex: Salário maio" />
              </FormField>
              <FormField label="Valor (R$)">
                <Input type="number" value={inc.value} onChange={e => updInc(idx, 'value', e.target.value)} placeholder="0,00" />
              </FormField>
              <FormField label="Fonte">
                <Select value={inc.source} onChange={e => updInc(idx, 'source', e.target.value)}>
                  {incomeSources.map(s => <option key={s.key} value={s.key}>{s.label}</option>)}
                </Select>
              </FormField>
              <FormField label="Recorrência">
                <Select value={inc.recurrence} onChange={e => updInc(idx, 'recurrence', e.target.value)}>
                  <option value="monthly">Mensal</option>
                  <option value="single">Única</option>
                </Select>
              </FormField>
            </div>
          </div>
        );
      })}

      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {allMembers.map(m => (
          <button className="ff-button" key={m.id} onClick={() => addInc(m.id)} style={{ padding: '8px 14px', background: 'var(--surface-2)', border: '1px dashed var(--border)', borderRadius: 20, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 12, display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon name="Plus" size={12} /> Renda de {m.name.split(' ')[0]}
          </button>
        ))}
      </div>
      <div style={{ marginTop: 12, fontSize: 12, color: 'var(--text-3)', textAlign: 'center' }}>
        Pode pular — cadastre depois em Receitas
      </div>
    </div>
  );
}

// ── Step 4: Payments ───────────────────────────────────────
function OBStepPayments({ payments, setPayments }) {
  function addPM() {
    setPayments(prev => [...prev, { name: '', type: 'credit', bank: '', limit: '', closingDay: '', dueDay: '', _id: Date.now() }]);
  }
  function updPM(idx, k, v) {
    setPayments(prev => prev.map((p, i) => i === idx ? { ...p, [k]: v } : p));
  }
  function delPM(idx) {
    setPayments(prev => prev.filter((_, i) => i !== idx));
  }

  return (
    <div>
      <div style={{ marginBottom: 22 }}>
        <div style={{ fontSize: 21, fontWeight: 800, color: 'var(--text-1)', letterSpacing: '-0.02em' }}>Meios de pagamento</div>
        <div style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 5 }}>Cartões e contas que você usa no dia a dia</div>
      </div>

      {payments.map((pm, idx) => (
        <div key={pm._id} style={{ background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 12, padding: 14, marginBottom: 10 }}>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 6 }}>
            <button className="ff-button" onClick={() => delPM(idx)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', padding: 2 }}>
              <Icon name="X" size={14} />
            </button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            <FormField label="Nome">
              <Input value={pm.name} onChange={e => updPM(idx, 'name', e.target.value)} placeholder="Ex: Nubank" />
            </FormField>
            <FormField label="Tipo">
              <Select value={pm.type} onChange={e => updPM(idx, 'type', e.target.value)}>
                <option value="credit">Cartão de Crédito</option>
                <option value="debit">Cartão de Débito</option>
                <option value="account">Conta Corrente</option>
                <option value="pix">Pix</option>
                <option value="cash">Dinheiro</option>
              </Select>
            </FormField>
            <FormField label="Banco / Bandeira">
              <Input value={pm.bank} onChange={e => updPM(idx, 'bank', e.target.value)} placeholder="Ex: Itaú Visa" />
            </FormField>
            {pm.type === 'credit' && (
              <FormField label="Limite (R$)">
                <Input type="number" value={pm.limit} onChange={e => updPM(idx, 'limit', e.target.value)} placeholder="0,00" />
              </FormField>
            )}
            {pm.type === 'credit' && (
              <>
                <FormField label="Fechamento (dia)">
                  <Input type="number" min="1" max="31" value={pm.closingDay} onChange={e => updPM(idx, 'closingDay', e.target.value)} placeholder="Ex: 5" />
                </FormField>
                <FormField label="Vencimento (dia)">
                  <Input type="number" min="1" max="31" value={pm.dueDay} onChange={e => updPM(idx, 'dueDay', e.target.value)} placeholder="Ex: 15" />
                </FormField>
              </>
            )}
          </div>
        </div>
      ))}

      <button className="ff-button" onClick={addPM} style={{ width: '100%', padding: '11px', background: 'var(--surface-2)', border: '1px dashed var(--border)', borderRadius: 10, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 13, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
        <Icon name="Plus" size={14} /> Adicionar cartão ou conta
      </button>
      <div style={{ marginTop: 12, fontSize: 12, color: 'var(--text-3)', textAlign: 'center' }}>
        Pode pular — adicione depois em Configurações → Pagamentos
      </div>
    </div>
  );
}

// ── Step 5: Dia a Dia ──────────────────────────────────────
function OBStepDiaDia({ allMembers, diaDiaLimits, setDiaDiaLimits }) {
  return (
    <div>
      <div style={{ marginBottom: 22 }}>
        <div style={{ fontSize: 21, fontWeight: 800, color: 'var(--text-1)', letterSpacing: '-0.02em' }}>Limite Dia a Dia</div>
        <div style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 5 }}>Quanto cada membro pode gastar em pequenas despesas por mês?</div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 18 }}>
        {allMembers.map(m => (
          <div key={m.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', background: 'var(--surface-2)', borderRadius: 12, border: '1px solid var(--border)' }}>
            <Avatar member={m} size={38} />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-1)' }}>{m.name.split(' ')[0]}</div>
              <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{m.role}</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
              <span style={{ fontSize: 12, color: 'var(--text-3)', fontWeight: 600 }}>R$</span>
              <input
                type="number"
                value={diaDiaLimits[m.id] || ''}
                onChange={e => setDiaDiaLimits(prev => ({ ...prev, [m.id]: e.target.value }))}
                placeholder="300"
                style={{ width: 76, padding: '8px 10px', background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 8, color: 'var(--text-1)', fontSize: 14, fontWeight: 700, outline: 'none', textAlign: 'right', boxSizing: 'border-box' }}
              />
              <span style={{ fontSize: 12, color: 'var(--text-3)' }}>/mês</span>
            </div>
          </div>
        ))}
      </div>

      <div style={{ padding: '14px 16px', background: 'var(--accent-tint)', borderRadius: 12, border: '1px solid color-mix(in srgb, var(--accent) 24%, transparent)' }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
          <Icon name="Zap" size={15} style={{ color: 'var(--accent)', flexShrink: 0, marginTop: 2 }} />
          <div style={{ fontSize: 12.5, color: 'var(--text-2)', lineHeight: 1.6 }}>
            O <strong>Dia a Dia</strong> é um limite para pequenos gastos não planejados — lanches, corridas de app, compras rápidas. Ideal para manter o controle sem complicar.
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Main Onboarding component ──────────────────────────────
function Onboarding({ onComplete, onGoToLogin }) {
  const { register, addMember, addIncome, addPaymentMethod, updateMember, members: ctxMembers, incomeSources, loadData } = useApp();

  const [step,   setStep]   = useStateOB(0);   // 0 = welcome, 1-5 = wizard
  const [saving, setSaving] = useStateOB(false);
  const [error,  setError]  = useStateOB('');

  // Step 1
  const [account, setAccount] = useStateOB({ name: '', email: '', password: '', confirm: '' });
  function setAcct(k, v) { setAccount(f => ({ ...f, [k]: v })); setError(''); }

  // Step 2
  const [masterMember, setMasterMember] = useStateOB(null);
  const [extras,       setExtras]       = useStateOB([]);

  // Step 3
  const [incomes, setIncomes] = useStateOB([]);

  // Step 4
  const [payments, setPayments] = useStateOB([]);

  // Step 5
  const [diaDiaLimits, setDiaDiaLimits] = useStateOB({});

  // All members after registration
  const allMembers = ctxMembers.length > 0
    ? ctxMembers
    : (masterMember ? [masterMember, ...extras.filter(m => m.name.trim()).map((m, i) => ({ ...m, id: 'tmp_' + i }))] : []);

  // ── Navigation ─────────────────────────────────────────
  async function handleNext() {
    setError('');

    if (step === 0) { setStep(1); return; }

    // ── Step 1: Register ──────────────────────────────────
    if (step === 1) {
      if (!account.name.trim())        { setError('Informe seu nome completo'); return; }
      if (!account.email.trim())       { setError('Informe seu e-mail'); return; }
      if (account.password.length < 8) { setError('A senha deve ter no mínimo 8 caracteres'); return; }
      if (account.password !== account.confirm) { setError('As senhas não conferem'); return; }

      setSaving(true);
      try {
        const member = await register(account.name.trim(), account.email.trim(), account.password);
        setMasterMember(member);
        setDiaDiaLimits({ [member.id]: '300' });
        setStep(2);
      } catch (err) {
        // Erros específicos da API
        if (err.status === 409) {
          setError('Este e-mail já está cadastrado. Volte e faça login.');
        } else if (err.status === 400 && err.message) {
          setError(err.message);
        } else {
          setError(err.message || 'Erro ao criar conta. Tente novamente.');
        }
      } finally {
        setSaving(false);
      }
      return;
    }

    // ── Step 2: Add members ───────────────────────────────
    if (step === 2) {
      setSaving(true);
      try {
        for (const m of extras.filter(m => m.name.trim())) {
          const created = await addMember({
            name: m.name.trim(),
            role: m.role,
            email: m.email || undefined,
            password: m.password && m.password.length >= 8 ? m.password : undefined,
          });
          setDiaDiaLimits(prev => ({ ...prev, [created.id]: '200' }));
        }
        await loadData(new Date().getFullYear(), new Date().getMonth() + 1);
        setStep(3);
      } catch (err) {
        setError(err.message || 'Erro ao salvar membros');
      } finally {
        setSaving(false);
      }
      return;
    }

    // ── Step 3: Incomes ───────────────────────────────────
    if (step === 3) {
      setSaving(true);
      try {
        const today = todayLocalISO();
        for (const inc of incomes.filter(i => i.desc.trim() && i.value)) {
          await addIncome({ desc: inc.desc.trim(), value: parseFloat(inc.value), date: today, source: inc.source || 'salary', recurrence: inc.recurrence || 'monthly', memberId: inc.memberId, status: 'received' });
        }
      } catch { /* continue */ }
      setSaving(false);
      setStep(4);
      return;
    }

    // ── Step 4: Payments ──────────────────────────────────
    if (step === 4) {
      setSaving(true);
      try {
        for (const pm of payments.filter(p => p.name.trim())) {
          await addPaymentMethod({
            name: pm.name.trim(), type: pm.type || 'credit', bank: pm.bank || '',
            limit: pm.limit ? parseFloat(pm.limit) : undefined,
            closingDay: pm.closingDay ? parseInt(pm.closingDay) : undefined,
            dueDay: pm.dueDay ? parseInt(pm.dueDay) : undefined,
            memberId: masterMember?.id || (ctxMembers[0]?.id || ''),
          });
        }
      } catch { /* continue */ }
      setSaving(false);
      setStep(5);
      return;
    }

    // ── Step 5: Dia a Dia + Finish ────────────────────────
    if (step === 5) {
      setSaving(true);
      try {
        for (const [memberId, limit] of Object.entries(diaDiaLimits)) {
          if (limit) await updateMember(memberId, { diaDiaLimit: parseFloat(limit) });
        }
        await loadData(new Date().getFullYear(), new Date().getMonth() + 1);
        onComplete();
      } catch {
        onComplete();
      } finally {
        setSaving(false);
      }
    }
  }

  function handleBack() {
    setError('');
    if (step > 1) setStep(s => s - 1);
    else if (step === 1) setStep(0);
  }

  // ── Layout helpers ──────────────────────────────────────
  const outerStyle = {
    minHeight: '100vh',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    background: 'var(--canvas-bg)', padding: '20px',
    boxSizing: 'border-box',
  };
  const cardStyle = {
    width: '100%', maxWidth: 520, background: 'var(--card-bg)',
    border: '1px solid var(--border)', borderRadius: 18, padding: 28,
    boxSizing: 'border-box',
  };

  // ── STEP 0: Welcome ─────────────────────────────────────
  if (step === 0) {
    return (
      <div className="ff-onboarding-panel" style={outerStyle}>
        <div className="ff-auth-card" style={{ ...cardStyle, textAlign: 'center' }}>
          {/* Logo */}
          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}>
            <div style={{ width: 68, height: 68, borderRadius: 20, background: "var(--action-gradient)", display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 8px 32px #0D948844' }}>
              <svg width="34" height="34" viewBox="0 0 24 24" fill="none">
                <path d="M12 2L3 7v10l9 5 9-5V7L12 2z" stroke="white" strokeWidth="2" strokeLinejoin="round" fill="rgba(255,255,255,0.15)"/>
                <path d="M12 12l-5-3M12 12l5-3M12 12v6" stroke="white" strokeWidth="1.5" strokeLinecap="round"/>
              </svg>
            </div>
          </div>

          <div style={{ fontSize: 34, letterSpacing: '-0.03em', fontWeight: 300, color: 'var(--text-1)', marginBottom: 6 }}>
            Fina<span style={{ fontWeight: 900 }}>family</span><span style={{ color: 'var(--accent)' }}>.</span>
          </div>
          <div style={{ fontSize: 15, color: 'var(--text-2)', fontWeight: 500, marginBottom: 6 }}>
            Suas finanças. Sua família. Em ordem.
          </div>
          <div style={{ fontSize: 13, color: 'var(--text-3)', marginBottom: 30, lineHeight: 1.65, maxWidth: 380, margin: '0 auto 30px' }}>
            Organize receitas, despesas, investimentos e limites de gastos para toda a família — num só lugar.
          </div>

          {/* Feature grid */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 28, textAlign: 'left' }}>
            {[
              ['LayoutDashboard', 'Dashboard familiar',  'Visão completa em tempo real'],
              ['Wallet',          'Controle de despesas','Compartilhadas e parceladas'],
              ['TrendingUp',      'Investimentos',       'Acompanhe sua carteira'],
              ['Zap',             'Dia a Dia',           'Limite de gastos diários'],
            ].map(([icon, title, desc]) => (
              <div key={title} style={{ padding: '12px 14px', background: 'var(--surface-2)', borderRadius: 12, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <Icon name={icon} size={16} style={{ color: 'var(--accent)', flexShrink: 0, marginTop: 2 }} />
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--text-1)' }}>{title}</div>
                  <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2 }}>{desc}</div>
                </div>
              </div>
            ))}
          </div>

          <button className="ff-button ff-action ff-primary-action" onClick={handleNext} style={{ width: '100%', padding: '14px', background: "var(--action-gradient)", border: 'none', borderRadius: 12, color: 'white', fontWeight: 800, cursor: 'pointer', fontSize: 15, marginBottom: 12, letterSpacing: '-0.01em', boxShadow: '0 4px 16px #0D948840' }}>
            Criar minha conta →
          </button>
          <button className="ff-button" onClick={onGoToLogin} style={{ width: '100%', padding: '11px', background: 'transparent', border: '1px solid var(--border)', borderRadius: 12, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 13.5 }}>
            Já tenho conta — Entrar
          </button>
        </div>
      </div>
    );
  }

  // ── Steps 1-5 ──────────────────────────────────────────
  return (
    <div style={{ ...outerStyle, alignItems: 'flex-start', paddingTop: 40, paddingBottom: 40 }}>
      <div style={cardStyle}>
        {/* Mini header */}
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <span style={{ fontSize: 15, letterSpacing: '-0.02em', color: 'var(--text-1)' }}>
            Fina<span style={{ fontWeight: 800 }}>family</span><span style={{ color: 'var(--accent)' }}>.</span>
          </span>
        </div>

        <OBProgress current={step} />

        {/* Step content */}
        {step === 1 && <OBStepAccount   account={account} set={setAcct} error={error} />}
        {step === 2 && <OBStepMembers   masterMember={masterMember || (ctxMembers[0] || null)} extras={extras} setExtras={setExtras} />}
        {step === 3 && <OBStepIncomes   allMembers={allMembers} incomes={incomes} setIncomes={setIncomes} incomeSources={incomeSources} />}
        {step === 4 && <OBStepPayments  payments={payments} setPayments={setPayments} />}
        {step === 5 && <OBStepDiaDia    allMembers={allMembers} diaDiaLimits={diaDiaLimits} setDiaDiaLimits={setDiaDiaLimits} />}

        {/* General error (non-step-1) */}
        {error && step !== 1 && (
          <div style={{ padding: '10px 14px', background: "var(--danger-bg)", border: '1px solid #FCA5A5', borderRadius: 10, fontSize: 13, color: ffReadableColor("var(--danger)"), marginTop: 16 }}>{error}</div>
        )}

        {/* Navigation */}
        <div style={{ display: 'flex', gap: 10, marginTop: 24 }}>
          {step >= 1 && (
            <button className="ff-button" onClick={handleBack} disabled={saving} style={{ flex: 1, padding: '12px', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 10, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 14 }}>
              ← Voltar
            </button>
          )}
          <button className="ff-button ff-action ff-primary-action" onClick={handleNext} disabled={saving} style={{ flex: 3, padding: '12px', background: "var(--action-bg)", border: 'none', borderRadius: 10, color: 'white', fontWeight: 700, cursor: saving ? 'default' : 'pointer', fontSize: 14, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, opacity: saving ? 0.72 : 1 }}>
            {saving
              ? <><span style={{ width: 15, height: 15, border: '2px solid white', borderTopColor: 'transparent', borderRadius: '50%', display: 'inline-block', animation: 'spin 0.7s linear infinite' }} /> Salvando…</>
              : step === 5
                ? <><Icon name="Check" size={15} /> Concluir e entrar</>
                : <>Próximo →</>
            }
          </button>
        </div>

        {step === 1 && (
          <div style={{ textAlign: 'center', marginTop: 14 }}>
            <button className="ff-button" onClick={onGoToLogin} style={{ background: 'none', border: 'none', color: 'var(--text-3)', fontSize: 12, cursor: 'pointer' }}>
              Já tem conta? <span style={{ color: 'var(--accent)', fontWeight: 600 }}>Entrar</span>
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Onboarding });