// ============================================================
// FINAFAMILY — Relatórios, Notificações, Configurações
// ============================================================

const { useState, useMemo, useEffect } = React;



// ── Relatórios ─────────────────────────────────────────────
function Relatorios({ onNavigate }) {
  const { expenses, incomes, members, categories, balancete, exportToCSV, currentMonth, currentMember, paymentMethods, fetchMonthExpenses, fetchMonthIncomes } = useApp();
  const [toast, setToast] = useState(null);

  // Garante que os últimos 6 meses (incluindo o atual) estejam carregados —
  // o resto do app só pré-carrega meses vizinhos.
  useEffect(() => {
    for (let i = 0; i < 6; i++) {
      const d = new Date(currentMonth.year, currentMonth.month - 1 - i, 1);
      fetchMonthExpenses(d.getFullYear(), d.getMonth() + 1);
      fetchMonthIncomes(d.getFullYear(), d.getMonth() + 1);
    }
  }, [currentMonth.year, currentMonth.month]);

  // Histórico real dos últimos 6 meses do membro logado (antes eram números
  // fixos de exemplo, com meses fixos "Dez…Mai"). Despesa = regra canônica do
  // mês (o que sai do bolso dele), receita = receitas dele no mês.
  const MONTHS_SHORT_PT = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
  const history = useMemo(() => Array.from({ length: 6 }, (_, idx) => {
    const d = new Date(currentMonth.year, currentMonth.month - 1 - (5 - idx), 1);
    const y = d.getFullYear(), m = d.getMonth() + 1;
    const exp = monthExpensesTotal(expenses, currentMember?.id, paymentMethods, y, m, 0);
    const inc = incomes.filter(i => {
      const di = parseLocalDate(i.date);
      return i.memberId === currentMember?.id && di.getFullYear() === y && di.getMonth() + 1 === m;
    }).reduce((s, i) => s + (Number(i.value) || 0), 0);
    return { label: MONTHS_SHORT_PT[m - 1], exp, inc };
  }), [expenses, incomes, currentMonth.year, currentMonth.month, currentMember?.id, paymentMethods]);
  const last6Months = history.map(h => h.label);
  const expenseHistory = history.map(h => h.exp);
  const incomeHistory = history.map(h => h.inc);
  const balanceHistory = incomeHistory.map((v, i) => v - expenseHistory[i]);
  const maxBar = Math.max(...expenseHistory, ...incomeHistory, 1);

  // Janela dos últimos 6 meses (incluindo o mês em exibição), início/fim inclusive.
  const sixMonthWindow = useMemo(() => {
    const start = new Date(currentMonth.year, currentMonth.month - 1 - 5, 1);
    const end   = new Date(currentMonth.year, currentMonth.month, 0); // último dia do mês atual
    return { start, end };
  }, [currentMonth.year, currentMonth.month]);

  const expensesInWindow = useMemo(() => expenses.filter(e => {
    const d = parseLocalDate(e.date);
    return d >= sixMonthWindow.start && d <= sixMonthWindow.end;
  }), [expenses, sixMonthWindow]);

  // Ranking por categoria: total do mês em exibição + média mensal dos últimos 6 meses.
  const catRanking = categories.map(cat => {
    const inMonth = expenses.filter(e =>
      e.categoryId === cat.id
      && parseLocalDate(e.date).getFullYear() === currentMonth.year
      && parseLocalDate(e.date).getMonth() + 1 === currentMonth.month
    );
    const inWindow = expensesInWindow.filter(e => e.categoryId === cat.id);
    return {
      ...cat,
      total: inMonth.reduce((s, e) => s + e.value, 0),
      avg6m: inWindow.reduce((s, e) => s + e.value, 0) / 6,
    };
  }).filter(c => c.total > 0 || c.avg6m > 0).sort((a, b) => b.total - a.total);
  const maxCat = catRanking[0]?.total || 1;

  return (
    <div style={{ padding: 24, maxWidth: 1100, margin: '0 auto', width: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 20 }}>
      {toast && <Toast message={toast} type="success" onClose={() => setToast(null)} />}

      <FFSpendingReports onNavigate={onNavigate} />

      {/* Export header */}
      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
        <button className="ff-button" onClick={() => {
          const inMonth = expenses.filter(e => {
            const d = parseLocalDate(e.date);
            return !e.isProjected && d.getFullYear() === currentMonth.year && d.getMonth() + 1 === currentMonth.month;
          });
          const data = inMonth.map(e => ({
            data: parseLocalDate(e.date).toLocaleDateString('pt-BR'),
            descricao: e.desc,
            categoria: categories.find(c => c.id === e.categoryId)?.name || '',
            valor: e.value.toFixed(2),
            status: e.status,
            tipo: e.type,
          }));
          exportToCSV(data, `relatorio-despesas-${currentMonth.year}-${String(currentMonth.month).padStart(2, '0')}.csv`);
          setToast('Relatório exportado!');
        }} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '9px 14px', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 10, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 13 }}>
          <Icon name="Download" size={14} />
          Exportar CSV
        </button>
      </div>

      <div className="dashboard-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>

        {/* Income vs Expense comparison */}
        <Card>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
            <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', opacity: 1 }}>Receitas vs Despesas</div>
            <div style={{ display: 'flex', gap: 12, fontSize: 11 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4, color: "var(--success)" }}><div style={{ width: 8, height: 8, borderRadius: 2, background: '#10B981' }} />Receita</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4, color: "var(--danger)" }}><div style={{ width: 8, height: 8, borderRadius: 2, background: '#EF4444' }} />Despesa</span>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'flex-end', height: 120 }}>
            {last6Months.map((month, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2, alignItems: 'center' }}>
                <div style={{ width: '100%', display: 'flex', gap: 2, alignItems: 'flex-end', height: 100 }}>
                  <div style={{ flex: 1, background: '#10B981', borderRadius: '3px 3px 0 0', height: `${(incomeHistory[i] / maxBar) * 100}%` }} />
                  <div style={{ flex: 1, background: '#EF4444', borderRadius: '3px 3px 0 0', height: `${(expenseHistory[i] / maxBar) * 100}%` }} />
                </div>
                <span style={{ fontSize: 9, color: 'var(--text-3)' }}>{month}</span>
              </div>
            ))}
          </div>
        </Card>

        {/* Balance evolution */}
        <Card>
          <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 16, opacity: 1 }}>Saldo Familiar Mensal</div>
          {(() => {
            const W2 = 300, H2 = 100;
            const minV = Math.min(...balanceHistory), maxV = Math.max(...balanceHistory);
            const range = maxV - minV || 1;
            const pts = balanceHistory.map((v, i) => {
              const x = (i / (balanceHistory.length - 1)) * W2;
              const y = H2 - ((v - minV) / range) * (H2 - 16) - 8;
              return `${x},${y}`;
            }).join(' ');
            const areaPoints = `0,${H2} ` + pts + ` ${W2},${H2}`;
            return (
              <svg width="100%" height={H2 + 20} viewBox={`0 0 ${W2} ${H2 + 20}`}>
                <defs>
                  <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.25" />
                    <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
                  </linearGradient>
                </defs>
                <polygon fill="url(#areaGrad)" points={areaPoints} />
                <polyline fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" points={pts} />
                {balanceHistory.map((v, i) => {
                  const x = (i / (balanceHistory.length - 1)) * W2;
                  const y = H2 - ((v - minV) / range) * (H2 - 16) - 8;
                  return <circle key={i} cx={x} cy={y} r="3.5" fill="var(--accent)" />;
                })}
                {last6Months.map((m, i) => {
                  const x = (i / (last6Months.length - 1)) * W2;
                  return <text key={i} x={x} y={H2 + 16} textAnchor="middle" fill="var(--text-3)" fontSize="9">{m}</text>;
                })}
              </svg>
            );
          })()}
        </Card>
      </div>

      <div className="dashboard-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
        {/* Category ranking */}
        <Card>
          <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>Ranking de Gastos por Categoria</div>
          <div style={{ fontSize: 10, color: 'var(--text-3)', marginBottom: 16, opacity: 1 }}>Total no mês em exibição · média mensal nos últimos 6 meses</div>
          {catRanking.map((cat, i) => (
            <div key={cat.id} style={{ marginBottom: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-3)', minWidth: 16 }}>#{i + 1}</span>
                  <span style={{ fontSize: 13, color: 'var(--text-1)', fontWeight: 600 }}>{cat.name}</span>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-1)' }}>{fmtBRL(cat.total)}</span>
                  <div style={{ fontSize: 10, color: 'var(--text-3)' }}>média 6m: {fmtBRL(cat.avg6m)}</div>
                </div>
              </div>
              <ProgressBar pct={(cat.total / maxCat) * 100} height={5} />
            </div>
          ))}
        </Card>

        {/* Shared expenses report */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Card>
            <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 16, opacity: 1 }}>Quem Deve a Quem (Balancete)</div>
            {balancete.length === 0 ? (
              <EmptyState icon="Users" title="Tudo em dia!" desc="Sem saldos entre membros" />
            ) : (
              balancete.map((item, i) => {
                const fromM = members.find(m => m.id === item.from);
                const toM = members.find(m => m.id === item.to);
                if (!fromM || !toM) return null;
                return (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: i < balancete.length - 1 ? '1px solid var(--border)' : 'none' }}>
                    <Avatar member={fromM} size={32} />
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-1)' }}>
                        {fromM.name.split(' ')[0]} deve a {toM.name.split(' ')[0]}
                      </div>
                      <div style={{ fontSize: 11, color: 'var(--text-3)' }}>Saldo líquido consolidado</div>
                    </div>
                    <span style={{ fontSize: 15, fontWeight: 800, color: "var(--danger)" }}>{fmtBRL(item.amount)}</span>
                  </div>
                );
              })
            )}
            <button className="ff-button" onClick={() => { if (window.__openBalancete) window.__openBalancete(); }} style={{ width: '100%', marginTop: 12, padding: '8px', background: 'var(--accent-tint)', border: 'none', borderRadius: 8, color: 'var(--accent)', fontSize: 12, fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
              <Icon name="Users" size={13} />
              Abrir Balancete Completo
            </button>
          </Card>
        </div>
      </div>
    </div>
  );
}

