// pages/pro-dashboard.jsx — 貓人力工作台: KPIs, pending request (accept/reject), today schedule.
const { useState: uSP } = React;

function KPI({ value, label, sub }) {
  return A('div', { style: { flex: 1, background: 'var(--surface)', border: '1px solid var(--line2)', borderRadius: 16, padding: '13px 12px', textAlign: 'center' } },
    A('div', { className: 'num', style: { fontSize: 24, fontWeight: 900, color: 'var(--ink)', lineHeight: 1, letterSpacing: -0.5 } }, value),
    A('div', { style: { fontSize: 11, color: 'var(--ink3)', marginTop: 5, fontWeight: 600 } }, label));
}

function ProDash({ onNav = () => {}, go = () => {} }) {
  const pendingN = (window.OM_ORDERS || []).filter(o => o.status === 'pending').length || 2;
  // section header (sage accent) consistent with detail screens
  const SecHead = (icon, text, right) => A('div', { style: { display: 'flex', alignItems: 'center', gap: 9, margin: '0 2px 12px' } },
    A('div', { style: { width: 28, height: 28, borderRadius: 9, background: 'var(--sageSoft)', color: '#6E8C6B', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: icon, size: 16, sw: 2 })),
    A('div', { style: { fontSize: 15, fontWeight: 800, flex: 1, letterSpacing: -0.2 } }, text),
    right || null);
  return A('div', { style: { flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 } },
    A('div', { style: { padding: '4px 20px 8px', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
      A('h1', { style: { fontSize: 22, fontWeight: 800, letterSpacing: -0.5, margin: '4px 0' } }, '工作台'),
      A(Avatar, { size: 42, kind: 'person', ring: true, style: { borderRadius: 14 } })),
    A(Scroll, { style: { padding: '6px 20px 16px' } },
      A('div', { style: { display: 'flex', gap: 10, marginBottom: 20 } },
        A(KPI, { value: '8', label: '本週接案' }), A(KPI, { value: '98%', label: '完成率' }), A(KPI, { value: '4.9', label: '飼主評分' })),
      SecHead('list', '待接預約單'),
      // summary entry → full list (pro-order-list.jsx)
      A(Card, { onClick: () => go('orderList'), pad: 16, style: { marginBottom: 20, display: 'flex', alignItems: 'center', gap: 14 } },
        A('div', { style: { width: 46, height: 46, borderRadius: 14, background: 'var(--sageSoft)', color: '#6E8C6B', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, A(Icon, { name: 'list', size: 22, sw: 2 })),
        A('div', { style: { flex: 1 } },
          A('div', { style: { display: 'flex', alignItems: 'baseline', gap: 6 } },
            A('span', { className: 'num', style: { fontSize: 24, fontWeight: 900, color: 'var(--ink)', letterSpacing: -0.5 } }, pendingN),
            A('span', { style: { fontSize: 14, fontWeight: 700 } }, '筆待回覆')),
          A('div', { style: { fontSize: 11.5, color: 'var(--ink3)', marginTop: 2 } }, '點擊查看明細並接受 / 拒絕')),
        A(Icon, { name: 'chevR', size: 18, color: 'var(--ink3)' })),
      SecHead('calendar', '今日班表'),
      A(Card, { pad: 0, style: { overflow: 'hidden' } },
        [['09:00', '王小美', '到府餵食', 'serving'], ['14:00', '李先生 · 黑嚕', '清貓砂 + 陪玩', 'next'], ['18:30', '張小姐 · 布丁', '到府餵食', 'next']].map(([t, who, what, st], i) =>
          A('div', { key: i, className: 'ccaTap', onClick: () => go('exec'), style: { display: 'flex', alignItems: 'center', gap: 12, padding: '13px 14px', borderTop: i ? '1px solid var(--line2)' : 'none', background: st === 'serving' ? 'var(--sageSoft)' : 'transparent' } },
            A('span', { className: 'num', style: { fontSize: 13, fontWeight: 800, color: st === 'serving' ? '#6E8C6B' : 'var(--ink3)', width: 44, flexShrink: 0 } }, t),
            A('div', { style: { flex: 1, minWidth: 0 } }, A('div', { style: { fontSize: 13.5, fontWeight: 700 } }, who), A('div', { style: { fontSize: 11.5, color: 'var(--ink3)', marginTop: 1 } }, what)),
            st === 'serving' && A(Tag, { color: 'ok' }, '進行中'),
            A(Icon, { name: 'chevR', size: 17, color: 'var(--ink3)' }))))),
    A(BottomNavPro, { active: 'dash', onNav }));
}

Object.assign(window, { KPI, ProDash });