// ============================================================
// FINAFAMILY — Receitas Screen
// ============================================================

const { useState, useMemo, useEffect } = React;

function IncomeForm({ onClose, onSave, initialValues }) {
  const { members, currentMember, incomeSources } = useApp();
  const today = todayLocalISO();
  const sources = (incomeSources && incomeSources.length) ? incomeSources : [
    { key: 'salary', label: 'Salário' }, { key: 'freelance', label: 'Freelance' },
    { key: 'passive', label: 'Renda Passiva' }, { key: 'rent', label: 'Aluguel' }, { key: 'other', label: 'Outros' },
  ];
  const defaultSource = sources[0]?.key || 'salary';
  const isEditing = !!initialValues;

  const [form, setForm] = useState(() => initialValues ? {
    ...initialValues,
    value: String(initialValues.value ?? ''),
    status: initialValues.status || 'expected',
  } : {
    desc: '', value: '', date: today,
    memberId: currentMember?.id || '',
    source: defaultSource,
    recurrence: 'monthly',
    status: 'expected',
  });
  const [errors, setErrors] = useState({});
  function set(k, v) { setForm(f => ({ ...f, [k]: v })); }

  function handleSave() {
    const e = {};
    if (!form.desc || !form.desc.trim()) e.desc = 'Descrição obrigatória';
    const val = parseFloat(String(form.value).replace(',', '.'));
    if (!form.value || isNaN(val) || val <= 0) e.value = 'Informe um valor válido';
    if (Object.keys(e).length) { setErrors(e); return; }
    const memberId = form.memberId || currentMember?.id;
    onSave({ ...form, value: val, memberId, id: initialValues?.id });
    onClose();
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <FormField label="Descrição" error={errors.desc}>
        <Input value={form.desc} onChange={e => set('desc', e.target.value)} placeholder="Ex: Salário Maio" />
      </FormField>
      <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <FormField label="Valor (R$)" error={errors.value}>
          <Input type="number" value={form.value} onChange={e => set('value', e.target.value)} placeholder="0,00" min="0.01" step="0.01" />
        </FormField>
        <FormField label="Data">
          <Input type="date" value={form.date} onChange={e => set('date', e.target.value)} />
        </FormField>
      </div>
      <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        <FormField label="Fonte">
          <Select value={form.source} onChange={e => set('source', e.target.value)}>
            {sources.map(s => <option key={s.key} value={s.key}>{s.label}</option>)}
          </Select>
        </FormField>
        <FormField label="Recorrência">
          <Select value={form.recurrence} onChange={e => set('recurrence', e.target.value)}>
            <option value="monthly">Mensal</option>
            <option value="single">Única</option>
          </Select>
        </FormField>
      </div>
      <FormField label="Membro">
        <Select value={form.memberId || currentMember?.id || ''} onChange={e => set('memberId', e.target.value)}>
          {members.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
        </Select>
      </FormField>
      <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
        <button className="ff-button" onClick={onClose} style={{ flex: 1, padding: '11px', background: 'var(--surface-2)', border: '1px solid var(--border)', borderRadius: 10, color: 'var(--text-2)', fontWeight: 600, cursor: 'pointer', fontSize: 14 }}>Cancelar</button>
        <button className="ff-button ff-action ff-primary-action" onClick={handleSave} style={{ flex: 2, padding: '11px', background: "var(--action-bg)", border: 'none', borderRadius: 10, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 14 }}>{isEditing ? 'Salvar Alterações' : 'Salvar Receita'}</button>
      </div>
    </div>
  );
}

const SOURCE_COLORS_DEFAULT = { salary: '#10B981', freelance: '#3B82F6', passive: '#8B5CF6', rent: '#F59E0B', third_party: '#0D9488', other: '#94A3B8' };
const COLOR_PALETTE = ['#10B981','#3B82F6','#8B5CF6','#F59E0B','#EF4444','#0D9488','#F97316','#EC4899'];
function getSourceLabel(key, incomeSources) {
  const found = incomeSources.find(s => s.key === key);
  if (found) return found.label;
  if (key === 'third_party') return 'Previsto Terceiro';
  return key;
}
function getSourceColor(key, index) {
  return SOURCE_COLORS_DEFAULT[key] || COLOR_PALETTE[index % COLOR_PALETTE.length] || '#94A3B8';
}

function Receitas({ onNavigate = () => {} }) {
  const { incomes, monthIncomes, addIncome, deleteIncome, updateIncome, markAllReceivedByMonth,
          members, currentMember, currentMonth, fetchMonthIncomes,
          incomeSources, myReceivables, totalIncome, totalProprio, totalAReceber } = useApp();
  const [showForm,         setShowForm]         = useState(false);
  const [toast,            setToast]            = useState(null);
  const [deleteConfirm,    setDeleteConfirm]    = useState(null);
  const [editingIncome,    setEditingIncome]    = useState(null);
  const [expandedMembers,  setExpandedMembers]  = useState({});
  const [receiveConfirm,   setReceiveConfirm]   = useState(false); // modal bulk
  const [receiving,        setReceiving]        = useState(false);

  // Receitas do membro atual no mês — usa monthIncomes do contexto (já inclui projeção de mensais)
  const allMonthIncomes = useMemo(() =>
    monthIncomes.filter(i => !isMemberReceivableIncome(i)),
  [monthIncomes]);

  // ── "A Receber": um item por Reembolso (devedor × despesa), mesma base do Balancete ──
  const [receivingId, setReceivingId] = useState(null);
  const aReceberItems = (myReceivables || []).map(i => ({
    key:      `tp:${i.id}`,
    incomeId: i.id,
    status:   i.status || 'expected',
    settledBySettlement: !!i.settlementId,
    desc:     (i.desc || '').replace(/^Reembolso — /, ''),
    debtorId: i.fromMemberId,
    amount:   Number(i.value) || 0,
    date:     i.date,
    label:    i.origin === 'member_operation' || i.operationId ? 'Valor entre membros' : 'Reembolso',
    operationId: i.operationId,
  }));

  async function toggleReceived(item) {
    const next = item.status === 'received' ? 'expected' : 'received';
    setReceivingId(item.incomeId);
    const r = await updateIncome(item.incomeId, { status: next });
    setReceivingId(null);
    setToast(r === true
      ? (next === 'received' ? 'Recebimento confirmado — dívida quitada no Balancete.' : 'Recebimento desfeito — dívida reaberta.')
      : (r?.message || 'Não foi possível atualizar. Tente novamente.'));
    setTimeout(() => setToast(null), 3000);
  }
  // Usa os totais do contexto (fonte única de verdade, igual ao dashboard)
  const total = totalIncome;

  // Evolução real dos últimos 6 meses. Antes os meses passados eram
  // Math.random() — números inventados exibidos como se fossem o histórico.
  useEffect(() => {
    for (let i = 1; i <= 5; i++) {
      const d = new Date(currentMonth.year, currentMonth.month - 1 - i, 1);
      fetchMonthIncomes(d.getFullYear(), d.getMonth() + 1);
    }
  }, [currentMonth.year, currentMonth.month]);
  const MONTHS_PT_SHORT = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];
  const barData = useMemo(() => {
    const months = [];
    for (let i = 5; i >= 0; i--) {
      const d = new Date(currentMonth.year, currentMonth.month - 1 - i, 1);
      months.push({ month: MONTHS_PT_SHORT[d.getMonth()], year: d.getFullYear(), m: d.getMonth() + 1 });
    }
    return months.map((m, i) => ({
      month: m.month,
      value: i === 5 ? total : incomes.filter(inc => {
        const d = parseLocalDate(inc.date);
        return inc.memberId === currentMember.id && d.getFullYear() === m.year && d.getMonth() + 1 === m.m;
      }).reduce((s, inc) => s + (Number(inc.value) || 0), 0),
      isCurrent: i === 5,
    }));
  }, [currentMonth, total, incomes, currentMember.id]);
  const maxVal = Math.max(...barData.map(d => d.value), 1);

  // Receitas previstas (expected) no mês atual — inclui projeções de mensais recorrentes
  const expectedIncomes = useMemo(() =>
    allMonthIncomes.filter(i => i.status === 'expected'),
  [allMonthIncomes]);

  const expectedTotal = useMemo(() =>
    expectedIncomes.reduce((s, i) => s + (i.value || 0), 0),
  [expectedIncomes]);

  async function handleReceiveAll() {
    setReceiving(true);
    try {
      const nonProjected = await markAllReceivedByMonth(currentMonth.month, currentMonth.year);
      // Projeções de mensais recorrentes não têm registro real — cria um por mês
      const projectedExpected = allMonthIncomes.filter(i => i._projected);
      for (const inc of projectedExpected) {
        await addIncome({
          desc: inc.desc, value: inc.value, date: inc.date,
          source: inc.source, recurrence: 'single', status: 'received',
          memberId: inc.memberId,
        });
      }
      const total = nonProjected + projectedExpected.length;
      setToast(`${total} receita${total !== 1 ? 's' : ''} marcada${total !== 1 ? 's' : ''} como recebida${total !== 1 ? 's' : ''}!`);
      setTimeout(() => setToast(null), 3000);
    } finally {
      setReceiving(false);
      setReceiveConfirm(false);
    }
  }

  return (
    <>
    <div className="screen-outer" style={{ padding: 24, maxWidth: 1000, margin: '0 auto', width: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 24 }}>
      {toast && <Toast message={toast} type="success" onClose={() => setToast(null)} />}
      <Modal open={showForm} onClose={() => setShowForm(false)} title="Nova Receita">
        <IncomeForm onClose={() => setShowForm(false)} onSave={inc => { addIncome(inc); setToast('Receita cadastrada!'); }} />
      </Modal>
      <Modal open={!!editingIncome} onClose={() => setEditingIncome(null)} title="Editar Receita">
        {editingIncome && (
          <IncomeForm initialValues={editingIncome} onClose={() => setEditingIncome(null)}
            onSave={async (updated) => { const r = await updateIncome(updated.id, updated); setToast(r === true ? 'Receita atualizada!' : (r?.message || 'Não foi possível atualizar a receita.')); }} />
        )}
      </Modal>

      <MemberOperationButton onClick={() => onNavigate('entre-membros')}>Valores entre membros · registrar recebimentos</MemberOperationButton>
      {/* ── Header ─────────────────────────────────────────────── */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <div>
          <div style={{ fontSize: 28, fontWeight: 800, color: 'var(--text-1)', letterSpacing: '-0.02em' }}>{fmtBRL(total)}</div>
          <div style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 2, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <span>Receitas de {currentMember.name.split(' ')[0]} no mês</span>
            {totalAReceber > 0 && (
              <span style={{ color: "var(--success)", fontWeight: 600 }}>
                ({fmtBRL(totalProprio)} próprias + {fmtBRL(totalAReceber)} a receber)
              </span>
            )}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          {expectedIncomes.length > 0 && (
            <button className="ff-button"
              onClick={() => setReceiveConfirm(true)}
              style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '10px 16px', background: "var(--success-action)", border: 'none', borderRadius: 10, color: 'white', fontWeight: 600, cursor: 'pointer', fontSize: 13 }}
            >
              <Icon name="CheckCircle" size={15} color="white" />
              Receber Todas · {expectedIncomes.length}
            </button>
          )}
          <button className="ff-button ff-action ff-primary-action" onClick={() => setShowForm(true)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '10px 18px', background: "var(--action-bg)", border: 'none', borderRadius: 10, color: 'white', fontWeight: 600, cursor: 'pointer', fontSize: 13 }}>
            <Icon name="Plus" size={15} /> Nova Receita
          </button>
        </div>
      </div>

      <div className="r-stack" style={{ display: 'grid', gridTemplateColumns: '1fr 280px', gap: 20 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

          {/* ── Receitas do membro atual ── */}
          {allMonthIncomes.length === 0 && (
            <Card><EmptyState icon="DollarSign" title="Nenhuma receita" desc="Cadastre uma receita para este mês" /></Card>
          )}
          {allMonthIncomes.length > 0 && (
            <Card style={{ padding: 0, overflow: 'hidden' }}>
              {allMonthIncomes.map((inc, idx) => {
                const srcIdx = incomeSources.findIndex(s => s.key === inc.source);
                const color  = getSourceColor(inc.source, srcIdx);
                return (
                  <div key={inc.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 20px', borderBottom: idx < allMonthIncomes.length - 1 ? '1px solid var(--border)' : 'none', transition: 'background 150ms' }}
                    onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-2)'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
                  >
                    <div style={{ width: 38, height: 38, borderRadius: 11, background: color + '18', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, color: ffReadableColor(color) }}>
                      <Icon name="DollarSign" size={17} />
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-1)' }}>{inc.desc}</div>
                      <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 2, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                        <span>{getSourceLabel(inc.source, incomeSources)}</span>
                        <span>•</span>
                        <span>{inc.recurrence === 'monthly' ? 'Mensal' : 'Única'}</span>
                        <span>•</span>
                        <span>{parseLocalDate(inc.date).toLocaleDateString('pt-BR')}</span>
                      </div>
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6, flexShrink: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        {inc.status === 'expected' && !inc._projected && (
                          <span style={{ fontSize: 10, padding: '2px 7px', borderRadius: 20, fontWeight: 600, background: "var(--warning-bg)", color: "var(--warning)" }}>Prevista</span>
                        )}
                        <span style={{ fontSize: 15, fontWeight: 700, color: "var(--success)" }}>{fmtBRL(inc.value)}</span>
                      </div>
                      {inc._projected ? (
                        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                          <span style={{ fontSize: 10, color: 'var(--text-3)', fontStyle: 'italic', padding: '3px 8px', background: 'var(--surface-2)', borderRadius: 6 }} title="Receita mensal recorrente — confirme o recebimento deste mês">Mensal</span>
                          <button className="ff-button"
                            onClick={() => {
                              // Cria o registro real APENAS para o mês filtrado na tela.
                              // Os demais meses continuam como projeção independente.
                              addIncome({ desc: inc.desc, value: inc.value, date: inc.date, source: inc.source, recurrence: 'single', status: 'received', memberId: inc.memberId });
                              setToast('Receita marcada como recebida!');
                              setTimeout(() => setToast(null), 2500);
                            }}
                            title="Marcar como recebida neste mês"
                            style={{ background: "var(--success-action)", border: 'none', borderRadius: 8, padding: '6px 12px', cursor: 'pointer', color: 'white', display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, fontWeight: 700 }}
                          >
                            <Icon name="Check" size={13} /> Receber
                          </button>
                        </div>
                      ) : deleteConfirm === inc.id ? (
                        <div style={{ display: 'flex', gap: 4 }}>
                          <button className="ff-button" onClick={async () => { setDeleteConfirm(null); const r = await deleteIncome(inc.id); setToast(r === true ? 'Receita apagada.' : (r?.message || 'Não foi possível apagar a receita.')); }} style={{ padding: '3px 10px', background: "var(--danger-action)", border: 'none', borderRadius: 6, color: 'white', fontWeight: 700, cursor: 'pointer', fontSize: 11 }}>Sim</button>
                          <button className="ff-button" onClick={() => setDeleteConfirm(null)} style={{ padding: '3px 8px', background: 'var(--surface-3)', border: 'none', borderRadius: 6, color: 'var(--text-2)', cursor: 'pointer', fontSize: 11 }}>Não</button>
                        </div>
                      ) : (
                        <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                          {inc.status === 'expected' ? (
                            <button className="ff-button"
                              onClick={async () => { const r = await updateIncome(inc.id, { status: 'received' }); setToast(r === true ? 'Receita marcada como recebida!' : (r?.message || 'Não foi possível marcar como recebida. Tente novamente.')); setTimeout(() => setToast(null), 2500); }}
                              title="Marcar como recebida"
                              style={{ background: "var(--success-action)", border: 'none', borderRadius: 8, padding: '6px 12px', cursor: 'pointer', color: 'white', display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, fontWeight: 700 }}
                            >
                              <Icon name="Check" size={13} /> Receber
                            </button>
                          ) : (
                            <button className="ff-button"
                              onClick={async () => { const r = await updateIncome(inc.id, { status: 'expected' }); setToast(r === true ? 'Receita marcada como prevista.' : (r?.message || 'Não foi possível desfazer. Tente novamente.')); setTimeout(() => setToast(null), 2500); }}
                              title="Desfazer — marcar como prevista"
                              style={{ background: "var(--success-bg)", border: '1px solid #10B98140', borderRadius: 8, padding: '6px 10px', cursor: 'pointer', color: "var(--success)", display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, fontWeight: 600 }}
                            >
                              <Icon name="CheckCircle" size={12} /> Recebida
                            </button>
                          )}
                          <button className="ff-button" onClick={() => setEditingIncome(inc)} title="Editar" style={{ background: 'var(--surface-3)', border: '1px solid var(--border)', borderRadius: 8, padding: '6px 8px', cursor: 'pointer', color: 'var(--text-1)', display: 'flex', alignItems: 'center' }}>
                            <Icon name="Pencil" size={13} />
                          </button>
                          <button className="ff-button" onClick={() => setDeleteConfirm(inc.id)} title="Apagar" style={{ background: "var(--danger-bg)", border: '1px solid #EF444440', borderRadius: 8, padding: '6px 8px', cursor: 'pointer', color: "var(--danger)", display: 'flex', alignItems: 'center' }}>
                            <Icon name="Trash2" size={13} />
                          </button>
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </Card>
          )}

          {/* ── A Receber — agrupado por devedor ──────────────────── */}
          {aReceberItems.length > 0 && (() => {
            // Agrupa itens por membro devedor
            const debtorMap = {};
            aReceberItems.forEach(item => {
              const did = item.debtorId || 'outros';
              if (!debtorMap[did]) {
                const m = members.find(x => x.id === did);
                debtorMap[did] = { member: m, items: [], total: 0 };
              }
              debtorMap[did].items.push(item);
              debtorMap[did].total += item.amount || 0;
            });
            const debtorGroups = Object.entries(debtorMap)
              .sort(([, a], [, b]) => b.total - a.total)
              .map(([did, v]) => ({ did, ...v }));

            return (
              <div style={{ marginBottom: 4 }}>
                {/* Cabeçalho da seção A Receber */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                  <div style={{ width: 26, height: 26, borderRadius: '50%', background: "var(--success-bg)", border: '2px solid #10B98155', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name="ArrowDownLeft" size={12} style={{ color: "var(--success)" }} />
                  </div>
                  <span style={{ fontSize: 12, fontWeight: 700, color: "var(--success)", textTransform: 'uppercase', letterSpacing: '0.05em' }}>A Receber</span>
                  <span style={{ fontSize: 11, color: 'var(--text-3)' }}>({aReceberItems.length} {aReceberItems.length === 1 ? 'item' : 'itens'})</span>
                  <div style={{ flex: 1, height: 1, background: 'var(--border)' }} />
                  <span style={{ fontSize: 13, fontWeight: 700, color: "var(--success)" }}>{fmtBRL(totalAReceber)}</span>
                </div>

                {/* Um card por devedor */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {debtorGroups.map(({ did, member: dm, items: dItems, total: dTotal }) => {
                    const memberColor = dm?.color || '#10B981';
                    const isExpanded = !!expandedMembers[did];
                    return (
                      <Card key={did} style={{ padding: 0, overflow: 'hidden', borderLeft: `3px solid ${memberColor}88` }}>
                        {/* Cabeçalho do grupo — clicável para expandir */}
                        <div
                          onClick={() => setExpandedMembers(prev => ({ ...prev, [did]: !prev[did] }))}
                          style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '14px 16px', cursor: 'pointer', userSelect: 'none' }}
                          onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-2)'}
                          onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
                        >
                          {/* Avatar do devedor */}
                          <div style={{ width: 36, height: 36, borderRadius: '50%', background: memberColor + '22', border: `2px solid ${memberColor}55`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 800, color: ffReadableColor(memberColor), flexShrink: 0 }}>
                            {(dm?.initials || dm?.name?.slice(0, 2) || '?').toUpperCase()}
                          </div>
                          <div style={{ flex: 1 }}>
                            <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-1)' }}>
                              {dm?.name?.split(' ')[0] || 'Desconhecido'}
                            </div>
                            <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 1 }}>
                              {dItems.length} {dItems.length === 1 ? 'item' : 'itens'} · {isExpanded ? 'clique para recolher' : 'clique para ver'}
                            </div>
                          </div>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                            <span style={{ fontSize: 15, fontWeight: 800, color: "var(--success)" }}>{fmtBRL(dTotal)}</span>
                            {(() => {
                              const pending = dItems.filter(it => it.status !== 'received');
                              if (!pending.length) return (
                                <span style={{ fontSize: 11, color: "var(--success)", fontWeight: 600, display: 'flex', alignItems: 'center', gap: 3 }}>
                                  <Icon name="CheckCircle" size={13} /> Quitado
                                </span>
                              );
                              return (
                                <span style={{ fontSize: 11, color: 'var(--text-2)', fontWeight: 650 }}>
                                  {pending.length} em aberto
                                </span>
                              );
                            })()}
                            <Icon name={isExpanded ? 'ChevronUp' : 'ChevronDown'} size={15} style={{ color: 'var(--text-3)' }} />
                          </div>
                        </div>

                        {/* Itens expandidos */}
                        {isExpanded && (
                          <div style={{ borderTop: '1px solid var(--border)' }}>
                            {dItems.map((item, idx) => {
                              const isReceived = item.status === 'received';
                              return (
                              <div key={item.key} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 16px', borderBottom: idx < dItems.length - 1 ? '1px solid var(--border)' : 'none', transition: 'background 150ms', opacity: isReceived ? 0.65 : 1 }}
                                onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-2)'}
                                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
                              >
                                <div style={{ width: 32, height: 32, borderRadius: 9, background: "var(--success-bg)", display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                                  <Icon name={isReceived ? 'CheckCircle' : 'ArrowDownLeft'} size={13} color={isReceived ? '#10B981' : '#10B981'} />
                                </div>
                                <div style={{ flex: 1, minWidth: 0 }}>
                                  <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--text-1)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{item.desc}</div>
                                  <div style={{ fontSize: 11, color: 'var(--text-3)', display: 'flex', gap: 5, marginTop: 2, flexWrap: 'wrap' }}>
                                    <span>{item.label}</span>
                                    <span>•</span>
                                    <span>{parseLocalDate(item.date).toLocaleDateString('pt-BR')}</span>
                                  </div>
                                </div>
                                <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
                                  <span style={{ fontSize: 13, fontWeight: 800, color: "var(--success)" }}>{fmtBRL(item.amount)}</span>
                                  {item.operationId ? <MemberOperationButton onClick={() => onNavigate('entre-membros')}>Ver obrigação</MemberOperationButton> : item.settledBySettlement ? (
                                    <span
                                      title="Quitado por um acerto confirmado no Balancete — para desfazer, trate o acerto"
                                      style={{ fontSize: 11, padding: '4px 9px', borderRadius: 20, fontWeight: 650, background: "var(--success-bg)", color: "var(--success)", border: '1px solid #10B98140', whiteSpace: 'nowrap' }}
                                    >
                                      ✓ Quitado no acerto
                                    </span>
                                  ) : isReceived ? (
                                    <button className="ff-button"
                                      onClick={() => toggleReceived(item)}
                                      disabled={receivingId === item.incomeId}
                                      title="Desfazer — voltar a cobrar"
                                      style={{ minHeight: 32, fontSize: 11, padding: '4px 9px', borderRadius: 20, fontWeight: 650, background: "var(--success-bg)", color: "var(--success)", border: '1px solid #10B98140', cursor: 'pointer' }}
                                    >
                                      ✓ Recebido
                                    </button>
                                  ) : (
                                    <button className="ff-button"
                                      onClick={() => toggleReceived(item)}
                                      disabled={receivingId === item.incomeId}
                                      title="Confirmar que recebi este valor — quita a dívida no Balancete"
                                      style={{ minHeight: 32, display: 'flex', alignItems: 'center', gap: 4, padding: '5px 10px', borderRadius: 8, background: "var(--success-action)", color: 'white', border: 'none', fontSize: 12, fontWeight: 700, cursor: 'pointer', opacity: receivingId === item.incomeId ? 0.6 : 1 }}
                                    >
                                      <Icon name="Check" size={12} /> {receivingId === item.incomeId ? 'Salvando…' : 'Recebi'}
                                    </button>
                                  )}
                                </div>
                              </div>
                              );
                            })}
                          </div>
                        )}
                      </Card>
                    );
                  })}
                </div>
              </div>
            );
          })()}
        </div>

        {/* ── Painel lateral (gráfico + por fonte) ─────────────── */}
        <Card>
          <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 16, opacity: 1 }}>Evolução (6 meses)</div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 140 }}>
            {barData.map((d, i) => {
              const h = Math.round((d.value / maxVal) * 120);
              return (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                  <div style={{ fontSize: 10, color: 'var(--text-3)', textAlign: 'center' }}>
                    {d.isCurrent ? fmtBRL(d.value).replace('R$ ', '') : ''}
                  </div>
                  <div style={{ width: '100%', height: h, borderRadius: '6px 6px 0 0', background: d.isCurrent ? 'var(--accent)' : 'var(--surface-3)', transition: 'height 600ms' }} />
                  <span style={{ fontSize: 10, color: ffReadableColor(d.isCurrent ? 'var(--accent)' : 'var(--text-3)'), fontWeight: d.isCurrent ? 700 : 400 }}>{d.month}</span>
                </div>
              );
            })}
          </div>

          <div style={{ marginTop: 20, padding: '14px 0 0', borderTop: '1px solid var(--border)' }}>
            <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 10, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', opacity: 1 }}>Por fonte</div>
            {incomeSources.map(src => {
              const sum = allMonthIncomes.filter(inc => inc.source === src.key).reduce((s, inc) => s + inc.value, 0);
              if (!sum) return null;
              const pct = totalProprio > 0 ? (sum / totalProprio) * 100 : 0;
              return (
                <div key={src.key} style={{ marginBottom: 8 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 3 }}>
                    <span style={{ fontSize: 12, color: 'var(--text-2)' }}>{src.label}</span>
                    <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-1)' }}>{fmtBRL(sum)}</span>
                  </div>
                  <ProgressBar pct={pct} height={4} showGradient={false} />
                </div>
              );
            })}
            {totalAReceber > 0 && (
              <div style={{ marginBottom: 8 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 3 }}>
                  <span style={{ fontSize: 12, color: 'var(--text-2)' }}>A Receber</span>
                  <span style={{ fontSize: 12, fontWeight: 600, color: "var(--success)" }}>{fmtBRL(totalAReceber)}</span>
                </div>
                <ProgressBar pct={totalProprio > 0 ? (totalAReceber / total) * 100 : 100} height={4} showGradient={false} />
              </div>
            )}
          </div>
        </Card>
      </div>
    </div>

    {/* ── Modal de confirmação — Receber Todas ─────────────── */}
    {receiveConfirm && (
      <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: 380, width: '100%', boxShadow: 'var(--shadow-lg)' }}>
          <div style={{ width: 52, height: 52, borderRadius: 16, background: "var(--success-bg)", display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
            <Icon name="CheckCircle" size={26} color="#10B981" />
          </div>
          <h3 style={{ margin: '0 0 6px', fontSize: 17, fontWeight: 800, color: 'var(--text-1)' }}>
            Marcar todas como recebidas
          </h3>
          <p style={{ margin: '0 0 4px', fontSize: 13, color: 'var(--text-2)' }}>
            Mês de referência: <strong>{['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'][currentMonth.month - 1]} {currentMonth.year}</strong>
          </p>
          <div style={{ background: 'var(--surface-1)', borderRadius: 12, padding: '14px 16px', margin: '16px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 3 }}>Total previsto</div>
              <div style={{ fontSize: 22, fontWeight: 800, color: "var(--success)" }}>{fmtBRL(expectedTotal)}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 3 }}>Receitas</div>
              <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--text-1)' }}>{expectedIncomes.length}</div>
            </div>
          </div>
          <p style={{ margin: '0 0 20px', fontSize: 12, color: 'var(--text-3)' }}>
            As {expectedIncomes.length} receita{expectedIncomes.length !== 1 ? 's' : ''} prevista{expectedIncomes.length !== 1 ? 's' : ''} deste mês serão marcadas como recebidas.
          </p>
          <div style={{ display: 'flex', gap: 10 }}>
            <button className="ff-button"
              onClick={() => setReceiveConfirm(false)}
              disabled={receiving}
              style={{ flex: 1, padding: 12, borderRadius: 10, border: '1px solid var(--border)', background: 'transparent', color: 'var(--text-2)', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}
            >
              Cancelar
            </button>
            <button className="ff-button"
              onClick={handleReceiveAll}
              disabled={receiving}
              style={{ flex: 2, padding: 12, borderRadius: 10, border: 'none', background: "var(--success-action)", color: '#fff', fontSize: 13, fontWeight: 700, cursor: receiving ? 'default' : 'pointer', opacity: receiving ? 0.7 : 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}
            >
              {receiving
                ? <><span style={{ width: 14, height: 14, border: '2px solid rgba(255,255,255,0.4)', borderTopColor: '#fff', borderRadius: '50%', animation: 'spin 0.7s linear infinite', display: 'inline-block' }} /> Processando...</>
                : <><Icon name="CheckCircle" size={15} color="#fff" /> Confirmar Recebimento</>
              }
            </button>
          </div>
        </div>
      </div>
    )}
    </>
  );
}

Object.assign(window, { Receitas });