// ============================================================
// FINAFAMILY — Meios de Pagamento Screen
// Seletor de mês, totais calculados, histórico de faturas
// ============================================================

const { useState, useMemo, useEffect, useRef } = React;

function Cartoes() {
  const {
    paymentMethods, members, expenses, currentMember,
    categories, invoiceHistory, exportToCSV,
    currentMonth, setCurrentMonth, fetchMonthExpenses,
    updateExpense, deleteExpense, deleteExpenseSeries, markExpensePaid,
    fetchInvoicePreview, payInvoice, reopenInvoice,
  } = useApp();

  const [selectedPm, setSelectedPm]         = useState(null);
  const [toast, setToast]                   = useState(null);
  const [editingExpense, setEditingExpense]  = useState(null);
  const [invoiceDialog, setInvoiceDialog]   = useState(null);
  const [invoicePreview, setInvoicePreview] = useState(null);
  const [invoiceLoading, setInvoiceLoading] = useState(false);
  const [invoiceError, setInvoiceError]     = useState('');
  const [invoiceRetry, setInvoiceRetry]     = useState(0);
  const [invoiceAction, setInvoiceAction]   = useState(null);
  const [reopenReason, setReopenReason]     = useState('');
  const invoiceActionKey = useRef(null);
  const invoiceDialogRef = useRef(null);
  const invoiceActionRef = useRef(null);
  // Mês local — começa no mês global mas pode ser navegado independentemente
  const [viewMonth, setViewMonth]       = useState(() => ({ ...currentMonth }));

  const monthNames = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho',
                      'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];

  // Carrega despesas do mês em análise sempre que mudar
  useEffect(() => {
    fetchMonthExpenses(viewMonth.year, viewMonth.month);
  }, [viewMonth.year, viewMonth.month]);

  useEffect(() => {
    if (!invoiceDialog) return;
    let active = true;
    setInvoiceLoading(true);
    setInvoiceError('');
    setInvoicePreview(null);
    fetchInvoicePreview(invoiceDialog.id, viewMonth.month, viewMonth.year)
      .then(preview => { if (active) setInvoicePreview(preview); })
      .catch(err => { if (active) setInvoiceError(err?.message || 'Não foi possível carregar a fatura.'); })
      .finally(() => { if (active) setInvoiceLoading(false); });
    return () => { active = false; };
  }, [invoiceDialog?.id, viewMonth.month, viewMonth.year, invoiceRetry]);

  useEffect(() => { invoiceActionRef.current = invoiceAction; }, [invoiceAction]);

  useEffect(() => {
    if (!invoiceDialog) return;
    const previouslyFocused = document.activeElement;
    const dialog = invoiceDialogRef.current;
    dialog?.focus();
    function onKeyDown(event) {
      if (event.key === 'Escape' && !invoiceActionRef.current) {
        setInvoiceDialog(null);
        return;
      }
      if (event.key !== 'Tab' || !dialog) return;
      const focusable = [...dialog.querySelectorAll('button:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])')];
      if (!focusable.length) return;
      const first = focusable[0], last = focusable[focusable.length - 1];
      if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
      else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
    }
    document.addEventListener('keydown', onKeyDown);
    return () => {
      document.removeEventListener('keydown', onKeyDown);
      previouslyFocused?.focus?.();
    };
  }, [invoiceDialog?.id]);

  function prevMonth() {
    setViewMonth(m => m.month === 1 ? { year: m.year - 1, month: 12 } : { ...m, month: m.month - 1 });
  }
  function nextMonth() {
    setViewMonth(m => m.month === 12 ? { year: m.year + 1, month: 1 } : { ...m, month: m.month + 1 });
  }

  const allCards   = paymentMethods.filter(pm => pm.memberId === currentMember.id);
  const creditCards = allCards.filter(pm => pm.type === 'credit');
  const accounts   = allCards.filter(pm => pm.type !== 'credit');

  // Quanto de uma despesa ainda falta ser reembolsado ao DONO do cartão —
  // fonte única (expenseResponsibilityRows) que cobre ao mesmo tempo divisão,
  // responsabilidade integral transferida (ex: "CARRO" 100% de outro membro,
  // sem ser dividida) e uso do cartão por terceiro (responsável default é
  // quem lançou, que é justamente quem deve reembolsar o dono do cartão).
  function receivableFromExpense(exp, pmOwnerId) {
    return expenseResponsibilityRows(exp)
      .filter(row => row.responsibleMemberId !== pmOwnerId && row.responsibleMemberId !== UNASSIGNED_RESPONSIBLE_ID)
      .reduce((s, row) => s + row.amountCents, 0) / 100;
  }

  // Despesas do mês selecionado
  const monthAllExpenses = useMemo(() => expenses.filter(e => {
    const d = new Date((e.date || '').length === 10 ? e.date + 'T00:00:00' : e.date);
    return d.getFullYear() === viewMonth.year && d.getMonth() + 1 === viewMonth.month;
  }), [expenses, viewMonth]);

  // Total cobrado no cartão (fatura cheia — valor cheio de todas as despesas)
  const pmMonthTotals = useMemo(() => {
    const totals = {};
    monthAllExpenses.forEach(e => {
      if (!e.pmId) return;
      totals[e.pmId] = (totals[e.pmId] || 0) + (e.value || 0);
    });
    return totals;
  }, [monthAllExpenses]);

  // Valor a receber por cartão — soma, por qualquer motivo (divisão, responsabilidade
  // integral transferida, ou uso do cartão por terceiro), o que não é do próprio dono.
  const pmMonthReceivable = useMemo(() => {
    const rec = {};
    monthAllExpenses.forEach(e => {
      if (!e.pmId) return;
      const pmOwnerId = paymentMethods.find(pm => pm.id === e.pmId)?.memberId;
      if (!pmOwnerId) return;
      const owed = receivableFromExpense(e, pmOwnerId);
      if (owed > 0) rec[e.pmId] = (rec[e.pmId] || 0) + owed;
    });
    return rec;
  }, [monthAllExpenses, paymentMethods]);

  // Despesas do cartão selecionado no mês
  const cardExpenses = useMemo(() => {
    if (!selectedPm) return [];
    return monthAllExpenses
      .filter(e => e.pmId === selectedPm.id)
      .sort((a, b) => parseLocalDate(b.date) - parseLocalDate(a.date));
  }, [selectedPm, monthAllExpenses]);

  const history    = selectedPm && invoiceHistory ? (invoiceHistory[selectedPm.id] || []) : [];
  const maxHistory = history.length > 0 ? Math.max(...history.map(h => h.value)) : 1;

  // Total geral do mês — soma de todos os meios de pagamento (valor cheio)
  // Número grande do cabeçalho: fonte única de verdade (mesma regra de Despesas/Dashboard)
  const totalMonth = monthExpensesTotal(expenses, currentMember.id, paymentMethods, viewMonth.year, viewMonth.month);

  // Mantido apenas para meios sem ciclo de fatura (Pix, débito, conta e dinheiro).
  function getPendingForPm(pmId) {
    return monthAllExpenses.filter(e => e.pmId === pmId && e.status !== 'paid');
  }

  function openInvoice(pm, event) {
    event?.stopPropagation?.();
    invoiceActionKey.current = null;
    setReopenReason('');
    setInvoiceError('');
    setInvoiceDialog(pm);
  }

  function stableActionKey(action) {
    const signature = `${action}:${invoiceDialog.id}:${viewMonth.year}-${viewMonth.month}`;
    if (invoiceActionKey.current?.signature !== signature) {
      invoiceActionKey.current = {
        signature,
        value: globalThis.crypto?.randomUUID?.() || `${signature}:${Date.now()}`,
      };
    }
    return invoiceActionKey.current.value;
  }

  async function handleInvoiceAction(action) {
    if (!invoiceDialog || !invoicePreview || invoiceAction) return;
    if (action === 'reopen' && reopenReason.trim().length < 3) {
      setInvoiceError('Informe o motivo da reabertura com pelo menos 3 caracteres.');
      return;
    }
    setInvoiceAction(action);
    setInvoiceError('');
    try {
      const key = stableActionKey(action);
      const updated = action === 'pay'
        ? await payInvoice(invoiceDialog.id, viewMonth.month, viewMonth.year, invoicePreview.fingerprint, key)
        : await reopenInvoice(invoiceDialog.id, viewMonth.month, viewMonth.year, reopenReason.trim(), key);
      setInvoicePreview(updated);
      invoiceActionKey.current = null;
      setInvoiceDialog(null);
      setToast(action === 'pay' ? 'Fatura paga com sucesso!' : 'Fatura reaberta para correção.');
      setTimeout(() => setToast(null), 3000);
    } catch (err) {
      setInvoiceError(err?.message || `Não foi possível ${action === 'pay' ? 'pagar' : 'reabrir'} a fatura.`);
    } finally {
      setInvoiceAction(null);
    }
  }

  function handleExportCSV() {
    if (!selectedPm) return;
    const data = cardExpenses.map(e => ({
      data:          parseLocalDate(e.date).toLocaleDateString('pt-BR'),
      descricao:     e.desc,
      categoria:     categories.find(c => c.id === e.categoryId)?.name || '',
      valor:         e.value.toFixed(2),
      status:        e.status,
      tipo:          e.type,
      compartilhado: e.shared ? 'Sim' : 'Não',
    }));
    exportToCSV(data, `fatura-${selectedPm.name.replace(/\s+/g, '-').toLowerCase()}-${viewMonth.month}-${viewMonth.year}.csv`);
    setToast('CSV exportado!');
    setTimeout(() => setToast(null), 2000);
  }

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

      {/* Seletor de mês */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--text-1)', letterSpacing: '-0.02em' }}>{fmtBRL(totalMonth)}</div>
          <div style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 2 }}>Total gasto em {monthNames[viewMonth.month - 1]} {viewMonth.year}</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4, background: 'var(--surface-2)', borderRadius: 12, padding: '6px 10px' }}>
          <button className="ff-button" onClick={prevMonth} aria-label="Mês anterior" title="Mês anterior" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', padding: '2px 6px', display: 'flex', borderRadius: 6 }}>
            <Icon name="ChevronLeft" size={15} />
          </button>
          <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-1)', minWidth: 130, textAlign: 'center' }}>
            {monthNames[viewMonth.month - 1]} {viewMonth.year}
          </span>
          <button className="ff-button" onClick={nextMonth} aria-label="Próximo mês" title="Próximo mês" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', padding: '2px 6px', display: 'flex', borderRadius: 6 }}>
            <Icon name="ChevronRight" size={15} />
          </button>
        </div>
      </div>

      <div className="r-stack" style={{ display: 'grid', gridTemplateColumns: selectedPm && selectedPm.type !== 'credit' ? '1fr 1fr' : '1fr', gap: 20, alignItems: 'start' }}>

        {/* Lista de meios de pagamento */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>

          {/* Cartões de crédito — 2 colunas */}
          {(creditCards.length > 0 || true) && (
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 14, opacity: 1 }}>
                Cartões de Crédito
              </div>
              {creditCards.length === 0 ? (
                <EmptyState icon="CreditCard" title="Nenhum cartão cadastrado" desc={`${currentMember.name.split(' ')[0]} não possui cartões de crédito`} />
              ) : (
                <div style={{ display: 'grid', gridTemplateColumns: selectedPm ? '1fr' : 'repeat(auto-fill, minmax(260px, 1fr))', gap: 16 }}>
                  {creditCards.map(pm => {
                    const monthUsed  = pmMonthTotals[pm.id] || 0;
                    // Limite comprometido = tudo que ainda não foi pago no cartão,
                    // inclusive parcelas futuras (vem do servidor). As compras do
                    // mês sozinhas subestimavam o uso e superestimavam o disponível.
                    const limitUsed  = pm.openBalanceCents != null ? pm.openBalanceCents / 100 : monthUsed;
                    const usedPct    = pm.limit ? (limitUsed / pm.limit) * 100 : 0;
                    const isSelected = selectedPm?.id === pm.id;
                    const pmHistory  = invoiceHistory?.[pm.id] || [];
                    const color      = pm.color || '#0D9488';

                    return (
                      <div key={pm.id} onClick={() => setSelectedPm(isSelected ? null : pm)} style={{
                        borderRadius: 18, overflow: 'hidden', cursor: 'pointer',
                        boxShadow: isSelected
                          ? `0 8px 32px ${color}55, 0 0 0 2px ${color}`
                          : '0 4px 16px rgba(0,0,0,0.18)',
                        transition: 'box-shadow 200ms, transform 150ms',
                        transform: isSelected ? 'translateY(-3px)' : 'translateY(0)',
                      }}>

                        {/* ── Face do cartão de crédito ── */}
                        <div style={{
                          background: `linear-gradient(135deg, ${color} 0%, ${color}bb 60%, ${color}77 100%)`,
                          padding: '20px 22px 18px',
                          position: 'relative',
                          overflow: 'hidden',
                          minHeight: 160,
                          display: 'flex',
                          flexDirection: 'column',
                          justifyContent: 'space-between',
                        }}>
                          {/* Círculos decorativos */}
                          <div style={{ position: 'absolute', right: -28, top: -28, width: 120, height: 120, borderRadius: '50%', background: 'rgba(255,255,255,0.07)' }} />
                          <div style={{ position: 'absolute', right: 30, bottom: -40, width: 110, height: 110, borderRadius: '50%', background: 'rgba(255,255,255,0.05)' }} />
                          <div style={{ position: 'absolute', left: -20, bottom: -20, width: 80, height: 80, borderRadius: '50%', background: 'rgba(255,255,255,0.04)' }} />

                          {/* Linha topo: banco + ícone */}
                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', position: 'relative' }}>
                            <div>
                              <div style={{ fontSize: 14, fontWeight: 800, color: 'white', letterSpacing: '0.01em' }}>{pm.name}</div>
                              {pm.bank && <div style={{ fontSize: 10, color: ffReadableColor('rgba(255,255,255,0.65)'), marginTop: 2, letterSpacing: '0.04em' }}>{pm.bank.toUpperCase()}</div>}
                            </div>
                            {/* Chip */}
                            <div style={{ width: 30, height: 22, borderRadius: 4, background: 'linear-gradient(135deg, #d4a843, #f0c860)', boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                              <div style={{ width: 18, height: 14, borderRadius: 2, border: '1px solid rgba(0,0,0,0.2)', background: 'linear-gradient(135deg, #c9982a, #e8bb50)', display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr', gap: 1, padding: 2 }}>
                                {[0,1,2,3].map(i => <div key={i} style={{ background: 'rgba(0,0,0,0.15)', borderRadius: 1 }} />)}
                              </div>
                            </div>
                          </div>

                          {/* Número simulado */}
                          <div style={{ fontSize: 13, color: ffReadableColor('rgba(255,255,255,0.5)'), letterSpacing: '0.25em', fontFamily: 'monospace', position: 'relative', margin: '10px 0 0' }}>
                            •••• •••• •••• ••••
                          </div>

                          {/* Linha rodapé: gasto + fechamento */}
                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', position: 'relative', marginTop: 8 }}>
                            <div>
                              <div style={{ fontSize: 9, color: ffReadableColor('rgba(255,255,255,0.55)'), letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 2 }}>
                                Lançamentos em {monthNames[viewMonth.month - 1]}
                              </div>
                              <div style={{ fontSize: 18, fontWeight: 800, color: 'white', letterSpacing: '-0.02em' }}>{fmtBRL(monthUsed)}</div>
                            </div>
                            {pm.closingDay && pm.dueDay && (
                              <div style={{ textAlign: 'right' }}>
                                <div style={{ fontSize: 9, color: ffReadableColor('rgba(255,255,255,0.55)'), letterSpacing: '0.06em', textTransform: 'uppercase' }}>Fecha / Vence</div>
                                <div style={{ fontSize: 11, fontWeight: 700, color: ffReadableColor('rgba(255,255,255,0.9)') }}>dia {pm.closingDay} / dia {pm.dueDay}</div>
                              </div>
                            )}
                          </div>
                        </div>

                        {/* ── Rodapé com stats ── */}
                        <div style={{ background: 'var(--surface-1)', padding: '12px 16px', borderTop: 'none' }}>
                          {pm.limit ? (
                            <>
                              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                                <span style={{ fontSize: 11, color: 'var(--text-3)' }}>Limite: {fmtBRL(pm.limit)}</span>
                                <span style={{ fontSize: 11, fontWeight: 700, color: ffReadableColor(usedPct >= 80 ? "var(--danger)" : usedPct >= 60 ? "var(--warning)" : "var(--success)") }}>
                                  {usedPct.toFixed(0)}% utilizado
                                </span>
                              </div>
                              <ProgressBar pct={usedPct} height={4} />
                              <div style={{ fontSize: 10, color: 'var(--text-3)', marginTop: 5 }}>
                                Disponível: <strong style={{ color: 'var(--text-2)' }}>{fmtBRL(Math.max(0, pm.limit - limitUsed))}</strong>
                                {pm.openBalanceCents != null && <span> · em aberto {fmtBRL(limitUsed)}</span>}
                              </div>
                            </>
                          ) : (
                            <div style={{ fontSize: 11, color: 'var(--text-3)', textAlign: 'center' }}>Sem limite definido</div>
                          )}
                          {pmHistory.length > 0 && (
                            <div style={{ marginTop: 8, display: 'flex', gap: 3, alignItems: 'flex-end', height: 18 }}>
                              {pmHistory.map((h, i) => {
                                const maxH = Math.max(...pmHistory.map(x => x.value));
                                const ht = Math.max(3, Math.round((h.value / maxH) * 14));
                                return (
                                  <div key={i} title={`${h.month}: ${fmtBRL(h.value)}`}
                                    style={{ flex: 1, height: ht, borderRadius: 2, background: i === pmHistory.length - 1 ? color : 'var(--surface-3)', transition: 'height 300ms' }} />
                                );
                              })}
                            </div>
                          )}
                          <button className="ff-button ff-action ff-primary-action"
                            onClick={e => openInvoice(pm, e)}
                            style={{ marginTop: 10, width: '100%', minHeight: 44, padding: '8px 12px', borderRadius: 9, border: 'none', background: "var(--action-bg)", color: '#fff', fontSize: 12, fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}
                          >
                            <Icon name="CreditCard" size={13} color="#fff" />
                            Ver fatura com vencimento em {monthNames[viewMonth.month - 1]}
                          </button>
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          )}

          {/* Contas / Pix / Outros — também em grid */}
          {accounts.length > 0 && (
            <div>
              <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 14, opacity: 1 }}>
                Contas e Outros
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: selectedPm ? '1fr' : 'repeat(auto-fill, minmax(220px, 1fr))', gap: 12 }}>
                {accounts.map(pm => {
                  const monthUsed = pmMonthTotals[pm.id] || 0;
                  const isSelected = selectedPm?.id === pm.id;
                  const color = pm.color || 'var(--accent)';
                  const TYPE_ICON = { pix: 'Zap', cash: 'Banknote', debit: 'CreditCard', account: 'Building2' };
                  const TYPE_LABEL = { pix: 'Pix', cash: 'Dinheiro', debit: 'Débito', account: 'Conta Corrente' };
                  return (
                    <div key={pm.id} onClick={() => setSelectedPm(isSelected ? null : pm)} style={{
                      cursor: 'pointer', borderRadius: 16, overflow: 'hidden',
                      boxShadow: isSelected ? `0 0 0 2px ${color}, 0 4px 16px ${color}33` : '0 2px 8px rgba(0,0,0,0.12)',
                      transition: 'box-shadow 200ms, transform 150ms',
                      transform: isSelected ? 'translateY(-2px)' : 'translateY(0)',
                    }}>
                      <div style={{ background: `linear-gradient(135deg, ${color}cc, ${color}66)`, padding: '16px 18px', position: 'relative', overflow: 'hidden' }}>
                        <div style={{ position: 'absolute', right: -16, top: -16, width: 80, height: 80, borderRadius: '50%', background: 'rgba(255,255,255,0.08)' }} />
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                          <div style={{ width: 32, height: 32, borderRadius: 9, background: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <Icon name={TYPE_ICON[pm.type] || 'Wallet'} size={16} style={{ color: 'white' }} />
                          </div>
                          <div style={{ textAlign: 'right' }}>
                            <div style={{ fontSize: 9, color: ffReadableColor('rgba(255,255,255,0.6)'), textTransform: 'uppercase', letterSpacing: '0.06em' }}>Gasto no mês</div>
                            <div style={{ fontSize: 16, fontWeight: 800, color: 'white' }}>{fmtBRL(monthUsed)}</div>
                          </div>
                        </div>
                        <div style={{ marginTop: 14 }}>
                          <div style={{ fontSize: 13, fontWeight: 700, color: 'white' }}>{pm.name}</div>
                          <div style={{ fontSize: 10, color: ffReadableColor('rgba(255,255,255,0.65)'), marginTop: 2 }}>
                            {pm.bank ? `${pm.bank} · ` : ''}{TYPE_LABEL[pm.type] || pm.type}
                          </div>
                        </div>
                      </div>
                      {/* Contas sem fatura mantêm ajuste individual no painel de detalhe. */}
                      {(() => {
                        const pending = getPendingForPm(pm.id);
                        if (!pending.length) return (
                          <div style={{ padding: '8px 18px', background: 'var(--surface-1)', display: 'flex', alignItems: 'center', gap: 5, color: "var(--success)", fontSize: 11, fontWeight: 600 }}>
                            <Icon name="CheckCircle" size={13} /> Tudo pago
                          </div>
                        );
                        return (
                          <div style={{ padding: '9px 18px', background: 'var(--surface-1)', color: "var(--warning)", fontSize: 11, fontWeight: 600 }}>
                            {pending.length} pendente{pending.length !== 1 ? 's' : ''} · abra para ajustar
                          </div>
                        );
                      })()}
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          {/* Resumo do mês por meio de pagamento */}
          {allCards.length > 1 && (
            <Card style={{ background: 'var(--surface-2)' }}>
              <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 12, opacity: 1 }}>
                Resumo — {monthNames[viewMonth.month - 1]}
              </div>
              {allCards.map(pm => {
                const used = pmMonthTotals[pm.id] || 0;
                if (!used) return null;
                const pct = totalMonth > 0 ? (used / totalMonth) * 100 : 0;
                return (
                  <div key={pm.id} style={{ marginBottom: 10 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
                      <span style={{ fontSize: 12, color: 'var(--text-2)', fontWeight: 500 }}>{pm.name}</span>
                      <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-1)' }}>{fmtBRL(used)}</span>
                    </div>
                    <div style={{ height: 5, borderRadius: 99, background: 'var(--surface-3)', overflow: 'hidden' }}>
                      <div style={{ height: '100%', width: `${pct}%`, borderRadius: 99, background: pm.color || 'var(--accent)', transition: 'width 500ms' }} />
                    </div>
                  </div>
                );
              })}
              <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 10, borderTop: '1px solid var(--border)', marginTop: 4 }}>
                <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-2)' }}>Total do mês</span>
                <span style={{ fontSize: 14, fontWeight: 800, color: 'var(--text-1)' }}>{fmtBRL(totalMonth)}</span>
              </div>
            </Card>
          )}
        </div>

        {/* Painel de detalhe do cartão selecionado */}
        {selectedPm && selectedPm.type !== 'credit' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

            {/* Histórico de faturas */}
            {history.length > 0 && (
              <Card>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                  <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', opacity: 1 }}>
                    Histórico — últimas {history.length} faturas
                  </div>
                  <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                    <button className="ff-button" onClick={handleExportCSV} style={{ background: 'var(--accent-tint)', border: 'none', borderRadius: 8, padding: '4px 10px', color: 'var(--accent)', fontSize: 11, fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}>
                      <Icon name="Download" size={11} /> CSV
                    </button>
                    <button className="ff-button" onClick={() => setSelectedPm(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', display: 'flex', padding: 4 }}>
                      <Icon name="X" size={16} />
                    </button>
                  </div>
                </div>

                <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 80, marginBottom: 8 }}>
                  {history.map((h, i) => {
                    const ht = Math.round((h.value / maxHistory) * 68) + 4;
                    const isLast = i === history.length - 1;
                    return (
                      <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                        <div title={fmtBRL(h.value)} style={{ width: '100%', height: ht, borderRadius: '4px 4px 0 0', background: isLast ? selectedPm.color : 'var(--surface-3)', position: 'relative', cursor: 'help' }}>
                          {isLast && (
                            <div style={{ position: 'absolute', top: -18, left: '50%', transform: 'translateX(-50%)', fontSize: 9, fontWeight: 700, color: ffReadableColor(selectedPm.color), whiteSpace: 'nowrap' }}>
                              {fmtBRL(h.value)}
                            </div>
                          )}
                        </div>
                        <span style={{ fontSize: 9, color: ffReadableColor(isLast ? selectedPm.color : 'var(--text-3)'), fontWeight: isLast ? 700 : 400 }}>{h.month}</span>
                      </div>
                    );
                  })}
                </div>

                <div style={{ borderTop: '1px solid var(--border)', marginTop: 4 }}>
                  {history.map((h, i) => (
                    <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: i < history.length - 1 ? '1px solid var(--border)' : 'none' }}>
                      <span style={{ fontSize: 12, color: 'var(--text-2)', fontWeight: i === history.length - 1 ? 600 : 400 }}>{h.month}</span>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-1)' }}>{fmtBRL(h.value)}</span>
                        <span style={{ fontSize: 10, padding: '2px 7px', borderRadius: 20, fontWeight: 600, background: h.status === 'paid' ? "var(--success-bg)" : "var(--warning-bg)", color: ffReadableColor(h.status === 'paid' ? "var(--success)" : "var(--warning)") }}>
                          {h.status === 'paid' ? 'Paga' : 'Pendente'}
                        </span>
                      </div>
                    </div>
                  ))}
                  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 0 4px', borderTop: '2px solid var(--border)', marginTop: 4 }}>
                    <span style={{ fontSize: 12, color: 'var(--text-3)', fontWeight: 600 }}>Média</span>
                    <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-1)' }}>
                      {fmtBRL(history.reduce((s, h) => s + h.value, 0) / history.length)}
                    </span>
                  </div>
                </div>
              </Card>
            )}

            {/* Lançamentos do mês */}
            <Card style={{ flex: 1 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                <div style={{ fontSize: 11, color: 'var(--text-3)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', opacity: 1 }}>
                  {selectedPm.name} — {monthNames[viewMonth.month - 1]}
                </div>
                {history.length === 0 && (
                  <div style={{ display: 'flex', gap: 8 }}>
                    <button className="ff-button" onClick={handleExportCSV} style={{ background: 'var(--accent-tint)', border: 'none', borderRadius: 8, padding: '4px 10px', color: 'var(--accent)', fontSize: 11, fontWeight: 600, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}>
                      <Icon name="Download" size={11} /> CSV
                    </button>
                    <button className="ff-button" onClick={() => setSelectedPm(null)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', display: 'flex', padding: 4 }}>
                      <Icon name="X" size={16} />
                    </button>
                  </div>
                )}
              </div>

              {/* Totais do mês */}
              {(() => {
                const total      = pmMonthTotals[selectedPm.id]      || 0;
                const receivable = pmMonthReceivable[selectedPm.id]  || 0;
                const myNet      = total - receivable;
                return (
                  <div style={{ marginBottom: 16 }}>
                    {/* Linha principal: Fatura total */}
                    <div className="dashboard-grid-2" style={{ display: 'grid', gridTemplateColumns: selectedPm.limit ? '1fr 1fr' : '1fr', gap: 10, marginBottom: receivable > 0 ? 10 : 0 }}>
                      <div style={{ padding: '12px 14px', background: 'var(--surface-2)', borderRadius: 10 }}>
                        <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 4 }}>Total lançado</div>
                        <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--text-1)' }}>{fmtBRL(total)}</div>
                      </div>
                      {selectedPm.limit && (
                        <div style={{ padding: '12px 14px', background: 'var(--surface-2)', borderRadius: 10 }}>
                          <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 4 }}>Disponível</div>
                          <div style={{ fontSize: 18, fontWeight: 800, color: "var(--success)" }}>
                            {fmtBRL(Math.max(0, selectedPm.limit - (selectedPm.openBalanceCents != null ? selectedPm.openBalanceCents / 100 : total)))}
                          </div>
                        </div>
                      )}
                    </div>
                    {/* Linha de reembolsos (só aparece se houver valor a receber) */}
                    {receivable > 0 && (
                      <div className="dashboard-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                        <div style={{ padding: '10px 14px', background: "var(--success-bg)", border: '1px solid #10B98130', borderRadius: 10 }}>
                          <div style={{ fontSize: 11, color: "var(--success)", marginBottom: 4, fontWeight: 600 }}>↩️ A receber</div>
                          <div style={{ fontSize: 15, fontWeight: 800, color: "var(--success)" }}>{fmtBRL(receivable)}</div>
                          <div style={{ fontSize: 10, color: ffReadableColor("var(--success)"), marginTop: 2 }}>reembolsos esperados</div>
                        </div>
                        <div style={{ padding: '10px 14px', background: 'var(--surface-2)', borderRadius: 10 }}>
                          <div style={{ fontSize: 11, color: 'var(--text-3)', marginBottom: 4 }}>Minha responsabilidade</div>
                          <div style={{ fontSize: 15, fontWeight: 800, color: 'var(--text-1)' }}>{fmtBRL(Math.max(0, myNet))}</div>
                          <div style={{ fontSize: 10, color: 'var(--text-3)', marginTop: 2 }}>após reembolsos</div>
                        </div>
                      </div>
                    )}
                  </div>
                );
              })()}

              {/* Meios sem fatura continuam com ajuste individual por lançamento. */}
              {(() => {
                const pending = getPendingForPm(selectedPm.id);
                const paidCount = cardExpenses.filter(e => e.status === 'paid').length;
                if (!pending.length && cardExpenses.length > 0) return (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', background: "var(--success-bg)", border: '1px solid #10B98130', borderRadius: 10, marginBottom: 14 }}>
                    <Icon name="CheckCircle" size={15} color="#10B981" />
                    <span style={{ fontSize: 13, color: "var(--success)", fontWeight: 600 }}>Todas as {paidCount} despesa{paidCount !== 1 ? 's' : ''} desta fatura já foram pagas</span>
                  </div>
                );
                if (!pending.length) return null;
                return (
                  <div style={{ marginBottom: 14, padding: '10px 14px', borderRadius: 10, background: "var(--warning-bg)", border: '1px solid #F59E0B30', color: "var(--warning)", fontSize: 12, fontWeight: 600 }}>
                    {pending.length} lançamento{pending.length !== 1 ? 's' : ''} pendente{pending.length !== 1 ? 's' : ''}. Ajuste cada item abaixo.
                  </div>
                );
              })()}

              {cardExpenses.length === 0 && (
                <EmptyState icon="CreditCard" title="Sem lançamentos" desc={`Nenhuma despesa em ${monthNames[viewMonth.month - 1]}`} />
              )}
              {cardExpenses.map((e, idx) => {
                const cat        = categories.find(c => c.id === e.categoryId);
                const pmOwnerId  = selectedPm.memberId;
                const payerMember = e.thirdPartyMemberId && e.thirdPartyMemberId === pmOwnerId
                  ? members.find(m => m.id === e.memberId)
                  : e.memberId === pmOwnerId ? null : members.find(m => m.id === e.memberId);
                // owedToMe cobre os 3 motivos de reembolso ao dono do cartão numa
                // fonte só: divisão, responsabilidade integral transferida, e uso
                // do cartão por terceiro (ver receivableFromExpense).
                const owedToMe = receivableFromExpense(e, pmOwnerId);
                const isToReceive = owedToMe > 0.01 && Math.abs(owedToMe - e.value) < 0.01;
                const sharedReceivable = owedToMe > 0.01 && !isToReceive ? owedToMe : 0;
                const isPaid    = e.status === 'paid';
                const launcher  = members.find(m => m.id === e.memberId);

                return (
                  <div key={e.id} style={{ padding: '10px 0', borderBottom: idx < cardExpenses.length - 1 ? '1px solid var(--border)' : 'none' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      {/* Ícone categoria */}
                      <div style={{ width: 32, height: 32, borderRadius: 9, background: (cat?.color || 'var(--accent)') + '18', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, color: ffReadableColor(cat?.color || 'var(--accent)') }}>
                        <Icon name={cat?.icon || 'Wallet'} size={14} />
                      </div>

                      {/* Info */}
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-1)', display: 'flex', alignItems: 'center', gap: 5, flexWrap: 'wrap' }}>
                          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{e.desc}</span>
                          {e.shared && <span style={{ fontSize: 9, background: "var(--success-bg)", color: 'var(--accent)', padding: '1px 5px', borderRadius: 4, fontWeight: 700, flexShrink: 0 }}>÷</span>}
                          {isToReceive && <span style={{ fontSize: 9, background: "var(--success-bg)", color: "var(--success)", padding: '1px 5px', borderRadius: 4, fontWeight: 700, flexShrink: 0 }}>↩ reembolso</span>}
                          {isPaid && <span style={{ fontSize: 9, background: "var(--success-bg)", color: "var(--success)", padding: '1px 5px', borderRadius: 4, fontWeight: 700, flexShrink: 0 }}>✓ paga</span>}
                        </div>
                        <div style={{ fontSize: 11, color: 'var(--text-3)' }}>
                          {new Date((e.date||'').length===10 ? e.date+'T00:00:00' : e.date).toLocaleDateString('pt-BR')} • {cat?.name}
                          {payerMember && (
                            <span style={{ marginLeft: 6, color: ffReadableColor(payerMember.color || "var(--warning)"), fontWeight: 600 }}>
                              por {payerMember.name.split(' ')[0]}
                            </span>
                          )}
                        </div>
                      </div>

                      {/* Valor */}
                      <div style={{ textAlign: 'right', flexShrink: 0, marginRight: 6 }}>
                        <div style={{ fontSize: 14, fontWeight: 700, color: ffReadableColor(isToReceive ? "var(--success)" : 'var(--text-1)') }}>{fmtBRL(e.value)}</div>
                        {sharedReceivable > 0 && (
                          <div style={{ fontSize: 10, color: "var(--success)", fontWeight: 600 }}>↩ {fmtBRL(sharedReceivable)}</div>
                        )}
                        {e.shared && e.sharedWith?.length > 0 && e.memberId !== pmOwnerId && e.sharedWith.some(sw => sw.memberId === pmOwnerId) && (
                          <div style={{ fontSize: 10, color: 'var(--text-3)' }}>{e.sharedWith.find(sw => sw.memberId === pmOwnerId)?.pct?.toFixed(0)}% de {fmtBRL(e.value)}</div>
                        )}
                      </div>

                      {/* Ações */}
                      <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
                        {!isPaid && !e.isProjected && (
                          <button className="ff-button"
                            title="Marcar como paga"
                            onClick={async () => {
                              const result = await markExpensePaid(e);
                              if (result === true) { setToast('Despesa marcada como paga!'); return; }
                              const status = result?.status;
                              setToast(status === 409
                                ? 'Despesa de cartão de crédito é quitada pela fatura: abra o cartão na tela Cartões e pague a fatura do mês.'
                                : status === 403
                                  ? 'Somente quem criou a despesa pode marcá-la como paga.'
                                  : (result?.message || 'Não foi possível marcar como paga. Tente novamente.'));
                            }}
                            style={{ padding: '5px 7px', background: "var(--success-bg)", border: 'none', borderRadius: 7, cursor: 'pointer', color: "var(--success)", display: 'flex', alignItems: 'center' }}
                          >
                            <Icon name="Check" size={13} />
                          </button>
                        )}
                        {!isPaid && e.isProjected && (
                          <span title="Despesa fixa recorrente — registre o pagamento na tela de Despesas" style={{ padding: '4px 6px', fontSize: 10, color: 'var(--text-3)', background: 'var(--surface-2)', borderRadius: 6, cursor: 'help' }}>
                            Fixa
                          </span>
                        )}
                        <button className="ff-button"
                          title="Editar despesa"
                          onClick={() => setEditingExpense(e)}
                          style={{ padding: '5px 7px', background: 'var(--surface-2)', border: 'none', borderRadius: 7, cursor: 'pointer', color: 'var(--text-3)', display: 'flex', alignItems: 'center' }}
                        >
                          <Icon name="Pencil" size={13} />
                        </button>
                        {!isPaid && (
                          <button className="ff-button"
                            title="Excluir despesa"
                            onClick={async () => {
                              const isSeries = (e.type === 'installment' && parseInt(e.installments) > 1) || e.type === 'fixed';
                              if (isSeries) {
                                const tipo = e.type === 'installment' ? 'parcelada' : 'fixa';
                                const todas = confirm(`"${e.desc}" é uma despesa ${tipo}.\n\nClique em OK para apagar ESTA e as PRÓXIMAS (meses à frente).\nClique em Cancelar para apagar SOMENTE esta.`);
                                const ok = todas ? await deleteExpenseSeries(e, 'future') : await deleteExpense(e.id);
                                setToast(ok ? (todas ? 'Esta e as próximas despesas foram apagadas!' : 'Despesa deste mês excluída!') : 'Não foi possível excluir. Apenas o criador pode excluir esta despesa.');
                              } else if (confirm('Excluir esta despesa?')) {
                                const ok = await deleteExpense(e.id);
                                setToast(ok ? 'Despesa excluída!' : 'Não foi possível excluir. Apenas o criador pode excluir esta despesa.');
                              }
                            }}
                            style={{ padding: '5px 7px', background: "var(--danger-bg)", border: 'none', borderRadius: 7, cursor: 'pointer', color: "var(--danger)", display: 'flex', alignItems: 'center' }}
                          >
                            <Icon name="Trash2" size={13} />
                          </button>
                        )}
                      </div>
                    </div>
                  </div>
                );
              })}
            </Card>
          </div>
        )}
      </div>

      {/* Fatura canônica: ciclo, itens e total vêm integralmente do backend. */}
      {invoiceDialog && (
        <div className="ff-modal-overlay"
          role="presentation"
          style={{ position: 'fixed', inset: 0, background: 'var(--overlay-bg)', zIndex: 1000, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', padding: 0 }}
          onMouseDown={e => { if (e.target === e.currentTarget && !invoiceAction) setInvoiceDialog(null); }}
        >
          <section className="ff-modal"
            ref={invoiceDialogRef}
            tabIndex={-1}
            role="dialog"
            aria-modal="true"
            aria-labelledby="invoice-dialog-title"
            aria-busy={invoiceLoading || !!invoiceAction}
            style={{ background: 'var(--surface-0)', border: '1px solid var(--border)', borderRadius: '20px 20px 0 0', width: '100%', maxWidth: 520, maxHeight: '92dvh', boxSizing: 'border-box', boxShadow: 'var(--shadow-lg)', display: 'flex', flexDirection: 'column', overflow: 'hidden', paddingBottom: 'env(safe-area-inset-bottom)' }}
          >
            <header style={{ padding: '16px 16px 12px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <h3 id="invoice-dialog-title" style={{ margin: 0, fontSize: 17, fontWeight: 800, color: 'var(--text-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  Fatura — {invoiceDialog.name}
                </h3>
                <div style={{ marginTop: 3, fontSize: 12, color: 'var(--text-3)' }}>
                  Vencimento em {monthNames[viewMonth.month - 1]} de {viewMonth.year}
                </div>
              </div>
              <button className="ff-button"
                type="button"
                aria-label="Fechar detalhes da fatura"
                onClick={() => setInvoiceDialog(null)}
                disabled={!!invoiceAction}
                style={{ width: 44, height: 44, border: 'none', borderRadius: 10, background: 'var(--surface-2)', color: 'var(--text-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: invoiceAction ? 'not-allowed' : 'pointer' }}
              >
                <Icon name="X" size={18} />
              </button>
            </header>

            <div style={{ padding: 16, overflowY: 'auto', overscrollBehavior: 'contain', flex: 1 }}>
              {invoiceLoading && (
                <div style={{ minHeight: 180, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10, color: 'var(--text-3)' }}>
                  <span aria-hidden="true" style={{ width: 24, height: 24, border: '3px solid var(--surface-3)', borderTopColor: 'var(--accent)', borderRadius: '50%', animation: 'spin 0.7s linear infinite' }} />
                  <span style={{ fontSize: 13 }}>Carregando ciclo e lançamentos…</span>
                </div>
              )}

              {!invoiceLoading && invoiceError && (
                <div role="alert" style={{ padding: '11px 12px', marginBottom: 14, borderRadius: 10, background: "var(--danger-bg)", border: '1px solid #EF444440', color: "var(--danger)", fontSize: 12, lineHeight: 1.5 }}>
                  {invoiceError}
                </div>
              )}

              {!invoiceLoading && !invoicePreview && (
                <div style={{ minHeight: 150, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 12, textAlign: 'center' }}>
                  <div style={{ fontSize: 13, color: 'var(--text-2)' }}>Não foi possível apresentar esta fatura.</div>
                  <button className="ff-button" type="button" onClick={() => setInvoiceRetry(v => v + 1)} style={{ minHeight: 44, padding: '9px 16px', borderRadius: 10, border: '1px solid var(--border)', background: 'var(--surface-2)', color: 'var(--text-1)', fontWeight: 700, cursor: 'pointer' }}>
                    Tentar novamente
                  </button>
                </div>
              )}

              {!invoiceLoading && invoicePreview && (
                <>
                  <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) auto', gap: 12, padding: '12px 14px', background: 'var(--surface-2)', borderRadius: 12, marginBottom: 12 }}>
                    <div>
                      <div style={{ fontSize: 11, color: 'var(--text-3)' }}>Ciclo da fatura</div>
                      <div style={{ marginTop: 4, fontSize: 12, fontWeight: 700, color: 'var(--text-1)' }}>
                        {new Date(invoicePreview.cycle.startDate + 'T00:00:00').toLocaleDateString('pt-BR')} a {new Date(invoicePreview.cycle.endDate + 'T00:00:00').toLocaleDateString('pt-BR')}
                      </div>
                      <div style={{ marginTop: 3, fontSize: 11, color: 'var(--text-3)' }}>
                        Vence em {new Date(invoicePreview.cycle.dueDate + 'T00:00:00').toLocaleDateString('pt-BR')}
                      </div>
                    </div>
                    <div style={{ textAlign: 'right' }}>
                      <div style={{ fontSize: 11, color: ffReadableColor(invoicePreview.status === 'paid' ? "var(--success)" : "var(--warning)"), fontWeight: 700 }}>
                        {invoicePreview.status === 'paid' ? 'Paga' : invoicePreview.status === 'open' ? 'Aberta' : 'Pendente'}
                      </div>
                      <div style={{ marginTop: 4, fontSize: 20, fontWeight: 800, color: 'var(--text-1)', whiteSpace: 'nowrap' }}>{fmtBRL(invoicePreview.total)}</div>
                      <div style={{ fontSize: 10, color: 'var(--text-3)' }}>{invoicePreview.itemCount} item{invoicePreview.itemCount !== 1 ? 's' : ''}</div>
                    </div>
                  </div>

                  {invoicePreview.items.length === 0 ? (
                    <EmptyState icon="CreditCard" title="Fatura sem lançamentos" desc="Nenhum item elegível foi encontrado neste ciclo." />
                  ) : (
                    <div aria-label="Itens da fatura" style={{ border: '1px solid var(--border)', borderRadius: 12, overflow: 'hidden' }}>
                      {invoicePreview.items.map((item, index) => (
                        <div key={item.id} style={{ padding: '11px 12px', display: 'flex', alignItems: 'center', gap: 12, borderBottom: index < invoicePreview.items.length - 1 ? '1px solid var(--border)' : 'none' }}>
                          <div style={{ flex: 1, minWidth: 0 }}>
                            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.description}</div>
                            <div style={{ marginTop: 3, fontSize: 11, color: 'var(--text-3)' }}>{new Date(item.purchaseDate + 'T00:00:00').toLocaleDateString('pt-BR')}</div>
                          </div>
                          <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--text-1)', whiteSpace: 'nowrap' }}>{fmtBRL(item.value)}</div>
                        </div>
                      ))}
                    </div>
                  )}


                  {invoicePreview.canReopen && (
                    <label style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 14, fontSize: 12, fontWeight: 700, color: 'var(--text-2)' }}>
                      Motivo da reabertura
                      <textarea
                        value={reopenReason}
                        onChange={e => { setReopenReason(e.target.value); setInvoiceError(''); }}
                        maxLength={300}
                        placeholder="Ex.: preciso corrigir um lançamento desta fatura"
                        style={{ minHeight: 74, resize: 'vertical', boxSizing: 'border-box', width: '100%', padding: 10, borderRadius: 10, border: '1px solid var(--border)', background: 'var(--surface-2)', color: 'var(--text-1)', font: 'inherit' }}
                      />
                    </label>
                  )}
                </>
              )}
            </div>

            {invoicePreview && !invoiceLoading && (
              <footer style={{ padding: '12px 16px', borderTop: '1px solid var(--border)', background: 'var(--surface-0)', display: 'flex', gap: 10, flexShrink: 0 }}>
                <button className="ff-button" type="button" onClick={() => setInvoiceDialog(null)} disabled={!!invoiceAction} style={{ minHeight: 44, flex: 1, padding: '10px 12px', borderRadius: 10, border: '1px solid var(--border)', background: 'var(--surface-2)', color: 'var(--text-2)', fontWeight: 700, cursor: invoiceAction ? 'not-allowed' : 'pointer' }}>
                  Fechar
                </button>
                {invoicePreview.canPay && (
                  <button className="ff-button ff-action ff-primary-action" type="button" onClick={() => handleInvoiceAction('pay')} disabled={!!invoiceAction} style={{ minHeight: 44, flex: 2, padding: '10px 12px', borderRadius: 10, border: 'none', background: "var(--action-bg)", color: '#fff', fontWeight: 800, cursor: invoiceAction ? 'wait' : 'pointer', opacity: invoiceAction ? 0.7 : 1 }}>
                    {invoiceAction === 'pay' ? 'Pagando…' : `Pagar ${fmtBRL(invoicePreview.total)}`}
                  </button>
                )}
                {invoicePreview.canReopen && (
                  <button className="ff-button" type="button" onClick={() => handleInvoiceAction('reopen')} disabled={!!invoiceAction} style={{ minHeight: 44, flex: 2, padding: '10px 12px', borderRadius: 10, border: 'none', background: "var(--warning-action)", color: '#fff', fontWeight: 800, cursor: invoiceAction ? 'wait' : 'pointer', opacity: invoiceAction ? 0.7 : 1 }}>
                    {invoiceAction === 'reopen' ? 'Reabrindo…' : 'Reabrir fatura'}
                  </button>
                )}
              </footer>
            )}
          </section>
        </div>
      )}

      {/* Modal de edição */}
      <Modal open={!!editingExpense} onClose={() => setEditingExpense(null)} title="Editar Despesa">
        {editingExpense && (
          <ExpenseForm
            initialValues={editingExpense}
            onClose={() => setEditingExpense(null)}
            onSave={async (updated) => {
              await updateExpense(updated.id, updated);
              setToast('Despesa atualizada!');
            }}
          />
        )}
      </Modal>
    </div>
  );
}

Object.assign(window, { Cartoes });