// transactions.jsx — Income & Expenses list screens
(function () {
  const { Icon, TxnRow, EmptyState } = window;

  const QUICK_FILTERS = ['All', 'This Month', 'This Week', 'Today'];

  function TxnList({ type, store, openAdd }) {
    const isIncome = type === 'income';
    const cats = isIncome ? store.incomeCats : store.expenseCats;
    const [showFilter, setShowFilter] = React.useState(false);
    const [filter, setFilter] = React.useState('All');
    const [query, setQuery] = React.useState('');
    const TODAY = window.SEED.TODAY;

    const all = store.txns.filter((t) => t.type === type);

    const filtered = React.useMemo(() => {
      let list = all;
      const t = TODAY;
      if (filter === 'Today') list = list.filter((x) => x.date.slice(0, 10) === t.toISOString().slice(0, 10));
      else if (filter === 'This Week') { const ws = new Date(t); ws.setDate(t.getDate() - ((t.getDay() + 6) % 7)); list = list.filter((x) => new Date(x.date) >= ws); }
      else if (filter === 'This Month') { const ms = new Date(t.getFullYear(), t.getMonth(), 1); list = list.filter((x) => new Date(x.date) >= ms); }
      else if (filter.startsWith('cat:')) list = list.filter((x) => x.cat === filter.slice(4));
      if (query.trim()) { const q = query.toLowerCase(); list = list.filter((x) => x.reason.toLowerCase().includes(q) || window.catById(x.cat).label.toLowerCase().includes(q)); }
      return list;
    }, [all, filter, query]);

    const total = filtered.reduce((s, x) => s + x.amount, 0);

    // group by date
    const groups = React.useMemo(() => {
      const m = new Map();
      filtered.forEach((x) => { const k = window.relDay(x.date); if (!m.has(k)) m.set(k, []); m.get(k).push(x); });
      return [...m.entries()];
    }, [filtered]);

    return React.createElement('div', { className: 'page', 'data-screen-label': isIncome ? 'Income' : 'Expenses' }, [
      // Header
      React.createElement('div', { key: 'h', className: 'list-head' }, [
        React.createElement('div', { key: 'l' }, [
          React.createElement('h1', { key: 't', className: 'page-title' }, isIncome ? 'Income' : 'Expenses'),
          React.createElement('div', { key: 's', className: 'page-sub' },
            'Rs. ' + window.fmt(total) + ' total · ' + filtered.length + ' entries'),
        ]),
        React.createElement('div', { key: 'a', className: 'list-head-actions' }, [
          React.createElement('button', {
            key: 'f', className: 'btn-icon' + (showFilter ? ' active' : ''),
            onClick: () => setShowFilter((s) => !s), 'aria-label': 'Filter',
          }, React.createElement(Icon.filter, { size: 18 })),
          React.createElement('button', {
            key: 'add', className: 'btn btn-sm ' + (isIncome ? 'btn-mint' : 'btn-red'),
            onClick: () => openAdd(type),
          }, [React.createElement(Icon.plus, { key: 'i', size: 16 }), 'Add']),
        ]),
      ]),

      // Filter chips
      showFilter && React.createElement('div', { key: 'filters', className: 'filter-row' }, [
        ...QUICK_FILTERS.map((f) =>
          React.createElement('button', {
            key: f, className: 'chip' + (filter === f ? ' active' : ''),
            onClick: () => setFilter(f),
          }, f)),
        ...cats.map((c) =>
          React.createElement('button', {
            key: c.id, className: 'chip' + (filter === 'cat:' + c.id ? ' active' : ''),
            onClick: () => setFilter('cat:' + c.id),
          }, c.label)),
      ]),

      // Search
      React.createElement('div', { key: 'search', className: 'search-wrap' }, [
        React.createElement(Icon.search, { key: 'i', size: 18, stroke: 'var(--text-3)' }),
        React.createElement('input', {
          key: 'in', className: 'input', value: query,
          placeholder: isIncome ? 'Search income…' : 'Search expenses…',
          onChange: (e) => setQuery(e.target.value),
        }),
      ]),

      // List
      filtered.length === 0
        ? React.createElement('div', { key: 'empty', className: 'card' },
            React.createElement(EmptyState, {
              icon: isIncome ? 'coins' : 'cart',
              title: isIncome ? 'No income found' : 'No expenses found',
              sub: query || filter !== 'All' ? 'Try a different filter or search term.' : 'Add your first ' + type + ' to get started.',
              cta: React.createElement('button', {
                className: 'btn btn-sm ' + (isIncome ? 'btn-mint' : 'btn-red'), onClick: () => openAdd(type),
              }, [React.createElement(Icon.plus, { key: 'i', size: 16 }), isIncome ? 'Add Income' : 'Add Expense']),
            }))
        : React.createElement('div', { key: 'list', className: 'card', style: { padding: '8px 12px 16px' } },
            groups.map(([label, items]) =>
              React.createElement('div', { key: label }, [
                React.createElement('div', { key: 'h', className: 'eyebrow', style: { padding: '16px 8px 6px' } }, label),
                ...items.map((tx, i) => [
                  React.createElement(TxnRow, { key: tx.id, txn: tx }),
                  i < items.length - 1 && React.createElement('div', { key: 'd' + i, className: 'divider-inset' }),
                ]),
              ]))),
    ]);
  }

  window.TxnList = TxnList;
})();