// ── Notificações ───────────────────────────────────────────
function Notificacoes() {
  const { notifications, markNotificationRead, markAllRead, unreadCount, notifPrefs, setNotifPrefs } = useApp();
  const typeIcon  = { warning: 'AlertTriangle', alert: 'Bell', info: 'Info' };
  const typeColor = { warning: '#F59E0B', alert: '#EF4444', info: '#3B82F6' };
  const [showPrefs, setShowPrefs] = useState(false);

  const ALERT_TYPES = [
    { key: 'cardDue',         icon: 'CreditCard',    label: 'Cartão próximo ao vencimento',     desc: 'Aviso 3 dias antes do vencimento da fatura' },
    { key: 'installmentDue',  icon: 'CalendarClock', label: 'Parcelas vencendo em 7 dias',       desc: 'Alerta de parcelas a vencer na semana' },
    { key: 'diaDia80',        icon: 'Zap',           label: 'Dia a Dia acima de 80%',            desc: 'Quando o limite mensal estiver quase esgotado' },
    { key: 'investmentStale', icon: 'TrendingUp',    label: 'Investimento sem atualização',      desc: 'Investimento parado há mais de 30 dias' },
  ];

  function togglePref(key) {
    setNotifPrefs({ ...notifPrefs, [key]: !notifPrefs[key] });
  }

  function Toggle({ on, onToggle }) {
    return (
      <button className="ff-button ff-action" onClick={onToggle} style={{
        width: 42, height: 24, borderRadius: 12, border: 'none', cursor: 'pointer', flexShrink: 0,
        background: on ? "var(--action-bg)" : 'var(--surface-3)',
        position: 'relative', transition: 'background 200ms',
      }}>
        <div style={{ width: 18, height: 18, borderRadius: '50%', background: 'white', position: 'absolute', top: 3, left: on ? 21 : 3, transition: 'left 200ms', boxShadow: '0 1px 3px rgba(0,0,0,0.2)' }} />
      </button>
    );
  }

  return (
    <div className="screen-outer" style={{ padding: 24, maxWidth: 700, margin: '0 auto', width: '100%', boxSizing: 'border-box' }}>

      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <span style={{ fontSize: 13, color: 'var(--text-3)' }}>{unreadCount} não lida{unreadCount !== 1 ? 's' : ''}</span>
        <div style={{ display: 'flex', gap: 8 }}>
          {unreadCount > 0 && (
            <button className="ff-button" onClick={markAllRead} style={{ fontSize: 12, color: 'var(--accent)', background: 'var(--accent-tint)', border: 'none', borderRadius: 8, padding: '6px 12px', cursor: 'pointer', fontWeight: 600 }}>
              Marcar todas como lidas
            </button>
          )}
          <button className="ff-button" onClick={() => setShowPrefs(v => !v)} style={{ fontSize: 12, color: ffReadableColor(showPrefs ? 'var(--accent)' : 'var(--text-3)'), background: showPrefs ? 'var(--accent-tint)' : 'var(--surface-2)', border: 'none', borderRadius: 8, padding: '6px 12px', cursor: 'pointer', fontWeight: 600, display: 'flex', alignItems: 'center', gap: 5 }}>
            <Icon name="Settings2" size={13} /> Configurar alertas
          </button>
        </div>
      </div>

      {/* Alert preferences panel */}
      {showPrefs && (
        <div style={{ background: 'var(--surface-1)', border: '1px solid var(--border)', borderRadius: 14, padding: '18px 20px', marginBottom: 18 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 14, opacity: 1 }}>Quais alertas você quer receber</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {ALERT_TYPES.map((a, i) => (
              <div key={a.key} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: i < ALERT_TYPES.length - 1 ? '1px solid var(--border)' : 'none' }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: notifPrefs[a.key] ? 'var(--accent-tint)' : 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: ffReadableColor(notifPrefs[a.key] ? 'var(--accent)' : 'var(--text-3)'), flexShrink: 0, transition: 'all 200ms' }}>
                  <Icon name={a.icon} size={16} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--text-1)' }}>{a.label}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 2 }}>{a.desc}</div>
                </div>
                <Toggle on={!!notifPrefs[a.key]} onToggle={() => togglePref(a.key)} />
              </div>
            ))}
          </div>
          <div style={{ marginTop: 12, fontSize: 11.5, color: 'var(--text-3)', display: 'flex', alignItems: 'center', gap: 5 }}>
            <Icon name="Info" size={12} />
            Preferências salvas automaticamente para este dispositivo
          </div>
        </div>
      )}

      {/* Notification list */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {notifications.length === 0 && <EmptyState icon="Bell" title="Nenhuma notificação" desc="Tudo tranquilo por aqui!" />}
        {notifications.map(n => (
          <div key={n.id} onClick={() => markNotificationRead(n.id)} style={{
            display: 'flex', gap: 14, padding: '16px 18px',
            background: 'var(--surface-1)',
            border: `1px solid ${n.read ? 'var(--border)' : typeColor[n.type] + '44'}`,
            borderRadius: 14, cursor: 'pointer',
            opacity: n.read ? 0.6 : 1,
            transition: 'opacity 200ms, border-color 200ms',
          }}>
            <div style={{ width: 38, height: 38, borderRadius: 12, background: typeColor[n.type] + '18', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, color: ffReadableColor(typeColor[n.type]) }}>
              <Icon name={typeIcon[n.type]} size={18} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-1)' }}>{n.title}</span>
                {!n.read && <div style={{ width: 8, height: 8, borderRadius: '50%', background: typeColor[n.type], flexShrink: 0, marginTop: 5 }} />}
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--text-3)', marginTop: 3 }}>{n.desc}</div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 4 }}>{new Date(n.date).toLocaleDateString('pt-BR')}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Shared helpers for config lists ───────────────────────
const PRESET_COLORS = ['#EF4444','#F97316','#F59E0B','#10B981','#0D9488','#3B82F6','#6366F1','#8B5CF6','#EC4899','#94A3B8'];
const PRESET_ICONS  = ['ShoppingCart','Home','Car','Utensils','Heart','Briefcase','GraduationCap','Plane','Music','Smartphone','Shirt','Baby','Gamepad2','Coffee','Dumbbell','PawPrint','Book','Gift'];

function ColorDot({ color, selected, onClick }) {
  return (
    <div onClick={onClick} style={{
      width: 22, height: 22, borderRadius: '50%', background: color, cursor: 'pointer',
      border: selected ? '2px solid var(--text-1)' : '2px solid transparent',
      boxShadow: selected ? '0 0 0 2px var(--surface-1)' : 'none',
      transition: 'all 120ms', flexShrink: 0,
    }} />
  );
}

function IconGrid({ selected, onSelect }) {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 4 }}>
      {PRESET_ICONS.map(ic => (
        <div key={ic} onClick={() => onSelect(ic)} style={{
          width: 34, height: 34, borderRadius: 9, cursor: 'pointer',
          background: selected === ic ? 'var(--action-bg)' : 'var(--surface-3)',
          border: selected === ic ? '2px solid var(--accent)' : '1.5px solid var(--border)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: ffReadableColor(selected === ic ? '#FFFFFF' : 'var(--text-2)'),
          transition: 'all 120ms',
          boxShadow: selected === ic ? '0 0 0 3px var(--accent-tint)' : 'none',
        }}
        onMouseEnter={e => { if (selected !== ic) { e.currentTarget.style.background = 'var(--accent-tint)'; e.currentTarget.style.color = 'var(--accent)'; e.currentTarget.style.borderColor = 'var(--accent)'; } }}
        onMouseLeave={e => { if (selected !== ic) { e.currentTarget.style.background = 'var(--surface-3)'; e.currentTarget.style.color = 'var(--text-2)'; e.currentTarget.style.borderColor = 'var(--border)'; } }}
        >
          <Icon name={ic} size={15} />
        </div>
      ))}
    </div>
  );
}

