// vault-detail.jsx — Detail drawer, create modal, signer switcher, tenant view

// ─────────────────────────────────────────────────────────────
// Tx Detail (admin drawer)
// ─────────────────────────────────────────────────────────────
function VaultTxDetail({ tx, state, lang }) {
  const sig = vaultTxSigStatus(tx);
  const proposer = signerById(tx.proposed_by);
  const currentSigner = signerById(state.currentSigner);
  const hasSigned = tx.signatures?.some(s => s.signer_id === state.currentSigner);
  const hasRejected = tx.rejections?.some(r => r.signer_id === state.currentSigner);
  const canSign = tx.status === 'pending_signatures' && !hasSigned && !hasRejected && currentSigner;
  const toast = useToast();

  const sign = () => {
    state.setVaultTx(txs => txs.map(t => {
      if (t.id !== tx.id) return t;
      const newSigs = [...(t.signatures || []), { signer_id: state.currentSigner, signed_at: new Date().toISOString(), method: 'app_2fa' }];
      const newSig = vaultTxSigStatus({ ...t, signatures: newSigs });
      const shouldExecute = newSig.canExecute;
      return {
        ...t,
        signatures: newSigs,
        status: shouldExecute ? 'executed' : t.status,
        executed_at: shouldExecute ? new Date().toISOString() : t.executed_at,
      };
    }));
    // Update balance if executed
    const newSig = vaultTxSigStatus({ ...tx, signatures: [...(tx.signatures || []), { signer_id: state.currentSigner }] });
    if (newSig.canExecute && tx.type === 'outflow') {
      state.setVault(v => ({ ...v, balance: v.balance - tx.amount }));
      toast(`Plată executată — ${window.fmtRON(tx.amount)} transferată`);
    } else {
      toast(`Semnat ca ${currentSigner.name.split(' ')[0]}`);
    }
  };

  const reject = () => {
    state.setVaultTx(txs => txs.map(t => t.id === tx.id ? {
      ...t,
      status: 'rejected',
      closed_at: new Date().toISOString(),
      rejections: [...(t.rejections || []), { signer_id: state.currentSigner, rejected_at: new Date().toISOString(), reason: 'Respins de ' + currentSigner.name }],
    } : t));
    toast('Plată respinsă');
  };

  const st = vaultTxStatus(tx);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      {/* Header */}
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
          <span style={{ padding: '4px 10px', borderRadius: 999, background: st.bg, color: st.color, fontSize: 11.5, fontWeight: 700 }}>{st.label}</span>
          {tx.invoice?.anaf_validated && (
            <span style={{ padding: '4px 10px', borderRadius: 999, background: '#E0F2FE', color: '#0369A1', fontSize: 11.5, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              ✓ ANAF e-Factura
            </span>
          )}
        </div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 600, color: 'var(--ink)', margin: 0, lineHeight: 1.3 }}>{tx.title}</h3>
        {tx.description && (
          <p style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.55, margin: '8px 0 0' }}>{tx.description}</p>
        )}
      </div>

      {/* Amount + payee */}
      <div style={{ padding: 18, borderRadius: 14, background: 'var(--surface-2)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
          <span style={{ fontSize: 11, color: 'var(--muted)', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Sumă</span>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700, color: tx.type === 'inflow' ? 'var(--success)' : 'var(--ink)', letterSpacing: '-0.01em' }}>
            {tx.type === 'inflow' ? '+' : '-'}{window.fmtRON(tx.amount)}
          </span>
        </div>
        {tx.payee && (
          <>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 6 }}>
              <span style={{ color: 'var(--muted)' }}>Beneficiar</span>
              <span style={{ fontWeight: 600, color: 'var(--ink)' }}>{tx.payee}</span>
            </div>
            {tx.payee_iban && (
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
                <span style={{ color: 'var(--muted)' }}>IBAN</span>
                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--ink-2)' }}>{tx.payee_iban}</span>
              </div>
            )}
          </>
        )}
      </div>

      {/* Invoice ANAF */}
      {tx.invoice && (
        <div>
          <div style={{ fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 600, marginBottom: 8 }}>Factură</div>
          <div style={{
            padding: 14, borderRadius: 12,
            background: 'var(--surface-2)', border: '1px solid var(--border)',
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{
              width: 44, height: 56, borderRadius: 6, flexShrink: 0,
              background: 'linear-gradient(160deg, #fff, #f5f0e6)',
              border: '1px solid var(--border)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 22,
              boxShadow: '0 1px 2px rgba(28, 22, 12, 0.06)',
            }}>📄</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }}>{tx.invoice.number}</div>
              <div style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 2 }}>
                {tx.invoice.date && new Date(tx.invoice.date).toLocaleDateString('ro-RO', { day: 'numeric', month: 'short', year: 'numeric' })}
                {tx.invoice.anaf_efactura_id && <> · ID ANAF: <span style={{ fontFamily: 'var(--font-mono)' }}>{tx.invoice.anaf_efactura_id}</span></>}
              </div>
            </div>
            <button style={{
              padding: '8px 12px', borderRadius: 8,
              background: 'var(--surface)', border: '1px solid var(--border)', color: 'var(--ink-2)',
              fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              <Icon name="download" size={13} /> PDF
            </button>
          </div>
        </div>
      )}

      {/* Linked AGA or Emergency */}
      {(tx.linked_aga || tx.linked_emergency) && (
        <div style={{ padding: 12, borderRadius: 10, background: 'var(--primary-light)', fontSize: 12.5, color: 'var(--ink-2)' }}>
          {tx.linked_aga && (() => {
            const p = state.proposals.find(x => x.id === tx.linked_aga);
            return p ? <>🗳 Bazat pe <b style={{ color: 'var(--primary)' }}>hotărâre AGA: {p.title}</b></> : null;
          })()}
          {tx.linked_emergency && (() => {
            const em = state.emergencies.find(x => x.id === tx.linked_emergency);
            return em ? <>🚨 Decont avarie <b style={{ color: 'var(--primary)' }}>#{em.id.toUpperCase()}</b></> : null;
          })()}
        </div>
      )}

      {/* Signatures */}
      <div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
          <div style={{ fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.04em', fontWeight: 600 }}>Semnături</div>
          <SignatureRing tx={tx} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          {window.VAULT_SIGNERS.map(s => {
            const signed = tx.signatures?.find(x => x.signer_id === s.id);
            const rejected = tx.rejections?.find(x => x.signer_id === s.id);
            return (
              <div key={s.id} style={{
                padding: '10px 14px', borderRadius: 10,
                background: signed ? '#F0FDF4' : rejected ? '#FEF2F2' : 'var(--surface-2)',
                border: signed ? '1px solid #BBF7D0' : rejected ? '1px solid #FECACA' : '1px solid var(--border)',
                display: 'flex', alignItems: 'center', gap: 12,
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 999,
                  background: signed ? 'var(--success)' : rejected ? 'var(--danger)' : 'var(--neutral-bg)',
                  color: signed || rejected ? '#fff' : 'var(--muted)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 14, fontWeight: 700,
                }}>{signed ? '✓' : rejected ? '✗' : s.name.split(' ').map(p => p[0]).join('').slice(0, 1)}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{s.name}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>
                    {s.role === 'admin' && <span style={{ color: 'var(--accent)' }}>Administrator · </span>}
                    {signed ? <>Semnat {new Date(signed.signed_at).toLocaleString('ro-RO', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })} · 2FA</>
                     : rejected ? <>Respins · {rejected.reason}</>
                     : <>În așteptare</>}
                  </div>
                </div>
                {signed && <span style={{ fontSize: 11, color: 'var(--success)', fontWeight: 600 }}>✓ App 2FA</span>}
              </div>
            );
          })}
        </div>
      </div>

      {/* Action buttons */}
      {canSign && (
        <div style={{ display: 'flex', gap: 8 }}>
          <Button variant="danger" onClick={reject} icon="x" style={{ flex: 1 }}>Respinge</Button>
          <Button variant="success" onClick={sign} icon="check" style={{ flex: 2 }}>
            {sig.canExecute || vaultTxSigStatus({ ...tx, signatures: [...(tx.signatures || []), { signer_id: state.currentSigner }] }).canExecute
              ? 'Semnează și execută plata' : `Semnează ca ${currentSigner.name.split(' ')[0]}`}
          </Button>
        </div>
      )}
      {hasSigned && tx.status === 'pending_signatures' && (
        <div style={{ padding: 12, borderRadius: 10, background: '#F0FDF4', color: '#065F46', fontSize: 12.5, fontWeight: 500, textAlign: 'center' }}>
          ✓ Tu ai semnat. Așteptăm restul.
        </div>
      )}
      {tx.status === 'executed' && tx.executed_at && (
        <div style={{ padding: 14, borderRadius: 12, background: '#F0FDF4', border: '1px solid #BBF7D0' }}>
          <div style={{ fontSize: 12, color: '#065F46', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 4 }}>✓ Plată executată</div>
          <div style={{ fontSize: 12.5, color: '#065F46' }}>
            Transferată în {tx.executed_at && new Date(tx.executed_at).toLocaleString('ro-RO', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })} via SWIFT/SEPA
          </div>
        </div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Create new tx modal (admin)
// ─────────────────────────────────────────────────────────────
function VaultCreateModal({ open, onClose, state, lang }) {
  const [title, setTitle] = React.useState('');
  const [desc, setDesc] = React.useState('');
  const [amount, setAmount] = React.useState('');
  const [payee, setPayee] = React.useState('');
  const [iban, setIban] = React.useState('');
  const [invoiceNo, setInvoiceNo] = React.useState('');
  const [anafValidated, setAnafValidated] = React.useState(true);
  const toast = useToast();

  React.useEffect(() => {
    if (open) { setTitle(''); setDesc(''); setAmount(''); setPayee(''); setIban(''); setInvoiceNo(''); setAnafValidated(true); }
  }, [open]);

  const submit = () => {
    if (!title.trim() || !amount || parseFloat(amount) <= 0) {
      toast('Completează titlu și sumă', 'error'); return;
    }
    const newTx = {
      id: 'tx_' + Math.random().toString(36).slice(2, 8),
      type: 'outflow', status: 'pending_signatures',
      title, description: desc, amount: parseFloat(amount),
      proposed_at: new Date().toISOString(),
      proposed_by: state.currentSigner,
      deadline: new Date(Date.now() + 7 * 86400000).toISOString().slice(0, 10),
      payee, payee_iban: iban,
      invoice: invoiceNo ? {
        number: invoiceNo,
        date: new Date().toISOString().slice(0, 10),
        anaf_validated: anafValidated,
        anaf_efactura_id: anafValidated ? 'EF-' + Math.floor(Math.random() * 9000 + 1000) + '-2025' : null,
      } : null,
      signatures: [{ signer_id: state.currentSigner, signed_at: new Date().toISOString(), method: 'app_2fa' }],
    };
    state.setVaultTx(txs => [newTx, ...txs]);
    toast(`Plată propusă — așteaptă 2 semnături comitet`);
    onClose();
  };

  return (
    <Modal open={open} onClose={onClose} title="Propune plată din fond reparații"
      footer={<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
        <Button variant="secondary" onClick={onClose}>Anulează</Button>
        <Button variant="primary" onClick={submit} icon="check">Propun plata</Button>
      </div>}
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{ padding: 12, borderRadius: 10, background: 'var(--primary-light)', fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>
          ℹ Vei semna automat ca administrator. Plata se va executa <b>doar după ce 2 din 3 membri ai comitetului confirmă</b>.
        </div>

        <Field label="Titlu plată"><Input value={title} onChange={setTitle} placeholder="ex: Reparație termopan casa scării" /></Field>
        <Field label="Descriere">
          <textarea value={desc} onChange={(e) => setDesc(e.target.value)} rows={3} placeholder="Context, oferte comparate, justificare..." style={{
            padding: '10px 14px', borderRadius: 10, border: '1px solid var(--border)',
            background: 'var(--surface)', fontSize: 14, fontFamily: 'inherit', color: 'var(--ink)',
            outline: 'none', resize: 'vertical', minHeight: 70,
          }} />
        </Field>
        <Field label="Sumă (RON)"><Input type="number" value={amount} onChange={setAmount} placeholder="0.00" mono /></Field>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 12 }}>
          <Field label="Beneficiar"><Input value={payee} onChange={setPayee} placeholder="ex: ConstrucBau SRL" /></Field>
          <Field label="IBAN"><Input value={iban} onChange={setIban} placeholder="RO49 ..." mono /></Field>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'flex-end' }}>
          <Field label="Număr factură"><Input value={invoiceNo} onChange={setInvoiceNo} placeholder="ex: CB-2025-0034" /></Field>
          <button onClick={() => setAnafValidated(!anafValidated)} disabled={!invoiceNo} style={{
            padding: '10px 14px', borderRadius: 10,
            background: anafValidated && invoiceNo ? '#E0F2FE' : 'var(--surface-2)',
            color: anafValidated && invoiceNo ? '#0369A1' : 'var(--muted)',
            border: '1px solid ' + (anafValidated && invoiceNo ? '#0EA5E9' : 'var(--border)'),
            cursor: invoiceNo ? 'pointer' : 'not-allowed',
            fontFamily: 'inherit', fontSize: 12, fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap',
          }}>{anafValidated && invoiceNo ? '✓ ANAF e-Factura' : 'Validează ANAF'}</button>
        </div>
      </div>
    </Modal>
  );
}

