// ============================================================
// FINAFAMILY — Investimentos (Módulo completo v2)
// ============================================================

const { useState, useEffect, useMemo } = React;

// ── Constantes ───────────────────────────────────────────────

const INV_TYPES = [
  { value: 'CDB',           label: 'CDB',           color: '#3B82F6' },
  { value: 'LCI',           label: 'LCI',           color: '#10B981' },
  { value: 'LCA',           label: 'LCA',           color: '#059669' },
  { value: 'Tesouro_Direto',label: 'Tesouro Direto',color: '#F59E0B' },
  { value: 'FII',           label: 'FII',           color: '#8B5CF6' },
  { value: 'Acoes',         label: 'Ações',         color: '#EF4444' },
  { value: 'Poupanca',      label: 'Poupança',      color: '#06B6D4' },
  { value: 'Previdencia',   label: 'Previdência',   color: '#EC4899' },
  { value: 'Cripto',        label: 'Cripto',        color: '#F97316' },
  { value: 'Outros',        label: 'Outros',        color: '#6B7280' },
];

const YIELD_TYPES = [
  { value: 'pre_fixado', label: 'Pré-fixado',  color: '#3B82F6', icon: 'Lock' },
  { value: 'pos_fixado', label: 'Pós-fixado',  color: '#10B981', icon: 'TrendingUp' },
  { value: 'ipca_plus',  label: 'IPCA+',       color: '#8B5CF6', icon: 'BarChart2' },
  { value: 'variavel',   label: 'Variável',    color: '#F59E0B', icon: 'Activity' },
];

const GEOGRAPHIES = [
  { value: 'nacional',      label: 'Nacional',       color: 'var(--accent)', flag: '🇧🇷' },
  { value: 'internacional', label: 'Internacional',  color: '#3B82F6', flag: '🌎' },
];

const PURPOSES = [
  { value: 'emergency',   label: 'Reserva de Emergência', icon: 'ShieldCheck' },
  { value: 'retirement',  label: 'Aposentadoria',         icon: 'TrendingUp' },
  { value: 'passive',     label: 'Renda Passiva',         icon: 'DollarSign' },
  { value: 'travel',      label: 'Viagem',                icon: 'Plane' },
  { value: 'education',   label: 'Educação',              icon: 'GraduationCap' },
  { value: 'other',       label: 'Outro',                 icon: 'CheckCircle' },
];

const RATE_INDEXES = ['CDI', 'IPCA', 'SELIC', 'IGP-M'];

function invColor(type) {
  return INV_TYPES.find(t => t.value === type)?.color || '#6B7280';
}
function yieldColor(yt) {
  return YIELD_TYPES.find(t => t.value === yt)?.color || '#6B7280';
}
function yieldLabel(yt) {
  return YIELD_TYPES.find(t => t.value === yt)?.label || yt;
}
function invLabel(t) {
  return INV_TYPES.find(x => x.value === t)?.label || t;
}
function purposeLabel(p) {
  return PURPOSES.find(x => x.value === p)?.label || p;
}

// ── Cálculo de valor projetado ────────────────────────────────
function calcProjectedValue(inv) {
  const base = parseFloat(inv.value);
  if (!inv.rateValue || parseFloat(inv.rateValue) === 0 || inv.yieldType === 'variavel') return base;
  const refDate = inv.startDate ? parseLocalDate(inv.startDate) : new Date(inv.createdAt);
  const today = new Date();
  const daysDiff = Math.floor((today - refDate) / 86400000);
  if (daysDiff <= 0) return base;
  const annualRate = parseFloat(inv.rateValue);
  const dailyRate = Math.pow(1 + annualRate / 100, 1 / 365) - 1;
  return base * Math.pow(1 + dailyRate, daysDiff);
}

// Mesma taxa mensal do Dashboard (finance-calc.js): renda fixa pela taxa anual,
// renda variável pela rentabilidade mensal estimada.
function calcMonthReturn(inv) {
  return (parseFloat(inv.value) || 0) * investmentMonthlyRatePct(inv) / 100;
}

// ── Donut Chart SVG ────────────────────────────────────────────
function DonutChart({ data, size = 140, label, total }) {
  const cx = size / 2, cy = size / 2;
  const r = size / 2 - 14;
  const validData = data.filter(d => d.value > 0);

  if (!validData.length) {
    return (
      <svg width={size} height={size}>
        <circle cx={cx} cy={cy} r={r} fill="none" stroke="var(--border)" strokeWidth={14} />
        <circle cx={cx} cy={cy} r={r * 0.55} fill="var(--surface-0)" />
        <text x={cx} y={cy + 5} textAnchor="middle" fontSize={10} fill="var(--text-3)">Sem dados</text>
      </svg>
    );
  }

  const totalVal = validData.reduce((s, d) => s + d.value, 0);
  let angle = -Math.PI / 2;
  const paths = validData.map(d => {
    const sweep = (d.value / totalVal) * 2 * Math.PI;
    const x1 = cx + r * Math.cos(angle);
    const y1 = cy + r * Math.sin(angle);
    angle += sweep;
    const x2 = cx + r * Math.cos(angle);
    const y2 = cy + r * Math.sin(angle);
    const large = sweep > Math.PI ? 1 : 0;
    return { path: `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`, color: d.color, label: d.label, pct: d.value / totalVal * 100 };
  });

  return (
    <svg width={size} height={size} style={{ flexShrink: 0 }}>
      {paths.map((p, i) => (
        <path key={i} d={p.path} fill={p.color} stroke="var(--surface-0)" strokeWidth={2} />
      ))}
      <circle cx={cx} cy={cy} r={r * 0.55} fill="var(--surface-0)" />
      {label && (
        <>
          <text x={cx} y={cy - 4} textAnchor="middle" fontSize={9} fill="var(--text-3)" fontWeight="500">{label}</text>
          <text x={cx} y={cy + 10} textAnchor="middle" fontSize={11} fill="var(--text-1)" fontWeight="700">
            {total}
          </text>
        </>
      )}
    </svg>
  );
}

