// components.jsx — shared UI primitives
(function () {
  const { Icon } = window;

  // Category icon in a colored circle
  function CatIcon({ cat, size = 36, iconSize = 18 }) {
    const c = window.catById(cat);
    return React.createElement('div', {
      className: 'txn-icon',
      style: { width: size, height: size, background: 'var(--surface-2)' },
    }, React.createElement(Icon[c.icon] || Icon.tag, { size: iconSize, stroke: c.color, sw: 2 }));
  }

  // Animated count-up number
  function CountUp({ value, decimals = false, duration = 600, className, style, prefix }) {
    const [disp, setDisp] = React.useState(value);
    const fromRef = React.useRef(0);
    React.useEffect(() => {
      const from = fromRef.current; const to = value; const start = performance.now();
      let raf;
      const tick = (now) => {
        const p = Math.min(1, (now - start) / duration);
        const eased = 1 - Math.pow(1 - p, 3);
        setDisp(from + (to - from) * eased);
        if (p < 1) raf = requestAnimationFrame(tick); else fromRef.current = to;
      };
      raf = requestAnimationFrame(tick);
      return () => cancelAnimationFrame(raf);
    }, [value]);
    return React.createElement('span', { className, style },
      prefix, window.fmt(Math.round(disp), decimals));
  }

  // Amount text with sign + color
  function Amount({ value, type, mono = true, size = 16, weight = 400, decimals = true, showSign = true }) {
    const color = type === 'income' ? 'var(--mint)' : type === 'expense' ? 'var(--red)' : 'var(--text)';
    const sign = !showSign ? '' : type === 'income' ? '+' : type === 'expense' ? '−' : '';
    return React.createElement('span', {
      style: {
        fontFamily: mono ? 'var(--font-mono)' : 'var(--font-display)',
        fontWeight: weight, fontSize: size, color, fontVariantNumeric: 'tabular-nums',
      },
    }, sign, 'Rs. ', window.fmt(value, decimals));
  }

  function Toggle({ on, onChange }) {
    return React.createElement('button', {
      type: 'button', className: 'toggle' + (on ? ' on' : ''),
      role: 'switch', 'aria-checked': on, onClick: () => onChange(!on),
    }, React.createElement('span', { className: 'thumb' }));
  }

  function Badge({ status }) {
    const map = {
      pending: ['badge-pending', 'Pending'],
      partial: ['badge-partial', 'Partial'],
      settled: ['badge-settled', 'Settled'],
      overdue: ['badge-overdue', 'Overdue'],
    };
    const [cls, label] = map[status] || map.pending;
    return React.createElement('span', { className: 'badge ' + cls },
      React.createElement('span', { className: 'dot' }), label);
  }

  function EmptyState({ icon = 'wallet', title, sub, cta }) {
    return React.createElement('div', {
      style: { textAlign: 'center', padding: '48px 24px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 },
    }, [
      React.createElement('div', { key: 'i', style: { marginBottom: 8 } },
        React.createElement(Icon[icon] || Icon.wallet, { size: 64, stroke: 'var(--border)', sw: 1.5 })),
      React.createElement('div', { key: 't', className: 'display', style: { fontSize: 20, color: 'var(--text-3)' } }, title),
      sub && React.createElement('div', { key: 's', style: { fontSize: 13, color: 'var(--text-4)', maxWidth: 280 } }, sub),
      cta && React.createElement('div', { key: 'c', style: { marginTop: 12 } }, cta),
    ]);
  }

  // Date header for grouped lists
  function DateHeader({ label }) {
    return React.createElement('div', {
      className: 'eyebrow',
      style: { padding: '20px 8px 8px' },
    }, label);
  }

  // Transaction row
  function TxnRow({ txn, showCat = true, onClick }) {
    const cat = window.catById(txn.cat);
    return React.createElement('div', { className: 'txn-row', onClick },
      React.createElement(CatIcon, { cat: txn.cat }),
      React.createElement('div', { className: 'txn-mid' },
        React.createElement('div', { className: 'txn-reason' }, txn.reason),
        React.createElement('div', { className: 'txn-meta' },
          showCat ? cat.label : window.relDay(txn.date))),
      React.createElement('span', {
        className: 'txn-amt',
        style: { color: txn.type === 'income' ? 'var(--mint)' : 'var(--red)' },
      }, (txn.type === 'income' ? '+' : '−') + ' Rs. ' + window.fmt(txn.amount, true)),
    );
  }

  Object.assign(window, { CatIcon, CountUp, Amount, Toggle, Badge, EmptyState, DateHeader, TxnRow });
})();