// ─────────────────────────────────────────────────────────────
// Signer switcher (demo aid)
// ─────────────────────────────────────────────────────────────
function SignerSwitchModal({ open, onClose, state }) {
  return (
    <Modal open={open} onClose={onClose} title="Demonstrație — schimbă rolul">
      <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.55, marginBottom: 16 }}>
        Schimbă persoana care vizualizează Vault-ul. Multi-sig presupune că fiecare semnatar are aplicația lui — aici poți simula vederea fiecăruia.
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {window.VAULT_SIGNERS.map(s => (
          <button key={s.id} onClick={() => { state.setCurrentSigner(s.id); onClose(); }} style={{
            padding: '14px 16px', borderRadius: 12, cursor: 'pointer',
            background: state.currentSigner === s.id ? 'var(--primary-light)' : 'var(--surface-2)',
            border: '1.5px solid ' + (state.currentSigner === s.id ? 'var(--primary)' : 'transparent'),
            display: 'flex', alignItems: 'center', gap: 12,
            fontFamily: 'inherit', textAlign: 'left',
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 999,
              background: s.role === 'admin' ? 'var(--accent)' : 'var(--primary)', color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 700, fontSize: 14, fontFamily: 'var(--font-display)',
            }}>{s.name.split(' ').map(p => p[0]).join('').slice(0, 2)}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>{s.name}</div>
              <div style={{ fontSize: 12, color: 'var(--muted)' }}>{s.bio}</div>
            </div>
            {state.currentSigner === s.id && <Icon name="check" size={18} style={{ color: 'var(--primary)' }} />}
          </button>
        ))}
      </div>
    </Modal>
  );
}