// ── Barra de rebalanceamento ───────────────────────────────────
function GoalBar({ goal, actual }) {
  const diff = actual - goal.targetPct;
  const ok = Math.abs(diff) <= goal.tolerancePct;
  const barColor = ok ? '#10B981' : Math.abs(diff) <= goal.tolerancePct * 2 ? '#F59E0B' : '#EF4444';
  const width = Math.min(100, Math.max(0, actual));

  return (
    <div style={{ marginBottom: 12 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
        <span style={{ fontSize: 12, color: 'var(--text-2)', fontWeight: 500 }}>{goal.keyLabel}</span>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
          <span style={{ fontSize: 11, color: 'var(--text-3)' }}>Meta: {goal.targetPct}%</span>
          <span style={{
            fontSize: 11, fontWeight: 700, color: ffReadableColor(barColor),
            background: barColor + '20', borderRadius: 4, padding: '1px 5px',
          }}>
            {actual.toFixed(1)}%
          </span>
          {!ok && (
            <span title={`Fora da tolerância (±${goal.tolerancePct}%)`} style={{ color: ffReadableColor(barColor), fontSize: 13 }}>⚠️</span>
          )}
        </div>
      </div>
      <div style={{ height: 6, background: 'var(--border)', borderRadius: 3, position: 'relative', overflow: 'visible' }}>
        <div style={{ width: `${width}%`, height: '100%', background: barColor, borderRadius: 3, transition: 'width .4s' }} />
        {/* Indicador da meta */}
        <div style={{
          position: 'absolute', top: -3, left: `${Math.min(100, goal.targetPct)}%`,
          width: 2, height: 12, background: 'var(--text-3)', borderRadius: 1,
          transform: 'translateX(-50%)',
        }} />
      </div>
    </div>
  );
}

// ── Card de investimento ───────────────────────────────────────
function InvCard({ inv, onEdit, onDelete, onAporte, selected, onSelect, readOnly }) {
  const projected = calcProjectedValue(inv);
  const monthReturn = calcMonthReturn(inv);
  const base = parseFloat(inv.value);
  const gain = projected - base;
  const color = invColor(inv.type);
  const yt = YIELD_TYPES.find(y => y.value === inv.yieldType);

  return (
    <div
      onClick={() => onSelect(inv.id === selected ? null : inv.id)}
      style={{
        background: 'var(--surface-0)',
        border: `1.5px solid ${selected ? color : 'var(--border)'}`,
        borderRadius: 14,
        padding: '16px 18px',
        cursor: 'pointer',
        transition: 'all .18s',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      {/* Barra colorida lateral */}
      <div style={{
        position: 'absolute', top: 0, left: 0, bottom: 0, width: 4,
        background: color, borderRadius: '14px 0 0 14px',
      }} />

      <div style={{ paddingLeft: 8 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-1)' }}>{inv.name}</div>
            <div style={{ display: 'flex', gap: 6, marginTop: 3, flexWrap: 'wrap' }}>
              <span style={{ fontSize: 10, background: color + '22', color: ffReadableColor(color), borderRadius: 4, padding: '2px 6px', fontWeight: 600 }}>
                {invLabel(inv.type)}
              </span>
              <span style={{ fontSize: 10, background: (yt?.color || '#888') + '22', color: ffReadableColor(yt?.color || "var(--neutral)"), borderRadius: 4, padding: '2px 6px', fontWeight: 600 }}>
                {yt?.label || inv.yieldType}
              </span>
              {inv.geography === 'internacional' && (
                <span style={{ fontSize: 10, background: "var(--info-bg)", color: "var(--info)", borderRadius: 4, padding: '2px 6px', fontWeight: 600 }}>
                  🌎 Intl.
                </span>
              )}
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--text-1)' }}>
              {fmtBRL(projected)}
            </div>
            {gain > 0.01 && (
              <div style={{ fontSize: 11, color: "var(--success)", fontWeight: 600 }}>
                +{fmtBRL(gain)} projetado
              </div>
            )}
          </div>
        </div>

        <div style={{ display: 'flex', gap: 16, fontSize: 11, color: 'var(--text-3)' }}>
          <span>{inv.bank}</span>
          {inv.rateValue > 0 && (
            <span style={{ color: 'var(--text-2)' }}>
              {inv.yieldType === 'pos_fixado' && inv.ratePercent
                ? `${inv.ratePercent}% do ${inv.rateIndex || 'CDI'}`
                : `${parseFloat(inv.rateValue).toFixed(2)}% a.a.`
              }
            </span>
          )}
          {monthReturn > 0 && (
            <span style={{ color: "var(--success)", fontWeight: 600 }}>~{fmtBRL(monthReturn)}/mês</span>
          )}
        </div>

        {/* Detalhe expandido */}
        {selected && (
          <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 12 }}>
              {inv.startDate && (
                <div>
                  <div style={{ fontSize: 10, color: 'var(--text-3)' }}>Início</div>
                  <div style={{ fontSize: 12, color: 'var(--text-2)', fontWeight: 500 }}>
                    {parseLocalDate(inv.startDate).toLocaleDateString('pt-BR')}
                  </div>
                </div>
              )}
              {inv.maturityDate && (
                <div>
                  <div style={{ fontSize: 10, color: 'var(--text-3)' }}>Vencimento</div>
                  <div style={{ fontSize: 12, color: 'var(--text-2)', fontWeight: 500 }}>
                    {parseLocalDate(inv.maturityDate).toLocaleDateString('pt-BR')}
                  </div>
                </div>
              )}
              <div>
                <div style={{ fontSize: 10, color: 'var(--text-3)' }}>Finalidade</div>
                <div style={{ fontSize: 12, color: 'var(--text-2)', fontWeight: 500 }}>
                  {purposeLabel(inv.purpose)}
                </div>
              </div>
              <div>
                <div style={{ fontSize: 10, color: 'var(--text-3)' }}>Responsável</div>
                <div style={{ fontSize: 12, color: 'var(--text-2)', fontWeight: 500 }}>
                  {inv.member?.name || '—'}
                </div>
              </div>
            </div>

            {/* Aportes recentes */}
            {inv.contributions?.length > 0 && (
              <div style={{ marginBottom: 10 }}>
                <div style={{ fontSize: 10, color: 'var(--text-3)', marginBottom: 4, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', opacity: 1 }}>
                  Movimentações recentes
                </div>
                {inv.contributions.slice(0, 3).map(c => (
                  <div key={c.id} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, padding: '3px 0', borderBottom: '1px solid var(--border)' }}>
                    <span style={{ color: 'var(--text-3)' }}>
                      {parseLocalDate(c.date).toLocaleDateString('pt-BR')} · {c.type}
                    </span>
                    <span style={{ fontWeight: 600, color: ffReadableColor(c.type === 'resgate' ? "var(--danger)" : "var(--success)") }}>
                      {c.type === 'resgate' ? '-' : '+'}{fmtBRL(c.value)}
                    </span>
                  </div>
                ))}
              </div>
            )}

            {readOnly ? (
              <div style={{ padding: '7px 0', textAlign: 'center', fontSize: 11, color: 'var(--text-3)' }}>
                🔒 Compartilhado por {inv.member?.name || 'outro membro'} · somente leitura
              </div>
            ) : (
              <div style={{ display: 'flex', gap: 8 }}>
                <button className="ff-button"
                  onClick={e => { e.stopPropagation(); onAporte(inv); }}
                  style={{ flex: 1, padding: '7px 0', background: "var(--success-bg)", color: "var(--success)", border: '1px solid #10B98130', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer' }}
                >
                  + Aporte / Resgate
                </button>
                <button className="ff-button"
                  onClick={e => { e.stopPropagation(); onEdit(inv); }}
                  style={{ padding: '7px 12px', background: 'var(--surface-1)', color: 'var(--text-2)', border: '1px solid var(--border)', borderRadius: 8, fontSize: 12, cursor: 'pointer' }}
                >
                  ✏️ Editar
                </button>
                <button className="ff-button"
                  onClick={e => { e.stopPropagation(); onDelete(inv.id); }}
                  style={{ padding: '7px 12px', background: "var(--danger-bg)", color: "var(--danger)", border: '1px solid #EF444430', borderRadius: 8, fontSize: 12, cursor: 'pointer' }}
                >
                  🗑️
                </button>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

// ── Modal de Aporte/Resgate ────────────────────────────────────
function AporteModal({ inv, onClose, onSave }) {
  const today = todayLocalISO();
  const [form, setForm] = useState({ type: 'aporte', value: '', date: today, note: '' });
  const [saving, setSaving] = useState(false);

  async function handleSave() {
    if (!form.value || isNaN(parseFloat(form.value))) return;
    setSaving(true);
    try {
      await onSave(inv.id, { ...form, value: parseFloat(form.value) });
      onClose();
    } finally { setSaving(false); }
  }

  const color = form.type === 'resgate' ? '#EF4444' : '#10B981';

  return (
    <div className="ff-modal-overlay" style={{ position: 'fixed', inset: 0, background: 'var(--overlay-bg)', zIndex: 'var(--z-modal)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}>
      <div className="ff-modal" role="dialog" aria-modal="true" style={{ background: 'var(--surface-0)', borderRadius: 18, padding: 24, width: '100%', maxWidth: 400, boxShadow: 'var(--shadow-lg)' }}>
        <h3 style={{ margin: '0 0 4px', fontSize: 17, color: 'var(--text-1)' }}>Movimentação</h3>
        <p style={{ margin: '0 0 20px', fontSize: 13, color: 'var(--text-3)' }}>{inv.name}</p>

        {/* Tipo */}
        <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
          {['aporte', 'resgate', 'rendimento'].map(t => (
            <button className="ff-button"
              key={t}
              type="button" aria-pressed={form.type === t} onClick={() => setForm(f => ({ ...f, type: t }))}
              style={{
                flex: 1, padding: '8px 0', borderRadius: 10, border: `1.5px solid ${form.type === t ? color : 'var(--border)'}`,
                background: form.type === t ? color + '15' : 'transparent',
                color: ffReadableColor(form.type === t ? color : 'var(--text-3)'),
                fontSize: 12, fontWeight: 600, cursor: 'pointer', textTransform: 'capitalize',
              }}
            >{t}</button>
          ))}
        </div>

        <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
          <div>
            <label htmlFor="mov-valor" style={{ fontSize: 11, color: 'var(--text-3)', display: 'block', marginBottom: 4 }}>Valor (R$)</label>
            <input
              id="mov-valor" type="number" step="0.01" min="0" value={form.value}
              onChange={e => setForm(f => ({ ...f, value: e.target.value }))}
              style={{ width: '100%', padding: '9px 10px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface-1)', color: 'var(--text-1)', fontSize: 16, boxSizing: 'border-box' }}
              placeholder="0,00"
            />
          </div>
          <div>
            <label htmlFor="mov-data" style={{ fontSize: 11, color: 'var(--text-3)', display: 'block', marginBottom: 4 }}>Data</label>
            <input
              id="mov-data" type="date" value={form.date}
              onChange={e => setForm(f => ({ ...f, date: e.target.value }))}
              style={{ width: '100%', padding: '9px 10px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface-1)', color: 'var(--text-1)', fontSize: 16, boxSizing: 'border-box' }}
            />
          </div>
        </div>

        <div style={{ marginBottom: 20 }}>
          <label htmlFor="mov-obs" style={{ fontSize: 11, color: 'var(--text-3)', display: 'block', marginBottom: 4 }}>Observação (opcional)</label>
          <input
            id="mov-obs" type="text" value={form.note}
            onChange={e => setForm(f => ({ ...f, note: e.target.value.toUpperCase() }))}
            style={{ width: '100%', padding: '9px 10px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface-1)', color: 'var(--text-1)', fontSize: 16, boxSizing: 'border-box', textTransform: 'uppercase' }}
            placeholder="Ex: Aporte mensal, rendimento de out/24..."
          />
        </div>

        <div style={{ display: 'flex', gap: 10 }}>
          <button className="ff-button" onClick={onClose} style={{ flex: 1, padding: 10, borderRadius: 10, border: '1px solid var(--border)', background: 'transparent', color: 'var(--text-2)', fontSize: 13, cursor: 'pointer' }}>
            Cancelar
          </button>
          <button className="ff-button"
            onClick={handleSave} disabled={saving || !form.value}
            style={{ flex: 2, padding: 10, borderRadius: 10, border: 'none', background: form.type === 'resgate' ? 'var(--danger-action)' : 'var(--success-action)', color: '#fff', fontSize: 13, fontWeight: 700, cursor: 'pointer', opacity: saving ? 0.7 : 1 }}
          >
            {saving ? 'Salvando…' : `Registrar ${form.type}`}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Modal de Metas ─────────────────────────────────────────────
function GoalsModal({ goals, onClose, onSave, onDelete }) {
  const [dim, setDim] = useState('asset_type');
  const [key, setKey] = useState('');
  const [targetPct, setTargetPct] = useState('');
  const [tolerancePct, setTolerancePct] = useState('5');
  const [saving, setSaving] = useState(false);

  const dimOptions = {
    asset_type: INV_TYPES.map(t => ({ value: t.value, label: t.label })),
    yield_type: YIELD_TYPES.map(t => ({ value: t.value, label: t.label })),
    geography:  GEOGRAPHIES.map(t => ({ value: t.value, label: t.label })),
  };

  async function handleSave() {
    if (!key || !targetPct) return;
    setSaving(true);
    try {
      await onSave({ dimension: dim, key, targetPct: parseFloat(targetPct), tolerancePct: parseFloat(tolerancePct || '5') });
      setKey(''); setTargetPct('');
    } finally { setSaving(false); }
  }

  return (
    <div className="ff-modal-overlay" style={{ position: 'fixed', inset: 0, background: 'var(--overlay-bg)', zIndex: 'var(--z-modal)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}>
      <div className="ff-modal" role="dialog" aria-modal="true" style={{ background: 'var(--surface-0)', borderRadius: 18, padding: 24, width: '100%', maxWidth: 480, maxHeight: '90vh', overflowY: 'auto', boxShadow: 'var(--shadow-lg)' }}>
        <h3 style={{ margin: '0 0 4px', fontSize: 17, color: 'var(--text-1)' }}>🎯 Metas de Portfólio</h3>
        <p style={{ margin: '0 0 20px', fontSize: 12, color: 'var(--text-3)' }}>
          Defina percentuais alvo para manter a carteira balanceada. O sistema alertará quando o portfólio desviar da meta.
        </p>

        {/* Dimensão */}
        <div style={{ marginBottom: 12 }}>
          <label style={{ fontSize: 11, color: 'var(--text-3)', display: 'block', marginBottom: 6 }}>Dimensão</label>
          <div style={{ display: 'flex', gap: 8 }}>
            {[['asset_type','Tipo de Ativo'], ['yield_type','Tipo de Renda'], ['geography','Geografia']].map(([v, l]) => (
              <button className="ff-button" key={v} onClick={() => { setDim(v); setKey(''); }}
                style={{ flex: 1, padding: '7px 0', borderRadius: 8, border: `1.5px solid ${dim === v ? '#0D9488' : 'var(--border)'}`, background: dim === v ? "var(--success-bg)" : 'transparent', color: ffReadableColor(dim === v ? "var(--success)" : 'var(--text-3)'), fontSize: 11, fontWeight: 600, cursor: 'pointer' }}>
                {l}
              </button>
            ))}
          </div>
        </div>

        <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gap: 10, marginBottom: 16, alignItems: 'end' }}>
          <div>
            <label style={{ fontSize: 11, color: 'var(--text-3)', display: 'block', marginBottom: 4 }}>
              {dim === 'asset_type' ? 'Classe' : dim === 'yield_type' ? 'Tipo de Renda' : 'Abrangência'}
            </label>
            <select value={key} onChange={e => setKey(e.target.value)}
              style={{ width: '100%', padding: '9px 10px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface-1)', color: ffReadableColor(key ? 'var(--text-1)' : 'var(--text-3)'), fontSize: 16, boxSizing: 'border-box' }}>
              <option value="">Selecione…</option>
              {dimOptions[dim].map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
            </select>
          </div>
          <div>
            <label style={{ fontSize: 11, color: 'var(--text-3)', display: 'block', marginBottom: 4 }}>Meta (%)</label>
            <input type="number" min="0" max="100" step="0.5" value={targetPct}
              onChange={e => setTargetPct(e.target.value)}
              style={{ width: '100%', padding: '9px 10px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface-1)', color: 'var(--text-1)', fontSize: 16, boxSizing: 'border-box' }}
              placeholder="50" />
          </div>
          <div>
            <label style={{ fontSize: 11, color: 'var(--text-3)', display: 'block', marginBottom: 4 }}>Tolerância (%)</label>
            <input type="number" min="0" max="20" step="0.5" value={tolerancePct}
              onChange={e => setTolerancePct(e.target.value)}
              style={{ width: '100%', padding: '9px 10px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface-1)', color: 'var(--text-1)', fontSize: 16, boxSizing: 'border-box' }}
              placeholder="5" />
          </div>
        </div>

        <button className="ff-button ff-action ff-primary-action" onClick={handleSave} disabled={saving || !key || !targetPct}
          style={{ width: '100%', padding: 10, borderRadius: 10, border: 'none', background: "var(--action-bg)", color: '#fff', fontSize: 13, fontWeight: 700, cursor: 'pointer', marginBottom: 20, opacity: (!key || !targetPct) ? 0.5 : 1 }}>
          {saving ? 'Salvando…' : '+ Adicionar Meta'}
        </button>

        {/* Lista de metas existentes */}
        {goals.length > 0 && (
          <div>
            <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 8, opacity: 1 }}>Metas definidas</div>
            {goals.map(g => (
              <div key={g.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 10px', background: 'var(--surface-1)', borderRadius: 8, marginBottom: 6 }}>
                <div>
                  <span style={{ fontSize: 12, color: 'var(--text-2)', fontWeight: 500 }}>
                    {g.keyLabel} <span style={{ color: 'var(--text-3)' }}>({g.dimensionLabel})</span>
                  </span>
                </div>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                  <span style={{ fontSize: 12, fontWeight: 700, color: 'var(--accent)' }}>{parseFloat(g.targetPct).toFixed(0)}%</span>
                  <span style={{ fontSize: 11, color: 'var(--text-3)' }}>±{parseFloat(g.tolerancePct).toFixed(0)}%</span>
                  <button className="ff-button" onClick={() => onDelete(g.id)}
                    style={{ background: 'none', border: 'none', color: "var(--danger)", cursor: 'pointer', padding: '2px 4px', fontSize: 14 }}>
                    ✕
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}

        <button className="ff-button" onClick={onClose} style={{ width: '100%', padding: 10, borderRadius: 10, border: '1px solid var(--border)', background: 'transparent', color: 'var(--text-2)', fontSize: 13, cursor: 'pointer', marginTop: 8 }}>
          Fechar
        </button>
      </div>
    </div>
  );
}

// ── Helpers de formulário (fora do componente para evitar remount a cada keystroke) ──
function InvFormSection({ title }) {
  return (
    <div style={{ fontSize: 10, color: 'var(--text-3)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.07em', marginBottom: 8, marginTop: 4, paddingBottom: 4, borderBottom: '1px solid var(--border)', opacity: 1 }}>
      {title}
    </div>
  );
}

// Rótulo ligado ao campo (htmlFor/id) — mesmo problema e correção do FormField.
function InvFormField({ label, children }) {
  const autoId = React.useId();
  let fieldId = null;
  const linked = React.Children.map(children, child => {
    if (fieldId || !React.isValidElement(child) || !['input', 'select', 'textarea'].includes(child.type)) return child;
    fieldId = child.props.id || autoId;
    return React.cloneElement(child, { id: fieldId });
  });
  return (
    <div>
      <label htmlFor={fieldId || undefined} style={{ fontSize: 11, color: 'var(--text-3)', display: 'block', marginBottom: 4 }}>{label}</label>
      {linked}
    </div>
  );
}

const INV_INP = { width: '100%', padding: '9px 10px', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface-1)', color: 'var(--text-1)', fontSize: 16, boxSizing: 'border-box' };

// ── Formulário de Investimento ─────────────────────────────────
const EMPTY_FORM = {
  name: '', type: 'CDB', yieldType: 'pre_fixado', geography: 'nacional',
  purpose: 'emergency', bank: '', value: '', monthlyRate: '0',
  rateValue: '', rateIndex: 'CDI', ratePercent: '',
  startDate: todayLocalISO(),
  maturityDate: '', visibility: 'private',
};

function InvFormModal({ inv, onClose, onSave }) {
  const [form, setForm] = useState(() => inv ? {
    name: inv.name, type: inv.type, yieldType: inv.yieldType || 'variavel',
    geography: inv.geography || 'nacional', purpose: inv.purpose,
    bank: inv.bank, value: String(parseFloat(inv.value)),
    monthlyRate: String(parseFloat(inv.monthlyRate || 0)),
    rateValue: inv.rateValue ? String(parseFloat(inv.rateValue)) : '',
    rateIndex: inv.rateIndex || 'CDI',
    ratePercent: inv.ratePercent ? String(parseFloat(inv.ratePercent)) : '',
    startDate: inv.startDate ? new Date(inv.startDate).toISOString().split('T')[0] : todayLocalISO(),
    maturityDate: inv.maturityDate ? new Date(inv.maturityDate).toISOString().split('T')[0] : '',
    visibility: inv.visibility || 'private', // privado é o padrão; compartilhar é escolha explícita
  } : { ...EMPTY_FORM });
  const [saving, setSaving] = useState(false);

  const isFixedIncome = form.yieldType !== 'variavel';

  async function handleSave() {
    if (!form.name || !form.bank || !form.value) return;
    setSaving(true);
    try {
      await onSave({
        ...form,
        value: parseFloat(form.value) || 0,
        monthlyRate: parseFloat(form.monthlyRate) || 0,
        rateValue: parseFloat(form.rateValue) || 0,
        ratePercent: form.ratePercent ? parseFloat(form.ratePercent) : undefined,
        maturityDate: form.maturityDate || null,
      });
      onClose();
    } finally { setSaving(false); }
  }

  // Section, F e inp definidos fora do componente (acima) para não causar remount

  return (
    <div className="ff-modal-overlay" style={{ position: 'fixed', inset: 0, background: 'var(--overlay-bg)', zIndex: 'var(--z-modal)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16, overflowY: 'auto' }}>
      <div className="ff-modal" role="dialog" aria-modal="true" style={{ background: 'var(--surface-0)', borderRadius: 18, padding: 24, width: '100%', maxWidth: 520, boxShadow: 'var(--shadow-lg)', maxHeight: '92vh', overflowY: 'auto' }}>
        <h3 style={{ margin: '0 0 20px', fontSize: 17, color: 'var(--text-1)' }}>
          {inv ? '✏️ Editar Investimento' : '➕ Novo Investimento'}
        </h3>

        <InvFormSection title="Identificação" />
        <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
          <InvFormField label="Nome do Ativo">
            <input type="text" value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value.toUpperCase() }))} style={{ ...INV_INP, textTransform: 'uppercase' }} placeholder="Ex: CDB Nubank 120% CDI" />
          </InvFormField>
          <InvFormField label="Banco / Corretora">
            <input type="text" value={form.bank} onChange={e => setForm(f => ({ ...f, bank: e.target.value.toUpperCase() }))} style={{ ...INV_INP, textTransform: 'uppercase' }} placeholder="Ex: Nubank, XP, BTG..." />
          </InvFormField>
        </div>

        <InvFormSection title="Classificação" />
        <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
          <InvFormField label="Tipo de Aplicação">
            <select value={form.type} onChange={e => setForm(f => ({ ...f, type: e.target.value }))} style={{ ...INV_INP }}>
              {INV_TYPES.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
            </select>
          </InvFormField>
          <InvFormField label="Tipo de Rendimento">
            <select value={form.yieldType} onChange={e => setForm(f => ({ ...f, yieldType: e.target.value }))} style={{ ...INV_INP }}>
              {YIELD_TYPES.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
            </select>
          </InvFormField>
          <InvFormField label="Abrangência">
            <select value={form.geography} onChange={e => setForm(f => ({ ...f, geography: e.target.value }))} style={{ ...INV_INP }}>
              {GEOGRAPHIES.map(t => <option key={t.value} value={t.value}>{t.flag} {t.label}</option>)}
            </select>
          </InvFormField>
          <InvFormField label="Finalidade / Objetivo">
            <select value={form.purpose} onChange={e => setForm(f => ({ ...f, purpose: e.target.value }))} style={{ ...INV_INP }}>
              {PURPOSES.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
            </select>
          </InvFormField>
        </div>

        <InvFormSection title="Valores" />
        <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
          <InvFormField label="Saldo Atual (R$)">
            <input type="number" min="0" step="0.01" value={form.value} onChange={e => setForm(f => ({ ...f, value: e.target.value }))} style={{ ...INV_INP }} placeholder="0,00" />
          </InvFormField>
          {isFixedIncome ? (
            form.yieldType === 'pos_fixado' ? (
              <>
                <InvFormField label="Índice de Referência">
                  <select value={form.rateIndex} onChange={e => setForm(f => ({ ...f, rateIndex: e.target.value }))} style={{ ...INV_INP }}>
                    {RATE_INDEXES.map(i => <option key={i}>{i}</option>)}
                  </select>
                </InvFormField>
                <InvFormField label={`% do ${form.rateIndex || 'CDI'}`}>
                  <input type="number" min="0" step="0.5" value={form.ratePercent} onChange={e => setForm(f => ({ ...f, ratePercent: e.target.value }))} style={{ ...INV_INP }} placeholder="110" />
                </InvFormField>
                <InvFormField label="Taxa efetiva a.a. (%)">
                  <input type="number" min="0" step="0.01" value={form.rateValue} onChange={e => setForm(f => ({ ...f, rateValue: e.target.value }))} style={{ ...INV_INP }} placeholder="12.5 (para cálculo)" />
                </InvFormField>
              </>
            ) : form.yieldType === 'ipca_plus' ? (
              <>
                <InvFormField label="IPCA + (% a.a.)">
                  <input type="number" min="0" step="0.01" value={form.rateValue} onChange={e => setForm(f => ({ ...f, rateValue: e.target.value }))} style={{ ...INV_INP }} placeholder="6.5 (spread sobre IPCA)" />
                </InvFormField>
              </>
            ) : (
              <InvFormField label="Taxa (% a.a.)">
                <input type="number" min="0" step="0.01" value={form.rateValue} onChange={e => setForm(f => ({ ...f, rateValue: e.target.value }))} style={{ ...INV_INP }} placeholder="12.00" />
              </InvFormField>
            )
          ) : (
            <InvFormField label="Rentab. mensal estimada (%)">
              <input type="number" min="0" step="0.01" value={form.monthlyRate} onChange={e => setForm(f => ({ ...f, monthlyRate: e.target.value }))} style={{ ...INV_INP }} placeholder="0.00" />
            </InvFormField>
          )}
        </div>

        <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, marginBottom: 16 }}>
          <InvFormField label="Data de Início">
            <input type="date" value={form.startDate} onChange={e => setForm(f => ({ ...f, startDate: e.target.value }))} style={{ ...INV_INP }} />
          </InvFormField>
          <InvFormField label="Vencimento (opt.)">
            <input type="date" value={form.maturityDate} onChange={e => setForm(f => ({ ...f, maturityDate: e.target.value }))} style={{ ...INV_INP }} />
          </InvFormField>
          <InvFormField label="Visibilidade">
            <select value={form.visibility} onChange={e => setForm(f => ({ ...f, visibility: e.target.value }))} style={{ ...INV_INP }}>
              <option value="open">Família toda</option>
              <option value="private">Somente eu</option>
            </select>
          </InvFormField>
        </div>

        <div style={{ display: 'flex', gap: 10 }}>
          <button className="ff-button" onClick={onClose} style={{ flex: 1, padding: 11, borderRadius: 10, border: '1px solid var(--border)', background: 'transparent', color: 'var(--text-2)', fontSize: 13, cursor: 'pointer' }}>
            Cancelar
          </button>
          <button className="ff-button ff-action ff-primary-action"
            onClick={handleSave} disabled={saving || !form.name || !form.bank || !form.value}
            style={{ flex: 2, padding: 11, borderRadius: 10, border: 'none', background: "var(--action-bg)", color: '#fff', fontSize: 13, fontWeight: 700, cursor: 'pointer', opacity: saving ? 0.7 : 1 }}
          >
            {saving ? 'Salvando…' : inv ? 'Salvar Alterações' : 'Cadastrar Investimento'}
          </button>
        </div>
      </div>
    </div>
  );
}

// ── Tela Principal ─────────────────────────────────────────────
function Investimentos() {
  const { currentMember } = useApp();

  const [investments, setInvestments] = useState([]);
  const [goals, setGoals] = useState([]);
  const [summary, setSummary] = useState(null);
  const [loading, setLoading] = useState(true);

  const [selected, setSelected] = useState(null);
  const [filterType, setFilterType] = useState('todos');
  const [filterYield, setFilterYield] = useState('todos');

  const [showForm, setShowForm] = useState(false);
  const [editInv, setEditInv] = useState(null);
  const [aporteInv, setAporteInv] = useState(null);
  const [showGoals, setShowGoals] = useState(false);
  const [deleteId, setDeleteId] = useState(null);
  const [toast, setToast] = useState('');

  const showToast = msg => { setToast(msg); setTimeout(() => setToast(''), 3000); };

  // ── Carregar dados ──────────────────────────────────────────
  async function loadAll() {
    setLoading(true);
    try {
      const [{ data }, goalsData, sumData] = await Promise.all([
        apiFetch('/investments'),
        apiFetch('/portfolio-goals'),
        apiFetch('/investments/summary'),
      ]);
      setInvestments(data || []);
      setGoals(goalsData || []);
      setSummary(sumData || null);
    } catch (e) {
      console.error(e);
    } finally { setLoading(false); }
  }

  useEffect(() => { loadAll(); }, []);

  // ── CRUD ────────────────────────────────────────────────────
  async function handleSaveInv(form) {
    if (editInv) {
      await apiFetch(`/investments/${editInv.id}`, { method: 'PATCH', body: form });
      showToast('Investimento atualizado!');
    } else {
      await apiFetch('/investments', { method: 'POST', body: form });
      showToast('Investimento cadastrado!');
    }
    setEditInv(null);
    loadAll();
  }

  async function handleDelete(id) {
    setDeleteId(null);
    await apiFetch(`/investments/${id}`, { method: 'DELETE' });
    setInvestments(prev => prev.filter(i => i.id !== id));
    setSelected(null);
    showToast('Investimento removido.');
    loadAll();
  }

  async function handleAporte(invId, form) {
    const res = await apiFetch(`/investments/${invId}/contributions`, { method: 'POST', body: form });
    showToast('Movimentação registrada!');
    loadAll();
  }

  async function handleSaveGoal(data) {
    await apiFetch('/portfolio-goals', { method: 'POST', body: data });
    showToast('Meta salva!');
    loadAll();
  }

  async function handleDeleteGoal(id) {
    await apiFetch(`/portfolio-goals/${id}`, { method: 'DELETE' });
    setGoals(prev => prev.filter(g => g.id !== id));
  }

  // ── Computação de portfólio ──────────────────────────────────
  // Só os PRÓPRIOS investimentos entram nas somas/gráficos do portfólio — os
  // que outro membro escolheu compartilhar (isOwn: false) são só leitura e
  // aparecem numa seção separada, para não inflar o "meu" patrimônio.
  const enriched = useMemo(() => investments.filter(i => i.isOwn !== false).map(inv => ({
    ...inv,
    projectedValue: calcProjectedValue(inv),
  })), [investments]);

  const sharedByOthers = useMemo(() => investments.filter(i => i.isOwn === false).map(inv => ({
    ...inv,
    projectedValue: calcProjectedValue(inv),
  })), [investments]);

  const totalProjected = useMemo(() =>
    enriched.reduce((s, i) => s + i.projectedValue, 0), [enriched]);

  const totalMonthReturn = useMemo(() =>
    enriched.reduce((s, i) => s + calcMonthReturn(i), 0), [enriched]);

  // Breakdown para gráficos
  const byType = useMemo(() => {
    const map = {};
    enriched.forEach(i => { map[i.type] = (map[i.type] || 0) + i.projectedValue; });
    return INV_TYPES.filter(t => map[t.value]).map(t => ({ label: t.label, value: map[t.value], color: t.color }));
  }, [enriched]);

  const byYield = useMemo(() => {
    const map = {};
    enriched.forEach(i => { map[i.yieldType] = (map[i.yieldType] || 0) + i.projectedValue; });
    return YIELD_TYPES.filter(t => map[t.value]).map(t => ({ label: t.label, value: map[t.value], color: t.color }));
  }, [enriched]);

  const byGeo = useMemo(() => {
    const map = {};
    enriched.forEach(i => { map[i.geography] = (map[i.geography] || 0) + i.projectedValue; });
    return GEOGRAPHIES.filter(t => map[t.value]).map(t => ({ label: t.label, value: map[t.value], color: t.color }));
  }, [enriched]);

  // ── Breakdown por instituição financeira ────────────────────
  const byBank = useMemo(() => {
    const map = {};
    enriched.forEach(i => {
      const key = (i.bank || 'Sem instituição').trim();
      if (!map[key]) map[key] = { total: 0, count: 0, types: new Set() };
      map[key].total += i.projectedValue;
      map[key].count += 1;
      map[key].types.add(i.type);
    });
    return Object.entries(map)
      .map(([bank, d]) => ({
        bank,
        total: d.total,
        count: d.count,
        pct: totalProjected > 0 ? d.total / totalProjected * 100 : 0,
        types: [...d.types],
      }))
      .sort((a, b) => b.total - a.total);
  }, [enriched, totalProjected]);

  // ── Goals com percentuais reais ─────────────────────────────
  const goalsEnriched = useMemo(() => {
    const byTypeMap = {};
    const byYieldMap = {};
    const byGeoMap = {};
    enriched.forEach(i => {
      byTypeMap[i.type]       = (byTypeMap[i.type]       || 0) + i.projectedValue;
      byYieldMap[i.yieldType] = (byYieldMap[i.yieldType] || 0) + i.projectedValue;
      byGeoMap[i.geography]   = (byGeoMap[i.geography]   || 0) + i.projectedValue;
    });

    const dimLookup = {
      asset_type: { ...Object.fromEntries(INV_TYPES.map(t => [t.value, t.label])), map: byTypeMap },
      yield_type: { ...Object.fromEntries(YIELD_TYPES.map(t => [t.value, t.label])), map: byYieldMap },
      geography:  { ...Object.fromEntries(GEOGRAPHIES.map(t => [t.value, t.label])), map: byGeoMap },
    };

    const dimLabel = { asset_type: 'Tipo', yield_type: 'Renda', geography: 'Geo' };

    return goals.map(g => {
      const dim = dimLookup[g.dimension] || {};
      const actual = totalProjected > 0 ? ((dim.map?.[g.key] || 0) / totalProjected * 100) : 0;
      return {
        ...g,
        keyLabel: dim[g.key] || g.key,
        dimensionLabel: dimLabel[g.dimension] || g.dimension,
        actual,
      };
    });
  }, [goals, enriched, totalProjected]);

  const outOfBalance = goalsEnriched.filter(g => Math.abs(g.actual - parseFloat(g.targetPct)) > parseFloat(g.tolerancePct));

  // ── Filtros ─────────────────────────────────────────────────
  const filtered = useMemo(() => enriched.filter(i => {
    if (filterType  !== 'todos' && i.type      !== filterType)  return false;
    if (filterYield !== 'todos' && i.yieldType !== filterYield) return false;
    return true;
  }), [enriched, filterType, filterYield]);

  // ── Render ──────────────────────────────────────────────────
  if (loading) return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 300, flexDirection: 'column', gap: 10 }}>
      <div style={{ width: 32, height: 32, border: '3px solid var(--border)', borderTopColor: 'var(--accent)', borderRadius: '50%', animation: 'spin 0.8s linear infinite' }} />
      <span style={{ color: 'var(--text-3)', fontSize: 13 }}>Carregando portfólio…</span>
    </div>
  );

  const chipStyle = (active) => ({
    padding: '5px 12px', borderRadius: 20, fontSize: 12, cursor: 'pointer', fontWeight: 500,
    border: `1px solid ${active ? 'var(--success)' : 'var(--border)'}`,
    background: active ? 'var(--success-bg)' : 'transparent',
    color: active ? 'var(--success)' : 'var(--text-3)',
  });

  return (
    <div style={{ padding: '20px 24px', maxWidth: 1100, margin: '0 auto' }}>

      {/* ── KPIs ─────────────────────────────────────────────── */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 14, marginBottom: 24 }}>
        {[
          { label: 'Total Investido', value: fmtBRL(totalProjected), icon: 'Layers', color: 'var(--accent)', sub: `${enriched.length} ativos` },
          { label: 'Rendimento do Mês', value: fmtBRL(totalMonthReturn), icon: 'TrendingUp', color: '#10B981', sub: totalProjected ? `${(totalMonthReturn / totalProjected * 100).toFixed(2)}% ao mês` : '—' },
          { label: 'Rendimento do Ano', value: fmtBRL(summary?.yearReturn || 0), icon: 'BarChart2', color: '#F59E0B', sub: totalProjected && summary?.yearReturn ? `${(summary.yearReturn / totalProjected * 100).toFixed(2)}% no ano` : '—' },
          { label: 'Alertas de Rebalance', value: goals.length === 0 ? 'Sem metas' : outOfBalance.length > 0 ? `${outOfBalance.length} alerta${outOfBalance.length > 1 ? 's' : ''}` : '✅ Balanceado', icon: goals.length === 0 ? 'Info' : outOfBalance.length > 0 ? 'AlertTriangle' : 'CheckCircle', color: goals.length === 0 ? '#94A3B8' : outOfBalance.length > 0 ? '#EF4444' : '#10B981', sub: goals.length === 0 ? 'Defina metas de alocação' : outOfBalance.length > 0 ? 'Carteira fora do alvo' : 'Dentro das metas' },
        ].map((k, i) => (
          <div className="ff-card" key={i} style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 'var(--card-radius)', padding: '16px 18px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <span style={{ fontSize: 12, color: 'var(--text-3)', fontWeight: 500 }}>{k.label}</span>
              <div style={{ width: 32, height: 32, borderRadius: 10, background: k.color + '20', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon name={k.icon} size={16} color={k.color} />
              </div>
            </div>
            <div style={{ fontSize: 20, fontWeight: 800, color: 'var(--text-1)', letterSpacing: '-0.02em' }}>{k.value}</div>
            <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 3 }}>{k.sub}</div>
          </div>
        ))}
      </div>

      {/* ── Layout 2 colunas ─────────────────────────────────── */}
      <div className="r-stack" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.6fr) minmax(0,1fr)', gap: 20, marginBottom: 24 }}>

        {/* ── Breakdown da Carteira ─────────────────────────── */}
        <div className="ff-card" style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 'var(--card-radius)', padding: 20 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: 'var(--text-1)' }}>📊 Composição da Carteira</h3>
            <span style={{ fontSize: 12, color: 'var(--text-3)' }}>{fmtBRL(totalProjected)} total</span>
          </div>

          <div className="r-stack" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {[
              { title: 'Por Tipo', data: byType, total: `${byType.length} tipos` },
              { title: 'Por Renda', data: byYield, total: `${byYield.length} categorias` },
              { title: 'Por Geo', data: byGeo, total: `${byGeo.length} regiões` },
            ].map(({ title, data, total }) => (
              <div key={title} style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.05em', opacity: 1 }}>{title}</div>
                <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 10 }}>
                  <DonutChart data={data} size={110} label={total} total={`${data.length}`} />
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                  {data.slice(0, 4).map(d => (
                    <div key={d.label} style={{ display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'space-between' }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                        <div style={{ width: 7, height: 7, borderRadius: '50%', background: d.color, flexShrink: 0 }} />
                        <span style={{ fontSize: 10, color: 'var(--text-3)', whiteSpace: 'nowrap' }}>{d.label}</span>
                      </div>
                      <span style={{ fontSize: 10, color: 'var(--text-2)', fontWeight: 600 }}>
                        {totalProjected > 0 ? (d.value / totalProjected * 100).toFixed(0) : 0}%
                      </span>
                    </div>
                  ))}
                  {data.length > 4 && <span style={{ fontSize: 10, color: 'var(--text-3)' }}>+{data.length - 4} outros</span>}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* ── Metas e Rebalanceamento ───────────────────────── */}
        <div className="ff-card" style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 'var(--card-radius)', padding: 20 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: 'var(--text-1)' }}>🎯 Metas</h3>
            <button className="ff-button"
              onClick={() => setShowGoals(true)}
              style={{ padding: '5px 12px', borderRadius: 8, border: '1px solid var(--border)', background: 'transparent', color: 'var(--text-2)', fontSize: 12, cursor: 'pointer', fontWeight: 500 }}
            >
              Gerenciar
            </button>
          </div>

          {goalsEnriched.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '24px 0', color: 'var(--text-3)' }}>
              <div style={{ fontSize: 32, marginBottom: 8 }}>🎯</div>
              <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 4 }}>Nenhuma meta definida</div>
              <div style={{ fontSize: 12 }}>Clique em "Gerenciar" para definir targets de alocação</div>
            </div>
          ) : (
            <div style={{ maxHeight: 260, overflowY: 'auto' }}>
              {goalsEnriched.map(g => (
                <GoalBar key={g.id} goal={g} actual={g.actual} />
              ))}
            </div>
          )}

          {outOfBalance.length > 0 && (
            <div style={{ marginTop: 12, padding: '10px 12px', background: "var(--danger-bg)", border: '1px solid #EF444430', borderRadius: 10 }}>
              <div style={{ fontSize: 12, color: "var(--danger)", fontWeight: 700, marginBottom: 4 }}>⚠️ Rebalanceamento sugerido</div>
              {outOfBalance.map(g => {
                const diff = g.actual - parseFloat(g.targetPct);
                return (
                  <div key={g.id} style={{ fontSize: 11, color: "var(--danger)", marginBottom: 2 }}>
                    {g.keyLabel}: {diff > 0 ? 'reduzir' : 'aumentar'} {Math.abs(diff).toFixed(1)}%
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>

      {/* ── Por Instituição Financeira ───────────────────────── */}
      {byBank.length > 0 && (
        <div className="ff-card" style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 'var(--card-radius)', padding: 20, marginBottom: 24 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
            <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: 'var(--text-1)' }}>🏦 Total por Instituição</h3>
            <span style={{ fontSize: 12, color: 'var(--text-3)', opacity: 1 }}>{byBank.length} instituiç{byBank.length === 1 ? 'ão' : 'ões'}</span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 12 }}>
            {byBank.map(b => {
              const barColor = '#0D9488';
              const typeColors = b.types.map(t => invColor(t));
              return (
                <div key={b.bank} style={{
                  background: 'var(--surface-1)',
                  border: '1px solid var(--border)',
                  borderRadius: 12,
                  padding: '14px 16px',
                  position: 'relative',
                  overflow: 'hidden',
                }}>
                  {/* Barra de proporção no topo */}
                  <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'var(--border)', borderRadius: '12px 12px 0 0' }}>
                    <div style={{ width: `${Math.min(100, b.pct)}%`, height: '100%', background: barColor, borderRadius: '12px 12px 0 0', transition: 'width .4s' }} />
                  </div>

                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      {/* Ícone de banco gerado com iniciais */}
                      <div style={{
                        width: 36, height: 36, borderRadius: 10,
                        background: barColor + '20',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 13, fontWeight: 800, color: ffReadableColor(barColor), flexShrink: 0,
                        letterSpacing: '-0.02em',
                      }}>
                        {b.bank.slice(0, 2).toUpperCase()}
                      </div>
                      <div>
                        <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-1)', lineHeight: 1.2 }}>{b.bank}</div>
                        <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 1 }}>
                          {b.count} ativo{b.count !== 1 ? 's' : ''}
                        </div>
                      </div>
                    </div>
                    <div style={{
                      fontSize: 11, fontWeight: 700, color: ffReadableColor(barColor),
                      background: barColor + '15', borderRadius: 6,
                      padding: '2px 7px', flexShrink: 0,
                    }}>
                      {b.pct.toFixed(1)}%
                    </div>
                  </div>

                  {/* Valor total */}
                  <div style={{ fontSize: 17, fontWeight: 800, color: 'var(--text-1)', letterSpacing: '-0.02em', marginBottom: 8 }}>
                    {fmtBRL(b.total)}
                  </div>

                  {/* Tipos de ativos como chips coloridos */}
                  <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
                    {b.types.map(t => (
                      <span key={t} style={{
                        fontSize: 10, fontWeight: 600,
                        background: invColor(t) + '22', color: ffReadableColor(invColor(t)),
                        borderRadius: 4, padding: '2px 6px',
                      }}>
                        {invLabel(t)}
                      </span>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* ── Lista de Investimentos ───────────────────────────── */}
      <div className="ff-card" style={{ background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 'var(--card-radius)', padding: 20 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, flexWrap: 'wrap', gap: 10 }}>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: 'var(--text-1)' }}>💼 Ativos</h3>
          <button className="ff-button ff-action ff-primary-action"
            onClick={() => { setEditInv(null); setShowForm(true); }}
            style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 16px', borderRadius: 10, border: 'none', background: "var(--action-bg)", color: '#fff', fontSize: 13, fontWeight: 700, cursor: 'pointer' }}
          >
            <Icon name="Plus" size={15} color="#fff" />
            Novo Ativo
          </button>
        </div>

        {/* Filtros */}
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 16 }}>
          <button className="ff-button" style={chipStyle(filterType === 'todos')} onClick={() => setFilterType('todos')}>Todos</button>
          {INV_TYPES.filter(t => enriched.some(i => i.type === t.value)).map(t => (
            <button className="ff-button" key={t.value} style={chipStyle(filterType === t.value)} onClick={() => setFilterType(t.value)}>
              {t.label}
            </button>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 16 }}>
          <button className="ff-button" style={{ ...chipStyle(filterYield === 'todos'), fontSize: 11 }} onClick={() => setFilterYield('todos')}>Toda renda</button>
          {YIELD_TYPES.filter(t => enriched.some(i => i.yieldType === t.value)).map(t => (
            <button className="ff-button" key={t.value} style={{ ...chipStyle(filterYield === t.value), fontSize: 11 }} onClick={() => setFilterYield(t.value)}>
              {t.label}
            </button>
          ))}
        </div>

        {/* Lista */}
        {filtered.length === 0 ? (
          <div style={{ textAlign: 'center', padding: '40px 0', color: 'var(--text-3)' }}>
            <div style={{ fontSize: 40, marginBottom: 12 }}>📭</div>
            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 6 }}>
              {enriched.length === 0 ? 'Nenhum investimento cadastrado' : 'Nenhum resultado para os filtros'}
            </div>
            <div style={{ fontSize: 12 }}>
              {enriched.length === 0 ? 'Clique em "Novo Ativo" para começar a registrar sua carteira.' : 'Tente remover os filtros.'}
            </div>
          </div>
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 12 }}>
            {filtered.map(inv => (
              <InvCard
                key={inv.id}
                inv={inv}
                selected={selected === inv.id}
                onSelect={setSelected}
                onEdit={i => { setEditInv(i); setShowForm(true); }}
                onDelete={id => setDeleteId(id)}
                onAporte={i => setAporteInv(i)}
              />
            ))}
          </div>
        )}

        {/* Compartilhados por outros membros — nunca entram nas somas do portfólio acima */}
        {sharedByOthers.length > 0 && (
          <div style={{ marginTop: 24 }}>
            <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 12, opacity: 1 }}>
              Compartilhado pela família
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 12 }}>
              {sharedByOthers.map(inv => (
                <InvCard
                  key={inv.id}
                  inv={inv}
                  readOnly
                  selected={selected === inv.id}
                  onSelect={setSelected}
                  onEdit={() => {}}
                  onDelete={() => {}}
                  onAporte={() => {}}
                />
              ))}
            </div>
          </div>
        )}
      </div>

      {/* ── Modais ──────────────────────────────────────────── */}
      {showForm && (
        <InvFormModal
          inv={editInv}
          onClose={() => { setShowForm(false); setEditInv(null); }}
          onSave={handleSaveInv}
        />
      )}

      {aporteInv && (
        <AporteModal
          inv={aporteInv}
          onClose={() => setAporteInv(null)}
          onSave={handleAporte}
        />
      )}

      {showGoals && (
        <GoalsModal
          goals={goalsEnriched}
          onClose={() => setShowGoals(false)}
          onSave={handleSaveGoal}
          onDelete={handleDeleteGoal}
        />
      )}

      {deleteId && (
        <div className="ff-modal-overlay" style={{ position: 'fixed', inset: 0, background: 'var(--overlay-bg)', zIndex: 'var(--z-modal)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}>
          <div className="ff-modal" role="dialog" aria-modal="true" style={{ background: 'var(--surface-0)', borderRadius: 18, padding: 28, maxWidth: 360, width: '100%', textAlign: 'center', boxShadow: 'var(--shadow-lg)' }}>
            <div style={{ fontSize: 40, marginBottom: 12 }}>🗑️</div>
            <h3 style={{ margin: '0 0 8px', fontSize: 16, color: 'var(--text-1)' }}>Excluir investimento?</h3>
            <p style={{ fontSize: 13, color: 'var(--text-3)', margin: '0 0 20px' }}>Todos os aportes e histórico serão removidos. Esta ação não pode ser desfeita.</p>
            <div style={{ display: 'flex', gap: 10 }}>
              <button className="ff-button" onClick={() => setDeleteId(null)} style={{ flex: 1, padding: 11, borderRadius: 10, border: '1px solid var(--border)', background: 'transparent', color: 'var(--text-2)', fontSize: 13, cursor: 'pointer' }}>
                Cancelar
              </button>
              <button className="ff-button" onClick={() => handleDelete(deleteId)} style={{ flex: 1, padding: 11, borderRadius: 10, border: 'none', background: "var(--danger-action)", color: '#fff', fontSize: 13, fontWeight: 700, cursor: 'pointer' }}>
                Excluir
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Toast */}
      {toast && (
        <div style={{
          position: 'fixed', bottom: 90, left: '50%', transform: 'translateX(-50%)',
          background: '#1e293b', color: '#fff', padding: '10px 20px', borderRadius: 10,
          fontSize: 13, fontWeight: 500, zIndex: 'var(--z-toast)', boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
        }}>{toast}</div>
      )}
    </div>
  );
}

window.Investimentos = Investimentos;