/* Recent transactions — compact list with category tags */

function TransactionsPanel() {
  const catColor = {
    Income: 'var(--cb-pos)',
    Materials: 'var(--cb-accent)',
    Payroll: 'var(--cb-fg-2)',
    Insurance: 'var(--cb-info)',
    Vehicle: 'var(--cb-fg-2)',
  };
  return (
    <section className="cb-panel">
      <PanelHeader
        eyebrow="Recent activity"
        title="Bank feed"
        sub="Chase ••4421 · auto-categorized by Dana"
        right={
          <button type="button" className="cb-btn cb-btn-ghost">
            See all <IconChevRight size={14} />
          </button>
        }
      />
      <ul className="cb-txns">
        {CB.transactions.map((t, i) => (
          <li key={i} className="cb-txn">
            <span className={`cb-txn-kind cb-txn-${t.kind}`}>
              {t.kind === 'in' ? <IconArrowDR size={14} /> : <IconArrowUR size={14} />}
            </span>
            <div className="cb-txn-body">
              <div className="cb-txn-party">{t.party}</div>
              <div className="cb-txn-memo">{t.memo}</div>
            </div>
            <span className="cb-txn-cat" style={{ '--cat': catColor[t.cat] }}>
              <i /> {t.cat}
            </span>
            <div className="cb-txn-date">{CB.fmtDate(t.date)}</div>
            <div className={`cb-txn-amt ${t.kind === 'in' ? 'pos' : ''}`}>
              {CB.fmtMoney(t.amount, { cents: true, signed: true })}
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}

/* Tiny toast/notification system */
function Toaster({ toasts, onDismiss }) {
  return (
    <div className="cb-toaster" aria-live="polite">
      {toasts.map((t) => (
        <div key={t.id} className={`cb-toast cb-toast-${t.kind}`}>
          <span className="cb-toast-ico">
            {t.icon === 'send' ? <IconSend size={16} /> :
             t.icon === 'check' ? <IconCheck size={16} /> :
             <IconBell size={16} />}
          </span>
          <div className="cb-toast-body">
            <b>{t.title}</b>
            <span>{t.body}</span>
          </div>
          <button type="button" className="cb-toast-x" onClick={() => onDismiss(t.id)} aria-label="Dismiss">
            <IconClose size={14} />
          </button>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { TransactionsPanel, Toaster });