// ═════════════════════════════════════════════════════════════
// TENANT — Public Vault view
// ═════════════════════════════════════════════════════════════
function TenantVault({ state, apt, lang }) {
  const pending = state.vaultTx.filter(t => t.status === 'pending_signatures');
  const recent = state.vaultTx.filter(t => t.status === 'executed').slice(0, 8);
  const yearOut = state.vaultTx.filter(t => t.status === 'executed' && t.type === 'outflow').reduce((s, t) => s + t.amount, 0);
  const yearIn = state.vaultTx.filter(t => t.status === 'executed' && t.type === 'inflow').reduce((s, t) => s + t.amount, 0);

  return (
    <div style={{ padding: '16px 20px 100px' }}>
      <div style={{ marginBottom: 14 }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: 'var(--ink)', margin: 0, letterSpacing: '-0.01em' }}>
          Fond reparații
        </h2>
        <div style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 4 }}>
          Public · audit complet · protejat multi-semnătură
        </div>
      </div>

      {/* Big balance card */}
      <div style={{
        padding: 22, borderRadius: 18,
        background: 'linear-gradient(135deg, #1F4738, #173329)',
        color: '#fff', marginBottom: 14,
        boxShadow: '0 8px 24px rgba(31, 71, 56, 0.3)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
          <span style={{ fontSize: 22 }}>🔐</span>
          <span style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', opacity: 0.7 }}>Sold disponibil</span>
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 38, fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1 }}>
          {window.fmtRONshort(state.vault.balance)} <span style={{ fontSize: 18, opacity: 0.6 }}>RON</span>
        </div>
        <div style={{ fontSize: 11, opacity: 0.65, marginTop: 10, fontFamily: 'var(--font-mono)' }}>
          {state.vault.bank_account}
        </div>
        <div style={{ fontSize: 11, opacity: 0.55, marginTop: 2 }}>
          {state.vault.bank}
        </div>

        {/* Stats split */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 16, paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.12)' }}>
          <div>
            <div style={{ fontSize: 10.5, opacity: 0.65, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Intrat 2025</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, fontWeight: 700, color: '#86EFAC' }}>+{window.fmtRONshort(yearIn)}</div>
          </div>
          <div>
            <div style={{ fontSize: 10.5, opacity: 0.65, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Cheltuit 2025</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, fontWeight: 700, color: '#FCA5A5' }}>-{window.fmtRONshort(yearOut)}</div>
          </div>
        </div>
      </div>

      {/* Trust explainer */}
      <div style={{
        padding: 14, borderRadius: 12, marginBottom: 14,
        background: '#F0FDF4', border: '1px solid #BBF7D0',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
          <span style={{ fontSize: 16 }}>🔒</span>
          <span style={{ fontSize: 13, fontWeight: 700, color: '#065F46' }}>Banii nu pot dispărea</span>
        </div>
        <div style={{ fontSize: 12, color: '#065F46', lineHeight: 1.5 }}>
          Orice plată din fond cere <b>3 semnături</b>: administratorul + 2 din 3 membri comitet. Facturile sunt validate ANAF e-Factura. Toate plățile sunt vizibile aici, public.
        </div>
      </div>

      {/* Pending (live transparency!) */}
      {pending.length > 0 && (
        <div style={{ marginBottom: 14 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: '#D97706', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>
            ⏳ În proces de aprobare ({pending.length})
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {pending.map(tx => <TenantVaultTxCard key={tx.id} tx={tx} />)}
          </div>
        </div>
      )}

      {/* Recent */}
      <div>
        <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8 }}>
          Tranzacții recente
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {recent.map(tx => <TenantVaultTxCard key={tx.id} tx={tx} />)}
        </div>
      </div>
    </div>
  );
}