// ── Configurações ─────────────────────────────────────────
function Configuracoes() {
  const {
    currentMember, members,
    categories, addCategory, updateCategory, deleteCategory,
    paymentMethods, addPaymentMethod, updatePaymentMethod, deletePaymentMethod,
    investmentTypes, setInvestmentTypes,
    investmentPurposes, setInvestmentPurposes,
    incomeSources, setIncomeSources,
    updateEmail, updatePassword, deleteAccount,
    addMember, updateMember,
  } = useApp();
  const { theme, setTheme } = useTheme();
  const [activeTab, setActiveTab] = useState('perfil');
  const [diaDiaVal, setDiaDiaVal] = useState(currentMember.diaDiaLimit);
  const [notifyCardDueDaysVal, setNotifyCardDueDaysVal] = useState(currentMember.notifyCardDueDays ?? 3);
  const [notifyInstallmentDueDaysVal, setNotifyInstallmentDueDaysVal] = useState(currentMember.notifyInstallmentDueDays ?? 7);
  const [profileName, setProfileName] = useState(currentMember.name);
  const [profileSaving, setProfileSaving] = useState(false);
  const [toast, setToast] = useState(null);
  const [toastType, setToastType] = useState('success');

  function showToast(msg, type = 'success') { setToast(msg); setToastType(type); }

  async function handleSaveProfile() {
    setProfileSaving(true);
    try {
      await updateMember(currentMember.id, {
        name:        profileName.trim() || currentMember.name,
        diaDiaLimit: parseFloat(diaDiaVal) || currentMember.diaDiaLimit,
        notifyCardDueDays:        parseInt(notifyCardDueDaysVal, 10) >= 0 ? parseInt(notifyCardDueDaysVal, 10) : currentMember.notifyCardDueDays,
        notifyInstallmentDueDays: parseInt(notifyInstallmentDueDaysVal, 10) >= 0 ? parseInt(notifyInstallmentDueDaysVal, 10) : currentMember.notifyInstallmentDueDays,
      });
      showToast('Perfil salvo com sucesso!');
    } catch {
      showToast('Erro ao salvar perfil. Tente novamente.', 'error');
    } finally {
      setProfileSaving(false);
    }
  }

  // ── Category state ──────────────────────────────────────
  const [editingCatId, setEditingCatId] = useState(null);
  const [editCatForm, setEditCatForm] = useState({});
  const [showNewCat, setShowNewCat] = useState(false);
  const [newCat, setNewCat] = useState({ name: '', color: PRESET_COLORS[0], icon: 'ShoppingCart' });

  // ── Investment types state ──────────────────────────────
  const [newInvType, setNewInvType] = useState('');

  // ── Investment purposes state ───────────────────────────
  const [newPurpose, setNewPurpose] = useState({ label: '', color: PRESET_COLORS[0] });
  const [showNewPurpose, setShowNewPurpose] = useState(false);

  // ── Income sources state ────────────────────────────────
  const [newSource, setNewSource] = useState('');

  // ── Payment method state ────────────────────────────────
  const [showNewPM, setShowNewPM] = useState(false);
  const [newPM, setNewPM] = useState({ name: '', type: 'credit', bank: '', limit: '', closingDay: '', dueDay: '', color: '#0D9488' });
  const [editingPM, setEditingPM] = useState(null); // id do cartão em edição
  const [editPMForm, setEditPMForm] = useState({});
  const [pmDeleteConfirm, setPmDeleteConfirm] = useState(null);

  // ── Members state ───────────────────────────────────────
  const [showNewMember, setShowNewMember] = useState(false);
  const [newMember, setNewMember] = useState({ name: '', email: '', password: '', role: 'MASTER2' });
  const [memberSaving, setMemberSaving] = useState(false);
  const [memberErr, setMemberErr] = useState(null);
  const [editingMemberId, setEditingMemberId] = useState(null);
  const [editMemberForm, setEditMemberForm] = useState({});

  // ── Security state ──────────────────────────────────────
  const [emailForm, setEmailForm] = useState({ newEmail: '', password: '' });
  const [emailErr, setEmailErr] = useState(null);
  const [emailLoading, setEmailLoading] = useState(false);
  const [passForm, setPassForm] = useState({ current: '', next: '', confirm: '' });
  const [passErr, setPassErr] = useState(null);
  const [passLoading, setPassLoading] = useState(false);
  const [deleteAccountConfirm, setDeleteAccountConfirm] = useState(false);

  async function handleChangeEmail() {
    setEmailErr(null);
    if (!emailForm.newEmail.trim() || !/\S+@\S+\.\S+/.test(emailForm.newEmail)) {
      setEmailErr('Digite um e-mail válido.'); return;
    }
    if (!emailForm.password) { setEmailErr('Digite sua senha atual para confirmar.'); return; }
    setEmailLoading(true);
    try {
      await updateEmail(emailForm.newEmail.trim(), emailForm.password);
      setEmailForm({ newEmail: '', password: '' });
      showToast('E-mail atualizado com sucesso!');
    } catch (err) {
      setEmailErr(err.message || 'Não foi possível alterar o e-mail. Verifique sua senha.');
    } finally {
      setEmailLoading(false);
    }
  }

  async function handleChangePassword() {
    setPassErr(null);
    if (!passForm.current) { setPassErr('Digite sua senha atual.'); return; }
    if (passForm.next.length < 8) { setPassErr('A nova senha deve ter no mínimo 8 caracteres.'); return; }
    if (passForm.next !== passForm.confirm) { setPassErr('As senhas não coincidem.'); return; }
    setPassLoading(true);
    try {
      await updatePassword(passForm.current, passForm.next);
      setPassForm({ current: '', next: '', confirm: '' });
      showToast('Senha alterada com sucesso!');
    } catch (err) {
      setPassErr(err.message || 'Senha atual incorreta. Tente novamente.');
    } finally {
      setPassLoading(false);
    }
  }

  const tabs = [
    { id: 'perfil',        label: 'Perfil',           icon: 'User' },
    { id: 'seguranca',     label: 'Segurança',         icon: 'ShieldCheck' },
    { id: 'membros',       label: 'Membros',           icon: 'Users' },
    { id: 'categorias',    label: 'Categorias',        icon: 'Tag' },
    { id: 'pagamentos',    label: 'Pagamentos',        icon: 'CreditCard' },
    { id: 'investimentos', label: 'Investimentos',     icon: 'TrendingUp' },
    { id: 'receitas',      label: 'Fontes de Receita', icon: 'DollarSign' },
    { id: 'aparencia',     label: 'Aparência',         icon: 'Sun' },
  ];

  // ── Section title helper ────────────────────────────────
  function SectionTitle({ children }) {
    return <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-1)', marginBottom: 14 }}>{children}</div>;
  }

  function Divider() {
    return <div style={{ height: 1, background: 'var(--border)', margin: '18px 0' }} />;
  }

  // ── Inline list item ────────────────────────────────────
  function ListItem({ left, right }) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', background: 'var(--surface-2)', borderRadius: 10, marginBottom: 6 }}>
        {left}
        {right}
      </div>
    );
  }

  // ── Delete button ───────────────────────────────────────
  function DelBtn({ onClick }) {
    return (
      <button className="ff-button" onClick={onClick} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', padding: 4, borderRadius: 6, display: 'flex', flexShrink: 0 }}
        onMouseEnter={e => e.currentTarget.style.color = '#EF4444'}
        onMouseLeave={e => e.currentTarget.style.color = 'var(--text-3)'}
      ><Icon name="Trash2" size={14} /></button>
    );
  }

  return (
    <div className="screen-outer" style={{ padding: 24, maxWidth: 960, margin: '0 auto', width: '100%', boxSizing: 'border-box' }}>
      {toast && <Toast message={toast} type={toastType} onClose={() => setToast(null)} />}

      <div className="r-stack" style={{ display: 'grid', gridTemplateColumns: '190px 1fr', gap: 20 }}>
        {/* Sidebar */}
        <div style={{ minWidth: 0 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
            {tabs.map(tab => (
              <button className="ff-button" key={tab.id} onClick={() => setActiveTab(tab.id)} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '10px 14px', borderRadius: 10, border: 'none', cursor: 'pointer',
                background: activeTab === tab.id ? 'var(--accent-tint)' : 'transparent',
                color: ffReadableColor(activeTab === tab.id ? 'var(--accent)' : 'var(--text-2)'),
                fontWeight: activeTab === tab.id ? 600 : 500, fontSize: 13.5, textAlign: 'left', width: '100%',
              }}>
                <Icon name={tab.icon} size={16} />
                {tab.label}
              </button>
            ))}
          </div>
        </div>

        {/* Content */}
        <div style={{ flex: 1, minWidth: 0 }}>

          {/* ── PERFIL ── */}
          {activeTab === 'perfil' && (
            <Card>
              <SectionTitle>Meu Perfil</SectionTitle>
              {currentMember.isLocalAccount && (
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, padding: '10px 14px', background: "var(--warning-bg)", border: '1px solid #FCD34D', borderRadius: 10, marginBottom: 14 }}>
                  <Icon name="AlertTriangle" size={14} style={{ color: ffReadableColor("var(--warning)"), flexShrink: 0, marginTop: 2 }} />
                  <div style={{ fontSize: 12, color: ffReadableColor("var(--warning)"), lineHeight: 1.5 }}>
                    <strong>Conta local</strong> — os dados são salvos apenas neste dispositivo. O registro de novas famílias via app está sendo implantado no servidor.
                  </div>
                </div>
              )}
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20, padding: 16, background: 'var(--surface-2)', borderRadius: 12 }}>
                <Avatar member={currentMember} size={52} />
                <div>
                  <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--text-1)' }}>{currentMember.name}</div>
                  <div style={{ fontSize: 13, color: 'var(--accent)' }}>{currentMember.role}</div>
                  <div style={{ fontSize: 12, color: 'var(--text-3)' }}>{currentMember.email}</div>
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <FormField label="Nome completo">
                  <Input value={profileName} onChange={e => setProfileName(e.target.value)} placeholder="Seu nome completo" />
                </FormField>
                <FormField label="E-mail" hint="Para alterar o e-mail, acesse a aba Segurança">
                  <Input value={currentMember.email} type="email" readOnly style={{ opacity: 0.7, cursor: 'not-allowed' }} />
                </FormField>
                <FormField label="Limite Dia a Dia (R$/mês)" hint="Gastos não planejados por mês">
                  <Input type="number" value={diaDiaVal} onChange={e => setDiaDiaVal(e.target.value)} />
                </FormField>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }} className="r-stack-sm">
                  <FormField label="Avisar cartão vence em (dias)" hint="Antecedência do alerta de vencimento">
                    <Input type="number" min="0" max="30" value={notifyCardDueDaysVal} onChange={e => setNotifyCardDueDaysVal(e.target.value)} />
                  </FormField>
                  <FormField label="Avisar parcela vence em (dias)" hint="Antecedência do alerta de parcela">
                    <Input type="number" min="0" max="30" value={notifyInstallmentDueDaysVal} onChange={e => setNotifyInstallmentDueDaysVal(e.target.value)} />
                  </FormField>
                </div>
                <button className="ff-button ff-action ff-primary-action" onClick={handleSaveProfile} disabled={profileSaving} style={{ padding: '11px', background: profileSaving ? 'var(--surface-3)' : "var(--action-bg)", border: 'none', borderRadius: 10, color: 'white', fontWeight: 700, cursor: profileSaving ? 'default' : 'pointer', fontSize: 14, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
                  {profileSaving
                    ? <><span style={{ width: 14, height: 14, border: '2px solid white', borderTopColor: 'transparent', borderRadius: '50%', display: 'inline-block', animation: 'spin 0.7s linear infinite' }} /> Salvando...</>
                    : <><Icon name="Check" size={15} /> Salvar Alterações</>
                  }
                </button>
              </div>
            </Card>
          )}

          {/* ── MEMBROS ── */}
          {activeTab === 'membros' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <Card>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                  <SectionTitle>Membros da Família</SectionTitle>
                  <button className="ff-button ff-action ff-primary-action" onClick={() => { setShowNewMember(true); setMemberErr(null); setNewMember({ name: '', email: '', role: 'MASTER2' }); }}
                    style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '7px 12px', background: "var(--action-bg)", border: 'none', borderRadius: 8, color: 'white', fontWeight: 600, fontSize: 12, cursor: 'pointer' }}>
                    <Icon name="UserPlus" size={13} /> Adicionar membro
                  </button>
                </div>

                {/* Formulário para novo membro */}
                {showNewMember && (
                  <div style={{ background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 12, padding: 16, marginBottom: 14 }}>
                    <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-3)', marginBottom: 12, textTransform: 'uppercase', letterSpacing: '0.05em', opacity: 1 }}>Novo Membro</div>
                    {memberErr && (
                      <div style={{ background: "var(--danger-bg)", color: ffReadableColor("var(--danger)"), borderRadius: 8, padding: '8px 12px', fontSize: 13, marginBottom: 10, display: 'flex', alignItems: 'center', gap: 6 }}>
                        <Icon name="AlertCircle" size={13} /> {memberErr}
                      </div>
                    )}
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                      <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                        <FormField label="Nome completo">
                          <Input value={newMember.name} onChange={e => setNewMember(f => ({ ...f, name: e.target.value }))} placeholder="Nome do membro" />
                        </FormField>
                        <FormField label="Função na família">
                          <Select value={newMember.role} onChange={e => setNewMember(f => ({ ...f, role: e.target.value }))}>
                            <option value="MASTER2">👫 Cônjuge / Parceiro(a)</option>
                            <option value="CHILD">👶 Filho(a) / Dependente</option>
                          </Select>
                        </FormField>
                      </div>
                      <FormField label="E-mail" hint="Necessário para que o membro possa fazer login">
                        <Input type="email" value={newMember.email} onChange={e => setNewMember(f => ({ ...f, email: e.target.value }))} placeholder="email@exemplo.com" />
                      </FormField>
                      {newMember.email.trim() && (
                        <FormField label="Senha" hint="Mínimo 8 caracteres — usada para o membro entrar no sistema">
                          <Input type="password" value={newMember.password} onChange={e => setNewMember(f => ({ ...f, password: e.target.value }))} placeholder="Mínimo 8 caracteres" />
                        </FormField>
                      )}
                      <div style={{ display: 'flex', gap: 8 }}>
                        <button className="ff-button" onClick={() => { setShowNewMember(false); setMemberErr(null); }}
                          style={{ flex: 1, padding: '9px', background: 'var(--surface-3)', border: '1px solid var(--border)', borderRadius: 8, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 13 }}>
                          Cancelar
                        </button>
                        <button className="ff-button ff-action ff-primary-action" disabled={memberSaving} onClick={async () => {
                          setMemberErr(null);
                          if (!newMember.name.trim()) { setMemberErr('Informe o nome do membro.'); return; }
                          if (newMember.email.trim() && newMember.password.length > 0 && newMember.password.length < 8) {
                            setMemberErr('A senha deve ter pelo menos 8 caracteres.'); return;
                          }
                          setMemberSaving(true);
                          try {
                            await addMember({
                              name: newMember.name.trim(),
                              role: newMember.role,
                              email: newMember.email.trim() || undefined,
                              password: newMember.email.trim() && newMember.password ? newMember.password : undefined,
                            });
                            setShowNewMember(false);
                            setNewMember({ name: '', email: '', password: '', role: 'MASTER2' });
                            showToast('Membro adicionado com sucesso!');
                          } catch (err) {
                            setMemberErr(err.message || 'Erro ao adicionar membro.');
                          } finally {
                            setMemberSaving(false);
                          }
                        }} style={{ flex: 2, padding: '9px', background: memberSaving ? 'var(--surface-3)' : "var(--action-bg)", border: 'none', borderRadius: 8, color: 'white', fontWeight: 700, cursor: memberSaving ? 'default' : 'pointer', fontSize: 13, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                          {memberSaving
                            ? <><span style={{ width: 13, height: 13, border: '2px solid white', borderTopColor: 'transparent', borderRadius: '50%', display: 'inline-block', animation: 'spin 0.7s linear infinite' }} /> Salvando...</>
                            : <><Icon name="UserPlus" size={13} /> Adicionar</>
                          }
                        </button>
                      </div>
                    </div>
                  </div>
                )}

                {/* Lista de membros */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {members.map(m => {
                    const isMe = m.id === currentMember.id;
                    const isEditing = editingMemberId === m.id;
                    return (
                      <div key={m.id}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: 'var(--surface-2)', borderRadius: isEditing ? '12px 12px 0 0' : 12, border: isEditing ? '1px solid var(--accent)' : '1px solid transparent' }}>
                          <Avatar member={m} size={38} />
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-1)' }}>{m.name}</div>
                            <div style={{ fontSize: 11, color: 'var(--text-3)', display: 'flex', gap: 6 }}>
                              <span>{m.role}</span>
                              {m.email && <><span>•</span><span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 160 }}>{m.email}</span></>}
                            </div>
                          </div>
                          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                            {isMe && <span style={{ fontSize: 10, background: 'var(--accent-tint)', color: 'var(--accent)', padding: '2px 8px', borderRadius: 20, fontWeight: 600 }}>Você</span>}
                            <button className="ff-button" onClick={() => {
                              if (isEditing) { setEditingMemberId(null); }
                              else { setEditingMemberId(m.id); setEditMemberForm({ name: m.name, diaDiaLimit: String(m.diaDiaLimit || 300) }); }
                            }} style={{ background: 'var(--surface-3)', border: '1px solid var(--border)', borderRadius: 7, padding: '5px 8px', cursor: 'pointer', color: 'var(--text-2)', display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 }}>
                              <Icon name="Pencil" size={12} />
                            </button>
                          </div>
                        </div>

                        {/* Edição inline */}
                        {isEditing && (
                          <div style={{ background: 'var(--accent-tint)', border: '1px solid var(--accent)', borderTop: 'none', borderRadius: '0 0 12px 12px', padding: '12px 14px' }}>
                            <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 140px', gap: 10, marginBottom: 10 }}>
                              <FormField label="Nome">
                                <Input value={editMemberForm.name || ''} onChange={e => setEditMemberForm(f => ({ ...f, name: e.target.value }))} />
                              </FormField>
                              {isMe && (
                                <FormField label="Limite Dia a Dia (R$)">
                                  <Input type="number" value={editMemberForm.diaDiaLimit || ''} onChange={e => setEditMemberForm(f => ({ ...f, diaDiaLimit: e.target.value }))} />
                                </FormField>
                              )}
                            </div>
                            <div style={{ display: 'flex', gap: 8 }}>
                              <button className="ff-button" onClick={() => setEditingMemberId(null)}
                                style={{ flex: 1, padding: '8px', background: 'var(--surface-3)', border: '1px solid var(--border)', borderRadius: 8, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 12 }}>
                                Cancelar
                              </button>
                              <button className="ff-button ff-action ff-primary-action" onClick={async () => {
                                await updateMember(m.id, {
                                  name: editMemberForm.name.trim(),
                                  ...(isMe ? { diaDiaLimit: parseFloat(editMemberForm.diaDiaLimit) || m.diaDiaLimit } : {}),
                                });
                                setEditingMemberId(null);
                                showToast('Membro atualizado!');
                              }} style={{ flex: 2, padding: '8px', background: "var(--action-bg)", border: 'none', borderRadius: 8, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5 }}>
                                <Icon name="Check" size={13} /> Salvar
                              </button>
                            </div>
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              </Card>

              {/* Info sobre login dos membros */}
              <Card style={{ background: 'var(--accent-tint)', border: '1px solid color-mix(in srgb, var(--accent) 24%, transparent)' }}>
                <div style={{ display: 'flex', gap: 10 }}>
                  <Icon name="Info" size={15} style={{ color: 'var(--accent)', flexShrink: 0, marginTop: 2 }} />
                  <div style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.6 }}>
                    <strong style={{ color: 'var(--text-1)' }}>Acesso dos membros:</strong> a credencial é definida somente na criação e depois administrada pelo próprio titular. Um master nunca redefine a senha de outra pessoa.
                  </div>
                </div>
              </Card>
            </div>
          )}

          {/* ── CATEGORIAS ── */}
          {activeTab === 'categorias' && (
            <Card>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                <SectionTitle>Categorias de Despesa</SectionTitle>
                <button className="ff-button ff-action ff-primary-action" onClick={() => { setShowNewCat(true); setEditingCatId(null); }} style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '7px 12px', background: "var(--action-bg)", border: 'none', borderRadius: 8, color: 'white', fontWeight: 600, fontSize: 12, cursor: 'pointer' }}>
                  <Icon name="Plus" size={13} /> Nova Categoria
                </button>
              </div>

              {/* New category form */}
              {showNewCat && (
                <div style={{ background: 'var(--surface-2)', borderRadius: 12, padding: 16, marginBottom: 14, border: '1px solid var(--border)' }}>
                  <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-2)', marginBottom: 12 }}>Nova Categoria</div>
                  <FormField label="Nome">
                    <Input value={newCat.name} onChange={e => setNewCat(c => ({ ...c, name: e.target.value }))} placeholder="Ex: Saúde" />
                  </FormField>
                  <div style={{ marginTop: 10 }}>
                    <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 6 }}>Cor</div>
                    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                      {PRESET_COLORS.map(c => <ColorDot key={c} color={c} selected={newCat.color === c} onClick={() => setNewCat(f => ({ ...f, color: c }))} />)}
                    </div>
                  </div>
                  <div style={{ marginTop: 10 }}>
                    <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 4 }}>Ícone</div>
                    <IconGrid selected={newCat.icon} onSelect={ic => setNewCat(f => ({ ...f, icon: ic }))} />
                  </div>
                  <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
                    <button className="ff-button" onClick={() => setShowNewCat(false)} style={{ flex: 1, padding: '9px', background: 'var(--surface-3)', border: 'none', borderRadius: 8, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 13 }}>Cancelar</button>
                    <button className="ff-button ff-action ff-primary-action" onClick={() => {
                      if (!newCat.name.trim()) return;
                      addCategory(newCat);
                      setNewCat({ name: '', color: PRESET_COLORS[0], icon: 'ShoppingCart' });
                      setShowNewCat(false);
                      setToast('Categoria criada!');
                    }} style={{ flex: 2, padding: '9px', background: "var(--action-bg)", border: 'none', borderRadius: 8, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 13 }}>Salvar</button>
                  </div>
                </div>
              )}

              {/* Category list */}
              {categories.map(cat => (
                <div key={cat.id}>
                  {editingCatId === cat.id ? (
                    <div style={{ background: 'var(--surface-2)', borderRadius: 12, padding: 14, marginBottom: 8, border: '1px solid var(--accent)' }}>
                      <FormField label="Nome">
                        <Input value={editCatForm.name || ''} onChange={e => setEditCatForm(f => ({ ...f, name: e.target.value }))} />
                      </FormField>
                      <div style={{ marginTop: 10 }}>
                        <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 6 }}>Cor</div>
                        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                          {PRESET_COLORS.map(c => <ColorDot key={c} color={c} selected={editCatForm.color === c} onClick={() => setEditCatForm(f => ({ ...f, color: c }))} />)}
                        </div>
                      </div>
                      <div style={{ marginTop: 10 }}>
                        <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 4 }}>Ícone</div>
                        <IconGrid selected={editCatForm.icon} onSelect={ic => setEditCatForm(f => ({ ...f, icon: ic }))} />
                      </div>
                      <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
                        <button className="ff-button" onClick={() => setEditingCatId(null)} style={{ flex: 1, padding: '8px', background: 'var(--surface-3)', border: 'none', borderRadius: 8, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 13 }}>Cancelar</button>
                        <button className="ff-button ff-action ff-primary-action" onClick={() => { updateCategory(cat.id, editCatForm); setEditingCatId(null); setToast('Categoria atualizada!'); }} style={{ flex: 2, padding: '8px', background: "var(--action-bg)", border: 'none', borderRadius: 8, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 13 }}>Salvar</button>
                      </div>
                    </div>
                  ) : (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', background: 'var(--surface-2)', borderRadius: 10, marginBottom: 6 }}>
                      <div style={{ width: 30, height: 30, borderRadius: 9, background: (cat.color || '#94A3B8') + '22', display: 'flex', alignItems: 'center', justifyContent: 'center', color: ffReadableColor(cat.color || "var(--neutral)"), flexShrink: 0 }}>
                        <Icon name={cat.icon || 'Tag'} size={14} />
                      </div>
                      <span style={{ flex: 1, fontSize: 13.5, fontWeight: 500, color: 'var(--text-1)' }}>{cat.name}</span>
                      <button className="ff-button" onClick={() => { setEditingCatId(cat.id); setEditCatForm({ name: cat.name, color: cat.color, icon: cat.icon }); setShowNewCat(false); }} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', padding: 4, borderRadius: 6, display: 'flex', flexShrink: 0 }}
                        onMouseEnter={e => e.currentTarget.style.color = 'var(--accent)'}
                        onMouseLeave={e => e.currentTarget.style.color = 'var(--text-3)'}
                      ><Icon name="Pencil" size={14} /></button>
                      <DelBtn onClick={() => { deleteCategory(cat.id); setToast('Categoria removida!'); }} />
                    </div>
                  )}
                </div>
              ))}
            </Card>
          )}

          {/* ── PAGAMENTOS ── */}
          {activeTab === 'pagamentos' && (
            <Card>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                <SectionTitle>Meios de Pagamento</SectionTitle>
                <button className="ff-button ff-action ff-primary-action" onClick={() => setShowNewPM(v => !v)} style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '7px 12px', background: "var(--action-bg)", border: 'none', borderRadius: 8, color: 'white', fontWeight: 600, fontSize: 12, cursor: 'pointer' }}>
                  <Icon name="Plus" size={13} /> Adicionar
                </button>
              </div>

              {/* Formulário de criação */}
              {showNewPM && (
                <div style={{ background: 'var(--surface-2)', borderRadius: 12, padding: 16, marginBottom: 18, border: '1px solid var(--border)' }}>
                  <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-2)', marginBottom: 12 }}>Novo Meio de Pagamento</div>
                  <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                    <FormField label="Nome">
                      <Input value={newPM.name} onChange={e => setNewPM(f => ({ ...f, name: e.target.value }))} placeholder="Ex: Nubank" />
                    </FormField>
                    <FormField label="Tipo">
                      <Select value={newPM.type} onChange={e => setNewPM(f => ({ ...f, 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={newPM.bank} onChange={e => setNewPM(f => ({ ...f, bank: e.target.value }))} placeholder="Ex: Itaú Visa" />
                    </FormField>
                    {newPM.type === 'credit' && (
                      <FormField label="Limite (R$)">
                        <Input type="number" value={newPM.limit} onChange={e => setNewPM(f => ({ ...f, limit: e.target.value }))} placeholder="0,00" />
                      </FormField>
                    )}
                  </div>
                  {newPM.type === 'credit' && (
                    <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 10 }}>
                      <FormField label="Dia de fechamento">
                        <Input type="number" min="1" max="31" value={newPM.closingDay} onChange={e => setNewPM(f => ({ ...f, closingDay: e.target.value }))} placeholder="Ex: 5" />
                      </FormField>
                      <FormField label="Dia de vencimento">
                        <Input type="number" min="1" max="31" value={newPM.dueDay} onChange={e => setNewPM(f => ({ ...f, dueDay: e.target.value }))} placeholder="Ex: 15" />
                      </FormField>
                    </div>
                  )}
                  {/* Cor */}
                  <div style={{ marginTop: 10 }}>
                    <FormField label="Cor do cartão">
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        <input
                          type="color"
                          value={newPM.color}
                          onChange={e => setNewPM(f => ({ ...f, color: e.target.value }))}
                          style={{ width: 40, height: 38, padding: 2, borderRadius: 8, border: '1px solid var(--border)', cursor: 'pointer', background: 'var(--surface-1)' }}
                        />
                        <Input
                          value={newPM.color}
                          onChange={e => {
                            const v = e.target.value;
                            setNewPM(f => ({ ...f, color: v }));
                          }}
                          placeholder="#0D9488"
                          style={{ fontFamily: 'monospace', textTransform: 'uppercase' }}
                        />
                        <div style={{ width: 38, height: 38, borderRadius: 10, background: newPM.color, flexShrink: 0, border: '1px solid var(--border)' }} />
                      </div>
                    </FormField>
                  </div>
                  <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
                    <button className="ff-button" onClick={() => setShowNewPM(false)} style={{ flex: 1, padding: '9px', background: 'var(--surface-3)', border: 'none', borderRadius: 8, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 13 }}>Cancelar</button>
                    <button className="ff-button ff-action ff-primary-action" onClick={() => {
                      if (!newPM.name.trim()) return;
                      addPaymentMethod({ ...newPM, color: newPM.color || '#0D9488', limit: newPM.limit ? parseFloat(newPM.limit) : undefined, closingDay: newPM.closingDay ? parseInt(newPM.closingDay) : undefined, dueDay: newPM.dueDay ? parseInt(newPM.dueDay) : undefined });
                      setNewPM({ name: '', type: 'credit', bank: '', limit: '', closingDay: '', dueDay: '', color: '#0D9488' });
                      setShowNewPM(false);
                      setToast('Meio de pagamento adicionado!');
                    }} style={{ flex: 2, padding: '9px', background: "var(--action-bg)", border: 'none', borderRadius: 8, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 13 }}>Salvar</button>
                  </div>
                </div>
              )}

              {/* Grid de cards */}
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 14 }}>
                {paymentMethods.map(pm => {
                  const TYPE_ICON = { credit: 'CreditCard', debit: 'CreditCard', account: 'Building2', pix: 'Zap', cash: 'Banknote' };
                  const TYPE_LABEL = { credit: 'Crédito', debit: 'Débito', account: 'Conta', pix: 'Pix', cash: 'Dinheiro' };
                  const member = members.find(m => m.id === pm.memberId);
                  const isEditing = editingPM === pm.id;
                  const color = pm.color || '#0D9488';
                  return (
                    <div key={pm.id} style={{ borderRadius: 14, overflow: 'hidden', border: `1px solid ${color}33`, background: 'var(--surface-1)' }}>
                      {/* Cabeçalho colorido estilo cartão */}
                      <div style={{ background: `linear-gradient(135deg, ${color}ee, ${color}88)`, padding: '16px 16px 14px', position: 'relative' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                          <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <Icon name={TYPE_ICON[pm.type] || 'CreditCard'} size={18} style={{ color: 'white' }} />
                          </div>
                          {!pmDeleteConfirm && !isEditing && (
                            <div style={{ display: 'flex', gap: 4 }}>
                              <button className="ff-button"
                                onClick={() => { setEditingPM(pm.id); setEditPMForm({ name: pm.name, type: pm.type, bank: pm.bank || '', limit: pm.limit ? String(pm.limit) : '', closingDay: pm.closingDay ? String(pm.closingDay) : '', dueDay: pm.dueDay ? String(pm.dueDay) : '', color: pm.color || '#0D9488' }); }}
                                style={{ background: 'rgba(255,255,255,0.2)', border: 'none', borderRadius: 6, padding: '5px 7px', cursor: 'pointer', color: 'white', display: 'flex', alignItems: 'center' }}
                              ><Icon name="Pencil" size={12} /></button>
                              <button className="ff-button"
                                onClick={() => setPmDeleteConfirm(pm.id)}
                                style={{ background: 'rgba(239,68,68,0.3)', border: 'none', borderRadius: 6, padding: '5px 7px', cursor: 'pointer', color: 'white', display: 'flex', alignItems: 'center' }}
                              ><Icon name="Trash2" size={12} /></button>
                            </div>
                          )}
                          {pmDeleteConfirm === pm.id && (
                            <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
                              <span style={{ fontSize: 11, color: 'white', fontWeight: 600 }}>Excluir?</span>
                              <button className="ff-button" onClick={() => { deletePaymentMethod(pm.id); setPmDeleteConfirm(null); setToast('Removido.'); }} style={{ padding: '3px 10px', background: "var(--danger-action)", border: 'none', borderRadius: 6, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 12 }}>Sim</button>
                              <button className="ff-button" onClick={() => setPmDeleteConfirm(null)} style={{ padding: '3px 8px', background: 'rgba(255,255,255,0.25)', border: 'none', borderRadius: 6, color: 'white', cursor: 'pointer', fontSize: 12 }}>Não</button>
                            </div>
                          )}
                        </div>
                        <div style={{ marginTop: 12 }}>
                          <div style={{ fontSize: 15, fontWeight: 700, color: 'white', letterSpacing: '0.01em' }}>{pm.name}</div>
                          <div style={{ fontSize: 11, color: ffReadableColor('rgba(255,255,255,0.8)'), marginTop: 2, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                            <span>{TYPE_LABEL[pm.type] || pm.type}</span>
                            {pm.bank && <><span>·</span><span>{pm.bank}</span></>}
                            {member && <><span>·</span><span>{member.name.split(' ')[0]}</span></>}
                          </div>
                        </div>
                      </div>

                      {/* Rodapé do card */}
                      <div style={{ padding: '10px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'var(--surface-2)' }}>
                        {pm.limit ? (
                          <div>
                            <div style={{ fontSize: 11, color: 'var(--text-3)' }}>Limite</div>
                            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-1)' }}>{fmtBRL(pm.limit)}</div>
                          </div>
                        ) : <div />}
                        <div style={{ textAlign: 'right' }}>
                          {pm.closingDay && <div style={{ fontSize: 11, color: 'var(--text-3)' }}>Fecha dia <strong>{pm.closingDay}</strong></div>}
                          {pm.dueDay && <div style={{ fontSize: 11, color: 'var(--text-3)' }}>Vence dia <strong>{pm.dueDay}</strong></div>}
                        </div>
                      </div>

                      {/* Formulário de edição inline */}
                      {isEditing && (
                        <div style={{ padding: '14px 16px', borderTop: `2px solid ${color}44`, background: 'var(--surface-2)' }}>
                          <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                            <FormField label="Nome">
                              <Input value={editPMForm.name} onChange={e => setEditPMForm(f => ({ ...f, name: e.target.value }))} />
                            </FormField>
                            <FormField label="Tipo">
                              <Select value={editPMForm.type} onChange={e => setEditPMForm(f => ({ ...f, 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={editPMForm.bank} onChange={e => setEditPMForm(f => ({ ...f, bank: e.target.value }))} placeholder="Ex: Itaú Visa" />
                            </FormField>
                            {editPMForm.type === 'credit' && (
                              <FormField label="Limite (R$)">
                                <Input type="number" value={editPMForm.limit} onChange={e => setEditPMForm(f => ({ ...f, limit: e.target.value }))} placeholder="0,00" />
                              </FormField>
                            )}
                          </div>
                          {editPMForm.type === 'credit' && (
                            <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 10 }}>
                              <FormField label="Dia de fechamento">
                                <Input type="number" min="1" max="31" value={editPMForm.closingDay} onChange={e => setEditPMForm(f => ({ ...f, closingDay: e.target.value }))} placeholder="Ex: 5" />
                              </FormField>
                              <FormField label="Dia de vencimento">
                                <Input type="number" min="1" max="31" value={editPMForm.dueDay} onChange={e => setEditPMForm(f => ({ ...f, dueDay: e.target.value }))} placeholder="Ex: 15" />
                              </FormField>
                            </div>
                          )}
                          {/* Cor na edição */}
                          <div style={{ marginTop: 10 }}>
                            <FormField label="Cor do cartão">
                              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                                <input
                                  type="color"
                                  value={editPMForm.color || '#0D9488'}
                                  onChange={e => setEditPMForm(f => ({ ...f, color: e.target.value }))}
                                  style={{ width: 40, height: 38, padding: 2, borderRadius: 8, border: '1px solid var(--border)', cursor: 'pointer', background: 'var(--surface-1)' }}
                                />
                                <Input
                                  value={editPMForm.color || '#0D9488'}
                                  onChange={e => setEditPMForm(f => ({ ...f, color: e.target.value }))}
                                  placeholder="#0D9488"
                                  style={{ fontFamily: 'monospace', textTransform: 'uppercase' }}
                                />
                                <div style={{ width: 38, height: 38, borderRadius: 10, background: editPMForm.color || '#0D9488', flexShrink: 0, border: '1px solid var(--border)' }} />
                              </div>
                            </FormField>
                          </div>
                          <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
                            <button className="ff-button" onClick={() => setEditingPM(null)} style={{ flex: 1, padding: '8px', background: 'var(--surface-3)', border: 'none', borderRadius: 8, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 13 }}>Cancelar</button>
                            <button className="ff-button" onClick={() => {
                              if (!editPMForm.name.trim()) return;
                              updatePaymentMethod(pm.id, {
                                name: editPMForm.name.trim(),
                                type: editPMForm.type,
                                bank: editPMForm.bank.trim() || undefined,
                                color: editPMForm.color || '#0D9488',
                                limit: editPMForm.limit ? parseFloat(editPMForm.limit) : undefined,
                                closingDay: editPMForm.closingDay ? parseInt(editPMForm.closingDay) : undefined,
                                dueDay: editPMForm.dueDay ? parseInt(editPMForm.dueDay) : undefined,
                              });
                              setEditingPM(null);
                              setToast('Meio de pagamento atualizado!');
                            }} style={{ flex: 2, padding: '8px', background: 'var(--action-bg)', border: 'none', borderRadius: 8, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 13 }}>Salvar</button>
                          </div>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </Card>
          )}

          {/* ── INVESTIMENTOS config ── */}
          {activeTab === 'investimentos' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {/* Types */}
              <Card>
                <SectionTitle>Tipos de Investimento</SectionTitle>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 14 }}>
                  {investmentTypes.map((t, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 20, padding: '5px 12px' }}>
                      <span style={{ fontSize: 13, color: 'var(--text-1)', fontWeight: 500 }}>{t}</span>
                      <button className="ff-button" onClick={() => { setInvestmentTypes(investmentTypes.filter((_, j) => j !== i)); setToast('Tipo removido!'); }} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', padding: 0, display: 'flex' }}
                        onMouseEnter={e => e.currentTarget.style.color = '#EF4444'}
                        onMouseLeave={e => e.currentTarget.style.color = 'var(--text-3)'}
                      ><Icon name="X" size={13} /></button>
                    </div>
                  ))}
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <Input value={newInvType} onChange={e => setNewInvType(e.target.value)} placeholder="Novo tipo (Ex: Debêntures)" onKeyDown={e => {
                    if (e.key === 'Enter' && newInvType.trim()) {
                      setInvestmentTypes([...investmentTypes, newInvType.trim()]);
                      setNewInvType('');
                      setToast('Tipo adicionado!');
                    }
                  }} />
                  <button className="ff-button ff-action ff-primary-action" onClick={() => {
                    if (!newInvType.trim()) return;
                    setInvestmentTypes([...investmentTypes, newInvType.trim()]);
                    setNewInvType('');
                    setToast('Tipo adicionado!');
                  }} style={{ padding: '0 16px', background: "var(--action-bg)", border: 'none', borderRadius: 10, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 13, flexShrink: 0, display: 'flex', alignItems: 'center', gap: 5 }}>
                    <Icon name="Plus" size={14} /> Adicionar
                  </button>
                </div>
              </Card>

              {/* Purposes */}
              <Card>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                  <SectionTitle>Finalidades</SectionTitle>
                  <button className="ff-button ff-action ff-primary-action" onClick={() => setShowNewPurpose(v => !v)} style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '7px 12px', background: "var(--action-bg)", border: 'none', borderRadius: 8, color: 'white', fontWeight: 600, fontSize: 12, cursor: 'pointer' }}>
                    <Icon name="Plus" size={13} /> Nova Finalidade
                  </button>
                </div>

                {showNewPurpose && (
                  <div style={{ background: 'var(--surface-2)', borderRadius: 10, padding: 14, marginBottom: 12, border: '1px solid var(--border)' }}>
                    <FormField label="Nome da Finalidade">
                      <Input value={newPurpose.label} onChange={e => setNewPurpose(f => ({ ...f, label: e.target.value }))} placeholder="Ex: Fundo Casamento" />
                    </FormField>
                    <div style={{ marginTop: 10 }}>
                      <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 6 }}>Cor</div>
                      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                        {PRESET_COLORS.map(c => <ColorDot key={c} color={c} selected={newPurpose.color === c} onClick={() => setNewPurpose(f => ({ ...f, color: c }))} />)}
                      </div>
                    </div>
                    <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
                      <button className="ff-button" onClick={() => setShowNewPurpose(false)} style={{ flex: 1, padding: '8px', background: 'var(--surface-3)', border: 'none', borderRadius: 8, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 13 }}>Cancelar</button>
                      <button className="ff-button ff-action ff-primary-action" onClick={() => {
                        if (!newPurpose.label.trim()) return;
                        const key = newPurpose.label.toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '');
                        setInvestmentPurposes([...investmentPurposes, { key, label: newPurpose.label.trim(), color: newPurpose.color }]);
                        setNewPurpose({ label: '', color: PRESET_COLORS[0] });
                        setShowNewPurpose(false);
                        setToast('Finalidade adicionada!');
                      }} style={{ flex: 2, padding: '8px', background: "var(--action-bg)", border: 'none', borderRadius: 8, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 13 }}>Salvar</button>
                    </div>
                  </div>
                )}

                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {investmentPurposes.map((p, i) => (
                    <div key={p.key} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', background: 'var(--surface-2)', borderRadius: 10 }}>
                      <div style={{ width: 12, height: 12, borderRadius: '50%', background: p.color, flexShrink: 0 }} />
                      <span style={{ flex: 1, fontSize: 13.5, fontWeight: 500, color: 'var(--text-1)' }}>{p.label}</span>
                      <DelBtn onClick={() => { setInvestmentPurposes(investmentPurposes.filter((_, j) => j !== i)); setToast('Finalidade removida!'); }} />
                    </div>
                  ))}
                </div>
              </Card>
            </div>
          )}

          {/* ── RECEITAS (fontes) ── */}
          {activeTab === 'receitas' && (
            <Card>
              <SectionTitle>Fontes de Receita</SectionTitle>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14 }}>
                {incomeSources.map((s, i) => (
                  <div key={s.key} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', background: 'var(--surface-2)', borderRadius: 10 }}>
                    <Icon name="DollarSign" size={15} style={{ color: 'var(--accent)', flexShrink: 0 }} />
                    <span style={{ flex: 1, fontSize: 13.5, fontWeight: 500, color: 'var(--text-1)' }}>{s.label}</span>
                    <DelBtn onClick={() => { setIncomeSources(incomeSources.filter((_, j) => j !== i)); setToast('Fonte removida!'); }} />
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <Input value={newSource} onChange={e => setNewSource(e.target.value)} placeholder="Nova fonte (Ex: Pensão)" onKeyDown={e => {
                  if (e.key === 'Enter' && newSource.trim()) {
                    const key = newSource.toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '');
                    setIncomeSources([...incomeSources, { key, label: newSource.trim() }]);
                    setNewSource('');
                    setToast('Fonte adicionada!');
                  }
                }} />
                <button className="ff-button ff-action ff-primary-action" onClick={() => {
                  if (!newSource.trim()) return;
                  const key = newSource.toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '');
                  setIncomeSources([...incomeSources, { key, label: newSource.trim() }]);
                  setNewSource('');
                  setToast('Fonte adicionada!');
                }} style={{ padding: '0 16px', background: "var(--action-bg)", border: 'none', borderRadius: 10, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 13, flexShrink: 0, display: 'flex', alignItems: 'center', gap: 5 }}>
                  <Icon name="Plus" size={14} /> Adicionar
                </button>
              </div>
            </Card>
          )}

          {/* ── SEGURANÇA ── */}
          {activeTab === 'seguranca' && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

              {/* Alterar E-mail */}
              <Card>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                  <div style={{ width: 34, height: 34, borderRadius: 10, background: 'var(--accent-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name="User" size={16} style={{ color: 'var(--accent)' }} />
                  </div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-1)' }}>Alterar E-mail</div>
                    <div style={{ fontSize: 12, color: 'var(--text-3)' }}>Atual: {currentMember.email}</div>
                  </div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {emailErr && (
                    <div style={{ background: "var(--danger-bg)", color: ffReadableColor("var(--danger)"), borderRadius: 8, padding: '9px 12px', fontSize: 13, display: 'flex', alignItems: 'center', gap: 6 }}>
                      <Icon name="AlertCircle" size={13} /> {emailErr}
                    </div>
                  )}
                  <FormField label="Novo e-mail">
                    <Input type="email" value={emailForm.newEmail} onChange={e => setEmailForm(f => ({ ...f, newEmail: e.target.value }))} placeholder="novo@email.com" />
                  </FormField>
                  <FormField label="Confirme sua senha atual" hint="Necessário para garantir sua segurança (LGPD art. 46)">
                    <Input type="password" value={emailForm.password} onChange={e => setEmailForm(f => ({ ...f, password: e.target.value }))} placeholder="••••••••" />
                  </FormField>
                  <button className="ff-button ff-action ff-primary-action" onClick={handleChangeEmail} disabled={emailLoading} style={{ padding: '11px', background: emailLoading ? 'var(--surface-3)' : "var(--action-bg)", border: 'none', borderRadius: 10, color: 'white', fontWeight: 700, cursor: emailLoading ? 'default' : 'pointer', fontSize: 14, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
                    {emailLoading ? <><span style={{ width: 14, height: 14, border: '2px solid white', borderTopColor: 'transparent', borderRadius: '50%', display: 'inline-block', animation: 'spin 0.7s linear infinite' }} /> Salvando...</> : <><Icon name="Check" size={15} /> Atualizar E-mail</>}
                  </button>
                </div>
              </Card>

              {/* Alterar Senha */}
              <Card>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
                  <div style={{ width: 34, height: 34, borderRadius: 10, background: 'var(--accent-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name="Lock" size={16} style={{ color: 'var(--accent)' }} />
                  </div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-1)' }}>Alterar Senha</div>
                    <div style={{ fontSize: 12, color: 'var(--text-3)' }}>Use no mínimo 8 caracteres com letras e números</div>
                  </div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {passErr && (
                    <div style={{ background: "var(--danger-bg)", color: ffReadableColor("var(--danger)"), borderRadius: 8, padding: '9px 12px', fontSize: 13, display: 'flex', alignItems: 'center', gap: 6 }}>
                      <Icon name="AlertCircle" size={13} /> {passErr}
                    </div>
                  )}
                  <FormField label="Senha atual">
                    <Input type="password" value={passForm.current} onChange={e => setPassForm(f => ({ ...f, current: e.target.value }))} placeholder="••••••••" />
                  </FormField>
                  <FormField label="Nova senha">
                    <Input type="password" value={passForm.next} onChange={e => setPassForm(f => ({ ...f, next: e.target.value }))} placeholder="Mínimo 8 caracteres" />
                  </FormField>
                  <FormField label="Confirme a nova senha">
                    <Input type="password" value={passForm.confirm} onChange={e => setPassForm(f => ({ ...f, confirm: e.target.value }))} placeholder="Repita a nova senha" />
                  </FormField>
                  {passForm.next.length > 0 && (
                    <div style={{ display: 'flex', gap: 4, marginTop: -4 }}>
                      {[
                        { ok: passForm.next.length >= 8, label: '8+ chars' },
                        { ok: /[A-Z]/.test(passForm.next), label: 'Maiúscula' },
                        { ok: /[0-9]/.test(passForm.next), label: 'Número' },
                        { ok: passForm.next === passForm.confirm && passForm.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>
                  )}
                  <button className="ff-button ff-action ff-primary-action" onClick={handleChangePassword} disabled={passLoading} style={{ padding: '11px', background: passLoading ? 'var(--surface-3)' : "var(--action-bg)", border: 'none', borderRadius: 10, color: 'white', fontWeight: 700, cursor: passLoading ? 'default' : 'pointer', fontSize: 14, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
                    {passLoading ? <><span style={{ width: 14, height: 14, border: '2px solid white', borderTopColor: 'transparent', borderRadius: '50%', display: 'inline-block', animation: 'spin 0.7s linear infinite' }} /> Salvando...</> : <><Icon name="Lock" size={15} /> Alterar Senha</>}
                  </button>
                </div>
              </Card>

              {/* Informações LGPD */}
              <Card style={{ border: '1px solid color-mix(in srgb, var(--accent) 24%, transparent)', background: 'var(--accent-tint)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
                  <div style={{ width: 34, height: 34, borderRadius: 10, background: 'var(--accent-tint)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name="ShieldCheck" size={16} style={{ color: 'var(--accent)' }} />
                  </div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-1)' }}>Privacidade & LGPD</div>
                    <div style={{ fontSize: 12, color: 'var(--text-3)' }}>Lei 13.709/2018 — Lei Geral de Proteção de Dados</div>
                  </div>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {[
                    { icon: 'Database', title: 'Dados coletados', text: 'Nome, e-mail, dados financeiros inseridos por você. Nenhum dado bancário real é acessado automaticamente.' },
                    { icon: 'Lock', title: 'Segurança', text: 'Senhas protegidas com criptografia. Tokens JWT com expiração. Toda comunicação via HTTPS.' },
                    { icon: 'Eye', title: 'Sem compartilhamento', text: 'Seus dados NÃO são vendidos, compartilhados ou usados para publicidade.' },
                    { icon: 'Settings', title: 'Seus direitos', text: 'Você pode corrigir seus dados (aba Perfil), exportar via CSV (Relatórios) ou excluir permanentemente sua conta abaixo (LGPD art. 18).' },
                  ].map(item => (
                    <div key={item.title} style={{ display: 'flex', gap: 10, padding: '10px 12px', background: 'var(--surface-0)', borderRadius: 10 }}>
                      <Icon name={item.icon} size={14} style={{ color: 'var(--accent)', marginTop: 2, flexShrink: 0 }} />
                      <div>
                        <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-1)', marginBottom: 2 }}>{item.title}</div>
                        <div style={{ fontSize: 12, color: 'var(--text-2)', lineHeight: 1.5 }}>{item.text}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </Card>

              {/* Exclusão de Conta */}
              <Card style={{ border: '1px solid #EF444430' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                  <div style={{ width: 34, height: 34, borderRadius: 10, background: "var(--danger-bg)", display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name="Trash2" size={16} style={{ color: "var(--danger)" }} />
                  </div>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 700, color: "var(--danger)" }}>Excluir Conta</div>
                    <div style={{ fontSize: 12, color: 'var(--text-3)' }}>Direito à eliminação de dados — LGPD art. 18, VI</div>
                  </div>
                </div>
                <div style={{ fontSize: 13, color: 'var(--text-2)', marginBottom: 14, lineHeight: 1.5 }}>
                  Ao excluir sua conta, todos os seus dados financeiros serão permanentemente removidos. Esta ação não pode ser desfeita.
                </div>
                {!deleteAccountConfirm ? (
                  <button className="ff-button" onClick={() => setDeleteAccountConfirm(true)} style={{ padding: '10px 16px', background: "var(--danger-bg)", border: '1px solid #EF444440', borderRadius: 10, color: "var(--danger)", fontWeight: 600, cursor: 'pointer', fontSize: 13, display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Icon name="Trash2" size={14} /> Solicitar exclusão da conta
                  </button>
                ) : (
                  <div style={{ background: "var(--danger-bg)", borderRadius: 10, padding: '14px', border: '1px solid #EF444440' }}>
                    <div style={{ fontSize: 13, fontWeight: 600, color: ffReadableColor("var(--danger)"), marginBottom: 10 }}>⚠️ Tem certeza? Esta ação é irreversível.</div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <button className="ff-button" onClick={() => setDeleteAccountConfirm(false)} style={{ flex: 1, padding: '9px', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 8, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 13 }}>
                        Cancelar
                      </button>
                      <button className="ff-button" onClick={async () => { setDeleteAccountConfirm(false); await deleteAccount(); }} style={{ flex: 2, padding: '9px', background: "var(--danger-action)", border: 'none', borderRadius: 8, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 13 }}>
                        Sim, excluir minha conta
                      </button>
                    </div>
                  </div>
                )}
              </Card>

            </div>
          )}

          {/* ── APARÊNCIA ── */}
          {activeTab === 'aparencia' && (
            <Card>
              <SectionTitle>Aparência</SectionTitle>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{ padding: '14px 16px', background: 'var(--surface-2)', borderRadius: 12 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                    <Icon name={THEME_META[theme].icon} size={18} style={{ color: 'var(--accent)' }} />
                    <div>
                      <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-1)' }}>Tema visual</div>
                      <div style={{ fontSize: 12, color: 'var(--text-3)' }}>Escolha o design system do app</div>
                    </div>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
                    {[
                      { value: 'light', label: 'Finafamily Claro', swatch: 'linear-gradient(135deg, #EEF2F8, #2167D5)' },
                      { value: 'dark', label: 'Finafamily Escuro', swatch: 'linear-gradient(135deg, #101827, #9EC8FF)' },
                      { value: 'nubank-light', label: 'Finafamily Roxo', swatch: 'linear-gradient(135deg, #FFFFFF, #8A05BE)' },
                    ].map(opt => (
                      <button className="ff-button" key={opt.value} onClick={() => setTheme(opt.value)} style={{
                        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
                        padding: '12px 6px', borderRadius: 10,
                        border: `1.5px solid ${theme === opt.value ? 'var(--accent)' : 'var(--border)'}`,
                        background: theme === opt.value ? 'var(--accent-tint)' : 'var(--surface-1)',
                        cursor: 'pointer', transition: 'all 150ms',
                      }}>
                        <div style={{ width: 26, height: 26, borderRadius: '50%', background: opt.swatch, border: '1px solid var(--border)', flexShrink: 0 }} />
                        <span style={{ fontSize: 11, fontWeight: 600, color: ffReadableColor(theme === opt.value ? 'var(--accent)' : 'var(--text-2)'), textAlign: 'center', lineHeight: 1.3 }}>{opt.label}</span>
                        {theme === opt.value && <Icon name="Check" size={12} style={{ color: 'var(--accent)' }} />}
                      </button>
                    ))}
                  </div>
                </div>
                <div style={{ padding: '14px 16px', background: 'var(--surface-2)', borderRadius: 12 }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-1)', marginBottom: 8 }}>Dados e Privacidade</div>
                  <button className="ff-button" style={{ padding: '9px 16px', background: 'var(--surface-3)', border: 'none', borderRadius: 8, color: 'var(--text-2)', fontSize: 13, fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Icon name="Download" size={14} />
                    Exportar Dados da Família
                  </button>
                </div>
              </div>
            </Card>
          )}

        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Relatorios, Notificacoes, Configuracoes });