// credits.jsx — Credits Coming + Going
(function () {
  const { Icon, Badge, EmptyState } = window;

  function dueLabel(iso) {
    const due = new Date(iso); const t = window.SEED.TODAY;
    const days = Math.round((due - t) / 86400000);
    if (days < 0) return { text: 'Overdue by ' + Math.abs(days) + 'd', color: 'var(--red)' };
    if (days === 0) return { text: 'Due today', color: 'var(--amber)' };
    if (days <= 3) return { text: 'Due in ' + days + 'd', color: 'var(--amber)' };
    return { text: 'Due ' + due.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' }), color: 'var(--mint)' };
  }

  function CreditCard({ credit, onSettle }) {
    const [confirming, setConfirming] = React.useState(false);
    const isComing = credit.dir === 'coming';
    const color = isComing ? 'var(--mint)' : 'var(--red)';
    const due = dueLabel(credit.due);
    const pending = credit.status === 'pending' || credit.status === 'overdue' || credit.status === 'partial';
    return React.createElement('div', { className: 'card hoverable credit-card' }, [
      React.createElement('div', { key: 'top', className: 'cc-top' }, [
        React.createElement('div', { key: 'l', style: { minWidth: 0 } }, [
          React.createElement('div', { key: 'n', className: 'cc-name' }, credit.name),
          React.createElement('div', { key: 'r', className: 'cc-reason' }, credit.reason),
          React.createElement('div', { key: 'd', className: 'cc-due', style: { color: credit.status === 'settled' ? 'var(--text-3)' : due.color } },
            credit.status === 'settled' ? 'Settled' : due.text),
        ]),
        React.createElement('div', { key: 'r', style: { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8 } }, [
          React.createElement('div', { key: 'a', className: 'cc-amt', style: { color } },
            (isComing ? '+' : '−') + ' Rs. ' + window.fmt(credit.amount, true)),
          React.createElement(Badge, { key: 'b', status: credit.status }),
        ]),
      ]),
      pending && (confirming
        ? React.createElement('div', { key: 'cf', className: 'cc-confirm' }, [
            React.createElement('button', { key: 'c', className: 'btn-ghost', style: { border: '1px solid var(--border)' }, onClick: () => setConfirming(false) }, 'Cancel'),
            React.createElement('button', { key: 'y', style: { background: color, color: '#0A0F1E' }, onClick: () => onSettle(credit.id) }, 'Confirm Settled'),
          ])
        : React.createElement('button', { key: 'st', className: 'cc-settle', style: { color }, onClick: () => setConfirming(true) }, 'Mark as Settled')),
    ]);
  }

  function Credits({ store }) {
    const [tab, setTab] = React.useState('coming');
    const ulRef = React.useRef(null);
    const tabRefs = React.useRef({});
    const [ul, setUl] = React.useState({ left: 0, width: 0 });
    React.useEffect(() => {
      const el = tabRefs.current[tab];
      if (el) setUl({ left: el.offsetLeft, width: el.offsetWidth });
    }, [tab]);

    const list = store.credits.filter((c) => c.dir === tab);
    const pendingList = list.filter((c) => c.status !== 'settled');
    const pendingTotal = pendingList.reduce((s, c) => s + c.amount, 0);
    const color = tab === 'coming' ? 'var(--mint)' : 'var(--red)';

    return React.createElement('div', { className: 'page', 'data-screen-label': 'Credits' }, [
      React.createElement('h1', { key: 't', className: 'page-title', style: { marginBottom: 16 } }, 'Credits'),

      // Tabs
      React.createElement('div', { key: 'tabs', className: 'tabs' }, [
        React.createElement('button', {
          key: 'c', ref: (e) => (tabRefs.current.coming = e),
          className: 'tab' + (tab === 'coming' ? ' active' : ''), onClick: () => setTab('coming'),
        }, 'Credits Coming'),
        React.createElement('button', {
          key: 'g', ref: (e) => (tabRefs.current.going = e),
          className: 'tab' + (tab === 'going' ? ' active' : ''), onClick: () => setTab('going'),
        }, 'Credits Going'),
        React.createElement('div', { key: 'ul', className: 'tab-underline', ref: ulRef, style: { left: ul.left, width: ul.width } }),
      ]),

      // Summary
      React.createElement('div', { key: 'sum', className: 'card', style: { marginBottom: 20 } }, [
        React.createElement('div', { key: 'l', className: 'eyebrow' }, 'Total Pending · ' + (tab === 'coming' ? 'To Receive' : 'To Pay')),
        React.createElement('div', { key: 'v', className: 'display', style: { fontSize: 32, fontWeight: 400, color, marginTop: 8 } },
          'Rs. ' + window.fmt(pendingTotal)),
      ]),

      // Cards
      list.length === 0
        ? React.createElement('div', { key: 'e', className: 'card' },
            React.createElement(EmptyState, { icon: 'credits', title: 'No credits here', sub: 'Credits you record will appear in this tab.' }))
        : React.createElement('div', { key: 'g', className: 'cred-grid' },
            list.map((c) => React.createElement(CreditCard, { key: c.id, credit: c, onSettle: store.settleCredit }))),
    ]);
  }

  window.Credits = Credits;
})();