function TenantVaultTxCard({ tx }) {
  const st = vaultTxStatus(tx);
  const proposer = signerById(tx.proposed_by);

  return (
    <div style={{
      padding: 14, borderRadius: 12,
      background: 'var(--surface)', border: '1px solid var(--border)',
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
        <div style={{
          width: 36, height: 36, borderRadius: 10, flexShrink: 0,
          background: tx.type === 'inflow' ? '#DDF0E4' : '#F8E0D5',
          color: tx.type === 'inflow' ? '#065F46' : '#A8482F',
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, fontWeight: 700,
        }}>{tx.type === 'inflow' ? '↘' : '↗'}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
            <span style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink)', lineHeight: 1.3 }}>{tx.title}</span>
          </div>
          <div style={{ fontSize: 11, color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
            <span>{new Date(tx.proposed_at).toLocaleDateString('ro-RO', { day: 'numeric', month: 'short' })}</span>
            {tx.payee && <span>· {tx.payee}</span>}
            {tx.invoice?.anaf_validated && <span style={{ color: '#0369A1', fontWeight: 600 }}>· ✓ ANAF</span>}
          </div>
          {tx.status === 'pending_signatures' && (
            <div style={{ marginTop: 8 }}>
              <SignatureRing tx={tx} />
            </div>
          )}
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 14.5, fontWeight: 700, color: tx.type === 'inflow' ? 'var(--success)' : 'var(--ink)' }}>
            {tx.type === 'inflow' ? '+' : '-'}{window.fmtRONshort(tx.amount)}
          </div>
          {tx.status !== 'pending_signatures' && (
            <span style={{ fontSize: 10.5, color: st.color, fontWeight: 600 }}>{st.label}</span>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { VaultTxDetail, VaultCreateModal, SignerSwitchModal, TenantVault, TenantVaultTxCard });
