// Valores entre membros: uma obrigação, sem presumir uso de cartão ou desembolso do credor.
const MEMBER_OPERATION_KINDS = { sale: 'Venda', service: 'Serviço', loan: 'Empréstimo', other: 'Outro motivo' };
function memberOperationCents(input) {
  const value = String(input).trim().replace(',', '.');
  if (!/^\d+(\.\d{1,2})?$/.test(value)) return null;
  const [whole, fraction = ''] = value.split('.');
  const cents = Number(whole) * 100 + Number(fraction.padEnd(2, '0'));
  return Number.isSafeInteger(cents) && cents > 0 ? cents : null;
}
function MemberOperationButton({ children, primary = false, danger = false, ...props }) {
  return <button className={`ff-button${primary ? ' ff-action ff-primary-action' : ''}`} {...props} style={{ minHeight: 44, padding: '10px 14px', borderRadius: 10, border: primary ? 'none' : '1px solid var(--border)', background: primary ? 'var(--action-bg)' : danger ? 'var(--danger-bg)' : 'var(--surface-2)', color: primary ? 'white' : danger ? 'var(--danger)' : 'var(--text-1)', fontSize: 13, fontWeight: 650, cursor: props.disabled ? 'wait' : 'pointer', ...props.style }}>{children}</button>;
}
function MemberOperationPeriodFields({ form, set, busy }) {
  return <>
    <FormField label="Tipo"><Select value={form.type} onChange={e => set('type', e.target.value)} disabled={busy}><option value="single">Única</option><option value="installment">Parcelada</option><option value="fixed">Fixa</option></Select></FormField>
    {form.type === 'installment' && <FormField label="Nº de parcelas"><Input type="number" inputMode="numeric" min="2" max="60" step="1" value={form.installments} onChange={e => set('installments', e.target.value)} disabled={busy} required /></FormField>}
    {form.type === 'fixed' && <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <FormField label="Frequência"><Select value={form.frequency} onChange={e => set('frequency', e.target.value)} disabled={busy}><option value="monthly">Mensal</option><option value="biweekly">A cada 2 semanas</option><option value="weekly">Semanal</option></Select></FormField>
      <FormField label="Por quanto tempo?"><Select value={form.durationChoice} onChange={e => set('durationChoice', e.target.value)} disabled={busy} required><option value="">Selecione…</option><option value="open">Sem fim (até encerrar a série)</option><option value="12">12 meses</option><option value="24">24 meses</option><option value="36">36 meses</option><option value="custom">Outro nº de meses</option></Select></FormField>
      {form.durationChoice === 'custom' && <FormField label="Nº de meses"><Input type="number" min="1" max="72" step="1" inputMode="numeric" value={form.durationMonths} onChange={e => set('durationMonths', e.target.value)} disabled={busy} required /></FormField>}
    </div>}
  </>;
}
function memberOperationPeriodSummary(form) {
  const cents = memberOperationCents(form.amount);
  if (form.type === 'installment') {
    const n = Number(form.installments);
    if (!cents || !Number.isInteger(n) || n < 2 || n > 60) return 'Informe o valor total e de 2 a 60 parcelas.';
    const base = Math.floor(cents / n), remainder = cents % n;
    const parts = [];
    if (remainder) parts.push(`${remainder} parcela${remainder > 1 ? 's' : ''} de ${fmtBRL((base + 1) / 100)}`);
    if (n - remainder) parts.push(`${n - remainder} parcela${n - remainder > 1 ? 's' : ''} de ${fmtBRL(base / 100)}`);
    return `${n} parcelas mensais: ${parts.join(' + ')}. Total ${fmtBRL(cents / 100)}.`;
  }
  if (form.type === 'fixed') {
    const frequency = form.frequency === 'weekly' ? 'semana' : form.frequency === 'biweekly' ? 'duas semanas' : 'mês';
    if (form.durationChoice === 'open') return `${fmtBRL((cents || 0) / 100)} a cada ${frequency}, sem data de término. As próximas ocorrências são mantidas até encerrar a série.`;
    const count = fixedOccurrenceCount(form.frequency, form.durationChoice === 'custom' ? form.durationMonths : form.durationChoice);
    return `${fmtBRL((cents || 0) / 100)} a cada ${frequency}${count ? `, ${count} ocorrências` : ', escolha a duração'}.`;
  }
  return `Obrigação única de ${fmtBRL((cents || 0) / 100)}, sem meio de pagamento.`;
}
function MemberOperationForm({ expense, initialDraft = {}, creditorLocked = false, conversionEligibility, onClose, onSaved, onBusyChange = () => {} }) {
  const { currentMember, members, createMemberOperation, convertExpenseToMemberOperation } = useApp();
  const [form, setForm] = React.useState({ description: expense?.desc || initialDraft.desc || '', amount: expense ? String(expense.value) : String(initialDraft.value || ''), date: expense?.date || initialDraft.date || todayLocalISO(), dueDate: '', kind: 'other', debtorId: conversionEligibility?.debtorId || expense?.responsibleMemberId || (initialDraft.responsibleMemberId !== currentMember.id ? initialDraft.responsibleMemberId : '') || (creditorLocked ? '' : currentMember.id), creditorId: conversionEligibility?.creditorId || (expense || creditorLocked ? currentMember.id : ''), type: initialDraft.type || 'single', installments: initialDraft.installments || 2, frequency: initialDraft.frequency || 'monthly', durationChoice: initialDraft.durationChoice || '', durationMonths: initialDraft.durationMonths || '', scope: conversionEligibility ? (['occurrence','future','series'].find(scope => conversionEligibility.scopes?.[scope]?.eligible) || 'occurrence') : 'occurrence' });
  const [error, setError] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [confirmNoPaymentUse, setConfirmNoPaymentUse] = React.useState(false);
  const [confirmPreserveReceipts, setConfirmPreserveReceipts] = React.useState(false);
  const set = (key, value) => { setForm(previous => ({ ...previous, [key]: value })); if (key === 'scope') setConfirmPreserveReceipts(false); setError(''); };
  const participant = form.debtorId === currentMember.id || form.creditorId === currentMember.id;
  const selectedScope = conversionEligibility?.scopes?.[form.scope];
  const selectedOccurrences = selectedScope?.occurrences || [];
  const selectedCount = selectedScope?.count ?? selectedOccurrences.length;
  const selectedTotalCents = selectedScope?.amountCents ?? 0;
  async function save(event) {
    event.preventDefault();
    if (busy) return;
    if (expense && (!conversionEligibility?.eligible || !conversionEligibility.scopes?.[form.scope]?.eligible)) return setError(conversionEligibility?.scopes?.[form.scope]?.reason || conversionEligibility?.reason || 'Esta conversão não é permitida.');
    const amountCents = memberOperationCents(form.amount);
    if (!form.description.trim() || !amountCents || !form.date || !form.debtorId || !form.creditorId) return setError('Preencha descrição, valor, data e as duas pessoas.');
    if (form.debtorId === form.creditorId) return setError('Quem paga e quem recebe devem ser pessoas diferentes.');
    if (expense && selectedScope?.requiresPreserveReceiptsConfirmation && !confirmPreserveReceipts) return setError('Confirme a preservação dos recebimentos existentes.');
    if (expense && !confirmNoPaymentUse) return setError('Confirme que não houve compra real no meio de pagamento do credor.');
    if (!participant) return setError('Você precisa ser quem paga ou quem recebe este valor.');
    if (!expense && form.type === 'installment' && (!Number.isInteger(Number(form.installments)) || Number(form.installments) < 2 || Number(form.installments) > 60)) return setError('Informe de 2 a 60 parcelas.');
    if (!expense && form.type === 'installment' && amountCents < Number(form.installments)) return setError('O total deve permitir ao menos R$ 0,01 por parcela.');
    if (!expense && form.type === 'fixed') { const issue = validateFixedDuration(form.frequency, form.durationChoice, form.durationMonths); if (issue) return setError(issue); }
    const period = { type: form.type };
    if (form.type === 'installment') period.installments = Number(form.installments);
    if (form.type === 'fixed') { period.frequency = form.frequency; period.openEnded = form.durationChoice === 'open'; if (!period.openEnded) period.occurrenceCount = fixedOccurrenceCount(form.frequency, form.durationChoice === 'custom' ? form.durationMonths : form.durationChoice); }
    setBusy(true); onBusyChange(true); setError('');
    try {
      const result = expense
        ? await convertExpenseToMemberOperation(expense.id, { debtorId: form.debtorId, creditorId: form.creditorId, kind: form.kind, scope: form.scope, confirmNoPaymentUse: true, ...(selectedScope.requiresPreserveReceiptsConfirmation ? { confirmPreserveReceipts: true } : {}) })
        : await createMemberOperation({ description: form.description.trim(), amountCents, date: form.date, dueDate: form.dueDate || undefined, kind: form.kind, debtorId: form.debtorId, creditorId: form.creditorId, ...period });
      if (!result?.success) { setError(result?.message || 'Não foi possível salvar. Tente novamente.'); return; }
      onSaved?.(result.operation); onClose();
    } catch (failure) { setError(failure.message || 'Falha de conexão. Tente novamente.'); }
    finally { setBusy(false); onBusyChange(false); }
  }
  const name = id => members.find(member => member.id === id)?.name || 'Selecione uma pessoa';
  return <form onSubmit={save} aria-busy={busy} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
    {creditorLocked && <div role="note" style={{ background: 'var(--info-bg)', padding: 14, borderRadius: 10, color: 'var(--text-1)', fontSize: 13, lineHeight: 1.5 }}>Este acerto cria uma cobrança a receber de outro membro. Você é quem recebe; o responsável é quem paga. Não confirma pagamento nem usa cartão ou conta.</div>}
    {expense && <div role="note" style={{ background: 'var(--info-bg)', color: 'var(--text-1)', padding: 14, borderRadius: 10, fontSize: 13, lineHeight: 1.5 }}>A conversão substitui os lançamentos selecionados e seus reembolsos por obrigações diretas. Datas e valores reais serão preservados; o credor não terá débito em seu meio de pagamento. Despesas pagas, faturas e acertos vinculados continuam protegidos. Recebimentos diretos válidos serão preservados com sua confirmação. Uma seleção insegura será recusada por completo.</div>}
    <FormField label="Descrição"><Input value={form.description} onChange={e => set('description', e.target.value)} disabled={busy || !!expense} maxLength={200} required /></FormField>
    <FormField label="Motivo"><Select value={form.kind} onChange={e => set('kind', e.target.value)} disabled={busy}>{Object.entries(MEMBER_OPERATION_KINDS).map(([key, label]) => <option key={key} value={key}>{label}</option>)}</Select></FormField>
    <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
      <FormField label={creditorLocked ? 'Responsável (quem paga)' : 'Quem paga'}><Select value={form.debtorId} onChange={e => set('debtorId', e.target.value)} disabled={busy || !!expense} required><option value="">Selecione</option>{members.filter(m => !creditorLocked || m.id !== currentMember.id).map(m => <option key={m.id} value={m.id}>{m.name}</option>)}</Select></FormField>
      <FormField label="Quem recebe"><Select value={form.creditorId} onChange={e => set('creditorId', e.target.value)} disabled={busy || creditorLocked || !!expense} required><option value="">Selecione</option>{members.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}</Select></FormField>
    </div>
    {!expense && <MemberOperationPeriodFields form={form} set={set} busy={busy} />}
    <div className="r-stack-sm" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
      <FormField label={expense ? 'Valor desta ocorrência (R$)' : form.type === 'fixed' ? 'Valor por ocorrência (R$)' : 'Valor completo (R$)'}><Input type="number" inputMode="decimal" step="0.01" min="0.01" value={form.amount} onChange={e => set('amount', e.target.value)} disabled={busy || !!expense} required /></FormField>
      <FormField label="Data do lançamento"><Input type="date" value={form.date} onChange={e => set('date', e.target.value)} disabled={busy || !!expense} required /></FormField>
    </div>
    {!expense && <FormField label={form.type === 'single' ? 'Vencimento (opcional)' : 'Primeiro vencimento (opcional)'}><Input type="date" value={form.dueDate} onChange={e => set('dueDate', e.target.value)} disabled={busy} /></FormField>}
    {expense?.seriesId && <FormField label="Converter quais ocorrências?"><Select value={form.scope} onChange={e => set('scope', e.target.value)} disabled={busy}><option value="occurrence" disabled={!conversionEligibility?.scopes?.occurrence?.eligible}>Somente esta ocorrência</option><option value="future" disabled={!conversionEligibility?.scopes?.future?.eligible}>Esta e as futuras</option><option value="series" disabled={!conversionEligibility?.scopes?.series?.eligible}>Toda a série</option></Select></FormField>}
    {expense && conversionEligibility && <div style={{ fontSize: 12, color: 'var(--text-2)', lineHeight: 1.5 }}>A conversão usa os valores originais. Alterações no modo Despesa não são aplicadas à conversão.{Object.entries(conversionEligibility.scopes || {}).filter(([,scope]) => !scope.eligible && scope.reason).map(([key,scope]) => <div key={key}>{key === 'future' ? 'Esta e as futuras' : key === 'series' ? 'Toda a série' : 'Somente esta ocorrência'}: {scope.reason}</div>)}</div>}
    <div style={{ padding: 14, background: 'var(--surface-2)', borderRadius: 10, fontSize: 13, lineHeight: 1.6, overflowWrap: 'anywhere' }}><strong>{name(form.debtorId)}</strong>{expense && selectedScope?.requiresPreserveReceiptsConfirmation ? ' tem uma obrigação registrada com ' : ' deve a '}<strong>{name(form.creditorId)}</strong>. {expense ? <span>{selectedCount} ocorrência(s) selecionada(s); valor total deste escopo: <strong>{fmtBRL(selectedTotalCents / 100)}</strong>. Cada obrigação mantém seu vencimento e valor original. A prévia inclui somente ocorrências já lançadas.</span> : <span>{memberOperationPeriodSummary(form)}</span>} A despesa pertence somente a quem paga; a receita pertence somente a quem recebe. {expense && selectedScope?.requiresPreserveReceiptsConfirmation ? (selectedScope.remainingCents > 0 ? 'Apenas o saldo em aberto precisa de um novo recebimento.' : 'Este escopo já está quitado; nenhum novo recebimento é necessário.') : 'O recebimento será confirmado depois pelo credor.'}</div>
    {expense && selectedScope?.requiresPreserveReceiptsConfirmation && <div role="note" style={{ background: 'var(--success-bg)', borderRadius: 10, padding: 14, fontSize: 13, lineHeight: 1.6, color: 'var(--text-1)' }}>Recebimentos já registrados: <strong>{fmtBRL(selectedScope.receivedCents / 100)}</strong>. Esses valores e suas datas serão preservados. Saldo que continua em aberto: <strong>{fmtBRL(selectedScope.remainingCents / 100)}</strong>. Não reabra nem registre novamente esses recebimentos.</div>}
    {expense && selectedScope?.requiresPreserveReceiptsConfirmation && <label style={{ display: 'flex', gap: 10, alignItems: 'center', minHeight: 44, fontSize: 13, lineHeight: 1.5, color: 'var(--text-1)' }}><input type="checkbox" checked={confirmPreserveReceipts} onChange={e => setConfirmPreserveReceipts(e.target.checked)} disabled={busy} required style={{ width: 20, height: 20, flexShrink: 0 }} />Confirmo que os recebimentos existentes serão preservados, com seus valores e datas, sem cobrar novamente o que já foi recebido.</label>}
    {expense && <label style={{ display: 'flex', gap: 10, alignItems: 'center', minHeight: 44, fontSize: 13, lineHeight: 1.5, color: 'var(--text-1)' }}><input type="checkbox" checked={confirmNoPaymentUse} onChange={e => setConfirmNoPaymentUse(e.target.checked)} disabled={busy} required style={{ width: 20, height: 20, flexShrink: 0 }} />Confirmo que este lançamento não representa uma compra real no cartão ou conta de quem recebe.</label>}
    {error && <div role="alert" style={{ color: 'var(--danger)', fontSize: 13 }}>{error}</div>}
    <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}><MemberOperationButton type="button" disabled={busy} onClick={onClose}>Cancelar</MemberOperationButton><MemberOperationButton type="submit" primary disabled={busy || (expense && (!selectedScope?.eligible || !Number.isSafeInteger(selectedTotalCents) || selectedTotalCents <= 0 || selectedCount < 1))}>{busy ? 'Salvando…' : expense ? 'Confirmar conversão' : creditorLocked ? 'Salvar acerto entre membros' : 'Criar valor entre membros'}</MemberOperationButton></div>
  </form>;
}
function MemberOperationReceiptForm({ operation, onClose, onBusyChange = () => {} }) {
  const { recordMemberOperationReceipt } = useApp();
  const [amount, setAmount] = React.useState((operation.remainingCents / 100).toFixed(2));
  const [date, setDate] = React.useState(todayLocalISO());
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');
  async function save(event) {
    event.preventDefault(); if (busy) return;
    const amountCents = memberOperationCents(amount);
    if (!amountCents || amountCents > operation.remainingCents) return setError('O recebimento deve ser maior que zero e não pode ultrapassar o valor em aberto.');
    setBusy(true); onBusyChange(true); setError('');
    try { const result = await recordMemberOperationReceipt(operation.id, { amountCents, date }); if (!result?.success) setError(result?.message || 'Não foi possível registrar.'); else onClose(); }
    catch (failure) { setError(failure.message || 'Falha de conexão. Tente novamente.'); }
    finally { setBusy(false); onBusyChange(false); }
  }
  return <form onSubmit={save} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}><p style={{ margin: 0, color: 'var(--text-2)', fontSize: 13 }}>Confirme somente o dinheiro que você já recebeu. Em aberto: <strong>{fmtBRL(operation.remainingCents / 100)}</strong>.</p><FormField label="Valor recebido (R$)"><Input type="number" inputMode="decimal" step="0.01" min="0.01" max={operation.remainingCents / 100} value={amount} onChange={e => setAmount(e.target.value)} disabled={busy} required /></FormField><FormField label="Data do recebimento"><Input type="date" value={date} onChange={e => setDate(e.target.value)} disabled={busy} required /></FormField>{error && <div role="alert" style={{ color: 'var(--danger)', fontSize: 13 }}>{error}</div>}<MemberOperationButton primary type="submit" disabled={busy}>{busy ? 'Registrando…' : 'Confirmar recebimento'}</MemberOperationButton></form>;
}
function MemberOperations() {
  const { currentMember, memberOperations = [], memberOperationsLoading, memberOperationsError, refreshMemberOperations, cancelMemberOperation, reverseMemberOperationReceipt, closeMemberOperationSeries } = useApp();
  const [showForm, setShowForm] = React.useState(false);
  const [formBusy, setFormBusy] = React.useState(false);
  const [receipt, setReceipt] = React.useState(null);
  const [receiptBusy, setReceiptBusy] = React.useState(false);
  const [confirmation, setConfirmation] = React.useState(null);
  const [reason, setReason] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');
  const [filter, setFilter] = React.useState('open');
  React.useEffect(() => { refreshMemberOperations().catch(() => {}); }, []);
  const mine = memberOperations.filter(operation => operation.debtorId === currentMember.id || operation.creditorId === currentMember.id);
  const shown = mine.filter(operation => filter === 'all' || (operation.status !== 'cancelled' && operation.remainingCents > 0));
  async function retry() { try { await refreshMemberOperations(); } catch (_) {} }
  async function confirm(event) {
    event.preventDefault(); if (busy || !reason.trim()) return;
    setBusy(true); setError('');
    try { const result = confirmation.seriesId ? await closeMemberOperationSeries(confirmation.seriesId, { reason: reason.trim() }) : confirmation.receiptId ? await reverseMemberOperationReceipt(confirmation.operation.id, confirmation.receiptId, { reason: reason.trim() }) : await cancelMemberOperation(confirmation.operation.id, { reason: reason.trim() }); if (!result?.success) setError(result?.message || 'Não foi possível concluir.'); else { setConfirmation(null); setReason(''); } }
    catch (failure) { setError(failure.message || 'Falha de conexão. Tente novamente.'); }
    finally { setBusy(false); }
  }
  const amountLine = (label, cents) => <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '5px 0', fontSize: 13 }}><span style={{ color: 'var(--text-2)' }}>{label}</span><strong style={{ color: 'var(--text-1)', whiteSpace: 'nowrap' }}>{fmtBRL(cents / 100)}</strong></div>;
  return <div className="screen-outer" style={{ padding: 24, maxWidth: 1000, margin: '0 auto', width: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: 20 }}>
    <div style={{ display: 'flex', gap: 12, justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap' }}><div><h2 style={{ margin: 0, color: 'var(--text-1)', fontSize: 22 }}>Valores entre membros</h2><p style={{ margin: '6px 0 0', color: 'var(--text-2)', fontSize: 13 }}>Vendas, serviços, empréstimos e outros valores a pagar ou receber, sem uso de cartão.</p></div><MemberOperationButton primary onClick={() => setShowForm(true)}>Novo valor</MemberOperationButton></div>
    <Card><p style={{ margin: 0, color: 'var(--text-2)', fontSize: 13, lineHeight: 1.6 }}>Cada lançamento tem uma origem única. Quem paga vê a despesa; quem recebe vê a receita prevista. Somente o credor confirma o recebimento, inclusive parcial. Os valores abaixo abrangem todos os meses.</p></Card>
    <div style={{ display: 'flex', gap: 8 }}><MemberOperationButton aria-pressed={filter === 'open'} onClick={() => setFilter('open')}>Em aberto</MemberOperationButton><MemberOperationButton aria-pressed={filter === 'all'} onClick={() => setFilter('all')}>Todos</MemberOperationButton></div>
    {memberOperationsError && <Card><div role="alert" style={{ color: 'var(--danger)', fontSize: 13, marginBottom: 12 }}>{typeof memberOperationsError === 'string' ? memberOperationsError : 'Não foi possível carregar os valores.'}</div><MemberOperationButton disabled={memberOperationsLoading} onClick={retry}>Tentar novamente</MemberOperationButton></Card>}
    {memberOperationsLoading && <Card><div role="status" style={{ color: 'var(--text-2)', fontSize: 13 }}>Carregando valores entre membros…</div></Card>}
    {!memberOperationsLoading && !memberOperationsError && !shown.length && <EmptyState icon="Users" title="Nenhum valor encontrado" desc={filter === 'open' ? 'Você não tem valores entre membros em aberto.' : 'Cadastre uma venda, serviço ou outra obrigação entre você e alguém da família.'} />}
    {shown.map(operation => { const creditor = operation.creditorId === currentMember.id; const cancelled = operation.status === 'cancelled'; const partner = creditor ? operation.debtor?.name : operation.creditor?.name; const status = cancelled ? 'Cancelado' : operation.remainingCents === 0 ? 'Quitado' : operation.receivedCents > 0 ? 'Parcialmente recebido' : 'Em aberto'; return <Card key={operation.id}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0 }}><strong style={{ fontSize: 16, color: 'var(--text-1)', overflowWrap: 'anywhere' }}>{operation.description}</strong><span style={{ fontSize: 13, color: 'var(--text-2)', overflowWrap: 'anywhere' }}>{creditor ? 'Você recebe de' : 'Você paga a'} {partner || 'membro da família'}</span><div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', fontSize: 12, color: 'var(--text-3)' }}><span>{MEMBER_OPERATION_KINDS[operation.kind] || 'Outro motivo'}</span>{operation.seriesId && <span>• {operation.type === 'installment' || operation.series?.type === 'installment' ? `Parcela ${operation.occurrenceIndex || operation.currentInstallment || 1}/${operation.installments || operation.series?.installments || '—'}` : `Fixa · ocorrência ${operation.occurrenceIndex || 1}`}</span>}<span>• {parseLocalDate(operation.date).toLocaleDateString('pt-BR')}</span>{operation.dueDate && <span>• Vence {parseLocalDate(operation.dueDate).toLocaleDateString('pt-BR')}</span>}<strong>{status}</strong></div></div>
      <div style={{ padding: '12px 0', marginTop: 12, borderTop: '1px solid var(--border)' }}>{amountLine('Valor original', operation.amountCents)}{amountLine('Recebido', operation.receivedCents)}{amountLine(cancelled ? 'Obrigação cancelada' : 'Em aberto', cancelled ? 0 : operation.remainingCents)}</div>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>{creditor && !cancelled && operation.remainingCents > 0 && <MemberOperationButton primary onClick={() => setReceipt(operation)}>Registrar recebimento</MemberOperationButton>}{operation.createdById === currentMember.id && operation.series?.openEnded && !operation.series?.closedAt && shown.find(item => item.seriesId === operation.seriesId)?.id === operation.id && <MemberOperationButton onClick={() => { setConfirmation({ operation, seriesId: operation.seriesId }); setReason(''); setError(''); }}>Parar renovação</MemberOperationButton>}{operation.createdById === currentMember.id && !cancelled && operation.receivedCents === 0 && <MemberOperationButton danger onClick={() => { setConfirmation({ operation }); setReason(''); setError(''); }}>Cancelar obrigação</MemberOperationButton>}</div>
      {!!operation.receipts?.length && <details style={{ marginTop: 12 }}><summary style={{ minHeight: 44, color: 'var(--text-2)', cursor: 'pointer', fontSize: 13 }}>Histórico de recebimentos</summary>{operation.receipts.map(item => <div key={item.id} style={{ borderTop: '1px solid var(--border)', padding: '10px 0', display: 'flex', gap: 10, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}><div style={{ color: 'var(--text-2)', fontSize: 13 }}>{fmtBRL(item.amountCents / 100)} · {parseLocalDate(item.date).toLocaleDateString('pt-BR')}{item.reversedAt && ' · Estornado'}{item.sourceIncomeId && <span style={{ display: 'block', marginTop: 4, fontSize: 12 }}>Recebimento preservado da origem</span>}</div>{item.settlementId && <span style={{ fontSize: 12, color: 'var(--text-2)' }}>Confirmado pelo Balancete</span>}{creditor && !item.reversedAt && !item.settlementId && !cancelled && <MemberOperationButton onClick={() => { setConfirmation({ operation, receiptId: item.id }); setReason(''); setError(''); }}>Estornar</MemberOperationButton>}</div>)}</details>}
    </Card>; })}
    <Modal open={showForm} onClose={() => { if (!formBusy) setShowForm(false); }} title="Novo valor entre membros">{showForm && <MemberOperationForm onClose={() => setShowForm(false)} onBusyChange={setFormBusy} />}</Modal>
    <Modal open={!!receipt} onClose={() => { if (!receiptBusy) setReceipt(null); }} title="Registrar recebimento">{receipt && <MemberOperationReceiptForm operation={receipt} onBusyChange={setReceiptBusy} onClose={() => setReceipt(null)} />}</Modal>
    <Modal open={!!confirmation} onClose={() => { if (!busy) setConfirmation(null); }} title={confirmation?.seriesId ? 'Parar renovação' : confirmation?.receiptId ? 'Estornar recebimento' : 'Cancelar obrigação'}>{confirmation && <form onSubmit={confirm} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}><p style={{ margin: 0, color: 'var(--text-2)', fontSize: 13 }}>{confirmation.seriesId ? 'As cobranças já lançadas continuam; novas ocorrências deixam de ser geradas. Para corrigir uma cobrança existente, cancele essa ocorrência.' : confirmation.receiptId ? 'O valor deste recebimento voltará a ficar em aberto para as duas pessoas. O histórico será preservado.' : 'Esta obrigação deixará de contar como despesa e receita para os envolvidos. O histórico será preservado.'}</p><FormField label="Motivo da correção"><Input value={reason} onChange={e => setReason(e.target.value)} disabled={busy} maxLength={200} required /></FormField>{error && <div role="alert" style={{ fontSize: 13, color: 'var(--danger)' }}>{error}</div>}<MemberOperationButton danger type="submit" disabled={busy || !reason.trim()}>{busy ? 'Processando…' : 'Confirmar'}</MemberOperationButton></form>}</Modal>
  </div>;
}
Object.assign(window, { MemberOperations, MemberOperationForm, memberOperationCents, memberOperationPeriodSummary });