// dashboard.jsx — Home screen
(function () {
  const { Icon, CountUp, TxnRow } = window;

  function Dashboard({ store, openAdd, setRoute }) {
    const { txns, credits } = store;
    const TODAY = window.SEED.TODAY;

    const stats = React.useMemo(() => {
      const t = TODAY;
      const todayKey = t.toISOString().slice(0, 10);
      const weekStart = new Date(t); weekStart.setDate(t.getDate() - ((t.getDay() + 6) % 7));
      const monthStart = new Date(t.getFullYear(), t.getMonth(), 1);
      let balance = 0, monthIn = 0, monthOut = 0, today = 0, week = 0, month = 0;
      txns.forEach((x) => {
        const dt = new Date(x.date);
        const v = x.type === 'income' ? x.amount : -x.amount;
        balance += v;
        if (x.date.slice(0, 10) === todayKey) today += v;
        if (dt >= weekStart) week += v;
        if (dt >= monthStart) { month += v; if (x.type === 'income') monthIn += x.amount; else monthOut += x.amount; }
      });
      return { balance, monthIn, monthOut, today, week, month };
    }, [txns]);

    const pending = credits.filter((c) => c.status !== 'settled');
    const overdue = pending.filter((c) => c.status === 'overdue');
    const pendingTotal = pending.reduce((s, c) => s + c.amount, 0);
    const recent = txns.slice(0, 5);

    return React.createElement('div', { className: 'page', 'data-screen-label': 'Dashboard' }, [
      // ---- Balance hero ----
      React.createElement('div', { key: 'hero', className: 'hero-card' }, [
        React.createElement('div', { key: 'sync', className: 'hero-sync' }, [
          React.createElement('span', { key: 'd', className: 'sync-dot' }),
          'Synced 2m ago',
        ]),
        React.createElement('div', { key: 'lbl', className: 'eyebrow' }, 'Current Balance'),
        React.createElement('div', { key: 'bal', className: 'hero-balance' }, [
          React.createElement('span', { key: 'c', className: 'hero-cur' }, 'Rs.'),
          React.createElement(CountUp, {
            key: 'n', value: stats.balance,
            decimals: Math.abs(stats.balance) < 10000,
            className: 'display hero-num',
            style: { color: stats.balance < 0 ? 'var(--red)' : 'var(--text)' },
          }),
        ]),
        React.createElement('div', { key: 'sub', className: 'hero-stats' }, [
          React.createElement('div', { key: 'in', className: 'hero-stat' }, [
            React.createElement('div', { key: 'v', className: 'mono', style: { color: 'var(--mint)', fontSize: 15 } },
              '↑ Rs. ' + window.fmt(stats.monthIn)),
            React.createElement('div', { key: 'l', className: 'hero-stat-lbl' }, 'This Month In'),
          ]),
          React.createElement('div', { key: 'sep', className: 'hero-sep' }),
          React.createElement('div', { key: 'out', className: 'hero-stat' }, [
            React.createElement('div', { key: 'v', className: 'mono', style: { color: 'var(--red)', fontSize: 15 } },
              '↓ Rs. ' + window.fmt(stats.monthOut)),
            React.createElement('div', { key: 'l', className: 'hero-stat-lbl' }, 'This Month Out'),
          ]),
        ]),
      ]),

      // ---- Quick actions ----
      React.createElement('div', { key: 'qa', className: 'quick-row' }, [
        React.createElement('button', { key: 'in', className: 'quick-btn income', onClick: () => openAdd('income') }, [
          React.createElement(Icon.plusCircle, { key: 'i', size: 18, stroke: 'var(--mint)' }),
          'Add Income',
        ]),
        React.createElement('button', { key: 'ex', className: 'quick-btn expense', onClick: () => openAdd('expense') }, [
          React.createElement(Icon.minusCircle, { key: 'i', size: 18, stroke: 'var(--red)' }),
          'Add Expense',
        ]),
      ]),

      // ---- Stats row ----
      React.createElement('div', { key: 'stats', className: 'stat-grid' }, [
        statCard('Today', stats.today, 'net'),
        statCard('This Week', stats.week, 'net'),
        statCard('This Month', stats.month, 'net'),
        statCard('Pending Credits', pendingTotal, 'amber'),
      ]),

      // ---- Credits alert strip ----
      pending.length > 0 && React.createElement('button', {
        key: 'alert', className: 'credit-strip', onClick: () => setRoute('credits'),
      }, [
        React.createElement('div', { key: 'l', className: 'cs-left' }, [
          React.createElement('span', { key: 'd', className: 'cs-dot amber' }),
          React.createElement('span', { key: 't' }, [
            'You have ',
            React.createElement('strong', { key: 's' }, pending.length + ' pending credits'),
            overdue.length > 0 && React.createElement('span', { key: 'o', className: 'cs-overdue' }, [
              React.createElement('span', { key: 'd', className: 'cs-dot red' }),
              React.createElement('strong', { key: 't', style: { color: 'var(--red)' } }, overdue.length + ' overdue'),
            ]),
          ]),
        ]),
        React.createElement('span', { key: 'r', className: 'cs-link' }, ['View All ', React.createElement(Icon.arrowRight, { key: 'a', size: 14 })]),
      ]),

      // ---- Recent ----
      React.createElement('div', { key: 'recent', className: 'card', style: { padding: '16px 12px' } }, [
        React.createElement('div', { key: 'h', className: 'section-head' }, [
          React.createElement('span', { key: 't', className: 'eyebrow' }, 'Recent'),
          React.createElement('button', { key: 'v', className: 'view-all', onClick: () => setRoute('income') }, 'View All →'),
        ]),
        React.createElement('div', { key: 'list' }, recent.map((tx, i) => [
          React.createElement(TxnRow, { key: tx.id, txn: tx }),
          i < recent.length - 1 && React.createElement('div', { key: 'd' + i, className: 'divider-inset' }),
        ])),
      ]),
    ]);
  }

  function statCard(label, value, mode) {
    const color = mode === 'amber' ? 'var(--amber)'
      : value > 0 ? 'var(--mint)' : value < 0 ? 'var(--red)' : 'var(--text-3)';
    const arrow = mode === 'amber' ? null : value > 0 ? '↑' : value < 0 ? '↓' : '';
    return React.createElement('div', { key: label, className: 'card hoverable stat-card' }, [
      React.createElement('div', { key: 'l', className: 'eyebrow', style: { fontSize: 11 } }, label),
      React.createElement('div', { key: 'v', className: 'display stat-val', style: { color } },
        [arrow && React.createElement('span', { key: 'a', style: { fontSize: 16, marginRight: 4 } }, arrow),
         'Rs. ' + window.fmt(Math.abs(value))]),
    ]);
  }

  window.Dashboard = Dashboard;
})();