/* =============================================================
   KASDAP ONE — PERSONAL USER DASHBOARD
   (2-in-1: shows D2C + B2B sections when the account does both)
============================================================= */
const { useMemo: useMemoUD } = React;

function UserDashboard() {
  const { orders, user, userModes, go, setMode, products, mode } = useStore();
  const modes = userModes(user);
  const both = modes.length > 1;

  const own = useMemoUD(() => orders.filter(o => o.uid ? o.uid === user.id : (o.customer && o.customer.name === user.name)), [orders, user]);
  const stat = (arr) => ({
    count: arr.length,
    spent: arr.reduce((s, o) => s + o.total, 0),
    active: arr.filter(o => !['delivered', 'dispatched', 'cancelled'].includes(o.status)).length,
  });
  const d2c = own.filter(o => o.mode === 'd2c');
  const b2b = own.filter(o => o.mode === 'b2b');
  const all = stat(own);

  const recommended = useMemoUD(() => products.slice(0, 6), [products]);
  const greeting = (() => { const h = new Date().getHours(); return h < 12 ? 'Good morning' : h < 17 ? 'Good afternoon' : 'Good evening'; })();

  const StatRow = (label, s, accent) => React.createElement('div', { className: 'card card-pad', style: { borderTop: '3px solid ' + accent } },
    React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 } },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 9, fontWeight: 700, fontSize: '.92rem' } },
        React.createElement('span', { style: { width: 26, height: 26, borderRadius: 7, background: accent + '22', color: accent, display: 'flex', alignItems: 'center', justifyContent: 'center' } },
          React.createElement(Icon, { name: label === 'Retail (D2C)' ? 'user' : 'building', size: 15 })), label),
      React.createElement('button', { className: 'chip', onClick: () => { setMode(label === 'Retail (D2C)' ? 'd2c' : 'b2b'); go('catalog'); } }, 'Order', React.createElement(Icon, { name: 'arrow', size: 13 }))),
    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 } },
      [['Orders', s.count], ['Spent', fmt(s.spent)], ['Active', s.active]].map(([k, v], i) =>
        React.createElement('div', { key: i },
          React.createElement('div', { className: 'mono', style: { fontSize: '1.25rem', fontWeight: 700, color: i === 1 ? accent : 'var(--text)' } }, v),
          React.createElement('div', { className: 'faint', style: { fontSize: '.68rem', marginTop: 2 } }, k)))));

  return React.createElement('div', { className: 'page-wrap' },
    React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, marginBottom: 22 } },
      React.createElement('div', null,
        React.createElement('h1', { style: { fontSize: '1.9rem' } }, greeting + ', ' + user.name.split(' ')[0] + ' 👋'),
        React.createElement('p', { className: 'muted', style: { marginTop: 5, display: 'flex', alignItems: 'center', gap: 8 } },
          React.createElement('span', { className: 'badge' }, both ? 'B2B + D2C account' : (modes[0] === 'b2b' ? 'Trade account' : 'Retail account')),
          user.org ? React.createElement('span', null, user.org) : null)),
      React.createElement('button', { className: 'btn btn-accent', onClick: () => go('catalog') }, React.createElement(Icon, { name: 'pill', size: 16 }), 'Browse catalogue')),

    /* top KPIs */
    React.createElement('div', { className: 'kpis' },
      [{ c: 'c1', ic: 'receipt', v: all.count, l: 'Total orders' },
       { c: 'c2', ic: 'bolt', v: fmt(all.spent), l: 'Lifetime value' },
       { c: 'c3', ic: 'truck', v: all.active, l: 'In progress' },
       { c: 'c4', ic: 'star', v: '4.8', l: 'Member rating' }].map((k, i) =>
        React.createElement('div', { className: 'kpi ' + k.c, key: i },
          React.createElement('div', { className: 'ki' }, React.createElement(Icon, { name: k.ic, size: 18 })),
          React.createElement('div', { className: 'kv' }, k.v),
          React.createElement('div', { className: 'kl' }, k.l)))),

    /* dual sections when both */
    both && React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 18 } },
      StatRow('Retail (D2C)', stat(d2c), '#00b86b'),
      StatRow('Trade (B2B)', stat(b2b), '#5e5bff')),

    React.createElement('div', { className: 'dash-grid' },
      /* recent orders */
      React.createElement('div', { className: 'card card-pad' },
        React.createElement('div', { className: 'card-h' },
          React.createElement('div', { className: 'card-title' }, 'Recent activity'),
          React.createElement('button', { className: 'chip', onClick: () => go('orders') }, 'All orders', React.createElement(Icon, { name: 'arrow', size: 13 }))),
        own.length === 0
          ? React.createElement('div', { style: { textAlign: 'center', padding: '40px 10px', color: 'var(--text-3)' } },
              React.createElement(Icon, { name: 'receipt', size: 30, style: { margin: '0 auto 12px' } }),
              React.createElement('div', { style: { fontWeight: 600, color: 'var(--text-2)' } }, 'No orders yet'),
              React.createElement('button', { className: 'btn btn-accent btn-sm', style: { marginTop: 14 }, onClick: () => go('catalog') }, 'Place your first order'))
          : React.createElement('div', { className: 'ord-list' },
              own.slice(0, 5).map(o => React.createElement('div', { key: o.id, className: 'ord-card', style: { gridTemplateColumns: 'auto 1fr auto', padding: '14px 16px' }, onClick: () => go('order', { id: o.id }) },
                React.createElement('div', { className: 'ord-kind ' + o.mode }, React.createElement(Icon, { name: o.kind === 'rfq' ? 'receipt' : (o.mode === 'b2b' ? 'building' : 'user'), size: 18 })),
                React.createElement('div', null,
                  React.createElement('div', { className: 'ord-id' }, o.id),
                  React.createElement('div', { className: 'ord-meta' }, o.lines.length + ' items · ' + (o.mode === 'b2b' ? 'Trade' : 'Retail'))),
                React.createElement('div', null,
                  React.createElement('div', { className: 'ord-amt' }, fmt(o.total)),
                  React.createElement('div', { style: { textAlign: 'right', marginTop: 4 } }, React.createElement('span', { className: 'pill ' + (o.status === 'delivered' ? 'ok' : o.status === 'quoted' ? 'warn' : 'info') }, o.status))))))),

      /* recommendations */
      React.createElement('div', { className: 'card card-pad' },
        React.createElement('div', { className: 'card-title', style: { marginBottom: 14 } }, 'Popular in catalogue'),
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
          recommended.map(p => React.createElement('div', { key: p.id, style: { display: 'flex', alignItems: 'center', gap: 11, cursor: 'pointer' }, onClick: () => go('product', { id: p.id }) },
            React.createElement(ProductImage, { p, style: { width: 40, height: 40, borderRadius: 9, flexShrink: 0 } }),
            React.createElement('div', { style: { flex: 1, minWidth: 0 } },
              React.createElement('div', { style: { fontSize: '.8rem', fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, p.name),
              React.createElement('div', { className: 'faint', style: { fontSize: '.66rem', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, p.salt)),
            React.createElement('span', { className: 'mono', style: { fontSize: '.78rem', fontWeight: 700, color: 'var(--accent)' } }, fmt(p.mrp))))))
    )
  );
}
Object.assign(window, { UserDashboard });